endernon/wynnbuilder-forked-for-changes
1
0
Fork 0
forked from morphNon/wynnbuilder-idk
Code Pull requests Activity

filter/category uses custom dropdown

Browse source
This commit is contained in:
reschan 2022-05-14 10:07:28 +07:00
parent 922aa6260a
commit ef180987a6
2 changed files with 57 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
items/index.html
View file

@ -47,7 +47,7 @@
</div> </div>
<div class = "col-lg-3 col-sm-12"> <div class = "col-lg-3 col-sm-12">
<div class = "col fw-bold">Category:</div> <div class = "col fw-bold">Category:</div>
<input class="col border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="category-items" id="category-choice" name="category-choice" placeholder="ALL"/> <input class="col border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="category-choice" name="category-choice" placeholder="ALL"/>
<datalist id="category-items"> <datalist id="category-items">
<option value="ALL"> <option value="ALL">
<option value="armor"> <option value="armor">
@ -70,7 +70,7 @@
</div> </div>
<div class = "col-lg-3 col-sm-12"> <div class = "col-lg-3 col-sm-12">
<div class = "col fw-bold">Rarity:</div> <div class = "col fw-bold">Rarity:</div>
<input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="rarity-items" id="rarity-choice" name="rarity-choice" placeholder="ANY"/> <input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="rarity-choice" name="rarity-choice" placeholder="ANY"/>
<datalist id = "rarity-items"> <datalist id = "rarity-items">
<option value="ANY"> <option value="ANY">
<option value="Normal"> <option value="Normal">
@ -93,22 +93,22 @@
<div class = "row"> <div class = "row">
<div class = "col-lg-3 col-sm-12"> <div class = "col-lg-3 col-sm-12">
<div class = "col fw-bold">Filter 1:</div> <div class = "col fw-bold">Filter 1:</div>
<input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="filter-items" id="filter1-choice" name="filter1-choice" placeholder="ANY"/> <input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="filter1-choice" name="filter1-choice" placeholder="ANY"/>
<p class="error col-auto"></p> <p class="error col-auto"></p>
</div> </div>
<div class = "col-lg-3 col-sm-12"> <div class = "col-lg-3 col-sm-12">
<div class = "col fw-bold">Filter 2:</div> <div class = "col fw-bold">Filter 2:</div>
<input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="filter-items" id="filter2-choice" name="filter2-choice" placeholder="ANY"/> <input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="filter2-choice" name="filter2-choice" placeholder="ANY"/>
<p class="error col-auto"></p> <p class="error col-auto"></p>
</div> </div>
<div class = "col-lg-3 col-sm-12"> <div class = "col-lg-3 col-sm-12">
<div class = "col fw-bold">Filter 3:</div> <div class = "col fw-bold">Filter 3:</div>
<input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="filter-items" id="filter3-choice" name="filter3-choice" placeholder="ANY"/> <input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="filter3-choice" name="filter3-choice" placeholder="ANY"/>
<p class="error col-auto"></p> <p class="error col-auto"></p>
</div> </div>
<div class = "col-lg-3 col-sm-12"> <div class = "col-lg-3 col-sm-12">
<div class = "col fw-bold">Filter 4:</div> <div class = "col fw-bold">Filter 4:</div>
<input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="filter-items" id="filter4-choice" name="filter4-choice" placeholder="ANY"/> <input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="filter4-choice" name="filter4-choice" placeholder="ANY"/>
<p class="error col-auto"></p> <p class="error col-auto"></p>
</div> </div>
<datalist id = "filter-items"></datalist> <datalist id = "filter-items"></datalist>
@ -133,6 +133,7 @@
</div> </div>
</div> </div>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/autoComplete.min.js"></script>
<script type="text/javascript" src="../js/utils.js"></script> <script type="text/javascript" src="../js/utils.js"></script>
<script type="text/javascript" src="../js/build_utils.js"></script> <script type="text/javascript" src="../js/build_utils.js"></script>
<script type="text/javascript" src="../js/icons.js"></script> <script type="text/javascript" src="../js/icons.js"></script>

50
js/sq2items.js
View file

@ -1,4 +1,54 @@
document.addEventListener("DOMContentLoaded", function() {
let filterInputs = new Map([["category", ["ALL", "armor", "helmet", "chestplate", "leggings", "boots", "accessory", "ring", "bracelet", "weapon", "wand", "spear", "bow", "dagger", "relik"]],
["rarity", ["ANY", "Normal", "Unique", "Set", "Rare", "Legendary", "Fabled", "Mythic", "Sane"]],
["filter1", sq2ItemFilters],
["filter2", sq2ItemFilters],
["filter3", sq2ItemFilters],
["filter4", sq2ItemFilters]]);
for (const [field, data] of filterInputs) {
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;
};
},
},
}
}));
};
});
const sq2_translate_mappings = { const sq2_translate_mappings = {
//"Name": "name", //"Name": "name",