summaryrefslogtreecommitdiffstatshomepage
path: root/core/themes/claro/js/nav-tabs.es6.js
diff options
context:
space:
mode:
Diffstat (limited to 'core/themes/claro/js/nav-tabs.es6.js')
-rw-r--r--core/themes/claro/js/nav-tabs.es6.js88
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);