use push/popstate for filters

script/gallery.js

@@ -17,7 +17,7 @@ function fillSets() {
   return [checkedValues(reqBoxes), checkedValues(excBoxes)];
 }
 
-function update() {
+function updateItems() {
   let [reqTags, excTags] = fillSets();
   let anyReq = reqTags.size > 0;
 
@@ -33,6 +33,11 @@ function update() {
   }
 }
 
+function update() {
+  updateItems();
+  history.pushState(null, "", makeFragment());
+}
+
 function converseId(id) {
   if (id.match(/^require/)) {
     return id.replace('require', 'exclude');
@@ -70,13 +75,41 @@ function reset(e) {
 }
 
 
+function makeFragment() {
+  let ids = allBoxes.filter(b => b.checked).map(b => b.id);
+  if (ids.length == 0) {
+    return '#all';
+  } else if (allBoxes.every(b => b.checked == b.defaultChecked)) {
+    return '#';
+  } else {
+    return '#' + ids.join(';');
+  }
+}
+
+function useFragment() {
+  let frag = document.location.hash.replace(/^#/, '');
+
+  if (frag == 'all') {
+    clearForm();
+  } else if (frag) {
+    let set = new Set(frag.split(';'));
+    allBoxes.forEach(b => b.checked = set.has(b.id));
+  } else {
+    resetForm();
+  }
+
+  updateItems();
+}
+
+
 function setup() {
   allBoxes.forEach(b => b.addEventListener('change', () => toggle(b)));
 
   document.getElementById('clear').addEventListener('click', clear);
   document.getElementById('reset').addEventListener('click', reset);
 
-  update();
+  window.addEventListener('popstate', useFragment);
+  useFragment();
 }
 
 window.addEventListener('load', setup);