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;