wordpress-theme-aksrt/assets/js/core/nav.js

/**
 * AKSRT nav chrome — zibll contract (body.mobile-navbar-show, folding, chevron).
 * Drawer open/close is handled by aksrt-runtime [data-toggle-class].
 */
(function () {
  "use strict";

  function appendChevrons() {
    document.querySelectorAll(".navbar-top li.menu-item-has-children > a").forEach(function (a) {
      if (a.querySelector(".fa-angle-down")) return;
      var i = document.createElement("i");
      i.className = "fa fa-angle-down ml6";
      i.setAttribute("aria-hidden", "true");
      a.appendChild(i);
    });
  }

  function navFolding() {
    var collapse = document.querySelector(".navbar-collapse");
    var nav = document.querySelector(".navbar-nav");
    if (!collapse || !nav) return;
    if (window.innerWidth <= 996) return;

    var header = document.querySelector(".header");
    if (header && header.offsetHeight <= 81) return;

    // Already folded?
    if (nav.querySelector("li.aksrt-nav-more")) return;

    var surplus = collapse.clientWidth;
    Array.prototype.forEach.call(collapse.children, function (child) {
      if (!child.classList.contains("navbar-nav")) {
        surplus -= child.offsetWidth || 0;
      }
    });
    var headerEl = document.querySelector(".navbar-header");
    surplus -= (headerEl ? headerEl.offsetWidth : 0) + 40;

    var navsWidth = 66;
    var foldItems = [];
    Array.prototype.forEach.call(nav.children, function (li) {
      navsWidth += li.offsetWidth || 0;
      if (navsWidth > surplus) {
        foldItems.push(li);
      }
    });
    if (!foldItems.length) return;

    var more = document.createElement("li");
    more.className = "menu-item menu-item-has-children aksrt-nav-more";
    more.innerHTML =
      '<a href="javascript:void(0);"><i class="fas fa-bars" aria-hidden="true"></i></a><ul class="sub-menu"></ul>';
    var sub = more.querySelector(".sub-menu");
    foldItems.forEach(function (li) {
      sub.appendChild(li);
    });
    nav.appendChild(more);
  }

  function bindDrawerA11y() {
    // Esc closes mobile nav via body class.
    document.addEventListener("keydown", function (e) {
      if (e.key === "Escape" && document.body.classList.contains("mobile-navbar-show")) {
        document.body.classList.remove("mobile-navbar-show");
      }
    });
  }

  function init() {
    appendChevrons();
    try {
      navFolding();
    } catch (err) {
      // ignore fold failures
    }
    bindDrawerA11y();
  }

  if (window.AksrtFrontend && typeof window.AksrtFrontend.register === "function") {
    window.AksrtFrontend.register("aksrt-nav-chrome", function () {
      init();
    });
  } else if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init);
  } else {
    init();
  }
})();