add sorting filters by name

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);
-
 })();