gallery/script/gallery.js

119 lines
2.6 KiB
JavaScript
Raw Normal View History

2020-08-03 17:11:15 -04:00
(function() {
'use strict';
let items = Array.from(document.querySelectorAll('.item.post'));
let reqBoxes = Array.from(document.querySelectorAll('#require input'));
let excBoxes = Array.from(document.querySelectorAll('#exclude input'));
let allBoxes = [...reqBoxes, ...excBoxes];
let tags = new Map(items.map(item => [item, item.dataset.tags.split(';')]));
function fillSets() {
let checkedValues = boxes =>
new Set(boxes.filter(b => b.checked).map(b => b.value));
return [checkedValues(reqBoxes), checkedValues(excBoxes)];
}
2020-08-03 20:20:57 -04:00
function updateItems() {
2020-08-03 17:11:15 -04:00
let [reqTags, excTags] = fillSets();
let anyReq = reqTags.size > 0;
for (let item of items) {
let req = tags.get(item).some(x => reqTags.has(x));
let exc = tags.get(item).some(x => excTags.has(x));
if ((req || !anyReq) && !exc) {
item.classList.remove('hidden');
} else {
item.classList.add('hidden');
}
}
}
2020-08-03 20:20:57 -04:00
function update() {
updateItems();
history.pushState(null, "", makeFragment());
}
2020-08-03 17:11:15 -04:00
function converseId(id) {
if (id.match(/^require/)) {
return id.replace('require', 'exclude');
} else {
return id.replace('exclude', 'require');
}
}
function toggle(checkbox, thisSet, thatSet) {
if (checkbox.checked)
document.getElementById(converseId(checkbox.id)).checked = false;
update();
}
function clearForm() {
allBoxes.forEach(b => b.checked = false);
}
function clear(e) {
clearForm();
update();
if (e) e.preventDefault();
}
function resetForm() {
2020-08-04 12:22:16 -04:00
allBoxes.forEach(b => b.checked = b.defaultChecked);
2020-08-03 17:11:15 -04:00
}
function reset(e) {
resetForm();
update();
if (e) e.preventDefault();
}
2020-08-03 20:20:57 -04:00
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(firstLoad) {
2020-08-03 20:20:57 -04:00
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));
if (firstLoad) document.getElementById('filters-details').open = true;
2020-08-03 20:20:57 -04:00
} else {
resetForm();
}
updateItems();
}
2020-08-03 17:11:15 -04:00
function setup() {
allBoxes.forEach(b => b.addEventListener('change', () => toggle(b)));
document.getElementById('clear').addEventListener('click', clear);
document.getElementById('reset').addEventListener('click', reset);
window.addEventListener('popstate', () => useFragment(false));
useFragment(true);
2020-08-03 17:11:15 -04:00
}
window.addEventListener('load', setup);
})();