| 1 |
(function () { |
| 2 |
'use strict'; |
| 3 |
|
| 4 |
const initTabs = (root) => { |
| 5 |
const wrapper = root.closest('.ka-woo-custom-tabs--tabs'); |
| 6 |
if (!wrapper) { |
| 7 |
return; |
| 8 |
} |
| 9 |
|
| 10 |
const tabs = wrapper.querySelectorAll('.ka-woo-custom-tabs__tab'); |
| 11 |
const panels = wrapper.querySelectorAll('.ka-woo-custom-tabs__panel'); |
| 12 |
|
| 13 |
const setActive = (key) => { |
| 14 |
tabs.forEach((btn) => btn.classList.toggle('is-active', btn.dataset.tab === key)); |
| 15 |
panels.forEach((panel) => { |
| 16 |
const active = panel.dataset.tab === key; |
| 17 |
panel.classList.toggle('is-active', active); |
| 18 |
}); |
| 19 |
}; |
| 20 |
|
| 21 |
tabs.forEach((btn) => { |
| 22 |
btn.addEventListener('click', () => setActive(btn.dataset.tab)); |
| 23 |
}); |
| 24 |
}; |
| 25 |
|
| 26 |
const initAccordion = (wrapper) => { |
| 27 |
const toggles = wrapper.querySelectorAll('.ka-woo-custom-tabs__accordion-toggle'); |
| 28 |
|
| 29 |
toggles.forEach((btn) => { |
| 30 |
btn.addEventListener('click', () => { |
| 31 |
const body = btn.nextElementSibling; |
| 32 |
const isOpen = btn.classList.contains('is-active'); |
| 33 |
if (isOpen) { |
| 34 |
btn.classList.remove('is-active'); |
| 35 |
if (body) { |
| 36 |
body.style.display = 'none'; |
| 37 |
} |
| 38 |
} else { |
| 39 |
btn.classList.add('is-active'); |
| 40 |
if (body) { |
| 41 |
body.style.display = 'block'; |
| 42 |
} |
| 43 |
} |
| 44 |
}); |
| 45 |
}); |
| 46 |
}; |
| 47 |
|
| 48 |
const bootstrap = (scope) => { |
| 49 |
const root = scope || document; |
| 50 |
root.querySelectorAll('.ka-woo-custom-tabs--tabs').forEach((wrap) => initTabs(wrap)); |
| 51 |
root.querySelectorAll('.ka-woo-custom-tabs--accordion').forEach(initAccordion); |
| 52 |
}; |
| 53 |
|
| 54 |
document.addEventListener('DOMContentLoaded', () => bootstrap(document)); |
| 55 |
|
| 56 |
if (window.elementorFrontend && window.elementorFrontend.hooks) { |
| 57 |
window.elementorFrontend.hooks.addAction('frontend/element_ready/woo_product_custom_tabs.default', (scope) => { |
| 58 |
bootstrap(scope[0] || scope); |
| 59 |
}); |
| 60 |
} |
| 61 |
})(); |
| 62 |
|
| 63 |
|
| 64 |
|
| 65 |
|
| 66 |
|
| 67 |
|
