| 1 |
(function () { |
| 2 |
|
| 3 |
function buildCard(item, currency, a) { |
| 4 |
var isHl = !!item.highlighted; |
| 5 |
var card = document.createElement('div'); |
| 6 |
card.className = 'bkbg-cpc-card' + (isHl ? ' is-highlighted' : ''); |
| 7 |
|
| 8 |
/* Badge */ |
| 9 |
if (item.badge) { |
| 10 |
var badge = document.createElement('div'); |
| 11 |
badge.className = 'bkbg-cpc-badge'; |
| 12 |
badge.textContent = item.badge; |
| 13 |
card.appendChild(badge); |
| 14 |
} |
| 15 |
|
| 16 |
/* Header */ |
| 17 |
var header = document.createElement('div'); |
| 18 |
header.className = 'bkbg-cpc-card-header'; |
| 19 |
var titleEl = document.createElement('p'); |
| 20 |
titleEl.className = 'bkbg-cpc-card-title'; |
| 21 |
titleEl.textContent = item.title; |
| 22 |
header.appendChild(titleEl); |
| 23 |
if (item.subtitle) { |
| 24 |
var sub = document.createElement('p'); sub.className = 'bkbg-cpc-card-subtitle'; sub.textContent = item.subtitle; header.appendChild(sub); |
| 25 |
} |
| 26 |
card.appendChild(header); |
| 27 |
|
| 28 |
/* Price */ |
| 29 |
var priceRow = document.createElement('div'); |
| 30 |
priceRow.className = 'bkbg-cpc-price-row'; |
| 31 |
var price = document.createElement('span'); |
| 32 |
price.className = 'bkbg-cpc-price'; |
| 33 |
price.textContent = (currency || '$') + item.price; |
| 34 |
priceRow.appendChild(price); |
| 35 |
if (item.period) { |
| 36 |
var period = document.createElement('span'); period.className = 'bkbg-cpc-period'; period.textContent = '/' + item.period; priceRow.appendChild(period); |
| 37 |
} |
| 38 |
card.appendChild(priceRow); |
| 39 |
|
| 40 |
/* Features */ |
| 41 |
var feats = document.createElement('div'); |
| 42 |
feats.className = 'bkbg-cpc-features'; |
| 43 |
(item.features || []).forEach(function (f) { |
| 44 |
var row = document.createElement('div'); |
| 45 |
row.className = 'bkbg-cpc-feature'; |
| 46 |
var icon = document.createElement('span'); |
| 47 |
icon.className = 'bkbg-cpc-icon-' + (f.type || 'dash'); |
| 48 |
icon.textContent = f.type === 'check' ? '✓' : f.type === 'cross' ? '✗' : '—'; |
| 49 |
var text = document.createElement('span'); |
| 50 |
text.textContent = f.text; |
| 51 |
row.appendChild(icon); |
| 52 |
row.appendChild(text); |
| 53 |
feats.appendChild(row); |
| 54 |
}); |
| 55 |
card.appendChild(feats); |
| 56 |
|
| 57 |
/* CTA */ |
| 58 |
if (item.ctaLabel) { |
| 59 |
var ctaWrap = document.createElement('div'); |
| 60 |
ctaWrap.className = 'bkbg-cpc-cta-wrap'; |
| 61 |
var cta = document.createElement('a'); |
| 62 |
cta.className = 'bkbg-cpc-cta'; |
| 63 |
cta.textContent = item.ctaLabel; |
| 64 |
cta.href = item.ctaUrl || '#'; |
| 65 |
if (item.ctaNewTab) { cta.target = '_blank'; cta.rel = 'noopener noreferrer'; } |
| 66 |
ctaWrap.appendChild(cta); |
| 67 |
card.appendChild(ctaWrap); |
| 68 |
} |
| 69 |
|
| 70 |
return card; |
| 71 |
} |
| 72 |
|
| 73 |
function initCompCards(wrapper) { |
| 74 |
if (wrapper.dataset.initialized) return; |
| 75 |
wrapper.dataset.initialized = '1'; |
| 76 |
|
| 77 |
var gridEl = wrapper.querySelector('.bkbg-cpc-grid'); |
| 78 |
if (!gridEl) return; |
| 79 |
|
| 80 |
var items = []; |
| 81 |
var currency = gridEl.getAttribute('data-currency') || '$'; |
| 82 |
var showVs = gridEl.getAttribute('data-show-vs') === '1'; |
| 83 |
try { items = JSON.parse(gridEl.getAttribute('data-items') || '[]'); } catch (e) {} |
| 84 |
|
| 85 |
gridEl.style.display = 'flex'; |
| 86 |
gridEl.style.alignItems = 'flex-end'; |
| 87 |
gridEl.style.flexWrap = 'wrap'; |
| 88 |
|
| 89 |
items.forEach(function (item, idx) { |
| 90 |
var card = buildCard(item, currency, {}); |
| 91 |
gridEl.appendChild(card); |
| 92 |
|
| 93 |
if (showVs && idx < items.length - 1) { |
| 94 |
var vs = document.createElement('div'); |
| 95 |
vs.className = 'bkbg-cpc-vs'; |
| 96 |
vs.textContent = 'vs'; |
| 97 |
gridEl.appendChild(vs); |
| 98 |
} |
| 99 |
}); |
| 100 |
|
| 101 |
/* Staggered entrance */ |
| 102 |
var cards = gridEl.querySelectorAll('.bkbg-cpc-card'); |
| 103 |
if ('IntersectionObserver' in window) { |
| 104 |
var obs = new IntersectionObserver(function (entries) { |
| 105 |
entries.forEach(function (e) { |
| 106 |
if (e.isIntersecting) { |
| 107 |
var idx2 = Array.prototype.indexOf.call(cards, e.target); |
| 108 |
setTimeout(function () { e.target.classList.add('is-visible'); }, idx2 * 100); |
| 109 |
obs.unobserve(e.target); |
| 110 |
} |
| 111 |
}); |
| 112 |
}, { threshold: 0.1 }); |
| 113 |
cards.forEach(function (c) { obs.observe(c); }); |
| 114 |
} else { |
| 115 |
cards.forEach(function (c) { c.classList.add('is-visible'); }); |
| 116 |
} |
| 117 |
} |
| 118 |
|
| 119 |
function init() { |
| 120 |
document.querySelectorAll('.bkbg-cpc-wrapper').forEach(initCompCards); |
| 121 |
} |
| 122 |
|
| 123 |
if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } |
| 124 |
}()); |
| 125 |
|
