41 lines
1.2 KiB
JavaScript
41 lines
1.2 KiB
JavaScript
(Drupal => {
|
|
function init(el) {
|
|
const tabs = el.querySelector('.tabs');
|
|
const expandedClass = 'is-expanded';
|
|
const activeTab = tabs.querySelector('.is-active');
|
|
|
|
function isTabsMobileLayout() {
|
|
return tabs.querySelector('.tabs__trigger').clientHeight > 0;
|
|
}
|
|
|
|
function handleTriggerClick(e) {
|
|
if (!tabs.classList.contains(expandedClass)) {
|
|
e.currentTarget.setAttribute('aria-expanded', 'true');
|
|
tabs.classList.add(expandedClass);
|
|
} else {
|
|
e.currentTarget.setAttribute('aria-expanded', 'false');
|
|
tabs.classList.remove(expandedClass);
|
|
}
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
tabs
|
|
.querySelector('.tabs__trigger')
|
|
.addEventListener('click', handleTriggerClick);
|
|
}
|
|
|
|
Drupal.behaviors.tabs = {
|
|
attach(context) {
|
|
context
|
|
.querySelectorAll('[data-drupal-nav-tabs]')
|
|
.forEach(el => init(el));
|
|
},
|
|
};
|
|
})(Drupal);
|