(function() { 'use strict'; let mainfig; let mainimg; let mainlink; let altButtons; 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 = `cw: ${cw}`; 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 = `
${cwText}
`; 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 = altButtons[0]; let frag = location.hash.replace(/^#/, ''); if (frag) { let selected = document.getElementById(frag); if (selected) button = selected; } 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'); let alts = document.getElementById('alts'); altButtons = alts ? Array.from(alts.getElementsByTagName('input')) : []; for (let button of altButtons) { button.onchange = e => { if (button.checked) activateButton(button); }; } window.addEventListener('popstate', useFragment); useFragment(true); } window.addEventListener('DOMContentLoaded', setup); })();