Add search box to menu page

searches in class name, translated name and translated short description
(aka doc text)

Cut Menu items to 75% to avoid collisions

scripts/boxesserver

@@ -303,9 +303,16 @@ class BServer:
 <div style="width: 25%; float: left;">
 <img alt="self-Logo" src="{self.static_url}/boxes-logo.svg" width="250">
 </div>
+
 <div>
+
 <div class="clear"></div>
 <hr>
+
+<div class="search"><form onkeydown="return event.key != 'Enter';" onkeyup=filterSearchItems(); return event.key;">
+\U0001f50d <input autocomplete="off" type="search" onsearch="filterSearchItems();" name="search" id="search"></input>
+</form></div>
+
 <div class="menu" style="width: 100%">
 <img style="width: 200px;" id="sample-preview" src="{self.static_url}/nothing.png" alt="">
 """]
@@ -321,7 +328,7 @@ class BServer:
 >
     {_(group.title)}
 </h3>
-  <div id="{nr}"><ul>''')
+  <div id="{nr}">\n   <ul>\n''')
             for box in group.generators:
                 name = box.__name__
                 if name in ("TrayLayout2",):
@@ -329,8 +336,8 @@ class BServer:
                 docs = ""
                 if box.__doc__:
                     docs = " - " + _(box.__doc__)
-                result.append(f"""<li class="thumbnail" data-thumbnail="{self.static_url}/samples/{name}-thumb.jpg"><a href="{name}{langparam}">{_(name)}</a>{docs}</li>""")
+                result.append(f"""     <li class="thumbnail" data-thumbnail="{self.static_url}/samples/{name}-thumb.jpg" id="search_id_{name}"><a href="{name}{langparam}">{_(name)}</a>{docs}</li>\n""")
-            result.append("\n</ul></div>\n")
+            result.append("   </ul>\n  </div>\n")
         result.append(f"""
 </div>
 

static/self.css

@@ -49,6 +49,7 @@ h3 {
     padding: 5px;
     padding-left: 15px;
     margin: 0px;
+    width: 75%
 }
 
 h3::before {
@@ -138,6 +139,10 @@ video {
     font-size: 0.9em;
 }
 
+.search {
+    float : right;
+}
+
 .footer ul li a {
     color: #555;
     margin-right: 10px;

static/self.js

@@ -15,18 +15,28 @@ function hideThumbnail() {
     img.style.display = "none";
 }
 
-
+function expandId(id) {
+    const e = document.getElementById(id);
+    const h = document.getElementById("h-" + id);
+    e.style.display = "block";
+    h.classList.add("open");
+    h.setAttribute("aria-expanded", "true");
+}
+function collapseId(id) {
+    const e = document.getElementById(id);
+    const h = document.getElementById("h-" + id);
+    e.style.display = "none";
+    h.classList.remove("open");
+    h.setAttribute("aria-expanded", "false");
+}
+    
 function toggleId(id) {
     const e = document.getElementById(id);
     const h = document.getElementById("h-" + id);
     if (e.style.display == null || e.style.display === "none") {
-        e.style.display = "block";
+        expandId(id);
-        h.classList.add("open");
-        h.setAttribute("aria-expanded", "true");
     } else {
-        e.style.display = "none";
+        collapseId(id);
-        h.classList.remove("open");
-        h.setAttribute("aria-expanded", "false");
     }
 }
 
@@ -157,4 +167,48 @@ document.addEventListener('DOMContentLoaded', function() {
 }, false);
 
 
+function collapseAll() {
+    const h = document.getElementsByClassName("toggle");
+    for (let el of h) {
+        id = el.getAttribute("data-id")
+        collapseId(id);
+    }
+}
 
+function expandAll() {
+    const h = document.getElementsByClassName("toggle");
+    for (let el of h) {
+        id = el.getAttribute("data-id")
+        expandId(id);
+    }
+}
+
+function showAll(str) {
+    let matching_ids = document.querySelectorAll('[id^="search_id_"]')
+    for (let id of matching_ids) {
+        id.hidden = false;
+    }
+}
+
+function showOnly(str) {
+    str = str.toLowerCase();
+    let matching_ids = document.querySelectorAll('[id^="search_id_"]')
+    for (let id of matching_ids) {
+        name = id.id.replace("search_id_", "").toLowerCase();
+        if (name.includes(str) || id.textContent.toLowerCase().includes(str))
+            id.hidden = false;
+        else
+            id.hidden = true;
+    }
+}
+
+function filterSearchItems() {
+    const search = document.getElementById("search")
+    if (search.value.length == 0) {
+        collapseAll();
+        showAll()
+    } else {
+        expandAll();
+        showOnly(search.value)
+    }
+}