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(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)
// @todo use a media query event listener https://www.drupal.org/project/drupal/issues/3225621
.on('resize.tabs', Drupal.debounce(toggleCollapsed, 150))
.trigger('resize.tabs');
}
/**
* Initialize the tabs JS.
*/
Drupal.behaviors.navTabs = {
attach(context) {
once(
'nav-tabs',
'[data-drupal-nav-tabs].is-collapsible',
context,
).forEach(init);
},
};
})(jQuery, Drupal);
|
