0.4.1d 9-Feb-2021

Basic POC for on-demand query from Compendia
for spell-filters only
- Other filters are broken right now

spell-browser.html
- Split out spell-browser-list.html so we can render this separately with refreshed data

compendium-browser.js
- replaceSPells(), renderSpellData(): ADDED
- Fixed: loadAndFilterItems(), loadItems(): await checkListsLoaded() or we get a null error
- activateListeners(): Use replaceSpells() instead of filterElements or full render

compendium-browser.js

@@ -43,6 +43,7 @@ class CompendiumBrowser extends Application {
         });  //Plug 
         await loadTemplates([
             "modules/compendium-browser/template/spell-browser.html",
+            "modules/compendium-browser/template/spell-browser-list.html",
             "modules/compendium-browser/template/npc-browser.html",
             "modules/compendium-browser/template/feat-browser.html",
             "modules/compendium-browser/template/item-browser.html",
@@ -102,7 +103,7 @@ class CompendiumBrowser extends Application {
     async loadAndFilterItems(numToPreload=CMPBrowser.PRELOAD) {
         console.log('Load and Filter Items | Started loading items');
         console.time("loadAndFilterItems");
-        this.checkListsLoaded();
+        await this.checkListsLoaded();
 
         let unfoundSpells = '';
         let numSpellsLoaded = 0;
@@ -154,7 +155,7 @@ class CompendiumBrowser extends Application {
     async loadItems(numToPreload=CMPBrowser.PRELOAD) {
         console.log('Item Browser | Started loading items');
         console.time("loadItems");
-        this.checkListsLoaded();
+        await this.checkListsLoaded();
 
         this.itemsLoaded = false;
        
@@ -455,6 +456,23 @@ class CompendiumBrowser extends Application {
         // localizing title
         $(html).parents('.app').find('.window-title')[0].innerText = game.i18n.localize("CMPBrowser.compendiumBrowser");
 
+        const observer = new IntersectionObserver((entries, observer) => {
+            for (let e of entries) {
+                if (!e.isIntersecting) continue;
+                const img = e.target;
+                // Avatar image
+                //const img = li.querySelector("img");
+                if (img && img.dataset.src) {
+                    img.src = img.dataset.src;
+                    delete img.dataset.src;
+                }
+
+                // No longer observe the target
+                observer.unobserve(e.target);
+            }
+        });
+
+
         // show entity sheet
         html.find('.item-edit').click(ev => {
             let itemId = $(ev.currentTarget).parents("li").attr("data-entry-id");
@@ -628,6 +646,7 @@ class CompendiumBrowser extends Application {
             if (itemType === 'spell') {
                 list = html.find('.spell-browser li');
                 subjects = this.items.spells;
+                this.replaceSpells(html, observer);
             } else if (itemType === 'npc') {
                 list = html.find('.npc-browser li');
                 subjects = this.npcs;
@@ -638,7 +657,7 @@ class CompendiumBrowser extends Application {
                 list = html.find('.item-browser li');
                 subjects = this.items.items;
             }
-            this.filterElements(list, subjects, this[filterTarget].activeFilters);
+            //this.filterElements(list, subjects, this[filterTarget].activeFilters);
         });
 
         // select filters
@@ -668,9 +687,11 @@ class CompendiumBrowser extends Application {
 
             let list = null;
             let subjects = null;
+            let items = null;
             if (itemType === 'spell') {
                 list = html.find('.spell-browser li');
                 subjects = this.items.spells;
+                this.replaceSpells(html, observer);                
             } else if (itemType === 'npc') {
                 list = html.find('.npc-browser li');
                 subjects = this.npcs;
@@ -681,7 +702,8 @@ class CompendiumBrowser extends Application {
                 list = html.find('.item-browser li');
                 subjects = this.items.items;
             }
-            this.filterElements(list, subjects, this[filterTarget].activeFilters);
+            //this.render();
+            //this.filterElements(list, subjects, this[filterTarget].activeFilters);
         });
 
         // multiselect filters
@@ -720,6 +742,7 @@ class CompendiumBrowser extends Application {
             if (itemType === 'spell') {
                 list = html.find('.spell-browser li');
                 subjects = this.items.spells;
+                this.replaceSpells(html, observer);
             } else if (itemType === 'npc') {
                 list = html.find('.npc-browser li');
                 subjects = this.npcs;
@@ -730,7 +753,8 @@ class CompendiumBrowser extends Application {
                 list = html.find('.item-browser li');
                 subjects = this.items.items;
             }
-            this.filterElements(list, subjects, this[filterTarget].activeFilters);
+            //this.render();
+            //this.filterElements(list, subjects, this[filterTarget].activeFilters);
         });
 
 
@@ -773,29 +797,36 @@ class CompendiumBrowser extends Application {
                 list = html.find('.item-browser li');
                 subjects = this.items.items;
             }
-            this.filterElements(list, subjects, this[filterTarget].activeFilters);
+            this.render();
+            //this.filterElements(list, subjects, this[filterTarget].activeFilters);
         });
 
 
         // lazy load images
-        const observer = new IntersectionObserver((entries, observer) => {
-            for (let e of entries) {
-                if (!e.isIntersecting) continue;
-                const img = e.target;
-                // Avatar image
-                //const img = li.querySelector("img");
-                if (img && img.dataset.src) {
-                    img.src = img.dataset.src;
-                    delete img.dataset.src;
-                }
-
-                // No longer observe the target
-                observer.unobserve(e.target);
-            }
-        });
         html.find("img").each((i, img) => observer.observe(img));
     }
 
+    replaceSpells(html, observer) {
+        const items = html.find("ul#CBSpells");
+        if (items.length) {
+            this.renderSpellData().then(newSpellsHTML => {
+                const replacement = document.createElement("ul");
+                replacement.setAttribute("id","CBSpells");
+                replacement.innerHTML = newSpellsHTML;
+                items[0].parentNode.replaceChild(replacement, items[0]);
+                //Lazy load images
+                $(newSpellsHTML).find("img").each((i, img) => observer.observe(img));
+            });
+        }
+    }
+
+    async renderSpellData() {
+        const items = await this.loadAndFilterItems();
+        const spellData = items?.spells;
+        const html = await renderTemplate("modules/compendium-browser/template/spell-browser-list.html", {spells : spellData});
+        return html;
+    }
+
     //SORTING
     sortSpells(list, byName) {
         if (byName) {

template/spell-browser-list.html

@@ -0,0 +1,24 @@
+
+{{#each spells as |spell id|}}
+<li class="spell flexrow draggable" data-entry-compendium="{{spell.compendium}}" data-entry-id="{{spell._id}}">
+    <div class="item-image">
+        <img class="" data-src="{{spell.img}}" title="{{spell.name}}" width="32" height="32"/>
+    </div>  
+    <div class="item-name">
+        <span class="item-edit" ><a>{{spell.name}}</a></span>
+    </div>
+    <div class="spell-tags">
+        <span title="Spell level">{{#if spell.data.level}}{{spell.data.level}}{{else}}C{{/if}}</span>
+        <div class="spacer-large"></div>
+        <span {{#unless spell.data.components.ritual}}style="color:#bbb;" title="{{localize "No"}} {{localize "CMPBrowser.ritual"}}"{{else}} title="{{localize "CMPBrowser.ritual"}}"{{/unless}}>R</span>
+        <span {{#unless spell.data.components.concentration}}style="color:#bbb;" title="{{localize "No"}} {{localize "CMPBrowser.concentration"}}"{{else}} title="{{localize "CMPBrowser.concentration"}}"{{/unless}}>C</span>
+        <div class="spacer"></div>
+        <span {{#unless spell.data.components.vocal}}style="color:#bbb;" title="{{localize "No"}} {{localize "CMPBrowser.verbal"}}"{{else}} title="{{localize "CMPBrowser.verbal"}}"{{/unless}}>V</span>
+        <span {{#unless spell.data.components.somatic}}style="color:#bbb;" title="{{localize "No"}} {{localize "CMPBrowser.somatic"}}"{{else}} title="{{localize "CMPBrowser.somatic"}}"{{/unless}}>S</span>
+        <span {{#unless spell.data.components.material}}style="color:#bbb;" title="no{{localize "No"}} {{localize "CMPBrowser.material"}}"{{else}} title="{{localize "CMPBrowser.material"}}"{{/unless}}>M</span>
+    </div>
+    <div class="filter-tags">                
+        <input type="hidden" name="level" value="{{spell.data.level}}">
+    </div>
+</li>
+{{/each}}

template/spell-browser.html

@@ -15,30 +15,7 @@
         </div>
         {{> "modules/compendium-browser/template/filter-container.html" filters=spellFilters}}
     </div>
-    <ul>
+    <ul id="CBSpells">
-        {{#each spells as |spell id|}}
+        {{> "modules/compendium-browser/template/spell-browser-list.html" spells=spells}}
-        <li class="spell flexrow draggable" data-entry-compendium="{{spell.compendium}}" data-entry-id="{{spell._id}}">
-            <div class="item-image">
-                <img class="" data-src="{{spell.img}}" title="{{spell.name}}" width="32" height="32"/>
-            </div>  
-            <div class="item-name">
-                <span class="item-edit" ><a>{{spell.name}}</a></span>
-            </div>
-            <div class="spell-tags">
-                <span title="Spell level">{{#if spell.data.level}}{{spell.data.level}}{{else}}C{{/if}}</span>
-                <div class="spacer-large"></div>
-                <span {{#unless spell.data.components.ritual}}style="color:#bbb;" title="{{localize "No"}} {{localize "CMPBrowser.ritual"}}"{{else}} title="{{localize "CMPBrowser.ritual"}}"{{/unless}}>R</span>
-                <span {{#unless spell.data.components.concentration}}style="color:#bbb;" title="{{localize "No"}} {{localize "CMPBrowser.concentration"}}"{{else}} title="{{localize "CMPBrowser.concentration"}}"{{/unless}}>C</span>
-                <div class="spacer"></div>
-                <span {{#unless spell.data.components.vocal}}style="color:#bbb;" title="{{localize "No"}} {{localize "CMPBrowser.verbal"}}"{{else}} title="{{localize "CMPBrowser.verbal"}}"{{/unless}}>V</span>
-                <span {{#unless spell.data.components.somatic}}style="color:#bbb;" title="{{localize "No"}} {{localize "CMPBrowser.somatic"}}"{{else}} title="{{localize "CMPBrowser.somatic"}}"{{/unless}}>S</span>
-                <span {{#unless spell.data.components.material}}style="color:#bbb;" title="no{{localize "No"}} {{localize "CMPBrowser.material"}}"{{else}} title="{{localize "CMPBrowser.material"}}"{{/unless}}>M</span>
-            </div>
-            <div class="filter-tags">                
-                <input type="hidden" name="level" value="{{spell.data.level}}">
-            </div>
-        </li>
-        {{/each}}
     </ul>
-
 </div>