| 1 |
(function () { |
| 2 |
var _typoKeys = [ |
| 3 |
['family','font-family'],['weight','font-weight'],['style','font-style'], |
| 4 |
['decoration','text-decoration'],['transform','text-transform'], |
| 5 |
['sizeDesktop','font-size','-d'],['sizeTablet','font-size','-t'],['sizeMobile','font-size','-m'], |
| 6 |
['lineHeightDesktop','line-height','-d'],['lineHeightTablet','line-height','-t'],['lineHeightMobile','line-height','-m'], |
| 7 |
['letterSpacingDesktop','letter-spacing','-d'],['letterSpacingTablet','letter-spacing','-t'],['letterSpacingMobile','letter-spacing','-m'], |
| 8 |
['wordSpacingDesktop','word-spacing','-d'],['wordSpacingTablet','word-spacing','-t'],['wordSpacingMobile','word-spacing','-m'] |
| 9 |
]; |
| 10 |
function typoCssVarsForEl(el, obj, prefix) { |
| 11 |
if (!obj) return; |
| 12 |
_typoKeys.forEach(function (k) { |
| 13 |
var v = obj[k[0]]; |
| 14 |
if (v !== undefined && v !== '') el.style.setProperty(prefix + k[1] + (k[2] || ''), String(v)); |
| 15 |
}); |
| 16 |
} |
| 17 |
|
| 18 |
function init() { |
| 19 |
document.querySelectorAll('.bkbg-src-app').forEach(function (el) { |
| 20 |
if (el.dataset.rendered) return; |
| 21 |
el.dataset.rendered = '1'; |
| 22 |
var opts; |
| 23 |
try { opts = JSON.parse(el.dataset.opts || '{}'); } catch (e) { opts = {}; } |
| 24 |
var o = Object.assign({ |
| 25 |
references: [], |
| 26 |
style: 'academic', |
| 27 |
label: 'Sources & References', |
| 28 |
showLabel: true, |
| 29 |
showAuthor: true, |
| 30 |
showPublication: true, |
| 31 |
showDate: true, |
| 32 |
showUrl: true, |
| 33 |
openInNewTab: true, |
| 34 |
bgColor: '#f8fafc', |
| 35 |
labelColor: '#111827', |
| 36 |
numberColor: '#6366f1', |
| 37 |
titleColor: '#111827', |
| 38 |
authorColor: '#374151', |
| 39 |
pubColor: '#6b7280', |
| 40 |
urlColor: '#6366f1', |
| 41 |
borderColor: '#e2e8f0', |
| 42 |
cardBg: '#ffffff', |
| 43 |
borderRadius: 8, |
| 44 |
paddingTop: 40, |
| 45 |
paddingBottom: 40 |
| 46 |
}, opts); |
| 47 |
|
| 48 |
var wrap = document.createElement('div'); |
| 49 |
wrap.className = 'bkbg-src-wrap bkbg-src-' + o.style; |
| 50 |
wrap.style.cssText = 'background:' + o.bgColor + ';padding:' + o.paddingTop + 'px 0 ' + o.paddingBottom + 'px;box-sizing:border-box;'; |
| 51 |
|
| 52 |
/* ── typography CSS vars ── */ |
| 53 |
typoCssVarsForEl(wrap, o.labelTypo, '--bksrc-lb-'); |
| 54 |
typoCssVarsForEl(wrap, o.refTypo, '--bksrc-rf-'); |
| 55 |
|
| 56 |
if (o.showLabel && o.label) { |
| 57 |
var lbl = document.createElement('h3'); |
| 58 |
lbl.className = 'bkbg-src-label'; |
| 59 |
lbl.style.cssText = 'color:' + o.labelColor + ';border-bottom:2px solid ' + o.borderColor + ';margin:0 0 20px;padding-bottom:10px;'; |
| 60 |
lbl.textContent = o.label; |
| 61 |
wrap.appendChild(lbl); |
| 62 |
} |
| 63 |
|
| 64 |
var target = o.openInNewTab ? '_blank' : '_self'; |
| 65 |
var refs = o.references || []; |
| 66 |
|
| 67 |
if (o.style === 'academic') { |
| 68 |
refs.forEach(function (r, i) { |
| 69 |
var item = document.createElement('div'); |
| 70 |
item.className = 'bkbg-src-item'; |
| 71 |
item.style.cssText = 'display:flex;gap:8px;margin-bottom:12px;line-height:1.65;align-items:flex-start;'; |
| 72 |
|
| 73 |
var num = document.createElement('span'); |
| 74 |
num.className = 'bkbg-src-num'; |
| 75 |
num.style.cssText = 'flex-shrink:0;min-width:28px;color:' + o.numberColor + ';'; |
| 76 |
num.textContent = '[' + (i + 1) + ']'; |
| 77 |
item.appendChild(num); |
| 78 |
|
| 79 |
var body = document.createElement('div'); |
| 80 |
var parts = []; |
| 81 |
if (o.showAuthor && r.author) parts.push('<span class="bkbg-src-author" style="font-style:italic;color:' + o.authorColor + '">' + esc(r.author) + '.</span> '); |
| 82 |
parts.push('<span class="bkbg-src-title" style="color:' + o.titleColor + '">"' + esc(r.title) + '."</span>'); |
| 83 |
if (o.showPublication && r.publication) parts.push(' <span style="color:' + o.pubColor + '">' + esc(r.publication) + '.</span>'); |
| 84 |
if (o.showDate && r.accessDate) parts.push(' <span style="color:' + o.pubColor + '">Accessed ' + esc(r.accessDate) + '.</span>'); |
| 85 |
if (o.showUrl && r.url) parts.push(' <a href="' + esc(r.url) + '" target="' + target + '" rel="noopener noreferrer" class="bkbg-src-url" style="color:' + o.urlColor + ';word-break:break-all;">' + esc(r.url) + '</a>'); |
| 86 |
body.innerHTML = parts.join(''); |
| 87 |
item.appendChild(body); |
| 88 |
wrap.appendChild(item); |
| 89 |
}); |
| 90 |
} else if (o.style === 'cards') { |
| 91 |
refs.forEach(function (r, i) { |
| 92 |
var card = document.createElement('div'); |
| 93 |
card.className = 'bkbg-src-item'; |
| 94 |
card.style.cssText = 'display:flex;gap:12px;padding:14px 16px;margin-bottom:10px;border-radius:' + o.borderRadius + 'px;border:1px solid ' + o.borderColor + ';background:' + o.cardBg + ';'; |
| 95 |
|
| 96 |
var num = document.createElement('span'); |
| 97 |
num.className = 'bkbg-src-num'; |
| 98 |
num.style.cssText = 'flex-shrink:0;color:' + o.numberColor + ';align-self:flex-start;margin-top:2px;'; |
| 99 |
num.textContent = i + 1; |
| 100 |
card.appendChild(num); |
| 101 |
|
| 102 |
var cbody = document.createElement('div'); |
| 103 |
cbody.className = 'bkbg-src-card-body'; |
| 104 |
cbody.style.cssText = 'flex:1;min-width:0;'; |
| 105 |
|
| 106 |
var ctitle = document.createElement('p'); |
| 107 |
ctitle.className = 'bkbg-src-card-title'; |
| 108 |
ctitle.style.cssText = 'margin:0 0 3px;color:' + o.titleColor + ';'; |
| 109 |
ctitle.textContent = r.title; |
| 110 |
cbody.appendChild(ctitle); |
| 111 |
|
| 112 |
var metaParts = []; |
| 113 |
if (o.showAuthor && r.author) metaParts.push('<span style="color:' + o.authorColor + '">' + esc(r.author) + '</span>'); |
| 114 |
if (o.showPublication && r.publication) metaParts.push('<span style="color:' + o.pubColor + '">' + esc(r.publication) + '</span>'); |
| 115 |
if (o.showDate && r.accessDate) metaParts.push('<span style="color:' + o.pubColor + '">' + esc(r.accessDate) + '</span>'); |
| 116 |
if (metaParts.length) { |
| 117 |
var meta = document.createElement('p'); |
| 118 |
meta.className = 'bkbg-src-card-meta'; |
| 119 |
meta.style.cssText = 'margin:0 0 4px;display:flex;flex-wrap:wrap;gap:4px;'; |
| 120 |
meta.innerHTML = metaParts.join('<span class="bkbg-src-sep" style="opacity:.4;">·</span>'); |
| 121 |
cbody.appendChild(meta); |
| 122 |
} |
| 123 |
if (o.showUrl && r.url) { |
| 124 |
var link = document.createElement('a'); |
| 125 |
link.className = 'bkbg-src-card-url'; |
| 126 |
link.href = r.url; |
| 127 |
link.target = target; |
| 128 |
link.rel = 'noopener noreferrer'; |
| 129 |
link.style.cssText = 'display:block;word-break:break-all;color:' + o.urlColor + ';margin-top:4px;'; |
| 130 |
link.textContent = r.url; |
| 131 |
cbody.appendChild(link); |
| 132 |
} |
| 133 |
card.appendChild(cbody); |
| 134 |
wrap.appendChild(card); |
| 135 |
}); |
| 136 |
} else { |
| 137 |
/* minimal */ |
| 138 |
var ul = document.createElement('ul'); |
| 139 |
ul.className = 'bkbg-src-list'; |
| 140 |
ul.style.cssText = 'list-style:none;padding:0;margin:0;'; |
| 141 |
refs.forEach(function (r, i) { |
| 142 |
var li = document.createElement('li'); |
| 143 |
li.className = 'bkbg-src-item'; |
| 144 |
li.style.cssText = 'margin-bottom:8px;line-height:1.6;color:' + o.titleColor + ';'; |
| 145 |
var parts = []; |
| 146 |
parts.push('<span class="bkbg-src-num" style="margin-right:4px;color:' + o.numberColor + '">' + (i + 1) + '.</span>'); |
| 147 |
if (o.showAuthor && r.author) parts.push('<span style="color:' + o.authorColor + '">' + esc(r.author) + '. </span>'); |
| 148 |
parts.push('<span class="bkbg-src-title" style="color:' + o.titleColor + '">' + esc(r.title) + '</span>'); |
| 149 |
if (o.showPublication && r.publication) parts.push('<span style="color:' + o.pubColor + '">, ' + esc(r.publication) + '</span>'); |
| 150 |
if (o.showUrl && r.url) parts.push(' — <a href="' + esc(r.url) + '" target="' + target + '" rel="noopener noreferrer" style="color:' + o.urlColor + '">' + esc(r.url) + '</a>'); |
| 151 |
li.innerHTML = parts.join(''); |
| 152 |
ul.appendChild(li); |
| 153 |
}); |
| 154 |
wrap.appendChild(ul); |
| 155 |
} |
| 156 |
|
| 157 |
el.parentNode.insertBefore(wrap, el); |
| 158 |
}); |
| 159 |
} |
| 160 |
|
| 161 |
function esc(str) { |
| 162 |
return String(str || '').replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"'); |
| 163 |
} |
| 164 |
|
| 165 |
if (document.readyState !== 'loading') { init(); } |
| 166 |
else { document.addEventListener('DOMContentLoaded', init); } |
| 167 |
})(); |
| 168 |
|
