website/assets/js/asciidoctor-tabs.js

(function () {
  /*! Asciidoctor Tabs | Copyright (c) 2018-present Dan Allen | MIT License */
  "use strict";

  var config = (document.currentScript || {}).dataset || {};
  var forEach = Array.prototype.forEach;

  init(document.querySelectorAll(".tabs"));

  function init(tabsBlocks) {
    if (!tabsBlocks.length) return;
    forEach.call(tabsBlocks, function (tabs) {
      var syncIds = tabs.classList.contains("is-sync") ? {} : undefined;
      var tablist = tabs.querySelector(".tablist ul");
      tablist.setAttribute("role", "tablist");
      var initial;
      forEach.call(tablist.querySelectorAll("li"), function (tab, idx) {
        tab.setAttribute("role", (tab.className = "tab")); // NOTE converter may not have set class on li
        var id, anchor, syncId;
        if (!(id = tab.id)) {
          if (!(anchor = tab.querySelector("a[id]"))) return; // invalid state
          tab.id = id = anchor.parentNode.removeChild(anchor).id;
        }
        var panel = tabs.querySelector(
          '.tabpanel[aria-labelledby~="' + id + '"]'
        );
        if (!panel) return; // invalid state
        tab.tabIndex = -1;
        syncIds &&
          ((syncId = tab.textContent.trim()) in syncIds
            ? (syncId = undefined)
            : true) &&
          (syncIds[(tab.dataset.syncId = syncId)] = tab);
        idx || ((initial = { tab: tab, panel: panel }) && syncIds)
          ? toggleHidden(panel, true)
          : toggleSelected(tab, true);
        tab.setAttribute("aria-controls", panel.id);
        panel.setAttribute("role", "tabpanel");
        forEach.call(
          panel.querySelectorAll("table.tableblock"),
          function (table) {
            var container = Object.assign(document.createElement("div"), {
              className: "tablecontainer",
            });
            table.parentNode.insertBefore(container, table).appendChild(table);
          }
        );
        var onClick = syncId === undefined ? activateTab : activateTabSync;
        tab.addEventListener(
          "click",
          onClick.bind({ tabs: tabs, tab: tab, panel: panel })
        );
      });
      if (syncIds && initial) {
        var syncGroupId;
        for (
          var i = 0, lst = tabs.classList, len = lst.length, className;
          i !== len;
          i++
        ) {
          if (!(className = lst.item(i)).startsWith("data-sync-group-id="))
            continue;
          tabs.dataset.syncGroupId = syncGroupId =
            lst.remove(className) ||
            className.slice(19).replace(/\u00a0/g, " ");
          break;
        }
        if (syncGroupId === undefined)
          tabs.dataset.syncGroupId = syncGroupId = Object.keys(syncIds)
            .sort()
            .join("|");
        var preferredSyncId =
          "syncStorageKey" in config &&
          window[(config.syncStorageScope || "local") + "Storage"].getItem(
            config.syncStorageKey + "-" + syncGroupId
          );
        var tab = preferredSyncId && syncIds[preferredSyncId];
        tab &&
          Object.assign(initial, {
            tab: tab,
            panel: document.getElementById(tab.getAttribute("aria-controls")),
          });
        toggleSelected(initial.tab, true) || toggleHidden(initial.panel, false);
      }
    });
    onHashChange();
    toggleClassOnEach(tabsBlocks, "is-loading", "remove");
    window.setTimeout(
      toggleClassOnEach.bind(null, tabsBlocks, "is-loaded", "add"),
      0
    );
    window.addEventListener("hashchange", onHashChange);
  }

  function activateTab(e) {
    var tab = this.tab;
    var tabs = this.tabs || (this.tabs = tab.closest(".tabs"));
    var panel =
      this.panel ||
      (this.panel = document.getElementById(tab.getAttribute("aria-controls")));
    forEach.call(tabs.querySelectorAll(".tablist .tab"), function (el) {
      toggleSelected(el, el === tab);
    });
    forEach.call(tabs.querySelectorAll(".tabpanel"), function (el) {
      toggleHidden(el, el !== panel);
    });
    if (
      !this.isSync &&
      "syncStorageKey" in config &&
      "syncGroupId" in tabs.dataset
    ) {
      var storageKey = config.syncStorageKey + "-" + tabs.dataset.syncGroupId;
      window[(config.syncStorageScope || "local") + "Storage"].setItem(
        storageKey,
        tab.dataset.syncId
      );
    }
    if (!e) return;
    var loc = window.location;
    var hashIdx = loc.hash ? loc.href.indexOf("#") : -1;
    if (~hashIdx)
      window.history.replaceState(null, "", loc.href.slice(0, hashIdx));
    e.preventDefault();
  }

  function activateTabSync(e) {
    activateTab.call(this, e);
    var thisTabs = this.tabs;
    var thisTab = this.tab;
    var initialY = thisTabs.getBoundingClientRect().y;
    forEach.call(document.querySelectorAll(".tabs"), function (tabs) {
      if (
        tabs === thisTabs ||
        tabs.dataset.syncGroupId !== thisTabs.dataset.syncGroupId
      )
        return;
      forEach.call(tabs.querySelectorAll(".tablist .tab"), function (tab) {
        if (tab.dataset.syncId === thisTab.dataset.syncId)
          activateTab.call({ tabs: tabs, tab: tab, isSync: true });
      });
    });
    var shiftedBy = thisTabs.getBoundingClientRect().y - initialY;
    if (shiftedBy && (shiftedBy = Math.round(shiftedBy)))
      window.scrollBy({ top: shiftedBy, behavior: "instant" });
  }

  function toggleClassOnEach(elements, className, method) {
    forEach.call(elements, function (el) {
      el.classList[method](className);
    });
  }

  function toggleHidden(el, state) {
    el.classList[(el.hidden = state) ? "add" : "remove"]("is-hidden");
  }

  function toggleSelected(el, state) {
    el.setAttribute("aria-selected", "" + state);
    el.classList[state ? "add" : "remove"]("is-selected");
    el.tabIndex = state ? 0 : -1;
  }

  function onHashChange() {
    var id = window.location.hash.slice(1);
    if (!id) return;
    var tab = document.getElementById(
      ~id.indexOf("%") ? decodeURIComponent(id) : id
    );
    if (!(tab && tab.classList.contains("tab"))) return;
    "syncId" in tab.dataset
      ? activateTabSync.call({ tab: tab })
      : activateTab.call({ tab: tab });
  }
})();