| 1 |
(function () { |
| 2 |
'use strict'; |
| 3 |
|
| 4 |
const errorMarkup = (wrapper) => { |
| 5 |
const text = wrapper.dataset.errorText || 'Could not load content.'; |
| 6 |
const node = document.createElement('div'); |
| 7 |
node.textContent = text; |
| 8 |
return '<div class="ka-woo-tabs__error">' + node.innerHTML + '</div>'; |
| 9 |
}; |
| 10 |
|
| 11 |
const loadTabContent = async (wrapper, key) => { |
| 12 |
const ajax = wrapper.dataset.ajax === 'yes'; |
| 13 |
if (!ajax) { |
| 14 |
return true; |
| 15 |
} |
| 16 |
|
| 17 |
const panel = wrapper.querySelector('.ka-woo-tabs__panel[data-tab="' + key + '"]'); |
| 18 |
if (!panel || !panel.querySelector('.ka-woo-tabs__placeholder')) { |
| 19 |
return true; |
| 20 |
} |
| 21 |
|
| 22 |
// In accordion layout the placeholder sits inside the body, below the |
| 23 |
// header button - replacing the panel's own innerHTML would delete the |
| 24 |
// header the visitor just clicked. |
| 25 |
const target = panel.querySelector('.ka-woo-tabs__accordion-body') || panel; |
| 26 |
|
| 27 |
const ajaxUrl = wrapper.dataset.ajaxUrl; |
| 28 |
const nonce = wrapper.dataset.nonce; |
| 29 |
const productId = wrapper.dataset.productId; |
| 30 |
|
| 31 |
if (!ajaxUrl || !nonce || !productId) { |
| 32 |
return true; |
| 33 |
} |
| 34 |
|
| 35 |
panel.classList.add('is-loading'); |
| 36 |
|
| 37 |
const formData = new FormData(); |
| 38 |
formData.append('action', 'king_addons_render_product_tab'); |
| 39 |
formData.append('nonce', nonce); |
| 40 |
formData.append('product_id', productId); |
| 41 |
formData.append('tab_key', key); |
| 42 |
|
| 43 |
try { |
| 44 |
const response = await fetch(ajaxUrl, { |
| 45 |
method: 'POST', |
| 46 |
credentials: 'same-origin', |
| 47 |
body: formData, |
| 48 |
}); |
| 49 |
|
| 50 |
const result = await response.json(); |
| 51 |
if (result && result.success && result.data && typeof result.data.html === 'string') { |
| 52 |
target.innerHTML = result.data.html; |
| 53 |
panel.dataset.loaded = 'yes'; |
| 54 |
} else { |
| 55 |
target.innerHTML = errorMarkup(wrapper); |
| 56 |
} |
| 57 |
} catch (e) { |
| 58 |
target.innerHTML = errorMarkup(wrapper); |
| 59 |
} |
| 60 |
|
| 61 |
panel.classList.remove('is-loading'); |
| 62 |
return true; |
| 63 |
}; |
| 64 |
|
| 65 |
const initTabs = (wrapper) => { |
| 66 |
const tabs = wrapper.querySelectorAll('.ka-woo-tabs__tab'); |
| 67 |
const panels = wrapper.querySelectorAll('.ka-woo-tabs__panel'); |
| 68 |
const accordions = wrapper.querySelectorAll('.ka-woo-tabs__accordion-toggle'); |
| 69 |
|
| 70 |
const setActive = (key) => { |
| 71 |
tabs.forEach((btn) => { |
| 72 |
const active = btn.dataset.tab === key; |
| 73 |
btn.classList.toggle('is-active', active); |
| 74 |
btn.setAttribute('aria-selected', active ? 'true' : 'false'); |
| 75 |
}); |
| 76 |
panels.forEach((panel) => { |
| 77 |
const active = panel.dataset.tab === key; |
| 78 |
panel.classList.toggle('is-active', active); |
| 79 |
const toggle = panel.querySelector('.ka-woo-tabs__accordion-toggle'); |
| 80 |
if (toggle) { |
| 81 |
toggle.setAttribute('aria-expanded', active ? 'true' : 'false'); |
| 82 |
} |
| 83 |
}); |
| 84 |
}; |
| 85 |
|
| 86 |
const handleSwitch = async (key) => { |
| 87 |
const panel = wrapper.querySelector('.ka-woo-tabs__panel[data-tab="' + key + '"]'); |
| 88 |
const needsLoad = panel && panel.querySelector('.ka-woo-tabs__placeholder'); |
| 89 |
if (needsLoad) { |
| 90 |
await loadTabContent(wrapper, key); |
| 91 |
} |
| 92 |
setActive(key); |
| 93 |
}; |
| 94 |
|
| 95 |
tabs.forEach((btn) => { |
| 96 |
btn.addEventListener('click', () => handleSwitch(btn.dataset.tab)); |
| 97 |
}); |
| 98 |
|
| 99 |
accordions.forEach((btn) => { |
| 100 |
btn.addEventListener('click', () => handleSwitch(btn.dataset.tab)); |
| 101 |
}); |
| 102 |
}; |
| 103 |
|
| 104 |
const bootstrap = (scope) => { |
| 105 |
const root = scope || document; |
| 106 |
root.querySelectorAll('.ka-woo-tabs').forEach(initTabs); |
| 107 |
}; |
| 108 |
|
| 109 |
document.addEventListener('DOMContentLoaded', () => bootstrap(document)); |
| 110 |
|
| 111 |
if (window.elementorFrontend && window.elementorFrontend.hooks) { |
| 112 |
window.elementorFrontend.hooks.addAction('frontend/element_ready/woo_product_tabs.default', (scope) => { |
| 113 |
bootstrap(scope[0] || scope); |
| 114 |
}); |
| 115 |
} |
| 116 |
})(); |
| 117 |
|
| 118 |
|
| 119 |
|
| 120 |
|
| 121 |
|
| 122 |
|
| 123 |
|
