morphNon/wynnbuilder-idk
2
0
Fork 1
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

advanced item search in bootstrap

Browse source
This commit is contained in:
ferricles 2022-05-12 21:00:16 -07:00
parent fd1bc0252e
commit f557fcd75f
10 changed files with 142 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
css/article.css
View file

@ -102,7 +102,7 @@ main .heart {
}
.full-width > img {
width: 100%;
width: 80%;
background-color: #000;
filter: brightness(0.7) contrast(1.2) grayscale(0.5);
}

4
css/sq2bs.css
View file

@ -384,4 +384,8 @@ input.equipment-input {
.atlas {
color: #fbcd49;
}
a {
color: #88FFFF;
}

5
items/index.html
View file

@ -33,6 +33,11 @@
</div>
<div class = "container py-5 vh-100 mx-0 mx-lg-auto scaled-font">
<div class = "col">
<div class = "row">
<div class = "col text-end">
<a href = "../items_adv/">Advanced Item Search</a>
</div>
</div>
<div class = "row">
<div class = "row">
<div class = "col-lg-3 col-sm-12">

74
items/items_2.html
View file

@ -1,74 +0,0 @@
<!DOCTYPE html>
<html scroll-behavior="smooth">
<head>
<meta charset="UTF-8" />
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no" />
<!-- nunito font, copying wynndata -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/styles.css">
<link rel="stylesheet" href="/css/items_2.css">
<link rel="icon" href="./media/icons/new/searcher.png">
<link rel="manifest" href="manifest.json">
<title>WynnAtlas</title>
</head>
<body class="all">
<header class="header nomarginp">
<div class="headerleft" id = "headerleft">
</div>
<div class="headercenter" id = "headercenter">
<div>
<p class="itemp" id="header">WynnAtlas</p>
</div>
</div>
<div class="headerright" id = "headerright">
<div class="center" id="basic">
<a href="./items.html" class="link">Basic Search</a>
</div>
</div>
</header>
<div class="center" id="credits">
<a href="credits.txt" class="link">Additional credits</a>
</div>
<div class="center" id="help">
<a href="items_2_help.html" class="link" target="_blank">Search Guide</a>
</div>
<div class="center" id="main">
<div id="search-container">
<div class="search-field-container left" id="search-filter">
<label class="search-field-label" for="search-filter-field">Filter By:</label>
<input class="search-field" id="search-filter-field" type="text" autofocus="true"
placeholder="name ?= &quot;blue&quot; & str >= 15 & dex >= 10">
<div class="search-field-error" id="search-filter-error"></div>
<div class="search-field-compl" id="search-filter-compl"></div>
</div>
<div class="search-field-container left" id="search-sort">
<label class="search-field-label" for="search-sort-field">Sort By:</label>
<input class="search-field" id="search-sort-field" type="text"
placeholder="str + dex; meleerawdmg + spellrawdmg">
<div class="search-field-error" id="search-sort-error"></div>
<div class="search-field-compl" id="search-sort-compl"></div>
</div>
</div>
<div id="item-list-container">
<div class="left" id="item-list"></div>
<div class="center" id="item-list-footer"></div>
</div>
</div>
<div id="scroll-up">&uparrow;</div>
<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/loadheader.js"></script>
<script type="text/javascript" src="/js/icons.js"></script>
<script type="text/javascript" src="/js/damage_calc.js"></script>
<script type="text/javascript" src="/js/display_constants.js"></script>
<script type="text/javascript" src="/js/display.js"></script>
<script type="text/javascript" src="/js/query_2.js"></script>
<script type="text/javascript" src="/js/expr_parser.js"></script>
<script type="text/javascript" src="/js/load.js"></script>
<script type="text/javascript" src="/js/items_2.js"></script>
</body>
</html>

0
items/temp.html
View file

0
credits.txt → items_adv/credits.txt
View file

BIN
items_adv/help_photo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 65 KiB

90
items_adv/index.html Normal file
View file

@ -0,0 +1,90 @@
<!DOCTYPE html>
<html scroll-behavior="smooth">
<head>
<title>WynnAtlas</title>
<link rel="icon" href="../media/icons/new/searcher.png" type="image/icon type">
<meta name="viewport" content="width=device-width, initial-scale=.45, user-scalable=no">
<!-- nunito font, copying wynnbuilder, which is copying wynndata -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/css/autoComplete.min.css">
<link rel="stylesheet" href="../css/sq2bs.css">
<link rel="stylesheet" href="../css/items_2.css">
<link rel="stylesheet" href="../css/sidebar.css">
<link rel="stylesheet" href="../css/wynnstyles.css">
</head>
<body class = "text-light d-flex justify-content-center" id = "body">
<div id="main-sidebar" class="sidebar dark-7 dark-shadow">
<a href = "../builder/"><img src="../media/icons/new/builder.png" alt = "WynnBuilder" title = "WynnBuilder"><b>WynnBuilder</b></a>
<a href = "../crafter/"><img src = "../media/icons/new/crafter.png" alt = "WynnCrafter" title = "WynnCrafter"><b>WynnCrafter</b></a>
<a href = "../items/"><img src = "../media/icons/new/searcher.png" alt = "WynnAtlas" title = "WynnAtlas"><b>WynnAtlas</b></a>
<a href = "/customizer.html"><img src = "../media/icons/new/custom.png" alt = "WynnCustom" title = "WynnCustom"><b>WynnCustom</b></a>
<a href = "/map.html"><img src = "../media/icons/new/compass.png" alt = "WynnGPS" title = "WynnGPS"><b>WynnGPS</b></a>
<a href = "/wynnfo/index.html"><img src = "../media/icons/new/book.png" alt = "Wynnfo" title = "WynnCrafter"><b>WynnCrafter</b></a>
<a><img src="../media/icons/new/searcher.png" alt="" title="Item Search"><b>WynnAtlas Mini</b></a>
<a onclick = "toggleIcons()"><img src = "../media/icons/new/reload.png" alt = "" title = "Swap items on page"><b>Swap Icon Style</b></a>
<hr/>
</div>
<div class = "container py-5 vh-100 mx-0 mx-lg-auto scaled-font">
<div class = "col">
<div class = "row">
<div class = "col text-start" id = "credits">
<a href="credits.txt" class="link">Additional credits</a>
</div>
<div class = "col text-center" id = "help">
<a href="items_2_help.html" class="link" target="_blank">Search Guide</a>
</div>
<div class = "col text-end">
<a href = "../items/">Basic Item Search</a>
</div>
</div>
<div class = "row">
<div class="col" id="main">
<div class = "row" id="search-container">
<div class="col search-field-container" id="search-filter">
<div class="col fw-bold">Filter By:</div>
<input class="col border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="search-filter-field" type="text" autofocus="true"
placeholder="name ?= &quot;blue&quot; & str >= 15 & dex >= 10">
<div class="search-field-error" id="search-filter-error"></div>
<div class="search-field-compl" id="search-filter-compl"></div>
</div>
<div class="col search-field-container" id="search-sort">
<div class="col fw-bold">Sort By:</div>
<input class="col border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="search-sort-field" type="text"
placeholder="str + dex; meleerawdmg + spellrawdmg">
<div class="search-field-error" id="search-sort-error"></div>
<div class="search-field-compl" id="search-sort-compl"></div>
</div>
</div>
<div class = "row" id="item-list-container">
<div class="row" id="item-list"></div>
<div class="row" id="item-list-footer"></div>
</div>
</div>
</div>
<div class = "row" id="scroll-up">&uparrow;</div>
</div>
</div>
<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>
<script type="text/javascript" src="/js/damage_calc.js"></script>
<script type="text/javascript" src="/js/display_constants.js"></script>
<script type="text/javascript" src="/js/display.js"></script>
<script type="text/javascript" src="/js/sq2display_constants.js"></script>
<script type="text/javascript" src="/js/sq2display.js"></script>
<script type="text/javascript" src="/js/query_2.js"></script>
<script type="text/javascript" src="/js/expr_parser.js"></script>
<script type="text/javascript" src="/js/load.js"></script>
<script type="text/javascript" src="/js/items_2.js"></script>
</body>
</html>

54
items/items_2_help.html → items_adv/items_2_help.html
View file

@ -1,32 +1,45 @@
<!DOCTYPE html>
<html scroll-behavior="smooth">
<head>
<!-- nunito font, copying wynndata -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<title>WynnAtlas Help</title>
<link rel="icon" href="../media/icons/new/searcher.png">
<link rel="manifest" href="manifest.json">
<meta name="viewport" content="width=device-width, initial-scale=.45, user-scalable=no">
<!-- nunito font, copying wynnbuilder, which is copying wynndata -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/styles.css">
<link rel="stylesheet" href="/css/article.css">
<link rel="icon" href="./media/icons/new/searcher.png">
<link rel="manifest" href="manifest.json">
<title>WynnAtlas</title>
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/css/autoComplete.min.css">
<link rel="stylesheet" href="../css/article.css">
<link rel="stylesheet" href="../css/styles.css">
<link rel="stylesheet" href="../css/sidebar.css">
<link rel="stylesheet" href="../css/wynnstyles.css">
</head>
<body class="all" style="overflow-y: scroll">
<header class="header nomarginp">
<div class="headerleft" id = "headerleft">
</div>
<div class="headercenter" id = "headercenter">
<div>
<p class="itemp" id="header">WynnAtlas</p>
</div>
</div>
<div class="headerright" id = "headerright">
</div>
</header>
<div id="main-sidebar" class="sidebar dark-7 dark-shadow">
<a href = "../builder/"><img src="../media/icons/new/builder.png" alt = "WynnBuilder" title = "WynnBuilder"><b>WynnBuilder</b></a>
<a href = "../crafter/"><img src = "../media/icons/new/crafter.png" alt = "WynnCrafter" title = "WynnCrafter"><b>WynnCrafter</b></a>
<a href = "../items/"><img src = "../media/icons/new/searcher.png" alt = "WynnAtlas" title = "WynnAtlas"><b>WynnAtlas</b></a>
<a href = "/customizer.html"><img src = "../media/icons/new/custom.png" alt = "WynnCustom" title = "WynnCustom"><b>WynnCustom</b></a>
<a href = "/map.html"><img src = "../media/icons/new/compass.png" alt = "WynnGPS" title = "WynnGPS"><b>WynnGPS</b></a>
<a href = "/wynnfo/index.html"><img src = "../media/icons/new/book.png" alt = "Wynnfo" title = "WynnCrafter"><b>WynnCrafter</b></a>
<a><img src="../media/icons/new/searcher.png" alt="" title="Item Search"><b>WynnAtlas Mini</b></a>
<a onclick = "toggleIcons()"><img src = "../media/icons/new/reload.png" alt = "" title = "Swap items on page"><b>Swap Icon Style</b></a>
<hr/>
</div>
<main>
<div class="full-width">
<img src="https://i.imgur.com/Ap6Zd3Q.png"/>
<div class="full-width text-center">
<img src="./help_photo.png"/>
</div>
<div class="section">
<h2>What the heck is &ldquo;Advanced Item Search&rdquo;?</h2>
<p>The WynnBuilder team has been hard at work giving you the latest and greatest tools for optimizing your most complex Wynncraft builds. Now, we're introducing <strong class="rb-text">WynnAtlas</strong>, the new, bigger, better, smarter, powerful-er item guide! Featuring an extremely flexible expression language for filtering and sorting items, WynnAtlas' advanced item search system gives build engineers the power to select items with a high degree of granularity. Picking components for your brand-new Divzer WFA build has never been easier!</p>
@ -208,7 +221,6 @@
docsFns.append(genDocEntry(entry[0], entry[1], null, entry[2]));
}
</script>
<script type="text/javascript" src="/js/loadheader.js"></script>
<script type="text/javascript" src="/js/icons.js"></script>
</body>
</html>

13
js/items_2.js
View file

@ -246,10 +246,15 @@ function init_items2() {
const itemEntries = [];
for (let i = 0; i < ITEM_LIST_SIZE; i++) {
const itemElem = document.createElement('div');
itemElem.classList.add('item-entry', 'box');
itemElem.setAttribute('id', `item-entry-${i}`);
itemElem.classList.add('col-lg-3', 'col-sm-auto', "p-2");
// itemElem.setAttribute('id', `item-entry-${i}`);
itemList.append(itemElem);
itemEntries.push(itemElem);
const itemElemContained = document.createElement("div");
itemElemContained.classList.add("dark-7", "rounded", "px-2", "col-auto");
itemElemContained.setAttribute('id', `item-entry-${i}`);
itemElem.appendChild(itemElemContained);
}
// create the expression parser
@ -323,10 +328,10 @@ function init_items2() {
for (let i = 0; i < searchMax; i++) {
const result = searchResults[i];
itemEntries[i].classList.add('visible');
displayExpandedItem(result.itemExp, `item-entry-${i}`);
displaysq2ExpandedItem(result.itemExp, `item-entry-${i}`);
if (result.sortKeys.length > 0) {
const sortKeyListContainer = document.createElement('div');
sortKeyListContainer.classList.add('itemleft');
sortKeyListContainer.classList.add('row');
const sortKeyList = document.createElement('ul');
sortKeyList.classList.add('item-entry-sort-key', 'itemp', 'T0');
sortKeyListContainer.append(sortKeyList);