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

js/nav-tabs.es6.js
claro
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
/**
 * @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);

Главная | Обратная связь

drupal hosting | друпал хостинг | it patrol .inc