add sorting filters by name

make-pages/GalleryPage.hs

@@ -69,8 +69,12 @@ make' root (GalleryInfo {title, desc, prefix, filters, hidden}) infos = [b|@0
               $10.excludeFilters
             </ul>
 
-            <a href=# id=clear>clear</a>
-            <a href=# id=singles>toggle single-use tags</a>
+            <ul id=filterstuff>
+              <li><a href=# id=clear>clear</a>
+              <li><a href=# id=sortalpha>sort by name</a>
+              <li><a href=# id=sortuses>sort by uses</a>
+              <li><a href=# id=singles>toggle single-use tags</a>
+            </ul>
           </div>
         </details>
       </nav>

script/gallery.js

@@ -115,6 +115,44 @@ function useFragment() {
 }
 
 
+function sortFilters(cmp) {
+  function sort1(id) {
+    let elt = document.getElementById(id);
+    let children = [...elt.childNodes];
+    children.sort(cmp);
+    for (let c of children) {
+      elt.removeChild(c);
+      elt.appendChild(c);
+    }
+  }
+
+  sort1('require');
+  sort1('exclude');
+}
+
+function sortFiltersAlpha() {
+  function getName(x) {
+    if (x.nodeType == Node.ELEMENT_NODE) {
+      return x.getElementsByTagName('input')[0].value;
+    } else {
+      return '';
+    }
+  }
+  sortFilters((a, b) => getName(a).localeCompare(getName(b)));
+}
+
+function sortFiltersUses() {
+  function getUses(x) {
+    if (x.nodeType == Node.ELEMENT_NODE) {
+      return parseInt(x.getElementsByTagName('label')[0].dataset.count);
+    } else {
+      return 0;
+    }
+  }
+  sortFilters((a, b) => getUses(b) - getUses(a));
+}
+
+
 function setup() {
   function inputs(id) {
     let iter = document.getElementById(id).getElementsByTagName('input');
@@ -139,8 +177,13 @@ function setup() {
 
   allBoxes.forEach(b => b.addEventListener('change', () => toggle(b)));
 
-  document.getElementById('clear').addEventListener('click', clear);
-  document.getElementById('singles').addEventListener('click', toggleSingles);
+  function addClick(id, f) {
+    document.getElementById(id).addEventListener('click', f);
+  }
+  addClick('clear',     clear);
+  addClick('sortalpha', sortFiltersAlpha);
+  addClick('sortuses',  sortFiltersUses);
+  addClick('singles',   toggleSingles);
 
   window.addEventListener('popstate', useFragment);
 
@@ -148,5 +191,4 @@ function setup() {
 }
 
 window.addEventListener('DOMContentLoaded', setup);
-
 })();

style/shiny/gallery.css

@@ -18,16 +18,11 @@
   margin: 1em 0 2em 0;
 }
 
-#filters h3, #clear, #singles {
+#filters h3 {
   margin: 0;
 }
 
-#clear, #singles {
-  font-weight: 400;
-  font-size: 110%;
-}
-
-#filters h3, #clear {
+#filters h3 {
   text-align: right;
   grid-area: auto / 1;
 }
@@ -41,12 +36,12 @@
   #filters div {
     grid-template-columns: auto;
   }
-  #filters h3, #clear {
+  #filters h3 {
     text-align: left;
   }
 }
 
-#filters ul {
+#filters .bb-choice {
   font-weight: 400;
   font-size: 90%;
   margin: 0;
@@ -57,11 +52,11 @@
   grid-gap: 1px;
 }
 
-#filters ul:focus-within {
+#filters .bb-choice:focus-within {
   box-shadow: var(--focus-box);
 }
 
-#filters li {
+#filters .bb-choice li {
   margin: 0;
   flex-grow: 1;
 }
@@ -85,6 +80,20 @@
   padding-left: 0.25em;
 }
 
+#filterstuff {
+  grid-area: auto / span 2;
+  display: flex;
+  justify-content: center;
+  margin-top: 0;
+  gap: 2em;
+}
+
+#filterstuff li {
+  list-style: none;
+  font-weight: 400;
+}
+
+
 .grid {
   padding: 0;
   display: grid;