refactor single.js a bit

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 = `<span id=cw-text>cw: <b>${cw}</b></span>`;
-  } else if (defined(caption)) {
-    mainfig.removeChild(caption);
-  } else if (defined(cw)) {
-    let newCaption = document.createElement('figcaption');
-    newCaption.id = 'cw';
-    newCaption.innerHTML = `<span id=cw-text>cw: <b>${cw}</b></span>`;
-    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  = `<span id=cw-text>cw: <b>${cw}</b></span>`;
+
+  if (cw && caption) {
+    caption.innerHTML = cwText;
+  } else if (caption) {
+    openCW(caption);
+  } else if (cw) {
+    let template = document.createElement('template');
+    template.innerHTML = `
+      <figcaption id=cw aria-role=button tabindex=0>
+        ${cwText}
+      </figcaption>`;
+    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);