| 1 |
(function () { |
| 2 |
function typoCssVarsForEl(typo, prefix, el) { |
| 3 |
if (!typo || typeof typo !== 'object') return; |
| 4 |
var map = { |
| 5 |
family:'font-family', weight:'font-weight', style:'font-style', |
| 6 |
decoration:'text-decoration', transform:'text-transform', |
| 7 |
sizeDesktop:'font-size-d', sizeTablet:'font-size-t', sizeMobile:'font-size-m', |
| 8 |
lineHeightDesktop:'line-height-d', lineHeightTablet:'line-height-t', lineHeightMobile:'line-height-m', |
| 9 |
letterSpacingDesktop:'letter-spacing-d', letterSpacingTablet:'letter-spacing-t', letterSpacingMobile:'letter-spacing-m', |
| 10 |
wordSpacingDesktop:'word-spacing-d', wordSpacingTablet:'word-spacing-t', wordSpacingMobile:'word-spacing-m' |
| 11 |
}; |
| 12 |
Object.keys(map).forEach(function(k) { |
| 13 |
if (typo[k] !== undefined && typo[k] !== '') { |
| 14 |
var v = typo[k]; |
| 15 |
if (['sizeDesktop','sizeTablet','sizeMobile'].indexOf(k) !== -1) v = v + (typo.sizeUnit || 'px'); |
| 16 |
else if (['lineHeightDesktop','lineHeightTablet','lineHeightMobile'].indexOf(k) !== -1) v = v + (typo.lineHeightUnit || ''); |
| 17 |
else if (['letterSpacingDesktop','letterSpacingTablet','letterSpacingMobile'].indexOf(k) !== -1) v = v + (typo.letterSpacingUnit || 'px'); |
| 18 |
else if (['wordSpacingDesktop','wordSpacingTablet','wordSpacingMobile'].indexOf(k) !== -1) v = v + (typo.wordSpacingUnit || 'px'); |
| 19 |
el.style.setProperty(prefix + map[k], String(v)); |
| 20 |
} |
| 21 |
}); |
| 22 |
} |
| 23 |
|
| 24 |
document.querySelectorAll('.bkbg-arh-app').forEach(function (app) { |
| 25 |
var opts = {}; |
| 26 |
try { opts = JSON.parse(app.dataset.opts || '{}'); } catch (e) { } |
| 27 |
|
| 28 |
var category = opts.category || ''; |
| 29 |
var categoryColor = opts.categoryColor || '#ffffff'; |
| 30 |
var categoryBg = opts.categoryBg || '#7c3aed'; |
| 31 |
var showCategory = opts.showCategory !== false; |
| 32 |
var headline = opts.headline || ''; |
| 33 |
var subheadline = opts.subheadline || ''; |
| 34 |
var showSubheadline = opts.showSubheadline !== false; |
| 35 |
var headlineTag = opts.headlineTag || 'h1'; |
| 36 |
var headlineSize = opts.headlineSize || 48; |
| 37 |
var authorName = opts.authorName || ''; |
| 38 |
var authorRole = opts.authorRole || ''; |
| 39 |
var authorAvatarUrl = opts.authorAvatarUrl || ''; |
| 40 |
var publishDate = opts.publishDate || ''; |
| 41 |
var readingTime = opts.readingTime || ''; |
| 42 |
var showAuthor = opts.showAuthor !== false; |
| 43 |
var showDate = opts.showDate !== false; |
| 44 |
var showReadingTime = opts.showReadingTime !== false; |
| 45 |
var heroImageUrl = opts.heroImageUrl || ''; |
| 46 |
var heroImageAlt = opts.heroImageAlt || ''; |
| 47 |
var showHeroImage = opts.showHeroImage !== false; |
| 48 |
var heroRadius = opts.heroRadius !== undefined ? opts.heroRadius : 12; |
| 49 |
var layout = opts.layout || 'simple'; |
| 50 |
var bgColor = opts.bgColor || '#ffffff'; |
| 51 |
var headlineColor = opts.headlineColor || '#111827'; |
| 52 |
var subColor = opts.subColor || '#6b7280'; |
| 53 |
var metaColor = opts.metaColor || '#9ca3af'; |
| 54 |
var dividerColor = opts.dividerColor || '#e5e7eb'; |
| 55 |
var subSize = opts.subSize || 20; |
| 56 |
var maxWidth = opts.maxWidth || 860; |
| 57 |
var paddingTop = opts.paddingTop !== undefined ? opts.paddingTop : 64; |
| 58 |
var paddingBottom = opts.paddingBottom !== undefined ? opts.paddingBottom : 48; |
| 59 |
var isCentered = layout === 'centered'; |
| 60 |
|
| 61 |
var wrap = document.createElement('div'); |
| 62 |
wrap.className = 'bkbg-arh-wrap'; |
| 63 |
wrap.style.cssText = 'background:' + bgColor + ';padding-top:' + paddingTop + 'px;padding-bottom:' + paddingBottom + 'px;'; |
| 64 |
wrap.style.setProperty('--bkbg-arh-headline-sz', headlineSize + 'px'); |
| 65 |
wrap.style.setProperty('--bkbg-arh-sub-sz', subSize + 'px'); |
| 66 |
typoCssVarsForEl(opts.headlineTypo, '--bkbg-arh-headline-', wrap); |
| 67 |
typoCssVarsForEl(opts.subTypo, '--bkbg-arh-sub-', wrap); |
| 68 |
|
| 69 |
var inner = document.createElement('div'); |
| 70 |
inner.className = 'bkbg-arh-inner' + (isCentered ? ' bkbg-arh-inner--centered' : ''); |
| 71 |
inner.style.cssText = 'max-width:' + maxWidth + 'px;'; |
| 72 |
wrap.appendChild(inner); |
| 73 |
|
| 74 |
/* category */ |
| 75 |
if (showCategory && category) { |
| 76 |
var catRow = document.createElement('div'); |
| 77 |
catRow.className = 'bkbg-arh-category-row'; |
| 78 |
var cat = document.createElement('span'); |
| 79 |
cat.className = 'bkbg-arh-category'; |
| 80 |
cat.style.cssText = 'background:' + categoryBg + ';color:' + categoryColor; |
| 81 |
cat.textContent = category; |
| 82 |
catRow.appendChild(cat); |
| 83 |
inner.appendChild(catRow); |
| 84 |
} |
| 85 |
|
| 86 |
/* headline */ |
| 87 |
if (headline) { |
| 88 |
var h = document.createElement(headlineTag); |
| 89 |
h.className = 'bkbg-arh-headline'; |
| 90 |
h.style.color = headlineColor; |
| 91 |
h.textContent = headline; |
| 92 |
inner.appendChild(h); |
| 93 |
} |
| 94 |
|
| 95 |
/* subheadline */ |
| 96 |
if (showSubheadline && subheadline) { |
| 97 |
var sub = document.createElement('p'); |
| 98 |
sub.className = 'bkbg-arh-sub'; |
| 99 |
sub.style.color = subColor; |
| 100 |
sub.textContent = subheadline; |
| 101 |
inner.appendChild(sub); |
| 102 |
} |
| 103 |
|
| 104 |
/* meta bar */ |
| 105 |
if (showAuthor || showDate || showReadingTime) { |
| 106 |
var meta = document.createElement('div'); |
| 107 |
meta.className = 'bkbg-arh-meta'; |
| 108 |
meta.style.borderTopColor = dividerColor; |
| 109 |
|
| 110 |
if (showAuthor) { |
| 111 |
var authorWrap = document.createElement('div'); |
| 112 |
authorWrap.className = 'bkbg-arh-author'; |
| 113 |
|
| 114 |
if (authorAvatarUrl) { |
| 115 |
var av = document.createElement('img'); |
| 116 |
av.className = 'bkbg-arh-avatar'; |
| 117 |
av.src = authorAvatarUrl; |
| 118 |
av.alt = authorName; |
| 119 |
authorWrap.appendChild(av); |
| 120 |
} else { |
| 121 |
var avPh = document.createElement('div'); |
| 122 |
avPh.className = 'bkbg-arh-avatar-placeholder'; |
| 123 |
avPh.textContent = '👤'; |
| 124 |
authorWrap.appendChild(avPh); |
| 125 |
} |
| 126 |
|
| 127 |
var authorInfo = document.createElement('div'); |
| 128 |
var nameEl = document.createElement('p'); |
| 129 |
nameEl.className = 'bkbg-arh-author-name'; |
| 130 |
nameEl.style.color = headlineColor; |
| 131 |
nameEl.textContent = authorName; |
| 132 |
authorInfo.appendChild(nameEl); |
| 133 |
if (authorRole) { |
| 134 |
var roleEl = document.createElement('p'); |
| 135 |
roleEl.className = 'bkbg-arh-author-role'; |
| 136 |
roleEl.style.color = metaColor; |
| 137 |
roleEl.textContent = authorRole; |
| 138 |
authorInfo.appendChild(roleEl); |
| 139 |
} |
| 140 |
authorWrap.appendChild(authorInfo); |
| 141 |
meta.appendChild(authorWrap); |
| 142 |
} |
| 143 |
|
| 144 |
if (showDate || showReadingTime) { |
| 145 |
var aside = document.createElement('div'); |
| 146 |
aside.className = 'bkbg-arh-meta-aside'; |
| 147 |
aside.style.color = metaColor; |
| 148 |
|
| 149 |
if (showDate && publishDate) { |
| 150 |
var dateEl = document.createElement('span'); |
| 151 |
dateEl.textContent = publishDate; |
| 152 |
aside.appendChild(dateEl); |
| 153 |
} |
| 154 |
if (showDate && showReadingTime && publishDate && readingTime) { |
| 155 |
var sep = document.createElement('span'); |
| 156 |
sep.className = 'bkbg-arh-sep'; |
| 157 |
sep.textContent = '·'; |
| 158 |
aside.appendChild(sep); |
| 159 |
} |
| 160 |
if (showReadingTime && readingTime) { |
| 161 |
var rtEl = document.createElement('span'); |
| 162 |
rtEl.textContent = readingTime; |
| 163 |
aside.appendChild(rtEl); |
| 164 |
} |
| 165 |
meta.appendChild(aside); |
| 166 |
} |
| 167 |
inner.appendChild(meta); |
| 168 |
} |
| 169 |
|
| 170 |
/* hero image */ |
| 171 |
if (showHeroImage && heroImageUrl) { |
| 172 |
var hero = document.createElement('img'); |
| 173 |
hero.className = 'bkbg-arh-hero'; |
| 174 |
hero.src = heroImageUrl; |
| 175 |
hero.alt = heroImageAlt; |
| 176 |
hero.style.borderRadius = heroRadius + 'px'; |
| 177 |
inner.appendChild(hero); |
| 178 |
} |
| 179 |
|
| 180 |
app.replaceWith(wrap); |
| 181 |
}); |
| 182 |
})(); |
| 183 |
|
