diff --git a/script/single.js b/script/single.js index aeaf9b7..b920374 100644 --- a/script/single.js +++ b/script/single.js @@ -1,58 +1,60 @@ -'use strict'; - (function() { - -function defined(x) { - return x !== null && typeof x !== 'undefined'; -} +'use strict'; function getById(id) { return document.getElementById(id); } -function setImage(src, href, cw) { - let mainfig = getById('mainfig'); - let mainimg = getById('mainimg'); - let mainlink = getById('mainlink'); - let caption = getById('cw'); +let mainfig = getById('mainfig'); +let mainimg = getById('mainimg'); +let mainlink = getById('mainlink'); - if (defined(caption) && defined(cw)) { - caption.innerHTML = `cw: ${cw}`; - } else if (defined(caption)) { - mainfig.removeChild(caption); - } else if (defined(cw)) { - let newCaption = document.createElement('figcaption'); - newCaption.id = 'cw'; - newCaption.innerHTML = `cw: ${cw}`; - newCaption.onclick = openCW; - mainfig.insertBefore(newCaption, mainlink); +function openCW(caption, focusLink) { + mainfig.removeChild(caption); + mainlink.tabIndex = 0; + if (focusLink) mainlink.focus(); +} + +function addCWListeners(caption) { + if (caption) { + caption.addEventListener('click', e => openCW(caption)); + caption.addEventListener('keyup', + e => { if (e.key == 'Enter') openCW(caption, true) }); + } +} + +function setImage(src, href, cw) { + let caption = getById('cw'); + let cwText = `cw: ${cw}`; + + if (cw && caption) { + caption.innerHTML = cwText; + } else if (caption) { + openCW(caption); + } else if (cw) { + let template = document.createElement('template'); + template.innerHTML = ` +
+ ${cwText} +
`; + let content = template.content; + addCWListeners(content.getElementById('cw')); + mainfig.insertBefore(content, mainlink); + mainlink.tabIndex = -1; } - mainimg.src = src; - mainlink.href= href; + mainimg.src = src; + mainlink.href = href; } function activateButton(button) { setImage(button.value, button.dataset.link, button.dataset.warning); } -function openCW() { - let mainfig = getById('mainfig'); - let caption = getById('cw'); - if (defined(caption)) { - mainfig.removeChild(caption); - } -} - function setup() { - for (let button of document.querySelectorAll('#altlist input')) { - button.onchange = function(e) { - if (button.checked) activateButton(button); - }; + for (let button of document.querySelectorAll('#alts input')) { + button.onchange = e => { if (button.checked) activateButton(button); }; } - let caption = getById('cw'); - if (defined(caption)) { - caption.onclick = openCW; - } + addCWListeners(getById('cw')); } window.addEventListener('load', setup);