Gallery: Videos

// TODO: IE11 resizeObserver polyfill
import ResizeObserver from "resize-observer-polyfill";

/*
 * Set shift keydown listener
 * Needed to overcome tab oder/focus issues when reverse tabbing.
 * See listenGalleryScroll()
*/
let shiftKeyDown = false;
function isShiftKeyDown(event) {
  shiftKeyDown = event.shiftKey;
}
document.addEventListener("keydown", isShiftKeyDown);
document.addEventListener("keyup", isShiftKeyDown);

/**
 * Returns the modal outer to contain the new gallery
 * @returns {element} Modal element
 */
const modalOuter = () => {
  const modal = document.createElement("div");
  modal.setAttribute("role", "dialog");
  modal.setAttribute("tabindex", "-1");
  modal.setAttribute("aria-modal", "true");
  modal.setAttribute("aria-label", "Gallery carousel");
  modal.classList.add("uol-gallery-modal");

  return modal;
};

/**
 * HTML fragment for close button
 */
const buttonClose = `
  <button class="uol-button uol-icon uol-icon--icon-only uol-icon--mdiClose uol-gallery-modal__button-close" type="button">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
      <path fill="#000000" fill-rule="nonzero" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path>
    </svg>
    <span class="uol-icon__label">Close</span>
  </button>
`;

/**
 * Create the modal gallery navigation.
 * Returns '' if only 1 item and HTML string otherwise
 * @param {object} items - NodeList of the gallery's initial items
 * @param {number} index - the index of the gallery item to open on
 * @returns {string} HTML for modal navigation
 */
const galleryNavigation = (items, index) => {
  // if there is only one item we do not need navigation
  if (items.length === 1) return ''
  // Otherwise return navigation
  return `
  <div class="uol-gallery-modal__nav-container" aria-hidden="true">
    <button
      tabindex="-1"
      class="
        uol-gallery-modal__button-nav
        uol-gallery-modal__button-nav--prev
        uol-button uol-button--bright uol-icon uol-icon--icon-only uol-icon--mdiArrowLeft"
      type="button" ${index === 0 ? "disabled" : ""}>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
        <path fill="#000000" fill-rule="nonzero" d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"></path>
      </svg>
      <span class="uol-icon__label">Previous</span>
    </button>
    <span class="uol-gallery-modal__progress">
      <span class="uol-gallery-modal__progress__current">${index + 1}</span> /
      <span class="uol-gallery-modal__progress__total">${items.length}</span>
    </span>
    <button tabindex="-1" class="uol-gallery-modal__button-nav uol-gallery-modal__button-nav--next uol-button uol-button--bright uol-icon uol-icon--icon-only uol-icon--mdiArrowRight" type="button" ${
      index === items.length - 1 ? "disabled" : ""
    }>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
        <path fill="#000000" fill-rule="nonzero" d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>
      </svg>
      <span class="uol-icon__label">Next</span>
    </button>
  </div>
  `;
};

/**
 * Create the list of gallery items
 * @param  {Object} items - NodeList of the gallery's initial items
 * @returns {string} - HTML fragment for gallery items list
 */
const galleryItems = (items) => {
  return `
    <ol class="uol-gallery-modal__track">
      ${[...items]
        .map((item, idx) => {
          return galleryItem(item, idx, items.length);
        })
        .join("")}
    </ol>
  `;
};

/**
 * Create the gallery item for inclusion in the list
 * @param  {object} item - item from NodeList of items
 * @param  {number} idx - the index of this item in the Items object
 * @returns {string} - HTML fragment for gallery item
 */
const galleryItem = (item, idx, itemsLength) => {
  const hasInfo = item.querySelector(".uol-gallery__item__content");
  return `
    <li class="uol-gallery-modal__item ${
      hasInfo ? "uol-gallery-modal__item--has-info" : ""
    }" tabindex="0" aria-label="Item ${idx + 1} of ${itemsLength}">
      ${galleryItemInfo(item, idx)}
      ${galleryItemFigure(item, idx)}
    </li>
  `;
};

/**
 * Create the gallery item info for inclusion in the gallery item
 * @param  {object} item - item from NodeList of items
 * @param  {number} idx - the index of this item in the Items object
 * @returns {string} - HTML fragment for gallery item info
 */
const galleryItemInfo = (item, idx) => {
  // Get item title
  const itemTitle = item.querySelector(".uol-gallery__item__title");
  const itemTitleText = itemTitle ? itemTitle.innerText : null;

  // Get item text content
  const itemContent = item.querySelector(".uol-gallery__item__content");
  const itemContentHTML = itemContent ? itemContent.innerHTML : "";

  // If no info content return empty string
  if (!itemContentHTML) return "";
  // Otherwise return the info fragment
  return `
    <div class="uol-gallery-modal__info-container">
      <button aria-expanded="false" class="uol-gallery-modal__button-info uol-button uol-button--bright uol-icon uol-icon--icon-only uol-icon--icon-only--large uol-icon--mdiInformationVariant" type="button">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
          <path fill="#000000" fill-rule="nonzero" d="M13.5,4A1.5,1.5 0 0,0 12,5.5A1.5,1.5 0 0,0 13.5,7A1.5,1.5 0 0,0 15,5.5A1.5,1.5 0 0,0 13.5,4M13.14,8.77C11.95,8.87 8.7,11.46 8.7,11.46C8.5,11.61 8.56,11.6 8.72,11.88C8.88,12.15 8.86,12.17 9.05,12.04C9.25,11.91 9.58,11.7 10.13,11.36C12.25,10 10.47,13.14 9.56,18.43C9.2,21.05 11.56,19.7 12.17,19.3C12.77,18.91 14.38,17.8 14.54,17.69C14.76,17.54 14.6,17.42 14.43,17.17C14.31,17 14.19,17.12 14.19,17.12C13.54,17.55 12.35,18.45 12.19,17.88C12,17.31 13.22,13.4 13.89,10.71C14,10.07 14.3,8.67 13.14,8.77Z"></path>
        </svg>
        <span class="uol-icon__label">Show information</span>
      </button>
      <aside class="uol-gallery-modal__info" tabindex="0" aria-labelledby="item-title-${idx}">
        ${
          itemTitle
            ? `<h2 id="item-title-${idx}" class="uol-gallery-modal__info__title">${itemTitleText}</h2>`
            : ""
        }
        ${itemContentHTML}
      </aside>
    </div>
  `;
};

/**
 * Create the <figure> element the the gallery item
 * @param {object} item - item from NodeList of items
 * @param {number} idx - the index of this item in the Items object
 * @returns {string} - HTML fragment for gallery item figure element
 */
const galleryItemFigure = (item, idx) => {
  // Get image and attributes
  const itemImage = item.querySelector(".uol-gallery__image-container img");
  const imgAlt = itemImage ? itemImage.getAttribute("alt") : "";

  // Set image src to either image data attribute or native src
  let imgSrc
  if ( itemImage.dataset.srcHighQuality ) {
    imgSrc = itemImage.dataset.srcHighQuality;
  } else if (itemImage.getAttribute("src")) {
    imgSrc = itemImage.getAttribute("src");
  }

  // Set image caption if present in item
  const caption = item.querySelector(".uol-gallery__image-caption");
  const captionText = caption ? caption.innerText : null;

  // Set YouTube constants
  const youtubeUrl = item.dataset.youtubeUrl;
  const youtubeTitle = item.dataset.youtubeTitle;
  const youtubeId = item.dataset.youtubeId;

  let figureContent;
  if (youtubeUrl) {
    // As the YouTube iframe breaks the focus trap
    // we include a visually hidden text link so that
    // there is a focusable element after the iframe
    figureContent = `
    <iframe
      class="youtube"
      tabindex="0"
      id="video-${idx}"
      data-youtube-id="${youtubeId}"
      title="YouTube: ${youtubeTitle}"
      src="${youtubeUrl}"
      allow="autoplay"
      loading="lazy"></iframe>
    <a class="uol-gallery-modal__embed-link" href="${youtubeUrl}" target="_blank" rel="noopener">Open <span class="hide-accessible">${youtubeTitle}</span> in new window</a>`;
  } else if (itemImage) {
    figureContent = `<img src="${imgSrc}" alt="${imgAlt}" loading="lazy" />`;
  }
  return `
    <figure class="uol-gallery-modal__figure${
      youtubeUrl ? " uol-gallery-modal__figure--video" : ""
    }">
      <div class="uol-gallery-modal__image-container ${
        youtubeUrl ? "uol-gallery-modal__image-container--video" : ""
      }">
        ${figureContent}
      </div>
        ${
          captionText
            ? `<figcaption class="uol-gallery-modal__image-caption">${captionText}</figcaption>`
            : ""
        }
    </figure>
  `;
};

/**
 * "Close gallery" tasks
 * @param {object} modal - The current modal gallery
 * @param {object} focusedElementBeforeModal - HTML node that triggered the gallery open
 */
const closeGalleryModal = (modal, focusedElementBeforeModal) => {
  galleryPageContent.hidden = false;
  modal.remove();
  focusedElementBeforeModal.focus();
  focusedElementBeforeModal.parentElement.scrollIntoView();
};

/**
 * Container function for listeners
 * @param {object} modal - The current modal gallery
 * @param {object} focusedElementBeforeModal - HTML node that triggered the gallery open
 */
const addListeners = (modal, focusedElementBeforeModal) => {
  const closeButton = modal.querySelector(".uol-gallery-modal__button-close");
  // Listen for close actions
  listenCloseActions(modal, focusedElementBeforeModal, closeButton);
  // Listen for tab keys
  listenTabKey(modal, closeButton);
  // Listen for button navigation
  listenNavButtons(modal);
  // Listen for swipe and scroll navigation
  listenGalleryScroll(modal);
  // Listen to info buttons clicks
  listenInfoButtons(modal);

  listenOrientationChange(modal);
};

/**
 * Listen for close actions. ie Close button press or escape key
 * @param {object} modal
 * @param {object} focusedElementBeforeModal
 * @param {object} closeButton
 */
const listenCloseActions = (modal, focusedElementBeforeModal, closeButton) => {
  closeButton.onclick = () => {
    closeGalleryModal(modal, focusedElementBeforeModal);
  };

  // Handle escape key
  modal.addEventListener("keydown", (event) => {
    if (event.keyCode === 27) {
      closeGalleryModal(modal, focusedElementBeforeModal);
    }
  });
};

/**
 * Listen for Tab key and ensure modal focus trap
 */
const listenTabKey = (modal, closeButton) => {
  const modelItems = modal.querySelectorAll(".uol-gallery-modal__item");
  modal.addEventListener("keydown", (event) => {
    // Handle TAB key to produce a modal trap
    if (event.keyCode === 9) {
      // Find all focusable modal elements
      let focusableElements = modal.querySelectorAll(
        ".uol-gallery-modal__item, .uol-gallery-modal__track button:not([disabled]), .uol-gallery-modal__track a"
      );

      // We're only interested in visible elements so we create a new array containing only those elements where the offsetWidth !== 0
      let visibleFocusableElements = [];
      focusableElements.forEach((element) => {
        if (element.offsetWidth !== 0) {
          visibleFocusableElements.push(element);
        }
      });

      // Define the last focusable element
      const lastElementOfModal =
        visibleFocusableElements[visibleFocusableElements.length - 1];

      // If last item in gallery carousel
      if (document.activeElement === lastElementOfModal) {
        event.preventDefault();
        closeButton.focus();
      }

      // Shift + Tab on close button - return to last slide
      if (event.shiftKey && document.activeElement === closeButton) {
        event.preventDefault();
        modelItems[modelItems.length - 1].focus();
      }
    }
  });
};

/**
 * Listen to navigation buttons and scroll the gallery track to the new item
 * @param {Element} modal
 */
const listenNavButtons = (modal) => {
  const navButtons = modal.querySelectorAll(".uol-gallery-modal__button-nav");
  const navButtonPrev = modal.querySelector(
    ".uol-gallery-modal__button-nav--prev"
  );
  const navButtonNext = modal.querySelector(
    ".uol-gallery-modal__button-nav--next"
  );
  const modalTrack = modal.querySelector(".uol-gallery-modal__track");
  const modelItems = modalTrack.querySelectorAll(".uol-gallery-modal__item");
  const counter = modal.querySelector(".uol-gallery-modal__progress__current");

  navButtons.forEach((navButton) => {
    navButton.onclick = () => {
      let current = parseInt(counter.innerText) - 1;
      if (navButton == navButtonPrev) {
        current--;
      } else if (navButton == navButtonNext) {
        current++;
      }

      // Scroll to item
      modalTrack.scrollLeft = modelItems[current].offsetLeft;

      // Update counter
      counter.innerText = current + 1;

      if (current === 0) {
        navButtonPrev.disabled = true;
        navButtonNext.disabled = false;
      } else if (current === modelItems.length - 1) {
        navButtonNext.disabled = true;
        navButtonPrev.disabled = false;
      } else {
        navButtonNext.disabled = false;
        navButtonPrev.disabled = false;
      }
    };
  });
};

/**
 * Listen for modal track scroll and:
 * - Update current item display
 * - Update previous and next buttons
 * - Pause offscreen YouTube videos
 * @param {Element} modal
 */
const listenGalleryScroll = (modal) => {
  // TODO: Add all listeners to wrapper function and declare these all once
  const modalTrack = modal.querySelector(".uol-gallery-modal__track");
  const modelItems = modalTrack.querySelectorAll(".uol-gallery-modal__item");
  const counter = modal.querySelector(".uol-gallery-modal__progress__current");
  const navButtonPrev = modal.querySelector(
    ".uol-gallery-modal__button-nav--prev"
  );
  const navButtonNext = modal.querySelector(
    ".uol-gallery-modal__button-nav--next"
  );

  let isScrolling = null;
  modalTrack.addEventListener("scroll", () => {
    window.clearTimeout(isScrolling);

    isScrolling = setTimeout(() => {
      modelItems.forEach((item, itemIndex) => {
        let itemLeft = item.getBoundingClientRect().x;
        if (!itemLeft)
          // Handle IE11
          itemLeft = item.getBoundingClientRect().left;

        // If item is more than half in view
        if (itemLeft >= -10 && itemLeft < modalTrack.clientWidth / 2) {
          // Update counter text
          counter.innerText = itemIndex + 1;

          /*
           * Focus on current item unless the shift key is down
           * to overcome tab oder/focus issues when reverse tabbing.
           */
          if (!shiftKeyDown) {
            item.focus();
          }

          // Update buttons on scroll
          if (itemIndex === 0) {
            navButtonPrev.disabled = true;
            navButtonNext.disabled = false;
          } else if (itemIndex === modelItems.length - 1) {
            navButtonNext.disabled = true;
            navButtonPrev.disabled = false;
          } else {
            navButtonNext.disabled = false;
            navButtonPrev.disabled = false;
          }

          // Pause all youtube videos
          pauseYouTubeVideos(modal);
        }
      });
    }, 100);
  });
};

const pauseYouTubeVideos = (modal) => {
  const videoIframes = modal.querySelectorAll('iframe')

  videoIframes.forEach((iframe) => {

    // Check if loaded after lazy by seeing if postMessage is available
    const iframeDoc = iframe.contentWindow;

    // Only post message if iframe accepts postMessage
    // NB: Relies on undocumented YouTube postMessage API.
    // If this stops working we will need to replace with the YouTube iframe API
    if ( iframeDoc.postMessage ) {
      iframe.contentWindow.postMessage(
        JSON.stringify({ event: "command", func: "pauseVideo" }),
        "https://www.youtube-nocookie.com"
      );
    }

  });
}

const listenInfoButtons = (modal) => {
  const infoButtons = modal.querySelectorAll(".uol-gallery-modal__button-info");

  infoButtons.forEach((infoButton) => {
    const infoParent = infoButton.closest(".uol-gallery-modal__info-container");

    infoButton.onclick = () => {
      let expanded =
        infoButton.getAttribute("aria-expanded") === "true" || false;

      infoButton.setAttribute("aria-expanded", !expanded);

      if (!expanded) {
        infoParent.classList.add("uol-gallery-modal__info-container--open");
      } else {
        infoParent.classList.remove("uol-gallery-modal__info-container--open");
      }
    };
  });
};

/**
 * Listen for orientation changes and move the info container
 * to ensure correct tab order
 * @param {*} modal
 */
const listenOrientationChange = modal => {
  // Get the gallery items
  const items = modal.querySelectorAll(".uol-gallery-modal__item");

  // Create the query list.
  const mediaQueryList = window.matchMedia("(orientation: portrait)");

  // Define a callback function for the event listener.
  function handleOrientationChange(mql) {

    items.forEach((item) => {
      // Get the info container
      const itemInfo = item.querySelector(
        ".uol-gallery-modal__info-container"
      );

      // If item contains info container
      if (itemInfo) {
        // if portrait orientation
        if (mql.matches) {
          item.insertAdjacentElement("beforeend", itemInfo);
        } else {
          item.insertAdjacentElement("afterbegin", itemInfo);
        }
      }
    });
  }

  // Run the orientation change handler once.
  handleOrientationChange(mediaQueryList);

  // Add the callback function as a listener to the query list.
  // TODO: IE11 support - revert to addEventListener when we drop is
  // mediaQueryList.addEventListener("change", handleOrientationChange);
  mediaQueryList.addListener(handleOrientationChange);
}

const galleryPageContent = document.querySelector(".site-outer");

/**
 * Add open modal buttons to each item in initial gallery.
 * @param {NodeList} items
 */
const galleryAddButtons = (items) => {
  items.forEach((item, index) => {
    const button = document.createElement("button");
    button.classList.add("uol-gallery__button");

    // Set basic buttonText
    let buttonText = `Open gallery at item ${ index + 1 } of ${items.length}`

    // Enhance buttonText
    // If item has title append title
    if (item.querySelector(".uol-gallery__item__title")) {
      buttonText +=
        ": " + item.querySelector(".uol-gallery__item__title").innerHTML;
    }
    // If item does not have title and is type video append ": Video"
    else if (item.classList.includes("uol-gallery__item--video")) {
      buttonText += ": Video";
    }
    // If item does not have title and is type image append ": Image"
    else if (item.classList.includes("uol-gallery__item--image")) {
      buttonText += ": Image";
    }

    button.innerHTML = `<span class="hide-accessible">${buttonText}</span>`;
    if (index === 4 && items.length > 5) {
      button.classList.add("uol-gallery__button--with-count");
      button.innerHTML =
        button.innerHTML +
        `<span aria-hidden="true">+${items.length - (index + 1)}</span>`;
    } else {
      button.classList.add("uol-button");
      button.classList.add("uol-icon");
      button.classList.add("uol-icon--icon-only");
      button.classList.add("uol-gallery__button--open-item");

      // Check if 'uol-gallery__item--video-play-icon' exists on video item (this can be passed through config)
      const isVideoPlayIcon = item.classList.contains('uol-gallery__item--video-play-icon');
      isVideoPlayIcon ? button.classList.add("uol-icon--mdiPlay") : button.classList.add("uol-icon--mdiArrowExpand");
    }
    button.onclick = (event) => {
      openGalleryModal(items, index, event.target);
    };
    item.querySelector(".uol-gallery__image-container").appendChild(button);
  });
};

/*
 * youtube_parser
 * Get YouTube IDs from URLs
 */
const youtube_parser = (url) => {
  var regExp =
    /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
  var match = url.match(regExp);
  return match && match[7].length == 11 ? match[7] : false;
};

/**
 * Get images for gallery items from YouTube
 * @param {NodeList} items
 */
const galleryVideoImages = (items) => {
  // TODO: Add full oEmbed support
  items.forEach((item) => {
    const videoUrl = item.dataset.video;

    if (videoUrl) {
      const youtubeId = youtube_parser(videoUrl);
      const itemImg = item.querySelector("img");
      itemImg.hidden = true;
      item.setAttribute("aria-busy", true )

      itemImg.onload = () => {
        item.setAttribute("aria-busy", false);
        itemImg.hidden = false;
      };

      if (youtubeId) {
        itemImg.src =
          "https://i.ytimg.com/vi/" + youtubeId + "/maxresdefault.jpg";

        fetch(
          "https://www.youtube.com/oembed?url=http%3A//www.youtube.com/watch?v%3D" +
            youtubeId +
            "&format=json",
          {
            method: "get",
          }
        )
          .then((response) => response.json())
          .then((data) => {
            const youtubeSrc = data.html.match(
              /\<iframe.+src\=(?:\"|\')(.+?)(?:\"|\')(?:.+?)\>/
            );
            const youtubeURL = youtubeSrc[1].replace(
              "youtube.com",
              "youtube-nocookie.com"
            );

            item.dataset.youtubeUrl =
              youtubeURL + "&rel=0&enablejsapi=1";
            item.dataset.youtubeTitle = data.title;
            item.dataset.youtubeId = youtubeId;
          });
      }
    }
  });
};

/**
 * Creates the gallery modal on button click
 * @param {NodeList} items - NodeList of the gallery's initial items
 * @param {number} index - the index of the gallery item to open on
 * @param {Node} focusedElementBeforeModal - HTML node that triggered the gallery open
 */
const openGalleryModal = (items, index, focusedElementBeforeModal) => {

  // Create modal
  const modal = modalOuter();

  // Add close button to modal
  modal.innerHTML += buttonClose;

  // Add gallery items to modal
  modal.innerHTML += galleryItems(items);

  // Add navigation to modal
  modal.innerHTML += galleryNavigation(items, index);

  // Add listeners
  addListeners(modal, focusedElementBeforeModal);

  // Add modal to page
  document.body.appendChild(modal);

  // Scroll to selected item
  const modelItems = modal.querySelectorAll(".uol-gallery-modal__item");
  // Delay scroll to work around iOS Safari rendering issues
  setTimeout(() => {
    modelItems[index].focus();
    modelItems[index].scrollIntoView();
    // Add smooth scroll class for future interactions
    const modalTrack = modal.querySelector(".uol-gallery-modal__track");
    modalTrack.classList.add("uol-gallery-modal__track--smooth");
  }, 10);

  // Resize iframes to keep aspect ratio
  const videoFigures = modal.querySelectorAll(
    ".uol-gallery-modal__figure--video"
  );

  videoFigures.forEach( videoFigure => {
    const container = videoFigure;
    const object = videoFigure.querySelector(
      ".uol-gallery-modal__image-container--video"
    );
    const aspectRatio = 16 / 9;

    function update() {
      const isTall =
        container.clientWidth / container.clientHeight < aspectRatio;

      // if IE 11 TODO: IE11 hack
      if (window.msCrypto) {
        object.style.width = "100%";
        object.style.height = "100%";
      } else {
        object.style.width = isTall ? "100%" : "auto";
        object.style.height = isTall ? "auto" : "100%";
      }
    }

    new ResizeObserver(update).observe(container);
  })

  // Hide other page content
  if (galleryPageContent) {
    galleryPageContent.hidden = true;
  }
};


export const uolGallery = () => {
  const galleries = document.querySelectorAll(".uol-gallery");

  galleries.forEach((gallery) => {
    const items = gallery.querySelectorAll(".uol-gallery__item");

    galleryVideoImages(items);

    galleryAddButtons(items);
  });
};