| 1 |
(function () { |
| 2 |
function init() { |
| 3 |
document.querySelectorAll('.bkbg-tldr-app').forEach(function (el) { |
| 4 |
if (el.dataset.rendered) return; |
| 5 |
el.dataset.rendered = '1'; |
| 6 |
var opts; |
| 7 |
try { opts = JSON.parse(el.dataset.opts || '{}'); } catch (e) { opts = {}; } |
| 8 |
var o = Object.assign({ |
| 9 |
headingIcon: '⚡', iconType: 'custom-char', iconDashicon: 'lightbulb', iconImageUrl: '', |
| 10 |
heading: 'TL;DR', showIcon: true, |
| 11 |
summary: '', points: [{ text: '' }], |
| 12 |
showPoints: true, readTime: '', showReadTime: false, |
| 13 |
expandable: false, expandLabel: 'Read full article', collapseLabel: 'Show less', |
| 14 |
style: 'highlight', |
| 15 |
bgColor: '#fef9c3', borderColor: '#fde047', accentColor: '#ca8a04', |
| 16 |
headingColor: '#713f12', summaryColor: '#1c1917', pointColor: '#292524', |
| 17 |
metaColor: '#a8a29e', iconColor: '#ca8a04', |
| 18 |
borderRadius: 10, paddingTop: 0, paddingBottom: 0 |
| 19 |
}, opts); |
| 20 |
|
| 21 |
function mk(tag, cls, style, text) { |
| 22 |
var n = document.createElement(tag); |
| 23 |
if (cls) n.className = cls; |
| 24 |
if (style) Object.assign(n.style, style); |
| 25 |
if (text != null) n.textContent = text; |
| 26 |
return n; |
| 27 |
} |
| 28 |
|
| 29 |
var wrap = mk('div', 'bkbg-tldr-wrap bkbg-tldr-style-' + o.style, { |
| 30 |
background: o.bgColor, |
| 31 |
borderRadius: o.borderRadius + 'px' |
| 32 |
}); |
| 33 |
|
| 34 |
/* border per style */ |
| 35 |
if (o.style === 'highlight' || o.style === 'minimal' || o.style === 'card') { |
| 36 |
wrap.style.borderColor = o.borderColor; |
| 37 |
} else if (o.style === 'sidebar') { |
| 38 |
wrap.style.borderColor = o.borderColor; |
| 39 |
wrap.style.borderLeftColor = o.accentColor; |
| 40 |
} |
| 41 |
if (o.style === 'minimal') { wrap.style.background = 'transparent'; } |
| 42 |
|
| 43 |
/* header */ |
| 44 |
var header = mk('div', 'bkbg-tldr-header'); |
| 45 |
if (o.showIcon) { |
| 46 |
var IP = window.bkbgIconPicker; |
| 47 |
var iconNode = IP ? IP.buildFrontendIcon(o.iconType, o.headingIcon, o.iconDashicon, o.iconImageUrl, o.iconDashiconColor) : null; |
| 48 |
if (iconNode) { |
| 49 |
iconNode.classList.add('bkbg-tldr-icon'); |
| 50 |
iconNode.style.color = o.iconColor; |
| 51 |
header.appendChild(iconNode); |
| 52 |
} else if (o.headingIcon) { |
| 53 |
header.appendChild(mk('span', 'bkbg-tldr-icon', { color: o.iconColor }, o.headingIcon)); |
| 54 |
} |
| 55 |
} |
| 56 |
header.appendChild(mk('span', 'bkbg-tldr-heading', { color: o.headingColor }, o.heading)); |
| 57 |
if (o.showReadTime && o.readTime) { |
| 58 |
header.appendChild(mk('span', 'bkbg-tldr-readtime', { color: o.metaColor }, o.readTime)); |
| 59 |
} |
| 60 |
wrap.appendChild(header); |
| 61 |
|
| 62 |
/* collapsible container */ |
| 63 |
var collapsible; |
| 64 |
if (o.expandable) { |
| 65 |
collapsible = mk('div', 'bkbg-tldr-collapsible'); |
| 66 |
} |
| 67 |
var target = o.expandable ? collapsible : wrap; |
| 68 |
|
| 69 |
/* summary */ |
| 70 |
if (o.summary) { |
| 71 |
var sum = mk('p', 'bkbg-tldr-summary', { color: o.summaryColor }, ''); |
| 72 |
sum.innerHTML = o.summary; |
| 73 |
target.appendChild(sum); |
| 74 |
} |
| 75 |
|
| 76 |
/* divider + points */ |
| 77 |
if (o.showPoints && o.points && o.points.some(function (p) { return p.text && p.text.trim(); })) { |
| 78 |
var div = mk('div', 'bkbg-tldr-divider', { background: o.borderColor }); |
| 79 |
target.appendChild(div); |
| 80 |
var ul = mk('ul', 'bkbg-tldr-points'); |
| 81 |
o.points.forEach(function (p) { |
| 82 |
if (!p.text || !p.text.trim()) return; |
| 83 |
var li = mk('li', 'bkbg-tldr-point', { color: o.pointColor }); |
| 84 |
var check = mk('span', 'bkbg-tldr-check', { color: o.accentColor }, '✓'); |
| 85 |
var txt = mk('span', '', {}, p.text); |
| 86 |
li.appendChild(check); |
| 87 |
li.appendChild(txt); |
| 88 |
ul.appendChild(li); |
| 89 |
}); |
| 90 |
target.appendChild(ul); |
| 91 |
} |
| 92 |
|
| 93 |
if (o.expandable) { |
| 94 |
wrap.appendChild(collapsible); |
| 95 |
|
| 96 |
/* determine initial state: show content by default (expanded), button collapses */ |
| 97 |
var expanded = true; |
| 98 |
collapsible.style.maxHeight = collapsible.scrollHeight + 'px'; |
| 99 |
|
| 100 |
var btn = mk('button', 'bkbg-tldr-toggle', { color: o.accentColor }); |
| 101 |
btn.textContent = '▲ ' + o.collapseLabel; |
| 102 |
btn.addEventListener('click', function () { |
| 103 |
expanded = !expanded; |
| 104 |
if (expanded) { |
| 105 |
collapsible.style.maxHeight = collapsible.scrollHeight + 'px'; |
| 106 |
btn.textContent = '▲ ' + o.collapseLabel; |
| 107 |
} else { |
| 108 |
collapsible.style.maxHeight = '0'; |
| 109 |
btn.textContent = '▼ ' + o.expandLabel; |
| 110 |
} |
| 111 |
}); |
| 112 |
wrap.appendChild(btn); |
| 113 |
} |
| 114 |
|
| 115 |
var outerWrap = mk('div', '', { paddingTop: o.paddingTop + 'px', paddingBottom: o.paddingBottom + 'px' }); |
| 116 |
outerWrap.appendChild(wrap); |
| 117 |
el.parentNode.insertBefore(outerWrap, el); |
| 118 |
}); |
| 119 |
} |
| 120 |
|
| 121 |
if (document.readyState !== 'loading') { init(); } |
| 122 |
else { document.addEventListener('DOMContentLoaded', init); } |
| 123 |
})(); |
| 124 |
|
