gallery/script/single.js

(function() {
'use strict';

let mainfig;
let mainimg;
let mainlink;

let opened = new Set;

function openCW(id, caption, focusLink) {
  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, href, cw) {
  let caption = document.getElementById('cw');
  let cwText  = `<span id=cw-text>cw: <b>${cw}</b></span>`;

  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 = `
      <figcaption id=cw aria-role=button tabindex=0>
        ${cwText}
      </figcaption>`;
    let content = template.content;
    addCWListeners(id, content.getElementById('cw'));
    mainfig.insertBefore(content, mainlink);
    mainlink.tabIndex = -1;
  }

  mainimg.src   = src;
  mainlink.href = href;
}

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

function setup() {
  mainfig  = document.getElementById('mainfig');
  mainimg  = document.getElementById('mainimg');
  mainlink = document.getElementById('mainlink');

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

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

window.addEventListener('DOMContentLoaded', setup);

})();