| 1 |
(function () { |
| 2 |
'use strict'; |
| 3 |
|
| 4 |
var _typoKeys = { |
| 5 |
family:'font-family', weight:'font-weight', style:'font-style', |
| 6 |
transform:'text-transform', decoration:'text-decoration', |
| 7 |
sizeDesktop:'font-size-d', sizeTablet:'font-size-t', sizeMobile:'font-size-m', |
| 8 |
lineHeightDesktop:'line-height-d', lineHeightTablet:'line-height-t', lineHeightMobile:'line-height-m', |
| 9 |
letterSpacingDesktop:'letter-spacing-d', letterSpacingTablet:'letter-spacing-t', letterSpacingMobile:'letter-spacing-m', |
| 10 |
wordSpacingDesktop:'word-spacing-d', wordSpacingTablet:'word-spacing-t', wordSpacingMobile:'word-spacing-m' |
| 11 |
}; |
| 12 |
var _typoUnits = { size:'sizeUnit', lineHeight:'lineHeightUnit', letterSpacing:'letterSpacingUnit', wordSpacing:'wordSpacingUnit' }; |
| 13 |
var _typoUnitDefaults = { size:'px', lineHeight:'', letterSpacing:'px', wordSpacing:'px' }; |
| 14 |
function typoCssVarsForEl(el, obj, prefix) { |
| 15 |
if (!obj || typeof obj !== 'object') return; |
| 16 |
Object.keys(_typoKeys).forEach(function (k) { |
| 17 |
var v = obj[k]; if (v === undefined || v === '') return; |
| 18 |
var prop = _typoKeys[k]; |
| 19 |
var base = k.replace(/Desktop|Tablet|Mobile/, ''); |
| 20 |
var uKey = _typoUnits[base]; |
| 21 |
if (uKey && typeof v === 'number') v = v + (obj[uKey] || _typoUnitDefaults[base] || ''); |
| 22 |
el.style.setProperty(prefix + prop, v); |
| 23 |
}); |
| 24 |
} |
| 25 |
|
| 26 |
document.querySelectorAll('.bkbg-cm-app').forEach(function (app) { |
| 27 |
var o; |
| 28 |
try { o = JSON.parse(app.dataset.opts || '{}'); } catch (e) { return; } |
| 29 |
|
| 30 |
var plans = Array.isArray(o.plans) ? o.plans : []; |
| 31 |
var features = Array.isArray(o.features) ? o.features : []; |
| 32 |
var stickyHdr = !!o.stickyHeader; |
| 33 |
var checkIcon = o.checkIcon || '✓'; |
| 34 |
var crossIcon = o.crossIcon || '✕'; |
| 35 |
var checkIconType = o.checkIconType || 'custom-char'; |
| 36 |
var checkIconDashicon = o.checkIconDashicon || ''; |
| 37 |
var checkIconImageUrl = o.checkIconImageUrl, checkIconImageUrlColor = o.checkIconDashiconColor || ''; |
| 38 |
var crossIconType = o.crossIconType || 'custom-char'; |
| 39 |
var crossIconDashicon = o.crossIconDashicon || ''; |
| 40 |
var crossIconImageUrl = o.crossIconImageUrl, crossIconImageUrlColor = o.crossIconDashiconColor || ''; |
| 41 |
var firstColW = o.firstColWidth || 200; |
| 42 |
var cellPad = o.cellPadding || 16; |
| 43 |
var headerR = o.headerRadius || 12; |
| 44 |
var fontSize = o.fontSize || 14; |
| 45 |
var headerBg = o.headerBg || '#f8fafc'; |
| 46 |
var headerColor = o.headerColor || '#0f172a'; |
| 47 |
var hlBg = o.highlightBg || '#6366f1'; |
| 48 |
var hlColor = o.highlightColor || '#ffffff'; |
| 49 |
var rowBg = o.rowBg || '#ffffff'; |
| 50 |
var rowAltBg = o.rowAltBg || '#f8fafc'; |
| 51 |
var rowColor = o.rowColor || '#334155'; |
| 52 |
var borderColor = o.borderColor || '#e2e8f0'; |
| 53 |
var checkColor = o.checkColor || '#10b981'; |
| 54 |
var crossColor = o.crossColor || '#f43f5e'; |
| 55 |
var badgeBg = o.badgeBg || '#fef3c7'; |
| 56 |
var badgeColor = o.badgeColor || '#92400e'; |
| 57 |
var sectionBg = o.sectionBg || ''; |
| 58 |
|
| 59 |
if (sectionBg) app.style.background = sectionBg; |
| 60 |
|
| 61 |
/* ── Typography CSS vars ── */ |
| 62 |
typoCssVarsForEl(app, o.typoHeader, '--bkcm-header-'); |
| 63 |
typoCssVarsForEl(app, o.typoBody, '--bkcm-body-'); |
| 64 |
|
| 65 |
/* ── CSS vars ── */ |
| 66 |
app.style.setProperty('--cm-border', borderColor); |
| 67 |
app.style.setProperty('--cm-header-bg', headerBg); |
| 68 |
app.style.setProperty('--cm-header-clr', headerColor); |
| 69 |
app.style.setProperty('--cm-hl-bg', hlBg); |
| 70 |
app.style.setProperty('--cm-hl-clr', hlColor); |
| 71 |
app.style.setProperty('--cm-check', checkColor); |
| 72 |
app.style.setProperty('--cm-cross', crossColor); |
| 73 |
|
| 74 |
/* ── Build table ── */ |
| 75 |
var table = document.createElement('table'); |
| 76 |
table.className = 'bkbg-cm-table' + (stickyHdr ? ' bkbg-cm-sticky' : ''); |
| 77 |
|
| 78 |
/* ── Head ── */ |
| 79 |
var thead = document.createElement('thead'); |
| 80 |
var hrow = document.createElement('tr'); |
| 81 |
|
| 82 |
/* empty first col */ |
| 83 |
var th0 = document.createElement('th'); |
| 84 |
th0.className = 'bkbg-cm-th bkbg-cm-th-feature'; |
| 85 |
th0.style.width = firstColW + 'px'; |
| 86 |
th0.style.borderRadius = headerR + 'px 0 0 0'; |
| 87 |
hrow.appendChild(th0); |
| 88 |
|
| 89 |
plans.forEach(function (p, pi) { |
| 90 |
var th = document.createElement('th'); |
| 91 |
th.className = 'bkbg-cm-th' + (p.highlight ? ' bkbg-cm-highlight' : ''); |
| 92 |
if (pi === plans.length - 1) th.style.borderRadius = '0 ' + headerR + 'px 0 0'; |
| 93 |
|
| 94 |
if (p.badge) { |
| 95 |
var badge = document.createElement('div'); |
| 96 |
badge.className = 'bkbg-cm-badge'; |
| 97 |
badge.textContent = p.badge; |
| 98 |
badge.style.background = badgeBg; |
| 99 |
badge.style.color = badgeColor; |
| 100 |
th.appendChild(badge); |
| 101 |
} |
| 102 |
var name = document.createElement('span'); |
| 103 |
name.className = 'bkbg-cm-plan-name'; |
| 104 |
name.textContent = p.name || ''; |
| 105 |
th.appendChild(name); |
| 106 |
|
| 107 |
if (p.subtitle) { |
| 108 |
var sub = document.createElement('span'); |
| 109 |
sub.className = 'bkbg-cm-plan-sub'; |
| 110 |
sub.textContent = p.subtitle; |
| 111 |
th.appendChild(sub); |
| 112 |
} |
| 113 |
hrow.appendChild(th); |
| 114 |
}); |
| 115 |
|
| 116 |
thead.appendChild(hrow); |
| 117 |
table.appendChild(thead); |
| 118 |
|
| 119 |
/* ── Body ── */ |
| 120 |
var tbody = document.createElement('tbody'); |
| 121 |
var altRow = 0; |
| 122 |
var lastGroup = null; |
| 123 |
|
| 124 |
features.forEach(function (f) { |
| 125 |
/* Group header */ |
| 126 |
if (f.group && f.group !== lastGroup) { |
| 127 |
lastGroup = f.group; |
| 128 |
var gr = document.createElement('tr'); |
| 129 |
gr.className = 'bkbg-cm-group-row'; |
| 130 |
var gtd = document.createElement('td'); |
| 131 |
gtd.colSpan = plans.length + 1; |
| 132 |
gtd.textContent = f.group; |
| 133 |
gr.appendChild(gtd); |
| 134 |
tbody.appendChild(gr); |
| 135 |
} |
| 136 |
|
| 137 |
var tr = document.createElement('tr'); |
| 138 |
tr.style.background = altRow % 2 === 0 ? rowBg : rowAltBg; |
| 139 |
altRow++; |
| 140 |
|
| 141 |
/* feature label */ |
| 142 |
var labelTd = document.createElement('td'); |
| 143 |
labelTd.className = 'bkbg-cm-td bkbg-cm-td-feature'; |
| 144 |
labelTd.style.width = firstColW + 'px'; |
| 145 |
labelTd.style.padding = cellPad + 'px'; |
| 146 |
labelTd.textContent = f.label || ''; |
| 147 |
tr.appendChild(labelTd); |
| 148 |
|
| 149 |
/* value cells */ |
| 150 |
plans.forEach(function (p, pi) { |
| 151 |
var val = (f.values && f.values[pi] != null) ? String(f.values[pi]) : ''; |
| 152 |
var td = document.createElement('td'); |
| 153 |
td.className = 'bkbg-cm-td' + (p.highlight ? ' bkbg-cm-hl-col' : ''); |
| 154 |
td.style.padding = cellPad + 'px'; |
| 155 |
td.style.color = rowColor; |
| 156 |
|
| 157 |
if (val === 'true') { |
| 158 |
var chk = document.createElement('span'); |
| 159 |
chk.className = 'bkbg-cm-check'; |
| 160 |
var IPf = window.bkbgIconPicker; |
| 161 |
if (IPf && checkIconType !== 'custom-char') { |
| 162 |
var chkIcon = IPf.buildFrontendIcon(checkIconType, checkIcon, checkIconDashicon, checkIconImageUrl, checkIconImageUrlColor); |
| 163 |
if (chkIcon) chk.appendChild(chkIcon); |
| 164 |
else chk.textContent = checkIcon; |
| 165 |
} else { |
| 166 |
chk.textContent = checkIcon; |
| 167 |
} |
| 168 |
td.appendChild(chk); |
| 169 |
} else if (val === 'false') { |
| 170 |
var crs = document.createElement('span'); |
| 171 |
crs.className = 'bkbg-cm-cross'; |
| 172 |
var IPf2 = window.bkbgIconPicker; |
| 173 |
if (IPf2 && crossIconType !== 'custom-char') { |
| 174 |
var crsIcon = IPf2.buildFrontendIcon(crossIconType, crossIcon, crossIconDashicon, crossIconImageUrl, crossIconImageUrlColor); |
| 175 |
if (crsIcon) crs.appendChild(crsIcon); |
| 176 |
else crs.textContent = crossIcon; |
| 177 |
} else { |
| 178 |
crs.textContent = crossIcon; |
| 179 |
} |
| 180 |
td.appendChild(crs); |
| 181 |
} else { |
| 182 |
var txt = document.createElement('span'); |
| 183 |
txt.className = 'bkbg-cm-text-val'; |
| 184 |
txt.textContent = val; |
| 185 |
td.appendChild(txt); |
| 186 |
} |
| 187 |
|
| 188 |
tr.appendChild(td); |
| 189 |
}); |
| 190 |
|
| 191 |
tbody.appendChild(tr); |
| 192 |
}); |
| 193 |
|
| 194 |
table.appendChild(tbody); |
| 195 |
app.appendChild(table); |
| 196 |
}); |
| 197 |
}()); |
| 198 |
|
