kraken.js

---
# Front matter comment to make sure jekyll process liquid tags
---


// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var kraken = {
  loadYoutubeVideo: function(element) {
    var id = element.getAttribute('data-video-id');

    dataLayer.push({
      'video-id': id,
      'event': 'delayed-video-play'
    });

    var player = new YT.Player(element, {
      videoId: id,
      playerVars: { 'autoplay': 1}
    });
  },

  addLinksToTags: function(tag_type) {
    let elements = document.getElementsByTagName(tag_type);
    for (let element of elements) {
      if (element.hasAttribute("id")) {
        let id = element.id;

        let iElem = document.createElement('i');
        iElem.classList.add('fa');
        iElem.classList.add('fa-link');

        let aElem = document.createElement('a');
        aElem.classList.add('anchor-link');
        aElem.href = '#' + id;

        element.appendChild(aElem).appendChild(iElem);
      }
    }
  },

  addLinksToHeaders: function() {
    kraken.addLinksToTags('h1');
    kraken.addLinksToTags('h2');
    kraken.addLinksToTags('h3');
  },

  updateTabs: function() {
    let targetId = window.location.hash.substring(1);
    if (targetId.startsWith('tab-id')) {
      // Bootstrap 5 Tab API
      var tabEl = document.querySelector('a[href="#' + targetId + '"]');
      if (tabEl && typeof bootstrap !== 'undefined') {
        var tab = new bootstrap.Tab(tabEl);
        tab.show();
      }

      var tabContent = document.getElementById(targetId);
      if (tabContent) {
        var topOfTabs = tabContent.parentElement.parentElement;
        topOfTabs.scrollIntoView();
      }
    }
  },

  poplinkShowPopup: function(id, popupKey) {
    var container = document.getElementById("poplinkcontainer");
    if (container == null) {
      // Prepend without rebuilding the body: reassigning document.body.innerHTML
      // would re-parse the whole page and orphan existing event listeners,
      // IntersectionObservers and media element state.
      document.body.insertAdjacentHTML('afterbegin', '<div id="poplinkcontainer" class="poplinkcontainer"></div>');
      container = document.getElementById("poplinkcontainer");
    }

    var content = kraken.poplinkData[popupKey];
    container.innerHTML = content;
    container.setAttribute("data-origin", id);

    var anchorBox = document.getElementById(id).getBoundingClientRect();
    var containerBox = container.getBoundingClientRect();

    var viewportElement = document.documentElement;
    var scrollLeft = viewportElement.scrollLeft;
    var scrollTop = viewportElement.scrollTop;

    var left = anchorBox.left + scrollLeft - containerBox.width / 2 + anchorBox.width / 2;
    var top = anchorBox.top + scrollTop - containerBox.height;

    container.style.left = left + 'px';
    container.style.top = top + 'px';

    container.classList.add("poplinkShow");

    // Return false to terminate event propagation and prevent the link action
    return false;
  },

  // Listener that closes the poplink window when clicking outside it
  poplinkCloseClickListener: function(event) {
    const target = event.target;

    // Check if the target is part of the popup
    const popup = target.closest('#poplinkcontainer');
    if (popup == null) {
      var container = document.getElementById("poplinkcontainer");
      if (container) {
        // Only close if we did not click the link that opened the popup
        const originId = container.getAttribute("data-origin");
        if (originId != target.id) {
          container.classList.remove("poplinkShow");
        }
      }
    }
  },

  poplinkCloseKeyListener: function(event) {
    if (event.key === "Escape") {
      var container = document.getElementById("poplinkcontainer");
      if (container) {
        container.classList.remove("poplinkShow");
      }
    }
  },

  // poplinkData will contain a map of all poplinks, populated through the poplink liquid plugin
  poplinkData: {% poplink_js %},
};

window.addEventListener('click', kraken.poplinkCloseClickListener);
window.addEventListener('keydown', kraken.poplinkCloseKeyListener);
document.addEventListener("DOMContentLoaded", kraken.addLinksToHeaders);
document.addEventListener("readystatechange", kraken.updateTabs);

// Re-scroll to the hash after all images have loaded, since images loading
// after DOMContentLoaded push content down and cause anchor targets to be missed.
window.addEventListener('load', function() {
  if (window.location.hash) {
    var target = document.querySelector(window.location.hash);
    if (target) {
      target.scrollIntoView({ behavior: 'instant', block: 'start' });
    }
  }
});