| 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 |
letterSpacing: 'letter-spacing', wordSpacing: 'word-spacing' |
| 8 |
}; |
| 9 |
function typoCssVarsForEl(el, typo, prefix) { |
| 10 |
if (!typo || typeof typo !== 'object') return; |
| 11 |
Object.keys(typo).forEach(function (k) { |
| 12 |
var v = typo[k]; if (v === '' || v == null) return; |
| 13 |
var css = _typoKeys[k]; if (!css) return; |
| 14 |
if ((k === 'letterSpacing' || k === 'wordSpacing') && typeof v === 'number') v = v + 'px'; |
| 15 |
if ((/^(sizeDesktop|sizeTablet|sizeMobile)$/).test(k) && typeof v === 'number') v = v + 'px'; |
| 16 |
el.style.setProperty(prefix + css, '' + v); |
| 17 |
}); |
| 18 |
} |
| 19 |
|
| 20 |
function init() { |
| 21 |
document.querySelectorAll('.bkbg-lis-app').forEach(function (el) { |
| 22 |
if (el.dataset.rendered) return; |
| 23 |
el.dataset.rendered = '1'; |
| 24 |
var opts; |
| 25 |
try { opts = JSON.parse(el.dataset.opts || '{}'); } catch (e) { opts = {}; } |
| 26 |
var o = Object.assign({ |
| 27 |
heading: '', showHeading: false, |
| 28 |
items: [], layout: 'list', numberStyle: 'badge', |
| 29 |
showNumbers: true, showImages: true, showRatings: false, |
| 30 |
showTags: true, showVerdicts: false, countDown: false, |
| 31 |
imageRatio: '16:9', imageRadius: 8, gap: 24, cardRadius: 12, |
| 32 |
paddingTop: 0, paddingBottom: 0, |
| 33 |
bgColor: '', cardBg: '#ffffff', cardBorder: '#e5e7eb', |
| 34 |
numberBg: '#6366f1', numberColor: '#ffffff', |
| 35 |
titleColor: '#111827', subtitleColor: '#6b7280', descColor: '#374151', |
| 36 |
tagBg: '#ede9fe', tagColor: '#6366f1', |
| 37 |
verdictBg: '#dcfce7', verdictColor: '#15803d', |
| 38 |
starColor: '#f59e0b', accentColor: '#6366f1' |
| 39 |
}, opts); |
| 40 |
|
| 41 |
var RATIO = { '16:9': '56.25%', '4:3': '75%', '1:1': '100%', '3:4': '133.333%' }; |
| 42 |
|
| 43 |
function mk(tag, cls, style, text) { |
| 44 |
var n = document.createElement(tag); |
| 45 |
if (cls) n.className = cls; |
| 46 |
if (style) Object.assign(n.style, style); |
| 47 |
if (text != null) n.textContent = text; |
| 48 |
return n; |
| 49 |
} |
| 50 |
|
| 51 |
function numBadge(num) { |
| 52 |
if (o.numberStyle === 'badge') { |
| 53 |
return mk('div', 'bkbg-lis-badge', { background: o.numberBg, color: o.numberColor }, num); |
| 54 |
} else if (o.numberStyle === 'circle') { |
| 55 |
return mk('div', 'bkbg-lis-circle', { borderColor: o.numberBg, color: o.numberBg }, num); |
| 56 |
} else if (o.numberStyle === 'large') { |
| 57 |
return mk('div', 'bkbg-lis-num-large', { color: o.numberBg }, num); |
| 58 |
} else { |
| 59 |
return mk('div', 'bkbg-lis-num-minimal', { color: o.numberBg }, '#' + num); |
| 60 |
} |
| 61 |
} |
| 62 |
|
| 63 |
function stars(rating) { |
| 64 |
var wrap = mk('div', 'bkbg-lis-stars'); |
| 65 |
for (var i = 1; i <= 5; i++) { |
| 66 |
wrap.appendChild(mk('span', '', { color: i <= rating ? o.starColor : '#d1d5db' }, '� |
| 67 |
')); |
| 68 |
} |
| 69 |
return wrap; |
| 70 |
} |
| 71 |
|
| 72 |
var section = mk('div', 'bkbg-lis-section', { |
| 73 |
background: o.bgColor || undefined, |
| 74 |
paddingTop: o.paddingTop + 'px', |
| 75 |
paddingBottom: o.paddingBottom + 'px' |
| 76 |
}); |
| 77 |
|
| 78 |
typoCssVarsForEl(section, o.headingTypo, '--bkbg-lis-h-'); |
| 79 |
typoCssVarsForEl(section, o.titleTypo, '--bkbg-lis-tt-'); |
| 80 |
typoCssVarsForEl(section, o.descTypo, '--bkbg-lis-d-'); |
| 81 |
|
| 82 |
if (o.showHeading && o.heading) { |
| 83 |
section.appendChild(mk('h2', 'bkbg-lis-heading', { color: o.titleColor }, o.heading)); |
| 84 |
} |
| 85 |
|
| 86 |
var layoutClass = 'bkbg-lis-' + (o.layout || 'list'); |
| 87 |
var listWrap = mk('div', layoutClass, { gap: o.gap + 'px', gridTemplateColumns: o.layout === 'grid' ? 'repeat(2,1fr)' : undefined }); |
| 88 |
|
| 89 |
(o.items || []).forEach(function (item, idx) { |
| 90 |
var cardinal = o.countDown ? (o.items.length - idx) : (idx + 1); |
| 91 |
var isOdd = idx % 2 === 1; |
| 92 |
|
| 93 |
var card = mk('div', 'bkbg-lis-card' + (o.layout === 'magazine' && isOdd ? ' bkbg-lis-odd' : ''), { |
| 94 |
background: o.cardBg, borderColor: o.cardBorder, borderRadius: o.cardRadius + 'px' |
| 95 |
}); |
| 96 |
|
| 97 |
/* image */ |
| 98 |
if (o.showImages) { |
| 99 |
var imgWrap = mk('div', 'bkbg-lis-img-wrap'); |
| 100 |
if (o.layout === 'list') { imgWrap.style.width = '220px'; } |
| 101 |
else if (o.layout === 'magazine') { imgWrap.style.width = '44%'; } |
| 102 |
|
| 103 |
var imgPad = mk('div', 'bkbg-lis-img-pad'); |
| 104 |
if (o.layout === 'grid') { imgPad.style.paddingBottom = RATIO[o.imageRatio] || '56.25%'; } |
| 105 |
imgWrap.appendChild(imgPad); |
| 106 |
|
| 107 |
if (item.imageUrl) { |
| 108 |
var img = document.createElement('img'); |
| 109 |
img.src = item.imageUrl; |
| 110 |
img.alt = item.imageAlt || ''; |
| 111 |
img.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;object-fit:cover'; |
| 112 |
if (o.layout !== 'grid') { img.style.borderRadius = o.imageRadius + 'px'; } |
| 113 |
imgPad.appendChild(img); |
| 114 |
} |
| 115 |
|
| 116 |
if (o.showNumbers && o.numberStyle !== 'large') { |
| 117 |
var numOvl = mk('div', 'bkbg-lis-num-overlay'); |
| 118 |
numOvl.appendChild(numBadge(cardinal)); |
| 119 |
imgPad.appendChild(numOvl); |
| 120 |
} |
| 121 |
card.appendChild(imgWrap); |
| 122 |
} |
| 123 |
|
| 124 |
/* content */ |
| 125 |
var content = mk('div', 'bkbg-lis-content'); |
| 126 |
|
| 127 |
/* number inside content (no image or large style) */ |
| 128 |
if (o.showNumbers && (!o.showImages || o.numberStyle === 'large')) { |
| 129 |
var numEl = mk('div', 'bkbg-lis-num-inline'); |
| 130 |
numEl.appendChild(numBadge(cardinal)); |
| 131 |
content.appendChild(numEl); |
| 132 |
} |
| 133 |
|
| 134 |
/* meta row */ |
| 135 |
if ((o.showTags && item.tag) || (o.showVerdicts && item.verdict)) { |
| 136 |
var meta = mk('div', 'bkbg-lis-meta'); |
| 137 |
if (o.showTags && item.tag) { |
| 138 |
meta.appendChild(mk('span', 'bkbg-lis-tag', { background: o.tagBg, color: o.tagColor }, item.tag)); |
| 139 |
} |
| 140 |
if (o.showVerdicts && item.verdict) { |
| 141 |
meta.appendChild(mk('span', 'bkbg-lis-verdict', { background: o.verdictBg, color: o.verdictColor }, item.verdict)); |
| 142 |
} |
| 143 |
content.appendChild(meta); |
| 144 |
} |
| 145 |
|
| 146 |
/* title */ |
| 147 |
var title = mk('h3', 'bkbg-lis-title', { color: o.titleColor }, ''); |
| 148 |
title.innerHTML = item.title || ''; |
| 149 |
content.appendChild(title); |
| 150 |
|
| 151 |
if (item.subtitle) { |
| 152 |
content.appendChild(mk('p', 'bkbg-lis-subtitle', { color: o.subtitleColor }, item.subtitle)); |
| 153 |
} |
| 154 |
|
| 155 |
if (o.showRatings) { content.appendChild(stars(item.rating || 5)); } |
| 156 |
|
| 157 |
if (item.description) { |
| 158 |
var desc = mk('p', 'bkbg-lis-desc', { color: o.descColor }, ''); |
| 159 |
desc.innerHTML = item.description; |
| 160 |
content.appendChild(desc); |
| 161 |
} |
| 162 |
|
| 163 |
card.appendChild(content); |
| 164 |
listWrap.appendChild(card); |
| 165 |
}); |
| 166 |
|
| 167 |
section.appendChild(listWrap); |
| 168 |
el.parentNode.insertBefore(section, el); |
| 169 |
}); |
| 170 |
} |
| 171 |
|
| 172 |
if (document.readyState !== 'loading') { init(); } |
| 173 |
else { document.addEventListener('DOMContentLoaded', init); } |
| 174 |
})(); |
| 175 |
|
