gallery/script/single.js

100 lines
2.5 KiB
JavaScript
Raw Normal View History

2020-08-03 13:38:14 -04:00
(function() {
2020-07-17 09:51:39 -04:00
'use strict';
2020-07-17 06:29:13 -04:00
2020-08-04 16:55:33 -04:00
let mainfig;
let mainimg;
let mainlink;
2020-08-16 05:31:07 -04:00
let altButtons;
2020-07-21 04:56:55 -04:00
2020-08-04 17:07:27 -04:00
let opened = new Set;
function openCW(id, caption, focusLink) {
2020-08-08 19:19:41 -04:00
if (id) opened.add(id);
2020-08-03 13:38:14 -04:00
mainfig.removeChild(caption);
mainlink.tabIndex = 0;
if (focusLink) mainlink.focus();
2020-07-17 06:29:13 -04:00
}
2020-08-04 17:07:27 -04:00
function addCWListeners(id, caption) {
2020-08-03 13:38:14 -04:00
if (caption) {
2020-08-04 17:07:27 -04:00
caption.addEventListener('click', e => openCW(id, caption));
2020-08-03 13:38:14 -04:00
caption.addEventListener('keyup',
2020-08-04 17:07:27 -04:00
e => { if (e.key == 'Enter') openCW(id, caption, true) });
2020-08-03 13:38:14 -04:00
}
}
2020-07-17 06:29:13 -04:00
2020-08-08 19:19:41 -04:00
function setImage(id, src, width, height, href, cw, firstLoad) {
2020-08-04 13:14:12 -04:00
let caption = document.getElementById('cw');
2020-08-03 13:38:14 -04:00
let cwText = `<span id=cw-text>cw: <b>${cw}</b></span>`;
2020-08-04 17:07:27 -04:00
if (!opened.has(id) && cw && caption) {
2020-08-03 13:38:14 -04:00
caption.innerHTML = cwText;
} else if (caption) {
2020-08-04 17:07:27 -04:00
openCW(id, caption);
} else if (!opened.has(id) && cw) {
2020-08-03 13:38:14 -04:00
let template = document.createElement('template');
template.innerHTML = `
<figcaption id=cw aria-role=button tabindex=0>
${cwText}
</figcaption>`;
let content = template.content;
2020-08-04 17:07:27 -04:00
addCWListeners(id, content.getElementById('cw'));
2020-08-03 13:38:14 -04:00
mainfig.insertBefore(content, mainlink);
mainlink.tabIndex = -1;
2020-07-17 06:29:13 -04:00
}
2020-08-08 19:22:00 -04:00
mainimg.src = src;
mainfig.dataset.width = width;
mainfig.dataset.height = height;
mainlink.href = href;
2020-07-17 06:29:13 -04:00
}
2020-08-08 19:19:41 -04:00
function activateButton(button, doPush = true, firstLoad = false) {
2020-08-04 17:07:27 -04:00
setImage(button.id, button.value,
2020-08-08 19:19:41 -04:00
button.dataset.width, button.dataset.height,
button.dataset.link, button.dataset.warning,
firstLoad);
2020-08-04 19:43:27 -04:00
if (doPush) history.pushState(null, '', '#' + button.id);
}
2020-08-08 19:19:41 -04:00
function useFragment(firstLoad = false) {
2020-08-29 08:28:21 -04:00
let button = altButtons[0];
2020-08-04 19:43:27 -04:00
2020-08-16 05:28:16 -04:00
let frag = location.hash.replace(/^#/, '');
2020-08-04 19:43:27 -04:00
if (frag) {
2020-08-16 05:31:07 -04:00
let selected = document.getElementById(frag);
2020-08-29 08:28:21 -04:00
if (selected) button = selected;
2020-08-04 19:43:27 -04:00
}
2020-08-08 19:19:41 -04:00
let id;
2020-08-04 19:43:27 -04:00
if (button) {
2020-08-08 19:19:41 -04:00
id = button.id;
2020-08-04 19:43:27 -04:00
button.checked = true;
2020-08-08 19:19:41 -04:00
activateButton(button, false, firstLoad);
2020-08-04 19:43:27 -04:00
}
2020-08-08 19:19:41 -04:00
if (firstLoad) addCWListeners(id, document.getElementById('cw'));
2020-07-17 06:29:13 -04:00
}
function setup() {
2020-08-04 16:55:33 -04:00
mainfig = document.getElementById('mainfig');
mainimg = document.getElementById('mainimg');
mainlink = document.getElementById('mainlink');
let alts = document.getElementById('alts');
altButtons = alts ? Array.from(alts.getElementsByTagName('input')) : [];
2020-08-04 16:55:33 -04:00
2020-08-16 05:31:07 -04:00
for (let button of altButtons) {
2020-08-03 13:38:14 -04:00
button.onchange = e => { if (button.checked) activateButton(button); };
2020-07-17 06:29:13 -04:00
}
2020-08-04 19:43:27 -04:00
window.addEventListener('popstate', useFragment);
2020-08-08 19:19:41 -04:00
useFragment(true);
2020-07-17 06:29:13 -04:00
}
2020-08-04 13:14:12 -04:00
window.addEventListener('DOMContentLoaded', setup);
2020-07-21 04:56:55 -04:00
})();