| 1 |
(function () { |
| 2 |
function init() { |
| 3 |
document.querySelectorAll('.bkbg-tc-app').forEach(function (appEl) { |
| 4 |
if (appEl.dataset.rendered) return; |
| 5 |
appEl.dataset.rendered = '1'; |
| 6 |
|
| 7 |
var opts; |
| 8 |
try { opts = JSON.parse(appEl.dataset.opts || '{}'); } catch (e) { opts = {}; } |
| 9 |
|
| 10 |
var o = Object.assign({ |
| 11 |
columnCount: 2, columns: [], dropCap: false, dropCapSize: 3, dropCapColor: '#111827', |
| 12 |
showRule: true, ruleStyle: 'solid', ruleWidth: 1, columnGap: 40, |
| 13 |
pullQuote: '', showPullQuote: false, pullQuotePos: 'between', |
| 14 |
fontSize: 16, lineHeight: 175, textAlign: 'left', |
| 15 |
paddingTop: 0, paddingBottom: 0, |
| 16 |
bgColor: '', textColor: '#374151', ruleColor: '#d1d5db', |
| 17 |
pullQuoteBorder: '#6366f1', pullQuoteColor: '#111827' |
| 18 |
}, opts); |
| 19 |
|
| 20 |
/* Normalize columns */ |
| 21 |
var cols = o.columns || []; |
| 22 |
while (cols.length < o.columnCount) { cols.push({ content: '' }); } |
| 23 |
cols = cols.slice(0, o.columnCount); |
| 24 |
|
| 25 |
/* Wrap */ |
| 26 |
var section = document.createElement('div'); |
| 27 |
section.className = 'bkbg-tc-wrap' + (o.dropCap ? ' has-dropcap' : ''); |
| 28 |
section.style.cssText = [ |
| 29 |
o.bgColor ? 'background:' + o.bgColor : '', |
| 30 |
'padding-top:' + o.paddingTop + 'px', |
| 31 |
'padding-bottom:' + o.paddingBottom + 'px' |
| 32 |
].filter(Boolean).join(';'); |
| 33 |
|
| 34 |
/* Drop cap inline style */ |
| 35 |
if (o.dropCap) { |
| 36 |
var dcStyle = document.createElement('style'); |
| 37 |
dcStyle.textContent = '.bkbg-tc-wrap.has-dropcap .bkbg-tc-col:first-child p:first-child::first-letter{float:left;font-size:' + o.dropCapSize + 'em;line-height:.75;padding-right:.1em;color:' + o.dropCapColor + ';font-weight:800;margin-top:.07em}'; |
| 38 |
section.appendChild(dcStyle); |
| 39 |
} |
| 40 |
|
| 41 |
/* Pull quote builder */ |
| 42 |
function makePullQuote() { |
| 43 |
var bq = document.createElement('blockquote'); |
| 44 |
bq.className = 'bkbg-tc-pullquote'; |
| 45 |
bq.style.cssText = 'border-left:' + 4 + 'px solid ' + o.pullQuoteBorder + ';color:' + o.pullQuoteColor; |
| 46 |
bq.innerHTML = '<p>' + o.pullQuote + '</p>'; |
| 47 |
return bq; |
| 48 |
} |
| 49 |
|
| 50 |
/* Above */ |
| 51 |
if (o.showPullQuote && o.pullQuote && o.pullQuotePos === 'above') { |
| 52 |
section.appendChild(makePullQuote()); |
| 53 |
} |
| 54 |
|
| 55 |
/* Grid */ |
| 56 |
var grid = document.createElement('div'); |
| 57 |
grid.className = 'bkbg-tc-grid'; |
| 58 |
grid.style.cssText = 'gap:' + o.columnGap + 'px'; |
| 59 |
|
| 60 |
cols.forEach(function (col, idx) { |
| 61 |
var div = document.createElement('div'); |
| 62 |
div.className = 'bkbg-tc-col'; |
| 63 |
div.style.cssText = [ |
| 64 |
'color:' + o.textColor, |
| 65 |
'text-align:' + o.textAlign, |
| 66 |
idx > 0 && o.showRule |
| 67 |
? ('border-left:' + o.ruleWidth + 'px ' + o.ruleStyle + ' ' + o.ruleColor + ';padding-left:' + (o.columnGap / 2) + 'px') |
| 68 |
: '' |
| 69 |
].filter(Boolean).join(';'); |
| 70 |
div.innerHTML = col.content || ''; |
| 71 |
grid.appendChild(div); |
| 72 |
}); |
| 73 |
|
| 74 |
section.appendChild(grid); |
| 75 |
|
| 76 |
/* Between / below */ |
| 77 |
if (o.showPullQuote && o.pullQuote && o.pullQuotePos !== 'above') { |
| 78 |
section.appendChild(makePullQuote()); |
| 79 |
} |
| 80 |
|
| 81 |
appEl.parentNode.insertBefore(section, appEl); |
| 82 |
}); |
| 83 |
} |
| 84 |
|
| 85 |
if (document.readyState !== 'loading') { init(); } |
| 86 |
else { document.addEventListener('DOMContentLoaded', init); } |
| 87 |
})(); |
| 88 |
|
