| 1 |
(function () { |
| 2 |
'use strict'; |
| 3 |
|
| 4 |
var BULLET_SYMBOLS = { |
| 5 |
check: '✓', |
| 6 |
check2: '✔', |
| 7 |
arrow: '→', |
| 8 |
circle: '●', |
| 9 |
star: '� |
| 10 |
', |
| 11 |
diamond: '◆', |
| 12 |
dash: '—', |
| 13 |
}; |
| 14 |
|
| 15 |
function getBullet(opts) { |
| 16 |
if (opts.bulletStyle === 'custom') return opts.customBullet || '→'; |
| 17 |
return BULLET_SYMBOLS[opts.bulletStyle] || '✓'; |
| 18 |
} |
| 19 |
|
| 20 |
var typoKeys = [ |
| 21 |
['family','font-family'],['weight','font-weight'],['style','font-style'], |
| 22 |
['decoration','text-decoration'],['transform','text-transform'], |
| 23 |
['sizeDesktop','font-size-d'],['sizeTablet','font-size-t'],['sizeMobile','font-size-m'], |
| 24 |
['lineHeightDesktop','line-height-d'],['lineHeightTablet','line-height-t'],['lineHeightMobile','line-height-m'], |
| 25 |
['letterSpacingDesktop','letter-spacing-d'],['letterSpacingTablet','letter-spacing-t'],['letterSpacingMobile','letter-spacing-m'], |
| 26 |
['wordSpacingDesktop','word-spacing-d'],['wordSpacingTablet','word-spacing-t'],['wordSpacingMobile','word-spacing-m'] |
| 27 |
]; |
| 28 |
function typoCssVarsForEl(el, typo, prefix) { |
| 29 |
if (!typo || typeof typo !== 'object') return; |
| 30 |
var u = typo.sizeUnit || 'px'; |
| 31 |
typoKeys.forEach(function (pair) { |
| 32 |
var v = typo[pair[0]]; |
| 33 |
if (v === undefined || v === '' || v === null) return; |
| 34 |
var css = (typeof v === 'number' && pair[0].indexOf('size') !== -1) ? v + u |
| 35 |
: (typeof v === 'number') ? String(v) : v; |
| 36 |
el.style.setProperty(prefix + pair[1], css); |
| 37 |
}); |
| 38 |
} |
| 39 |
|
| 40 |
function buildApp(app) { |
| 41 |
var opts = {}; |
| 42 |
try { opts = JSON.parse(app.getAttribute('data-opts') || '{}'); } catch (e) {} |
| 43 |
|
| 44 |
var accent = opts.accentColor || '#6c3fb5'; |
| 45 |
var cardBg = opts.cardBg || '#f5f3ff'; |
| 46 |
var borderClr = opts.borderColor || accent; |
| 47 |
var headClr = opts.headingColor || '#1e1b4b'; |
| 48 |
var itemClr = opts.itemColor || '#374151'; |
| 49 |
var bulletClr = opts.bulletColor || accent; |
| 50 |
var iconBg = opts.iconBg || accent; |
| 51 |
var iconClr = opts.iconColor || '#ffffff'; |
| 52 |
var bdrPos = opts.borderPosition || 'left'; |
| 53 |
var bdrW = (opts.borderWidth !== undefined ? opts.borderWidth : 4) + 'px'; |
| 54 |
var cRadius = (opts.cardRadius !== undefined ? opts.cardRadius : 12) + 'px'; |
| 55 |
var pV = (opts.paddingV !== undefined ? opts.paddingV : 28) + 'px'; |
| 56 |
var pH = (opts.paddingH !== undefined ? opts.paddingH : 28) + 'px'; |
| 57 |
var headSz = (opts.headingSize !== undefined ? opts.headingSize : 18) + 'px'; |
| 58 |
var itemSz = (opts.itemSize !== undefined ? opts.itemSize : 16) + 'px'; |
| 59 |
var gap = (opts.itemGap !== undefined ? opts.itemGap : 14) + 'px'; |
| 60 |
var maxW = (opts.maxWidth || 760) + 'px'; |
| 61 |
var bullet = getBullet(opts); |
| 62 |
var items = opts.items || []; |
| 63 |
|
| 64 |
typoCssVarsForEl(app, opts.headingTypo, '--bkbg-kt-h-'); |
| 65 |
typoCssVarsForEl(app, opts.itemTypo, '--bkbg-kt-it-'); |
| 66 |
|
| 67 |
/* Card */ |
| 68 |
var card = document.createElement('div'); |
| 69 |
card.className = 'bkbg-kt-card'; |
| 70 |
|
| 71 |
var borderStyle = ''; |
| 72 |
if (bdrPos === 'left') borderStyle = 'border-left:' + bdrW + ' solid ' + borderClr; |
| 73 |
if (bdrPos === 'top') borderStyle = 'border-top:' + bdrW + ' solid ' + borderClr; |
| 74 |
if (bdrPos === 'all') borderStyle = 'border:' + bdrW + ' solid ' + borderClr; |
| 75 |
|
| 76 |
card.style.cssText = [ |
| 77 |
'background:' + cardBg, |
| 78 |
'border-radius:' + cRadius, |
| 79 |
'padding:' + pV + ' ' + pH, |
| 80 |
'max-width:' + maxW, |
| 81 |
'margin:0 auto', |
| 82 |
'box-sizing:border-box', |
| 83 |
borderStyle, |
| 84 |
].filter(Boolean).join(';'); |
| 85 |
|
| 86 |
app.innerHTML = ''; |
| 87 |
app.appendChild(card); |
| 88 |
|
| 89 |
/* Heading row */ |
| 90 |
if (opts.showHeading !== false && (opts.heading || opts.heading === undefined)) { |
| 91 |
var headRow = document.createElement('div'); |
| 92 |
headRow.className = 'bkbg-kt-heading-row'; |
| 93 |
headRow.style.cssText = 'display:flex;align-items:center;gap:10px;margin-bottom:' + (opts.showDivider !== false ? '16px' : '20px'); |
| 94 |
|
| 95 |
if (opts.showHeadingIcon !== false && opts.headingIcon) { |
| 96 |
var icon = document.createElement('span'); |
| 97 |
icon.className = 'bkbg-kt-icon'; |
| 98 |
icon.style.cssText = 'background:' + iconBg + ';color:' + iconClr; |
| 99 |
var _IP = window.bkbgIconPicker; |
| 100 |
if (_IP && opts.headingIconType && opts.headingIconType !== 'custom-char') { |
| 101 |
var _iconNode = _IP.buildFrontendIcon(opts.headingIconType, opts.headingIcon, opts.headingIconDashicon, opts.headingIconImageUrl, opts.headingIconDashiconColor); |
| 102 |
if (_iconNode) icon.appendChild(_iconNode); |
| 103 |
else icon.textContent = opts.headingIcon || '✦'; |
| 104 |
} else { |
| 105 |
icon.textContent = opts.headingIcon || '✦'; |
| 106 |
} |
| 107 |
headRow.appendChild(icon); |
| 108 |
} |
| 109 |
|
| 110 |
var headText = document.createElement('span'); |
| 111 |
headText.className = 'bkbg-kt-heading'; |
| 112 |
headText.style.cssText = 'color:' + headClr; |
| 113 |
headText.textContent = opts.heading || 'Key Takeaways'; |
| 114 |
headRow.appendChild(headText); |
| 115 |
card.appendChild(headRow); |
| 116 |
|
| 117 |
/* Divider */ |
| 118 |
if (opts.showDivider !== false) { |
| 119 |
var hr = document.createElement('hr'); |
| 120 |
hr.className = 'bkbg-kt-divider'; |
| 121 |
hr.style.cssText = 'border-top-color:' + borderClr + ';margin-bottom:18px'; |
| 122 |
card.appendChild(hr); |
| 123 |
} |
| 124 |
} |
| 125 |
|
| 126 |
/* Items */ |
| 127 |
var ul = document.createElement('ul'); |
| 128 |
ul.className = 'bkbg-kt-list'; |
| 129 |
ul.style.gap = gap; |
| 130 |
card.appendChild(ul); |
| 131 |
|
| 132 |
items.forEach(function (item) { |
| 133 |
if (!item && item !== 0) return; |
| 134 |
var li = document.createElement('li'); |
| 135 |
li.className = 'bkbg-kt-item'; |
| 136 |
|
| 137 |
var blt = document.createElement('span'); |
| 138 |
blt.className = 'bkbg-kt-bullet'; |
| 139 |
blt.textContent = bullet; |
| 140 |
blt.style.cssText = 'color:' + bulletClr; |
| 141 |
|
| 142 |
var txt = document.createElement('span'); |
| 143 |
txt.className = 'bkbg-kt-text'; |
| 144 |
txt.textContent = item; |
| 145 |
txt.style.cssText = 'color:' + itemClr; |
| 146 |
|
| 147 |
li.appendChild(blt); |
| 148 |
li.appendChild(txt); |
| 149 |
ul.appendChild(li); |
| 150 |
}); |
| 151 |
} |
| 152 |
|
| 153 |
document.querySelectorAll('.bkbg-kt-app').forEach(buildApp); |
| 154 |
})(); |
| 155 |
|
