diff options
Diffstat (limited to 'core/themes/claro/js/nav-tabs.es6.js')
-rw-r--r-- | core/themes/claro/js/nav-tabs.es6.js | 88 |
1 files changed, 0 insertions, 88 deletions
diff --git a/core/themes/claro/js/nav-tabs.es6.js b/core/themes/claro/js/nav-tabs.es6.js deleted file mode 100644 index 1601e788b68..00000000000 --- a/core/themes/claro/js/nav-tabs.es6.js +++ /dev/null @@ -1,88 +0,0 @@ -/** - * @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); |