claro-8.x-1.x-dev/js/nav-tabs.es6.js

/**
 * @file
 * Responsive navigation tabs.
 *
 * This also supports collapsible navigable is the 'is-collapsible' class is
 * added to the main element, and a target element is included.
 */
(($, Drupal) => {
  function init(i, tab) {
    const $tab = $(tab);
    const $target = $tab.find("[data-drupal-nav-tabs-target]");
    const $active = $target.find(".js-active-tab");

    const openMenu = () => {
      $target.toggleClass("is-open");
    };

    const toggleOrder = reset => {
      const current = $active.index();
      const original = $active.data("original-order");

      // Do not change order if already first or if already reset.
      if (original === 0 || reset === (current === original)) {
        return;
      }

      const siblings = {
        first: '[data-original-order="0"]',
        previous: `[data-original-order="${original - 1}"]`
      };

      const $first = $target.find(siblings.first);
      const $previous = $target.find(siblings.previous);

      if (reset && current !== original) {
        $active.insertAfter($previous);
      } else if (!reset && current === original) {
        $active.insertBefore($first);
      }
    };

    const toggleCollapsed = () => {
      if (window.matchMedia("(min-width: 48em)").matches) {
        if ($tab.hasClass("is-horizontal") && !$tab.attr("data-width")) {
          let width = 0;

          $target.find(".js-tabs-link").each((index, value) => {
            width += $(value).outerWidth();
          });
          $tab.attr("data-width", width);
        }

        // Collapse the tabs if the combined width of the tabs is greater than
        // the width of the parent container.
        const isHorizontal = $tab.attr("data-width") <= $tab.outerWidth();
        $tab.toggleClass("is-horizontal", isHorizontal);
        toggleOrder(isHorizontal);
      } else {
        toggleOrder(false);
      }
    };

    $tab.addClass("position-container is-horizontal-enabled");

    $target.find(".js-tab").each((index, element) => {
      const $item = $(element);
      $item.attr("data-original-order", $item.index());
    });

    $tab.on("click.tabs", "[data-drupal-nav-tabs-trigger]", openMenu);
    $(window)
      .on("resize.tabs", Drupal.debounce(toggleCollapsed, 150))
      .trigger("resize.tabs");
  }
  /**
   * Initialise the tabs JS.
   */
  Drupal.behaviors.navTabs = {
    attach(context) {
      $(context)
        .find("[data-drupal-nav-tabs].is-collapsible")
        .once("nav-tabs")
        .each((i, value) => {
          $(value).each(init);
        });
    }
  };
})(jQuery, Drupal);