From 5c5b3522b9016f8daa1c0225deae554401617d34 Mon Sep 17 00:00:00 2001 From: Marcos Schulz Date: Thu, 14 Apr 2022 18:43:41 +0100 Subject: [PATCH 1/2] feat #1219: Build basic form for searching and filter boxes --- custom_theme/boxes.html | 72 +++++++++++++++----------------- mkdocs.yml | 2 + src/assets/js/boxes.js | 50 ++++++++++++++++++++++ src/assets/stylesheets/boxes.css | 63 ++++++++++++++++++++++++++++ 4 files changed, 149 insertions(+), 38 deletions(-) create mode 100644 src/assets/js/boxes.js create mode 100644 src/assets/stylesheets/boxes.css diff --git a/custom_theme/boxes.html b/custom_theme/boxes.html index f69d42860..e8de6dbd4 100644 --- a/custom_theme/boxes.html +++ b/custom_theme/boxes.html @@ -4,52 +4,41 @@ {% block tabs %} {{ super() }} - - + +

Truffle Boxes

The easiest way to get started

Truffle Boxes are helpful boilerplates that allow you to focus on what makes your dapp unique. In addition to Truffle, Truffle Boxes can contain other helpful modules, Solidity contracts & libraries, front-end views and more; all the way up to complete example dapps.

- Create a Box +
+
+ Create a Box +
+
+
+ + +
+
+ + +
+
+ + +
+
+
-

-

+ + + + {% endblock %} diff --git a/mkdocs.yml b/mkdocs.yml index 1fb2010ce..fbc3709bd 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -55,8 +55,10 @@ plugins: htmlmin_opts: remove_comments: true js_files: + - assets/js/boxes.js - assets/js/dashboard.js - assets/js/os-detector.js css_files: + - assets/stylesheets/boxes.css - assets/stylesheets/dashboard.css - assets/stylesheets/extra.css diff --git a/src/assets/js/boxes.js b/src/assets/js/boxes.js new file mode 100644 index 000000000..cbbc797df --- /dev/null +++ b/src/assets/js/boxes.js @@ -0,0 +1,50 @@ +const boxes = { + container: Array.from(document.querySelectorAll('#boxes [data-type="boxes.container"]')), + init: () => { + const input = document.getElementById('boxes.filter.input'); + + input.addEventListener('keyup', (e) => { + if (e.key === 'Enter') { + const filter = document.querySelector('input[name="boxes.filter.radio"]:checked').value; + const term = e.target.value; + + boxes.search(filter, term); + } + + if (e.key === 'Backspace' || e.key === 'Delete') { + if (e.target.value.length === 0) { + boxes.clear(); + } + } + + e.preventDefault(); + }); + + input.focus(); + }, + search: (filter, term) => { + switch (filter) { + case "name": + boxes.container.forEach((item) => { + if (item.id.toString().includes(term)) + item.style.display = 'block'; + else + item.style.display = 'none'; + }); + break; + case "tags": + boxes.container.forEach((item) => { + if (JSON.parse(item.dataset.tags.replace(/'/g, '"')).filter(s => s.includes(term)).length > 0) + item.style.display = 'block'; + else + item.style.display = 'none'; + }); + break; + } + }, + clear: () => { + boxes.container.forEach((item) => { + item.style.display = 'block'; + }); + } +} \ No newline at end of file diff --git a/src/assets/stylesheets/boxes.css b/src/assets/stylesheets/boxes.css new file mode 100644 index 000000000..f0be0d660 --- /dev/null +++ b/src/assets/stylesheets/boxes.css @@ -0,0 +1,63 @@ +/* Remove spacing, as we cannot hide it completely */ +.md-main__inner { + margin: 0; +} + +/* Hide main content for now */ +.md-content { + display: none; +} + +/* Hide table of contents */ +@media screen and (min-width: 60em) { + .md-sidebar--secondary { + display: none; + } +} + +/* Hide navigation */ +@media screen and (min-width: 76.25em) { + .md-sidebar--primary { + display: none; + } +} + +#boxes { + margin-top: 3.5rem; +} + +#boxes a { + text-decoration: none; +} + +.box-search-container-radio { + display: inline-block; + margin-left: 0.5rem; +} + +.box-search-container-input { + display: inline-block; +} + +.box-search-inner-input { + font-size: .9rem; + height: 40px; + padding: 0 0.3rem 0 2.0rem; + position: relative; + text-overflow: ellipsis; + z-index: 2; + border-radius: 0.2rem; +} + +.box-search-icon { + left: 1.65rem; + position: relative; + top: 0.3rem; + z-index: 99999; + float: left; +} + +.box-search-filter { + float: right; + padding-top: 0.3rem; +} \ No newline at end of file From af2ca39af56f58d5d3f4e784b05eca4811a645b4 Mon Sep 17 00:00:00 2001 From: Marcos Schulz Date: Thu, 14 Apr 2022 19:03:11 +0100 Subject: [PATCH 2/2] chore #1219: Search engine modification --- src/assets/js/boxes.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/assets/js/boxes.js b/src/assets/js/boxes.js index cbbc797df..afcbcd166 100644 --- a/src/assets/js/boxes.js +++ b/src/assets/js/boxes.js @@ -4,17 +4,22 @@ const boxes = { const input = document.getElementById('boxes.filter.input'); input.addEventListener('keyup', (e) => { - if (e.key === 'Enter') { - const filter = document.querySelector('input[name="boxes.filter.radio"]:checked').value; - const term = e.target.value; + // if (e.key === 'Enter') { + // const filter = document.querySelector('input[name="boxes.filter.radio"]:checked').value; + // const term = e.target.value; - boxes.search(filter, term); - } + // boxes.search(filter, term); + // } if (e.key === 'Backspace' || e.key === 'Delete') { if (e.target.value.length === 0) { boxes.clear(); } + } else { + const filter = document.querySelector('input[name="boxes.filter.radio"]:checked').value; + const term = e.target.value; + + boxes.search(filter, term); } e.preventDefault();