Simple image gallery

image-gallery.js

"use strict";

/*
Single file zero-dependency image gallery
*/

function el(tag, cls) {
  let e = document.createElement(tag);
  if(cls) {
    e.setAttribute("class", cls);
  }
  return e;
}

export function showGalleryInShadowDom(images, initialIndex) {
  let shadowHost = el("div");
  document.body.appendChild(shadowHost);
  let shadowEl = shadowHost.attachShadow({ mode: "open" });

  function onClose() {
    shadowHost.remove();
  }
  let gal = createGallery(images, onClose, initialIndex);
  let style = el("style");
  style.innerHTML = css;
  shadowEl.appendChild(style);
  shadowEl.appendChild(gal);
}

export function createGallery(images, onClose, initialIndex) {
  let container = el("div", "image-gallery");
  let centerContainer = el("div", "image-gallery-center");

  let photoList = el("div", "photo-list");
  let photoListItems = [];
  for(let image of images) {
    let photoItem = el("div", "photo");
    let photoImage = el("img");
    let caption = el("div", "caption");
    photoImage.src = image.src;
    caption.innerText = image.caption;
    photoItem.appendChild(photoImage);
    photoItem.appendChild(caption);
    photoList.appendChild(photoItem);
    photoListItems.push(photoItem);
  }

  let nextParent = el("div", "next");
  let nextButton = el("button");
  nextParent.appendChild(nextButton);
  nextButton.innerText = "Next";

  let prevParent = el("div", "prev");
  let prevButton = el("button");
  prevParent.appendChild(prevButton);
  prevButton.innerText = "Prev";

  let closeParent = el("div", "close");
  let closeButton = el("button");
  closeParent.appendChild(closeButton);
  closeButton.innerText = "Close";

  centerContainer.appendChild(closeParent);
  centerContainer.appendChild(photoList);
  container.appendChild(prevParent);
  container.appendChild(centerContainer);
  container.appendChild(nextParent);

  let currentIndex = initialIndex || 0;

  function changeCurrent(delta) {
    currentIndex = (currentIndex + delta + images.length) % images.length;
    photoListItems.forEach((item, index) => {
      item.classList.toggle("current", index == currentIndex);
    });
  }
  changeCurrent(0);

  nextButton.addEventListener("click", () => changeCurrent(1));
  prevButton.addEventListener("click", () => changeCurrent(-1));
  closeButton.addEventListener("click", () => {
    container.remove();
    onClose?.();
  });

  return container;
}

const css = `
:host {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
}
.image-gallery {
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  color: white;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.image-gallery-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.image-gallery .photo {
  display: none;
}

.image-gallery .photo.current {
  display: block;
}

.next, .prev {
  width: 3em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.caption {
  height: 2em;
}

.close {
  height: 2em;
}

img {
  max-width: 100%;
  max-height: calc(100vh - 4em);
}

.caption {
  text-align: center;
}

.close {
  text-align: right;
}

.image-gallery button {
  appearance: none;
  background: rgba(0,0,0,0.3);
  color: white;
  border: none;
  padding: 0.5em;
}
`;