96 lines
2.4 KiB
JavaScript
96 lines
2.4 KiB
JavaScript
(function() {
|
|
'use strict';
|
|
|
|
let mainfig;
|
|
let mainimg;
|
|
let mainlink;
|
|
|
|
let opened = new Set;
|
|
|
|
function openCW(id, caption, focusLink) {
|
|
if (id) opened.add(id);
|
|
mainfig.removeChild(caption);
|
|
mainlink.tabIndex = 0;
|
|
if (focusLink) mainlink.focus();
|
|
}
|
|
|
|
function addCWListeners(id, caption) {
|
|
if (caption) {
|
|
caption.addEventListener('click', e => openCW(id, caption));
|
|
caption.addEventListener('keyup',
|
|
e => { if (e.key == 'Enter') openCW(id, caption, true) });
|
|
}
|
|
}
|
|
|
|
function setImage(id, src, width, height, href, cw, firstLoad) {
|
|
let caption = document.getElementById('cw');
|
|
let cwText = `<span id=cw-text>cw: <b>${cw}</b></span>`;
|
|
|
|
if (!opened.has(id) && cw && caption) {
|
|
caption.innerHTML = cwText;
|
|
} else if (caption) {
|
|
openCW(id, caption);
|
|
} else if (!opened.has(id) && cw) {
|
|
let template = document.createElement('template');
|
|
template.innerHTML = `
|
|
<figcaption id=cw aria-role=button tabindex=0>
|
|
${cwText}
|
|
</figcaption>`;
|
|
let content = template.content;
|
|
addCWListeners(id, content.getElementById('cw'));
|
|
mainfig.insertBefore(content, mainlink);
|
|
mainlink.tabIndex = -1;
|
|
}
|
|
|
|
mainimg.src = src;
|
|
mainfig.dataset.width = width;
|
|
mainfig.dataset.height = height;
|
|
mainlink.href = href;
|
|
}
|
|
|
|
function activateButton(button, doPush = true, firstLoad = false) {
|
|
setImage(button.id, button.value,
|
|
button.dataset.width, button.dataset.height,
|
|
button.dataset.link, button.dataset.warning,
|
|
firstLoad);
|
|
|
|
if (doPush) history.pushState(null, '', '#' + button.id);
|
|
}
|
|
|
|
function useFragment(firstLoad = false) {
|
|
let button = document.querySelector('#alts input');
|
|
|
|
let frag = location.hash.replace(/^#/, '');
|
|
if (frag) {
|
|
let button0 = document.getElementById(frag);
|
|
if (button0) button = button0;
|
|
}
|
|
|
|
let id;
|
|
|
|
if (button) {
|
|
id = button.id;
|
|
button.checked = true;
|
|
activateButton(button, false, firstLoad);
|
|
}
|
|
|
|
if (firstLoad) addCWListeners(id, document.getElementById('cw'));
|
|
}
|
|
|
|
function setup() {
|
|
mainfig = document.getElementById('mainfig');
|
|
mainimg = document.getElementById('mainimg');
|
|
mainlink = document.getElementById('mainlink');
|
|
|
|
for (let button of document.querySelectorAll('#alts input')) {
|
|
button.onchange = e => { if (button.checked) activateButton(button); };
|
|
}
|
|
|
|
window.addEventListener('popstate', useFragment);
|
|
useFragment(true);
|
|
}
|
|
|
|
window.addEventListener('DOMContentLoaded', setup);
|
|
|
|
})();
|