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 renderv0.3.1-spetzel2020
parent
0353c307a4
commit
991e116d68
|
@ -43,6 +43,7 @@ class CompendiumBrowser extends Application {
|
||||||
}); //Plug
|
}); //Plug
|
||||||
await loadTemplates([
|
await loadTemplates([
|
||||||
"modules/compendium-browser/template/spell-browser.html",
|
"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/npc-browser.html",
|
||||||
"modules/compendium-browser/template/feat-browser.html",
|
"modules/compendium-browser/template/feat-browser.html",
|
||||||
"modules/compendium-browser/template/item-browser.html",
|
"modules/compendium-browser/template/item-browser.html",
|
||||||
|
@ -102,7 +103,7 @@ class CompendiumBrowser extends Application {
|
||||||
async loadAndFilterItems(numToPreload=CMPBrowser.PRELOAD) {
|
async loadAndFilterItems(numToPreload=CMPBrowser.PRELOAD) {
|
||||||
console.log('Load and Filter Items | Started loading items');
|
console.log('Load and Filter Items | Started loading items');
|
||||||
console.time("loadAndFilterItems");
|
console.time("loadAndFilterItems");
|
||||||
this.checkListsLoaded();
|
await this.checkListsLoaded();
|
||||||
|
|
||||||
let unfoundSpells = '';
|
let unfoundSpells = '';
|
||||||
let numSpellsLoaded = 0;
|
let numSpellsLoaded = 0;
|
||||||
|
@ -154,7 +155,7 @@ class CompendiumBrowser extends Application {
|
||||||
async loadItems(numToPreload=CMPBrowser.PRELOAD) {
|
async loadItems(numToPreload=CMPBrowser.PRELOAD) {
|
||||||
console.log('Item Browser | Started loading items');
|
console.log('Item Browser | Started loading items');
|
||||||
console.time("loadItems");
|
console.time("loadItems");
|
||||||
this.checkListsLoaded();
|
await this.checkListsLoaded();
|
||||||
|
|
||||||
this.itemsLoaded = false;
|
this.itemsLoaded = false;
|
||||||
|
|
||||||
|
@ -455,6 +456,23 @@ class CompendiumBrowser extends Application {
|
||||||
// localizing title
|
// localizing title
|
||||||
$(html).parents('.app').find('.window-title')[0].innerText = game.i18n.localize("CMPBrowser.compendiumBrowser");
|
$(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
|
// show entity sheet
|
||||||
html.find('.item-edit').click(ev => {
|
html.find('.item-edit').click(ev => {
|
||||||
let itemId = $(ev.currentTarget).parents("li").attr("data-entry-id");
|
let itemId = $(ev.currentTarget).parents("li").attr("data-entry-id");
|
||||||
|
@ -628,6 +646,7 @@ class CompendiumBrowser extends Application {
|
||||||
if (itemType === 'spell') {
|
if (itemType === 'spell') {
|
||||||
list = html.find('.spell-browser li');
|
list = html.find('.spell-browser li');
|
||||||
subjects = this.items.spells;
|
subjects = this.items.spells;
|
||||||
|
this.replaceSpells(html, observer);
|
||||||
} else if (itemType === 'npc') {
|
} else if (itemType === 'npc') {
|
||||||
list = html.find('.npc-browser li');
|
list = html.find('.npc-browser li');
|
||||||
subjects = this.npcs;
|
subjects = this.npcs;
|
||||||
|
@ -638,7 +657,7 @@ class CompendiumBrowser extends Application {
|
||||||
list = html.find('.item-browser li');
|
list = html.find('.item-browser li');
|
||||||
subjects = this.items.items;
|
subjects = this.items.items;
|
||||||
}
|
}
|
||||||
this.filterElements(list, subjects, this[filterTarget].activeFilters);
|
//this.filterElements(list, subjects, this[filterTarget].activeFilters);
|
||||||
});
|
});
|
||||||
|
|
||||||
// select filters
|
// select filters
|
||||||
|
@ -668,9 +687,11 @@ class CompendiumBrowser extends Application {
|
||||||
|
|
||||||
let list = null;
|
let list = null;
|
||||||
let subjects = null;
|
let subjects = null;
|
||||||
|
let items = null;
|
||||||
if (itemType === 'spell') {
|
if (itemType === 'spell') {
|
||||||
list = html.find('.spell-browser li');
|
list = html.find('.spell-browser li');
|
||||||
subjects = this.items.spells;
|
subjects = this.items.spells;
|
||||||
|
this.replaceSpells(html, observer);
|
||||||
} else if (itemType === 'npc') {
|
} else if (itemType === 'npc') {
|
||||||
list = html.find('.npc-browser li');
|
list = html.find('.npc-browser li');
|
||||||
subjects = this.npcs;
|
subjects = this.npcs;
|
||||||
|
@ -681,7 +702,8 @@ class CompendiumBrowser extends Application {
|
||||||
list = html.find('.item-browser li');
|
list = html.find('.item-browser li');
|
||||||
subjects = this.items.items;
|
subjects = this.items.items;
|
||||||
}
|
}
|
||||||
this.filterElements(list, subjects, this[filterTarget].activeFilters);
|
//this.render();
|
||||||
|
//this.filterElements(list, subjects, this[filterTarget].activeFilters);
|
||||||
});
|
});
|
||||||
|
|
||||||
// multiselect filters
|
// multiselect filters
|
||||||
|
@ -720,6 +742,7 @@ class CompendiumBrowser extends Application {
|
||||||
if (itemType === 'spell') {
|
if (itemType === 'spell') {
|
||||||
list = html.find('.spell-browser li');
|
list = html.find('.spell-browser li');
|
||||||
subjects = this.items.spells;
|
subjects = this.items.spells;
|
||||||
|
this.replaceSpells(html, observer);
|
||||||
} else if (itemType === 'npc') {
|
} else if (itemType === 'npc') {
|
||||||
list = html.find('.npc-browser li');
|
list = html.find('.npc-browser li');
|
||||||
subjects = this.npcs;
|
subjects = this.npcs;
|
||||||
|
@ -730,7 +753,8 @@ class CompendiumBrowser extends Application {
|
||||||
list = html.find('.item-browser li');
|
list = html.find('.item-browser li');
|
||||||
subjects = this.items.items;
|
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');
|
list = html.find('.item-browser li');
|
||||||
subjects = this.items.items;
|
subjects = this.items.items;
|
||||||
}
|
}
|
||||||
this.filterElements(list, subjects, this[filterTarget].activeFilters);
|
this.render();
|
||||||
|
//this.filterElements(list, subjects, this[filterTarget].activeFilters);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
// lazy load images
|
// 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));
|
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
|
//SORTING
|
||||||
sortSpells(list, byName) {
|
sortSpells(list, byName) {
|
||||||
if (byName) {
|
if (byName) {
|
||||||
|
|
|
@ -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}}
|
|
@ -15,30 +15,7 @@
|
||||||
</div>
|
</div>
|
||||||
{{> "modules/compendium-browser/template/filter-container.html" filters=spellFilters}}
|
{{> "modules/compendium-browser/template/filter-container.html" filters=spellFilters}}
|
||||||
</div>
|
</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>
|
</ul>
|
||||||
|
|
||||||
</div>
|
</div>
|
Loading…
Reference in New Issue