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);