diff --git a/make-pages/GalleryPage.hs b/make-pages/GalleryPage.hs
index c440d3f..8049773 100644
--- a/make-pages/GalleryPage.hs
+++ b/make-pages/GalleryPage.hs
@@ -69,8 +69,12 @@ make' root (GalleryInfo {title, desc, prefix, filters, hidden}) infos = [b|@0
$10.excludeFilters
- clear
- toggle single-use tags
+
diff --git a/script/gallery.js b/script/gallery.js
index 8d106f3..9a27896 100644
--- a/script/gallery.js
+++ b/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);
-
})();
diff --git a/style/shiny/gallery.css b/style/shiny/gallery.css
index 702313b..1f4975d 100644
--- a/style/shiny/gallery.css
+++ b/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;