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

Merge pull request #214 from hppeng-wynn/atlas-revamp

Browse source 
Atlas revamp
This commit is contained in:
hppeng-wynn 2022-09-02 22:35:11 -07:00 committed by GitHub
commit 8449c4f0c6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 441 additions and 206 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

117
css/items.css
View file

@ -1,32 +1,101 @@
.searchbox {
grid-column: 1;
padding: 0%;
display: grid;
grid-template-columns: repeat(4, 1fr);
width: 100%;
gap: 5px;
/* type selectors */
#type-box {
cursor: pointer;
overflow: auto;
}
#type-box > div {
display: inline-block;
width: calc(100% / 12);
float: left;
}
.items {
grid-column: 1;
padding: 0%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
width: 100%;
gap: 5px;
grid-template-rows: masonry;
.type-selected {
background-color: #0a0;
}
.itemsearch {
padding: 0%;
display: grid;
grid-template-columns: 1fr;
width: 100%;
gap: 5px;
/* rarity selectors */
#rarity-box {
cursor: pointer;
width: 58.33%;
text-align: center;
}
#rarity-box > div {
width: calc(100% / 7);
aspect-ratio: 1/1;
position: relative;
display: inline-block;
}
#rarity-box > div > b {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#rarity-box > div.rarity-selected > b {
color: black;
}
.searchinput {
width: 100%;
max-width: 200px;
#rarity-normal { color: #FFFFFF; }
#rarity-normal.rarity-selected { background-color: #FFFFFF; }
#rarity-unique { color: #FFFF55; }
#rarity-unique.rarity-selected { background-color: #FFFF55; }
#rarity-set { color: #55FF55; }
#rarity-set.rarity-selected { background-color: #55FF55; }
#rarity-rare { color: #FF55FF; }
#rarity-rare.rarity-selected { background-color: #FF55FF; }
#rarity-legendary { color: #55FFFF; }
#rarity-legendary.rarity-selected { background-color: #55FFFF; }
#rarity-fabled { color: #FF5555; }
#rarity-fabled.rarity-selected { background-color: #FF5555; }
#rarity-mythic { color: #AA00AA; }
#rarity-mythic.rarity-selected { background-color: #AA00AA; }
/* filters */
.filter-row {
border: 1px solid #121212;
}
.filter-dragged-over {
border: 1px solid white;
}
.reorder-filter {
height: 2ch;
cursor: pointer;
}
input.filter-input {
width: 27ch!important;
max-width: 90%;
display: inline-block;
}
.asc-icon {
opacity: 0.25;
width: 1.75ch;
}
.desc-icon {
opacity: 0.25;
width: 1.75ch;
transform: rotate(180deg);
}
img.asc-sel {
opacity: 0.85;
}
input.min-max-input {
width: 6ch!important;
display: inline-block;
}
#filter-container > div > div > * {
margin: 0 2px;
}
/* item display */
@media (min-width: 576px) and (max-width: 991px) {
div.col-sm-6 {
width: 100%;
}
}

113
items/index.html
View file

@ -18,6 +18,7 @@
<link rel="stylesheet" href="../css/sq2bs.css">
<link rel="stylesheet" href="../css/sidebar.css">
<link rel="stylesheet" href="../css/wynnstyles.css">
<link rel="stylesheet" href="../css/items.css">
</head>
<body class = "text-light d-flex justify-content-center" id = "body">
<div id="main-sidebar" class="sidebar dark-7 dark-shadow">
@ -74,89 +75,63 @@
</a>
</div>
</div>
<div class = "container py-5 vh-100 mx-0 mx-lg-auto scaled-font mt-lg-2" style="margin-top: 6vh;">
<div class = "col">
<div class = "container py-5 vh-100 mx-0 mx-lg-auto scaled-font">
<div class = "row">
<div class = "row" style = "margin-top: 3ch;">
<div class = "col text-end">
<a href = "../items_adv/">Advanced Item Search</a>
</div>
</div>
<div class = "col-auto" style = "width: 12.5%;"></div>
<div class = "col-lg-4">
<div class = "row">
<div class = "row">
<div class = "col-lg-3 col-sm-12">
<div class = "col-lg col-sm-12">
<div class = "col fw-bold">Name:</div>
<input class = "col border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" type="text" id="item-name-choice" name="item-name-choice" placeholder="Item name (case insensitive)"/>
<p class="error col"></p>
</div>
<div class = "col-lg-3 col-sm-12">
<div class = "col fw-bold">Category:</div>
<input class="col border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="item-category-choice" name="item-category-choice" placeholder="ALL"/>
<datalist id="category-items">
<option value="ALL">
<option value="armor">
<option value="helmet">
<option value="chestplate">
<option value="leggings">
<option value="boots">
<option value="accessory">
<option value="ring">
<option value="bracelet">
<option value="necklace">
<option value="weapon">
<option value="wand">
<option value="spear">
<option value="bow">
<option value="dagger">
<option value="relik">
</datalist>
<p class="error"></p>
</div>
<div class = "col-lg-3 col-sm-12">
<div class = "col fw-bold">Rarity:</div>
<input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="item-rarity-choice" name="item-rarity-choice" placeholder="ANY"/>
<datalist id = "rarity-items">
<option value="ANY">
<option value="Normal">
<option value="Unique">
<option value="Set">
<option value="Rare">
<option value="Legendary">
<option value="Fabled">
<option value="Mythic">
<option value="Sane">
</datalist>
<p class="error col-auto"></p>
</div>
<div class = "col-lg-3 col-sm-12">
<div class = "col fw-bold">Level Range:</div>
<input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" type="text" id="item-level-choice" name="item-level-choice" placeholder = "1-106"/>
<input class = "col border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" style="width: 100%!important;" type="text" id="item-name-choice" name="item-name-choice" placeholder="Item name (case insensitive)"/>
<p class="error col-auto"></p>
</div>
</div>
<div class = "row">
<div class = "col-lg-3 col-sm-12">
<div class = "col fw-bold">Filter 1:</div>
<input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="filter1-choice" name="filter1-choice" placeholder="ANY"/>
<div class = "col-lg col-sm-12">
<div class = "col"><span class = "fw-bold">Type:</span> <span style = "cursor: pointer; float: right;"><span id = "all-types">All</span> &nbsp; <span id = "none-types">None</span></span></div>
<div id = "type-box">
<div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/new.png'); background-position: 0 0;" id = "type-bow"></div>
<div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/new.png'); background-position: 9.09091% 0;" id = "type-spear"></div>
<div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/new.png'); background-position: 18.1818% 0;" id = "type-wand"></div>
<div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/new.png'); background-position: 27.2727% 0;" id = "type-dagger"></div>
<div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/new.png'); background-position: 36.3636% 0;" id = "type-relik"></div>
<div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/new.png'); background-position: 45.4545% 0;" id = "type-helmet"></div>
<div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/new.png'); background-position: 54.5455% 0;" id = "type-chestplate"></div>
<div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/new.png'); background-position: 63.6364% 0;" id = "type-leggings"></div>
<div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/new.png'); background-position: 72.7273% 0;" id = "type-boots"></div>
<div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/new.png'); background-position: 81.8182% 0;" id = "type-ring"></div>
<div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/new.png'); background-position: 90.9091% 0;" id = "type-bracelet"></div>
<div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/new.png'); background-position: 100% 0;" id = "type-necklace"></div>
</div>
<p class="error col-auto"></p>
</div>
<div class = "col-lg-3 col-sm-12">
<div class = "col fw-bold">Filter 2:</div>
<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>
</div>
<div class = "col-lg-3 col-sm-12">
<div class = "col fw-bold">Filter 3:</div>
<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>
</div>
<div class = "col-lg-3 col-sm-12">
<div class = "col fw-bold">Filter 4:</div>
<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>
</div>
<datalist id = "filter-items"></datalist>
</div>
<div class = "row">
<div class = "col-lg col-sm-12">
<div class = "col"><span class = "fw-bold">Rarity:</span> <span style = "cursor: pointer; float: right;"><span id = "all-rarities">All</span> &nbsp; <span id = "none-rarities">None</span></span></div>
<div id = "rarity-box">
<!-- unfortunately they must be stacked up like this because newlines are considered spaces and muck up the organization -->
<div id = "rarity-normal" class = "rarity-selected"><b>N</b></div><div id = "rarity-unique" class = "rarity-selected"><b>U</b></div><div id = "rarity-set" class = "rarity-selected"><b>S</b></div><div id = "rarity-rare" class = "rarity-selected"><b>R</b></div><div id = "rarity-legendary" class = "rarity-selected"><b>L</b></div><div id = "rarity-fabled" class = "rarity-selected"><b>F</b></div><div id = "rarity-mythic" class = "rarity-selected"><b>M</b></div>
</div>
<p class="error col-auto"></p>
</div>
</div>
</div>
<div id = "filter-container" class = "col-lg-5">
<div class = "col fw-bold">Filters:</div>
<div class = "row">
<div id = "add-filter" class = "col fw-bold" style = "cursor: pointer; padding-top: 5px;">
+ Add Filter
</div>
</div>
</div>
<div class = "row">
<div class = "col-auto" style = "width: 12.5%;"></div>
<div class = "col-auto">
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "search-button" onclick = "do_item_search()">
Search!
@ -168,7 +143,6 @@
</button>
</div>
</div>
</div>
<div class = "row box-title justify-content-center" id = "summary">
</div>
<div class = "row" id = "search-results">
@ -177,6 +151,7 @@
</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/drag_drop_touch.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/icons.js"></script>

8
js/drag_drop_touch.js Normal file
View file

File diff suppressed because one or more lines are too long

320
js/items.js
View file

@ -1,14 +1,10 @@
const translate_mappings = {
//"Name": "name",
//"Display Name": "displayName",
//"tier"Tier": ",
//"Tier": "tier",
//"Set": "set",
"Powder Slots": "slots",
//"Type": "type",
//"armorType", (deleted)
//"color", (deleted)
//"lore", (deleted)
//"material", (deleted)
"Drop type": "drop",
"Quest requirement": "quest",
"Restriction": "restrict",
@ -91,15 +87,15 @@ const translate_mappings = {
};
const special_mappings = {
"Sum (skill points)": "s:str+dex+int+def+agi",
"Sum (Mana Sustain)": "s:mr+ms",
"Sum (Life Sustain)": "s:hpr+ls",
"Sum (Health + Health Bonus)": "s:hp+hpBonus",
"No Strength Req": "f:strReq=0",
"No Dexterity Req": "f:dexReq=0",
"No Intelligence Req": "f:intReq=0",
"No Agility Req": "f:agiReq=0",
"No Defense Req": "f:defReq=0",
"Sum (skill points)": "str+dex+int+def+agi",
"Sum (Mana Sustain)": "mr+ms",
"Sum (Life Sustain)": "hpr+ls",
"Sum (Health + Health Bonus)": "hp+hpBonus",
// "No Strength Req": "strReq=0",
// "No Dexterity Req": "dexReq=0",
// "No Intelligence Req": "intReq=0",
// "No Agility Req": "agiReq=0",
// "No Defense Req": "defReq=0",
};
let item_filters = []
@ -110,11 +106,12 @@ for (let x in special_mappings) {
item_filters.push(x);
}
let item_categories = [ "armor", "accessory", "weapon" ];
let item_categories = ["armor", "accessory", "weapon"];
function applyQuery(items, query) {
return items.filter(query.filter, query).sort(query.compare);
}
const types = {bow: true, spear: true, wand: true, dagger: true, relik: true, helmet: true, chestplate: true, leggings: true, boots: true, ring: true, bracelet: true, necklace: true};
const rarities = {normal: true, unique: true, set: true, rare: true, legendary: true, fabled: true, mythic: true};
const filters = [];
let filter_id_counter = 0;
function displayItems(items_copy) {
let items_parent = document.getElementById("search-results");
@ -122,7 +119,6 @@ function displayItems(items_copy) {
if (i > 200) {break;}
let item = items_copy[i].itemExp;
let box = make_elem('div', ['col-lg-3', 'col-sm-6', 'p-2'], {id: 'item'+i});
//box.addEventListener("dblclick", function() {set_item(item);}); TODO: ??
let bckgrdbox = make_elem("div", ["dark-7", "rounded", "px-2", "col-auto"], {id: 'item'+i+'b'});
box.append(bckgrdbox);
@ -141,47 +137,69 @@ let expr_parser;
function do_item_search() {
window.scrollTo(0, 0);
let queries = [];
queries.push('f:name?="'+document.getElementById("item-name-choice").value.trim()+'"');
const cat_or_type = document.getElementById("item-category-choice").value;
if (item_types.includes(cat_or_type)) {
queries.push('f:type="'+cat_or_type+'"');
}
else if (item_categories.includes(cat_or_type)) {
queries.push('f:cat="'+cat_or_type+'"');
// name
if (document.getElementById("item-name-choice").value != "") {
queries.push("f:name?=\"" + document.getElementById("item-name-choice").value.trim() + "\"");
}
let rarity = document.getElementById("item-rarity-choice").value;
if (rarity) {
if (rarity === "ANY") {
// types
let allTypes = true;
let typeQuery = "f:("
for (const type of Object.keys(types)) {
if (types[type]) {
typeQuery += "type=\"" + type + "\"|";
} else {
allTypes = false;
}
else if (rarity === "Sane") {
queries.push('f:tiername!="mythic"');
}
else {
queries.push('f:tiername="'+rarity+'"');
}
if (!allTypes) {
queries.push(typeQuery.substring(0, typeQuery.length - 1) + ")");
}
let level_raw = document.getElementById("item-level-choice").value;
if (!level_raw) { level_raw = '1-106'; };
const level_dat = level_raw.split("-");
queries.push('f:(lvl>='+parseInt(level_dat[0])+'&lvl<='+parseInt(level_dat[1])+')');
// rarities
let allRarities = true;
let rarityQuery = "f:("
for (const rarity of Object.keys(rarities)) {
if (rarities[rarity]) {
rarityQuery += "tiername=\"" + rarity + "\"|";
} else {
allRarities = false;
}
}
if (!allRarities) {
queries.push(rarityQuery.substring(0, rarityQuery.length - 1) + ")");
}
for (let i = 1; i <= 4; ++i) {
let raw_dat = document.getElementById("filter"+i+"-choice").value;
let filter_dat = translate_mappings[raw_dat];
if (filter_dat !== undefined) {
queries.push("s:"+filter_dat);
queries.push("f:"+filter_dat+"!=0");
continue;
// filters
for (const filter of filters) {
let min = parseInt(filter.min_elem.value);
let max = parseInt(filter.max_elem.value);
if (min > max) {
continue; // invalid range
}
filter_dat = special_mappings[raw_dat];
if (filter_dat !== undefined) {
queries.push(filter_dat);
continue;
let zero_in_min_max = (isNaN(min) || min <= 0) && (isNaN(max) || max >= 0);
let raw_name = filter.input_elem.value;
let filter_name = translate_mappings[raw_name];
if (filter_name === undefined) {
filter_name = special_mappings[raw_name];
if (filter_name === undefined) {
continue; // not a valid filter
}
filter_name = "(" + filter_name + ")";
}
if (!isNaN(min)) {
queries.push("f:" + filter_name + ">=" + min);
}
if (!isNaN(max)) {
queries.push("f:" + filter_name + "<=" + max);
}
if (zero_in_min_max) {
queries.push("f:" + filter_name + "!=0");
}
queries.push("s:" + (filter.ascending ? "0-" : "") + filter_name);
}
let filter_query = "true";
@ -218,33 +236,189 @@ function do_item_search() {
displayItems(results);
}
function reset_item_search() {
const reset_fields = ["item-name-choice", "item-category-choice", "item-rarity-choice", "item-level-choice", "filter1-choice", "filter2-choice", "filter3-choice", "filter4-choice"]
for (const field of reset_fields) {
document.getElementById(field).value = "";
}
}
function init_items() {
search_db = items.filter( i => ! i.remapID ).map( i => [i, expandItem(i, [])] );
expr_parser = new ExprParser(itemQueryProps, itemQueryFuncs);
//init dropdowns
let filter_inputs = 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", item_filters],
["filter2", item_filters],
["filter3", item_filters],
["filter4", item_filters]]);
for (const [field, data] of filter_inputs) {
let field_choice = document.getElementById(field+"-choice");
// show dropdown on click
// init type buttons
for (const type of Object.keys(types)) {
document.getElementById("type-" + type).addEventListener("click", function() {
types[type] = !types[type];
this.classList.toggle("type-selected");
});
}
document.getElementById("all-types").addEventListener("click", function() {
for (const type of Object.keys(types)) {
types[type] = true;
document.getElementById("type-" + type).classList.add("type-selected");
}
});
document.getElementById("none-types").addEventListener("click", function() {
for (const type of Object.keys(types)) {
types[type] = false;
document.getElementById("type-" + type).classList.remove("type-selected");
}
});
// init rarity buttons
for (const rarity of Object.keys(rarities)) {
document.getElementById("rarity-" + rarity).addEventListener("click", function() {
rarities[rarity] = !rarities[rarity];
this.classList.toggle("rarity-selected");
});
}
document.getElementById("all-rarities").addEventListener("click", function() {
for (const rarity of Object.keys(rarities)) {
rarities[rarity] = true;
document.getElementById("rarity-" + rarity).classList.add("rarity-selected");
}
});
document.getElementById("none-rarities").addEventListener("click", function() {
for (const rarity of Object.keys(rarities)) {
rarities[rarity] = false;
document.getElementById("rarity-" + rarity).classList.remove("rarity-selected");
}
});
// filters
document.getElementById("add-filter").addEventListener("click", create_filter);
create_filter();
filters[0].input_elem.value = "Combat Level";
init_filter_drag();
}
function reset_item_search() {
document.getElementById("item-name-choice").value = "";
document.getElementById("all-types").click();
document.getElementById("all-rarities").click();
}
function create_filter() {
let data = {ascending: false};
let row = make_elem("div", ["row", "filter-row"], {});
let col = make_elem("div", ["col"], {});
row.appendChild(col);
data.div = row;
let reorder_img = make_elem("img", ["reorder-filter"], {src: "../media/icons/3-lines.svg", draggable: "true"});
col.appendChild(reorder_img);
let filter_input = make_elem("input",
["col", "border-dark", "text-light", "dark-5", "rounded", "scaled-font", "form-control", "form-control-sm", "filter-input"],
{id: "filter-input-" + filter_id_counter, type: "text", placeholder: "Filter"}
);
filter_id_counter++;
col.appendChild(filter_input);
data.input_elem = filter_input;
let asc_desc = make_elem("div", [], {style: "cursor: pointer; display: inline-block;"});
asc_desc.appendChild(make_elem("img", ["desc-icon", "asc-sel"], {src: "../media/icons/triangle.svg"}));
asc_desc.appendChild(make_elem("img", ["asc-icon"], {src: "../media/icons/triangle.svg"}));
asc_desc.addEventListener("click", function() {
data.ascending = !data.ascending;
asc_desc.children[0].classList.toggle("asc-sel");
asc_desc.children[1].classList.toggle("asc-sel");
});
col.appendChild(asc_desc);
let min = make_elem("input",
["col", "border-dark", "text-light", "dark-5", "rounded", "scaled-font", "form-control", "form-control-sm", "min-max-input"],
{type: "number", placeholder: "-\u221E"}
);
col.appendChild(min);
data.min_elem = min;
let to = make_elem("span", [], {innerHTML: "&nbsp;to&nbsp;"});
col.appendChild(to);
let max = make_elem("input",
["col", "border-dark", "text-light", "dark-5", "rounded", "scaled-font", "form-control", "form-control-sm", "min-max-input"],
{type: "number", placeholder: "\u221E"}
);
col.appendChild(max);
data.max_elem = max;
document.getElementById("filter-container").insertBefore(row, document.getElementById("add-filter").parentElement);
filters.push(data);
init_filter_dropdown(data);
}
let currently_dragging = null;
function init_filter_drag() {
let container = document.getElementById("filter-container");
container.addEventListener("dragstart", function(e) {
if (e.path[0].classList.contains("reorder-filter")) {
currently_dragging = filters[Array.from(e.path[3].children).indexOf(e.path[2]) - 1];
} else {
e.preventDefault();
}
});
container.addEventListener("dragenter", function(e) {
e.preventDefault();
});
container.addEventListener("dragleave", function(e) {
e.preventDefault();
});
container.addEventListener("dragend", function(e) {
e.preventDefault();
for (const el of document.getElementsByClassName("filter-dragged-over")) {
el.classList.remove("filter-dragged-over");
}
currently_dragging = null;
});
container.addEventListener("dragover", function(e) {
e.preventDefault();
for (const el of document.getElementsByClassName("filter-dragged-over")) {
el.classList.remove("filter-dragged-over");
}
if (!e.path.includes(currently_dragging.div)) {
for (let i = 0; i < e.path.length; i++) {
if (e.path[i].classList.contains("filter-row")) {
e.path[i].classList.add("filter-dragged-over");
break;
}
}
}
});
container.addEventListener("drop", function(e) {
e.preventDefault();
for (const el of document.getElementsByClassName("filter-dragged-over")) {
el.classList.remove("filter-dragged-over");
}
if (!e.path.includes(currently_dragging.div)) {
for (let i = 0; i < e.path.length; i++) {
if (e.path[i].classList.contains("filter-row")) {
let old_index = filters.indexOf(currently_dragging);
let new_index = Array.from(e.path[i + 1].children).indexOf(e.path[i]) - 1;
filters.splice(old_index, 1);
filters.splice(new_index, 0, currently_dragging);
currently_dragging.div.remove();
container.insertBefore(currently_dragging.div, container.children[new_index + 1]);
break;
}
}
}
currently_dragging = null;
});
}
function init_filter_dropdown(filter) {
let field_choice = filter.input_elem;
field_choice.onclick = function() {field_choice.dispatchEvent(new Event('input', {bubbles:true}));};
filter_inputs.set(field, new autoComplete({
filter.autoComplete = new autoComplete({
data: {
src: data,
src: item_filters,
},
threshold: 0,
selector: "#"+ field +"-choice",
selector: "#" + field_choice.id,
wrapper: false,
resultsList: {
maxResults: 100,
@ -252,12 +426,11 @@ function init_items() {
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();
let position = 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) {
const message = make_elem('li', ['scaled-font'], {textContent: "No results found!"});
list.prepend(message);
@ -277,8 +450,7 @@ function init_items() {
},
},
}
}));
}
});
}
(async function() {

8
media/icons/3-lines.svg Normal file
View file

@ -0,0 +1,8 @@
<svg width="15px" height="15px" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386 13.7761 3 13.5 3H1.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761 13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z"
fill="white"
/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 575 B

3
media/icons/triangle.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 504.167 252.791">
<path fill="#fff" d="M.353 252.437L252.083.707l251.731 251.73"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 143 B