feat #1219: Query string search for boxes

custom_theme/boxes.html

@@ -4,52 +4,41 @@
 {% block tabs %}
   {{ super() }}
 
-  <!-- Additional styles for landing page -->
-  <style>
-
-    /* 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 a {
-      text-decoration: none;
-    }
-
-  </style>
+<!-- Additional styles for landing page -->
+<link rel="stylesheet" href="/assets/stylesheets/boxes.min.css">
 
 <section class="container p-5">
 
   <h1>Truffle Boxes</h1>
   <h2>The easiest way to get started</h2>
   <p>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.</p>
-  <a href="/docs/truffle/advanced/creating-a-truffle-box.html" class="btn btn-sm btn-truffle">Create a Box</a>
 
+  <div class="w-100">
+    <div class="float-start">
+      <a href="/docs/truffle/advanced/creating-a-truffle-box.html" class="btn btn-sm btn-truffle">Create a Box</a>
+    </div>
+    <div class="float-end">
+      <div class="box-search-container-radio">
+        <input class="form-check-input" type="radio" name="boxes.filter.radio" id="boxes.filter.radio.name" value="name" checked>
+        <label class="form-check-label" for="boxes.filter.radio.name">Name</label>
+      </div>
+      <div class="box-search-container-radio">
+        <input class="form-check-input" type="radio" name="boxes.filter.radio" id="boxes.filter.radio.tags" value="tags">
+        <label class="form-check-label" for="boxes.filter.radio.tags">Tags</label>
+      </div> 
+      <div class="box-search-container-input">
+        <input type="text" id="boxes.filter.input" class="box-search-inner-input" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false">
+        <label class="box-search-icon md-icon"> 
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"></path></svg> 
+        </label>
+      </div>      
+    </div>
+  </div>
 
-  <p class="mt-4">
-    <div id="boxes" class="row g-4">
+  <div id="boxes" class="row g-4">
 
     {% for box in config.extra.boxes %}
-
-      <div class="col-xs-12 col-md-6 col-lg-4">
+      <div id={{ box.displayName }} data-type="boxes.container" data-tags="{{ box.deets.tags }}" class="col-xs-12 col-md-6 col-lg-4">
           <a href="{{ box.displayName }}/">
             <div class="card">
                 <img alt="{{ box.displayName }}" src={{ "https://raw.githubusercontent.com/" + box.userOrg + "/" + box.repoName + "/master/box-img-sm.png" }} class="card-img-top" />
@@ -68,11 +57,18 @@ <h5 class="card-title">{{ box.displayName }}</h5>
       </div>
     {% endfor %}
 
-    </div>
-  </p>
+  </div>
 
 </section>
 
+<script src="/assets/js/boxes.min.js"></script>
+
+<script type="text/javascript">
+  window.addEventListener('load', function () {
+    boxes.init();
+  });
+</script>
+
 {% endblock %}
 
 <!-- Content -->

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

src/assets/js/boxes.js

@@ -0,0 +1,80 @@
+const boxes = {
+    container: Array.from(document.querySelectorAll('#boxes [data-type="boxes.container"]')),
+    params: null,
+    init: () => {
+        boxes.bind();
+        boxes.queryString();
+    },
+    bind: () => {
+        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();
+                }
+            } else {
+                const filter = document.querySelector('input[name="boxes.filter.radio"]:checked').value;
+                const term = e.target.value;
+
+                boxes.search(filter, term);      
+            }
+
+            e.preventDefault();    
+        });
+
+        input.focus();
+    },
+    queryString: () => {
+        boxes.params = new Proxy(new URLSearchParams(window.location.search), {
+            get: (searchParams, prop) => searchParams.get(prop),
+        });
+
+        const filter = boxes.params.filter;
+        const term = boxes.params.term;
+
+        if ((filter == "tags" || filter == "name") && term !== '') {
+            document.getElementById('boxes.filter.input').value = term;
+            document.querySelector(`input[name="boxes.filter.radio"][value="${filter}"]`).checked = true;
+
+            boxes.search(filter, term);
+        } else {
+            document.getElementById('boxes').style.visibility = 'visible';
+        }
+
+    },
+    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;
+        }
+
+        document.getElementById('boxes').style.visibility = 'visible';
+    },
+    clear: () => {
+        boxes.container.forEach((item) => {
+            item.style.display = 'block';        
+        }); 
+    }    
+}

src/assets/stylesheets/boxes.css

@@ -0,0 +1,64 @@
+/* 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;
+    visibility: hidden;
+}
+
+#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;      
+}