91 lines
2.7 KiB
JavaScript
91 lines
2.7 KiB
JavaScript
|
/**
|
||
|
|
* @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');
|
||
|
|
$target.find('button').attr('aria-expanded', $target.hasClass('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 = ({ matches }) => {
|
||
|
|
if (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);
|
||
|
|
$tab.find('button').attr('aria-expanded', null);
|
||
|
|
toggleOrder(isHorizontal);
|
||
|
|
} else {
|
||
|
|
toggleOrder(false);
|
||
|
|
$tab.find('button').attr('aria-expanded', '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);
|
||
|
|
const mql = window.matchMedia('(min-width: 48em)');
|
||
|
|
mql.addEventListener('change', toggleCollapsed);
|
||
|
|
toggleCollapsed(mql);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Initialize the tabs JS.
|
||
|
|
*/
|
||
|
|
Drupal.behaviors.navTabs = {
|
||
|
|
attach(context) {
|
||
|
|
once(
|
||
|
|
'nav-tabs',
|
||
|
|
'[data-drupal-nav-tabs].is-collapsible',
|
||
|
|
context,
|
||
|
|
).forEach(init);
|
||
|
|
},
|
||
|
|
};
|
||
|
|
})(jQuery, Drupal);
|