| 1 |
(function () { |
| 2 |
function initCalculator(card) { |
| 3 |
var currency = card.dataset.currency || '$'; |
| 4 |
var currencyPos = card.dataset.currencyPos || 'before'; |
| 5 |
var discount = parseFloat(card.dataset.annualDiscount) || 0; |
| 6 |
var basePrice = parseFloat(card.dataset.basePrice) || 0; |
| 7 |
|
| 8 |
var isAnnual = false; |
| 9 |
|
| 10 |
var toggleBtn = card.querySelector('.bkbg-pc-toggle-btn'); |
| 11 |
var priceEl = card.querySelector('.bkbg-pc-price-val'); |
| 12 |
var priceNote = card.querySelector('.bkbg-pc-price-note'); |
| 13 |
var sliderRows = card.querySelectorAll('.bkbg-pc-slider-row'); |
| 14 |
var addonEls = card.querySelectorAll('.bkbg-pc-addon'); |
| 15 |
|
| 16 |
function calcTotal() { |
| 17 |
var total = basePrice; |
| 18 |
|
| 19 |
sliderRows.forEach(function (row) { |
| 20 |
var range = row.querySelector('.bkbg-pc-range'); |
| 21 |
var ppu = parseFloat(row.dataset.pricePerUnit) || 0; |
| 22 |
if (range) total += parseFloat(range.value) * ppu; |
| 23 |
}); |
| 24 |
|
| 25 |
addonEls.forEach(function (addonEl) { |
| 26 |
var cb = addonEl.querySelector('.bkbg-pc-addon-cb'); |
| 27 |
var price = parseFloat(addonEl.dataset.price) || 0; |
| 28 |
if (cb && cb.checked) total += price; |
| 29 |
}); |
| 30 |
|
| 31 |
if (isAnnual && discount > 0) { |
| 32 |
total = total * (1 - discount / 100); |
| 33 |
} |
| 34 |
return total; |
| 35 |
} |
| 36 |
|
| 37 |
function formatPrice(val) { |
| 38 |
var num = val.toFixed(2).replace(/\.00$/, ''); |
| 39 |
return currencyPos === 'before' ? currency + num : num + currency; |
| 40 |
} |
| 41 |
|
| 42 |
function updateDisplay() { |
| 43 |
if (!priceEl) return; |
| 44 |
var total = calcTotal(); |
| 45 |
priceEl.textContent = total.toFixed(2).replace(/\.00$/, ''); |
| 46 |
} |
| 47 |
|
| 48 |
function updateSliderFill(row, range) { |
| 49 |
var fill = row.querySelector('.bkbg-pc-slider-fill'); |
| 50 |
var valEl = row.querySelector('.bkbg-pc-slider-val'); |
| 51 |
if (!range) return; |
| 52 |
var pct = ((range.value - range.min) / (range.max - range.min)) * 100; |
| 53 |
if (fill) fill.style.width = pct + '%'; |
| 54 |
if (valEl) valEl.textContent = range.value + ' ' + (range.dataset.unit || ''); |
| 55 |
} |
| 56 |
|
| 57 |
/* Init slider fills */ |
| 58 |
sliderRows.forEach(function (row) { |
| 59 |
var range = row.querySelector('.bkbg-pc-range'); |
| 60 |
if (!range) return; |
| 61 |
updateSliderFill(row, range); |
| 62 |
range.addEventListener('input', function () { |
| 63 |
updateSliderFill(row, range); |
| 64 |
updateDisplay(); |
| 65 |
}); |
| 66 |
}); |
| 67 |
|
| 68 |
/* Addon checkboxes */ |
| 69 |
addonEls.forEach(function (addonEl) { |
| 70 |
var cb = addonEl.querySelector('.bkbg-pc-addon-cb'); |
| 71 |
if (!cb) return; |
| 72 |
if (cb.checked) addonEl.classList.add('is-checked'); |
| 73 |
cb.addEventListener('change', function () { |
| 74 |
addonEl.classList.toggle('is-checked', cb.checked); |
| 75 |
updateDisplay(); |
| 76 |
}); |
| 77 |
}); |
| 78 |
|
| 79 |
/* Billing toggle */ |
| 80 |
if (toggleBtn) { |
| 81 |
toggleBtn.addEventListener('click', function () { |
| 82 |
isAnnual = !isAnnual; |
| 83 |
toggleBtn.setAttribute('aria-pressed', isAnnual ? 'true' : 'false'); |
| 84 |
if (priceNote) { |
| 85 |
priceNote.textContent = isAnnual |
| 86 |
? (priceNote.dataset.annual || '') |
| 87 |
: (priceNote.dataset.monthly || ''); |
| 88 |
} |
| 89 |
updateDisplay(); |
| 90 |
}); |
| 91 |
} |
| 92 |
|
| 93 |
updateDisplay(); |
| 94 |
} |
| 95 |
|
| 96 |
function init() { |
| 97 |
var cards = document.querySelectorAll('.bkbg-pc-card'); |
| 98 |
cards.forEach(initCalculator); |
| 99 |
} |
| 100 |
|
| 101 |
if (document.readyState === 'loading') { |
| 102 |
document.addEventListener('DOMContentLoaded', init); |
| 103 |
} else { |
| 104 |
init(); |
| 105 |
} |
| 106 |
})(); |
| 107 |
|
