| 1 |
( function () { |
| 2 |
/** |
| 3 |
* Pricing Switcher frontend script. |
| 4 |
* |
| 5 |
* Toggles .bkpsw-monthly-active / .bkpsw-yearly-active on each switcher wrap, |
| 6 |
* and also toggles body.bkpsw-page-monthly / body.bkpsw-page-yearly so that |
| 7 |
* pricing-table blocks anywhere on the page can react via CSS. |
| 8 |
*/ |
| 9 |
|
| 10 |
function setActive( wrap, target ) { |
| 11 |
var btns = wrap.querySelectorAll('.bkpsw-btn'); |
| 12 |
btns.forEach(function(btn){ |
| 13 |
var t = btn.dataset.target; |
| 14 |
btn.classList.toggle('bkpsw-active', t === target); |
| 15 |
}); |
| 16 |
wrap.classList.toggle('bkpsw-monthly-active', target === 'monthly'); |
| 17 |
wrap.classList.toggle('bkpsw-yearly-active', target === 'yearly'); |
| 18 |
|
| 19 |
// Body class for global CSS hooks |
| 20 |
document.body.classList.toggle('bkpsw-page-monthly', target === 'monthly'); |
| 21 |
document.body.classList.toggle('bkpsw-page-yearly', target === 'yearly'); |
| 22 |
|
| 23 |
// Also update any same-page pricing-table blocks that have explicit price spans |
| 24 |
// They should mark their monthly/yearly spans with class "bkpsw-monthly" / "bkpsw-yearly" |
| 25 |
document.querySelectorAll('[class*="blockenberg-pricing"] .bkpsw-monthly, .bkpsw-price-monthly').forEach(function(el){ |
| 26 |
el.style.display = (target === 'monthly') ? '' : 'none'; |
| 27 |
}); |
| 28 |
document.querySelectorAll('[class*="blockenberg-pricing"] .bkpsw-yearly, .bkpsw-price-yearly').forEach(function(el){ |
| 29 |
el.style.display = (target === 'yearly') ? '' : 'none'; |
| 30 |
}); |
| 31 |
} |
| 32 |
|
| 33 |
document.addEventListener('DOMContentLoaded', function () { |
| 34 |
var switchers = document.querySelectorAll('.bkpsw-wrap[data-switcher]'); |
| 35 |
if (!switchers.length) return; |
| 36 |
|
| 37 |
switchers.forEach(function(wrap){ |
| 38 |
var defaultActive = wrap.dataset.default || 'monthly'; |
| 39 |
|
| 40 |
// Apply default state |
| 41 |
setActive(wrap, defaultActive); |
| 42 |
|
| 43 |
// Listen for button clicks |
| 44 |
var btns = wrap.querySelectorAll('.bkpsw-btn'); |
| 45 |
btns.forEach(function(btn){ |
| 46 |
btn.addEventListener('click', function(){ |
| 47 |
setActive(wrap, btn.dataset.target); |
| 48 |
}); |
| 49 |
}); |
| 50 |
}); |
| 51 |
}); |
| 52 |
}() ); |
| 53 |
|
