From d294a094f8145a630d1fe8dcf15634185ad3c309 Mon Sep 17 00:00:00 2001
From: Rhiannon Morris <rhi@rhiannon.website>
Date: Thu, 17 Sep 2020 19:13:32 +0200
Subject: [PATCH] replace reset link with hide single-use tags

---
 make-pages/GalleryPage.hs |  2 +-
 script/gallery.js         | 25 ++++++++++++++-----------
 style/shiny/gallery.css   |  6 +++---
 3 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/make-pages/GalleryPage.hs b/make-pages/GalleryPage.hs
index d6b1e0f..1839c6a 100644
--- a/make-pages/GalleryPage.hs
+++ b/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>
diff --git a/script/gallery.js b/script/gallery.js
index d9cadbd..e06ba8d 100644
--- a/script/gallery.js
+++ b/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() {
-  allBoxes.forEach(b => b.checked = b.defaultChecked);
-}
+function toggleSingles(e) {
+  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);
 
diff --git a/style/shiny/gallery.css b/style/shiny/gallery.css
index 78707c0..659d3fd 100644
--- a/style/shiny/gallery.css
+++ b/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;
 }