diff --git a/js/tabs.es6.js b/js/tabs.es6.js index adb9de9..e294e53 100644 --- a/js/tabs.es6.js +++ b/js/tabs.es6.js @@ -3,7 +3,7 @@ const tabs = el.querySelector('.tabs'); const expandedClass = 'is-expanded'; const activeTab = tabs.querySelector('.is-active'); - + const newActiveTab = activeTab.cloneNode(true); function isTabsMobileLayout() { return tabs.querySelector('.tabs__trigger').clientHeight > 0; } @@ -18,13 +18,29 @@ } } + function insertAfter(referenceNode, newNode) { + referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); + } + if (isTabsMobileLayout() && !activeTab.matches('.tabs__tab:first-child')) { - const newActiveTab = activeTab.cloneNode(true); const firstTab = tabs.querySelector('.tabs__tab:first-child'); tabs.insertBefore(newActiveTab, firstTab); tabs.removeChild(activeTab); } + if ( + !isTabsMobileLayout() && + activeTab.getAttribute('data-original-order') > 0 + ) { + const original = activeTab.getAttribute('data-original-order'); + const siblings = { + previous: `[data-original-order="${original - 1}"]`, + }; + const previous = tabs.querySelector(siblings.previous); + insertAfter(previous, newActiveTab); + tabs.removeChild(activeTab); + } + tabs .querySelector('.tabs__trigger') .addEventListener('click', handleTriggerClick); @@ -32,9 +48,31 @@ Drupal.behaviors.tabs = { attach(context) { - context - .querySelectorAll('[data-drupal-nav-tabs]') - .forEach(el => init(el)); + const tabs = document.querySelector('.tabs'); + const items = document.getElementsByClassName('tabs__tab'); + let i = 0; + const tabsChange = Drupal.debounce(() => { + context.querySelectorAll('[data-drupal-nav-tabs]').forEach(el => { + return init(el); + }); + }, 250); + while (i < items.length) { + items[i].setAttribute('data-original-order', i); + i += 1; + } + tabsChange(); + window.addEventListener('resize', () => { + if ( + tabs.querySelector('.is-active').getAttribute('data-original-order') > + 0 + ) { + tabsChange(); + } + tabs + .querySelector('.tabs__trigger') + .setAttribute('aria-expanded', 'false'); + tabs.classList.remove('is-expanded'); + }); }, }; -})(Drupal); +})(Drupal, Drupal.debounce); diff --git a/js/tabs.js b/js/tabs.js index 9dda7c7..c4d6823 100644 --- a/js/tabs.js +++ b/js/tabs.js @@ -10,7 +10,7 @@ var tabs = el.querySelector('.tabs'); var expandedClass = 'is-expanded'; var activeTab = tabs.querySelector('.is-active'); - + var newActiveTab = activeTab.cloneNode(true); function isTabsMobileLayout() { return tabs.querySelector('.tabs__trigger').clientHeight > 0; } @@ -25,21 +25,51 @@ } } + function insertAfter(referenceNode, newNode) { + referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); + } + if (isTabsMobileLayout() && !activeTab.matches('.tabs__tab:first-child')) { - var newActiveTab = activeTab.cloneNode(true); var firstTab = tabs.querySelector('.tabs__tab:first-child'); tabs.insertBefore(newActiveTab, firstTab); tabs.removeChild(activeTab); } + if (!isTabsMobileLayout() && activeTab.getAttribute('data-original-order') > 0) { + var original = activeTab.getAttribute('data-original-order'); + var siblings = { + previous: '[data-original-order="' + (original - 1) + '"]' + }; + var previous = tabs.querySelector(siblings.previous); + insertAfter(previous, newActiveTab); + tabs.removeChild(activeTab); + } + tabs.querySelector('.tabs__trigger').addEventListener('click', handleTriggerClick); } Drupal.behaviors.tabs = { attach: function attach(context) { - context.querySelectorAll('[data-drupal-nav-tabs]').forEach(function (el) { - return init(el); + var tabs = document.querySelector('.tabs'); + var items = document.getElementsByClassName('tabs__tab'); + var i = 0; + var tabsChange = Drupal.debounce(function () { + context.querySelectorAll('[data-drupal-nav-tabs]').forEach(function (el) { + return init(el); + }); + }, 250); + while (i < items.length) { + items[i].setAttribute('data-original-order', i); + i += 1; + } + tabsChange(); + window.addEventListener('resize', function () { + if (tabs.querySelector('.is-active').getAttribute('data-original-order') > 0) { + tabsChange(); + } + tabs.querySelector('.tabs__trigger').setAttribute('aria-expanded', 'false'); + tabs.classList.remove('is-expanded'); }); } }; -})(Drupal); \ No newline at end of file +})(Drupal, Drupal.debounce); \ No newline at end of file diff --git a/olivero.libraries.yml b/olivero.libraries.yml index 2238bbd..1311038 100644 --- a/olivero.libraries.yml +++ b/olivero.libraries.yml @@ -81,6 +81,8 @@ tabs: css/dist/components/tabs.css: {} js: js/tabs.js: {} + dependencies: + - core/drupal.debounce tags: css: