move dropdown creation to init func
This commit is contained in:
reschan
parent
0b047c6525
commit
76ae9098ac
1 changed files with 54 additions and 57 deletions
111
js/sq2items.js
111
js/sq2items.js
|
|
@ -1,58 +1,3 @@
|
||||||
document.addEventListener("DOMContentLoaded", function() {
|
|
||||||
let filterInputs = new Map([["item-category", ["ALL", "armor", "helmet", "chestplate", "leggings", "boots", "accessory", "ring", "bracelet", "necklace", "weapon", "wand", "spear", "bow", "dagger", "relik"]],
|
|
||||||
["item-rarity", ["ANY", "Normal", "Unique", "Set", "Rare", "Legendary", "Fabled", "Mythic", "Sane"]],
|
|
||||||
["filter1", sq2ItemFilters],
|
|
||||||
["filter2", sq2ItemFilters],
|
|
||||||
["filter3", sq2ItemFilters],
|
|
||||||
["filter4", sq2ItemFilters]]);
|
|
||||||
for (const [field, data] of filterInputs) {
|
|
||||||
let field_choice = document.getElementById(field+"-choice");
|
|
||||||
// show dropdown on click
|
|
||||||
field_choice.onclick = function() {field_choice.dispatchEvent(new Event('input', {bubbles:true}));};
|
|
||||||
filterInputs.set(field, new autoComplete({
|
|
||||||
data: {
|
|
||||||
src: data,
|
|
||||||
},
|
|
||||||
threshold: 0,
|
|
||||||
selector: "#"+ field +"-choice",
|
|
||||||
wrapper: false,
|
|
||||||
resultsList: {
|
|
||||||
maxResults: 100,
|
|
||||||
tabSelect: true,
|
|
||||||
noResults: true,
|
|
||||||
class: "search-box dark-7 rounded-bottom px-2 fw-bold dark-shadow-sm",
|
|
||||||
element: (list, data) => {
|
|
||||||
let position = document.getElementById(field+'-choice').getBoundingClientRect();
|
|
||||||
list.style.top = position.bottom + window.scrollY +"px";
|
|
||||||
list.style.left = position.x+"px";
|
|
||||||
list.style.width = position.width+"px";
|
|
||||||
list.style.maxHeight = position.height * 4 +"px";
|
|
||||||
|
|
||||||
if (!data.results.length) {
|
|
||||||
message = document.createElement('li');
|
|
||||||
message.classList.add('scaled-font');
|
|
||||||
message.textContent = "No results found!";
|
|
||||||
list.prepend(message);
|
|
||||||
};
|
|
||||||
},
|
|
||||||
},
|
|
||||||
resultItem: {
|
|
||||||
class: "scaled-font search-item",
|
|
||||||
selected: "dark-5",
|
|
||||||
},
|
|
||||||
events: {
|
|
||||||
input: {
|
|
||||||
selection: (event) => {
|
|
||||||
if (event.detail.selection.value) {
|
|
||||||
event.target.value = event.detail.selection.value;
|
|
||||||
};
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
let itemCategories = [ "armor", "accessory", "weapon" ];
|
let itemCategories = [ "armor", "accessory", "weapon" ];
|
||||||
|
|
||||||
const sq2_translate_mappings = {
|
const sq2_translate_mappings = {
|
||||||
|
|
@ -257,8 +202,60 @@ function resetItemSearch() {
|
||||||
|
|
||||||
function init_items() {
|
function init_items() {
|
||||||
items_expanded = items.filter( (i) => !("remapID" in i) ).map( (i) => expandItem(i) );
|
items_expanded = items.filter( (i) => !("remapID" in i) ).map( (i) => expandItem(i) );
|
||||||
console.log(items_expanded);
|
|
||||||
console.log("a");
|
//init dropdowns
|
||||||
|
let filterInputs = new Map([["item-category", ["ALL", "armor", "helmet", "chestplate", "leggings", "boots", "accessory", "ring", "bracelet", "necklace", "weapon", "wand", "spear", "bow", "dagger", "relik"]],
|
||||||
|
["item-rarity", ["ANY", "Normal", "Unique", "Set", "Rare", "Legendary", "Fabled", "Mythic", "Sane"]],
|
||||||
|
["filter1", sq2ItemFilters],
|
||||||
|
["filter2", sq2ItemFilters],
|
||||||
|
["filter3", sq2ItemFilters],
|
||||||
|
["filter4", sq2ItemFilters]]);
|
||||||
|
for (const [field, data] of filterInputs) {
|
||||||
|
let field_choice = document.getElementById(field+"-choice");
|
||||||
|
// show dropdown on click
|
||||||
|
field_choice.onclick = function() {field_choice.dispatchEvent(new Event('input', {bubbles:true}));};
|
||||||
|
filterInputs.set(field, new autoComplete({
|
||||||
|
data: {
|
||||||
|
src: data,
|
||||||
|
},
|
||||||
|
threshold: 0,
|
||||||
|
selector: "#"+ field +"-choice",
|
||||||
|
wrapper: false,
|
||||||
|
resultsList: {
|
||||||
|
maxResults: 100,
|
||||||
|
tabSelect: true,
|
||||||
|
noResults: true,
|
||||||
|
class: "search-box dark-7 rounded-bottom px-2 fw-bold dark-shadow-sm",
|
||||||
|
element: (list, data) => {
|
||||||
|
let position = document.getElementById(field+'-choice').getBoundingClientRect();
|
||||||
|
list.style.top = position.bottom + window.scrollY +"px";
|
||||||
|
list.style.left = position.x+"px";
|
||||||
|
list.style.width = position.width+"px";
|
||||||
|
list.style.maxHeight = position.height * 4 +"px";
|
||||||
|
|
||||||
|
if (!data.results.length) {
|
||||||
|
message = document.createElement('li');
|
||||||
|
message.classList.add('scaled-font');
|
||||||
|
message.textContent = "No results found!";
|
||||||
|
list.prepend(message);
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
resultItem: {
|
||||||
|
class: "scaled-font search-item",
|
||||||
|
selected: "dark-5",
|
||||||
|
},
|
||||||
|
events: {
|
||||||
|
input: {
|
||||||
|
selection: (event) => {
|
||||||
|
if (event.detail.selection.value) {
|
||||||
|
event.target.value = event.detail.selection.value;
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
(async function() {
|
(async function() {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue