gallery/script/single.js

(function() {
'use strict';

let mainfig  = document.getElementById('mainfig');
let mainimg  = document.getElementById('mainimg');
let mainlink = document.getElementById('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 = document.getElementById('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;
}

function activateButton(button) {
  setImage(button.value, button.dataset.link, button.dataset.warning);
}

function setup() {
  for (let button of document.querySelectorAll('#alts input')) {
    button.onchange = e => { if (button.checked) activateButton(button); };
  }

  addCWListeners(document.getElementById('cw'));
}

window.addEventListener('DOMContentLoaded', setup);

})();