replace reset link with hide single-use tags

make-pages/GalleryPage.hs

@@ -63,7 +63,7 @@ make' root (GalleryInfo {title, desc, prefix, filters, hidden}) infos = [b|@0
           </ul>
 
           <a href=# id=clear>clear</a>
-          <a href=# id=reset>default</a>
+          <a href=# id=singles>toggle single-use tags</a>
         </div>
       </details>
     </nav>

script/gallery.js

@@ -7,6 +7,8 @@ let excBoxes;
 let allBoxes;
 let tags;
 
+let showSingles = true;
+
 
 function fillSets() {
   let checkedValues = boxes =>
@@ -58,13 +60,16 @@ function clear(e) {
   if (e) e.preventDefault();
 }
 
-function resetForm() {
+function toggleSingles(e) {
-  allBoxes.forEach(b => b.checked = b.defaultChecked);
+  showSingles = !showSingles;
+
+  for (let li of document.querySelectorAll('#filters li')) {
+    let count = li.querySelector('label').dataset.count;
+    if (count <= 1) {
+      li.hidden = !showSingles;
+    }
   }
 
-function reset(e) {
-  resetForm();
-  update();
   if (e) e.preventDefault();
 }
 
@@ -83,14 +88,12 @@ function makeFragment() {
 function useFragment() {
   let frag = location.hash.replace(/^#/, '');
 
-  if (frag == 'all') {
+  if (frag == 'all' || !frag) {
     clearForm();
-  } else if (frag) {
+  } else {
     let set = new Set(frag.split(';'));
     allBoxes.forEach(b => b.checked = set.has(b.id));
     document.getElementById('filters-details').open = true;
-  } else {
-    resetForm();
   }
 
   updateItems();
@@ -115,7 +118,7 @@ function setup() {
   allBoxes.forEach(b => b.addEventListener('change', () => toggle(b)));
 
   document.getElementById('clear').addEventListener('click', clear);
-  document.getElementById('reset').addEventListener('click', reset);
+  document.getElementById('singles').addEventListener('click', toggleSingles);
 
   window.addEventListener('popstate', useFragment);
 

style/shiny/gallery.css

@@ -19,11 +19,11 @@ body {
   margin: 1em 0 2em 0;
 }
 
-#filters h3, #clear, #reset {
+#filters h3, #clear, #singles {
   margin: 0;
 }
 
-#clear, #reset {
+#clear, #singles {
   font-weight: 400;
   font-size: 110%;
 }
@@ -33,7 +33,7 @@ body {
   grid-area: auto / 1;
 }
 
-#reset {
+#singles {
   text-align: left;
   grid-area: auto / 2;
 }