| 1 |
(function () { |
| 2 |
'use strict'; |
| 3 |
|
| 4 |
document.querySelectorAll('.bkbg-tft-app').forEach(function (root) { |
| 5 |
var a; |
| 6 |
try { a = JSON.parse(root.dataset.opts || '{}'); } catch (e) { return; } |
| 7 |
|
| 8 |
var isDark = a.cardStyle === 'dark'; |
| 9 |
var isCard = a.cardStyle === 'card'; |
| 10 |
var bg = a.bgColor || '#ffffff'; |
| 11 |
var cardBgVal = isDark ? '#1f2937' : isCard ? (a.cardBg || '#f9fafb') : 'transparent'; |
| 12 |
var borderVal = isCard ? (a.borderColor || '#e5e7eb') : 'transparent'; |
| 13 |
var quoteTxtColor = isDark ? '#ffffff' : (a.textColor || '#111827'); |
| 14 |
var nameTxtColor = isDark ? '#f9fafb' : (a.nameColor || '#111827'); |
| 15 |
var titleTxtColor = isDark ? '#9ca3af' : (a.titleColor || '#6b7280'); |
| 16 |
var centered = (a.layout || 'centered') === 'centered'; |
| 17 |
var sideBySide = a.layout === 'side-by-side'; |
| 18 |
var maxW = a.maxWidth || 860; |
| 19 |
var ptop = a.paddingTop !== undefined ? a.paddingTop : 80; |
| 20 |
var pbot = a.paddingBottom !== undefined ? a.paddingBottom : 80; |
| 21 |
var avatarSz = a.avatarSize || 64; |
| 22 |
var qmSize = a.quotemarkSize || 120; |
| 23 |
|
| 24 |
// === Outer wrap === |
| 25 |
root.style.backgroundColor = bg; |
| 26 |
root.style.paddingTop = ptop + 'px'; |
| 27 |
root.style.paddingBottom = pbot + 'px'; |
| 28 |
|
| 29 |
// === Inner container === |
| 30 |
var inner = document.createElement('div'); |
| 31 |
inner.className = 'bkbg-tft-inner' + (sideBySide ? ' bkbg-tft-inner--side' : ''); |
| 32 |
inner.style.maxWidth = maxW + 'px'; |
| 33 |
if (centered && !sideBySide) inner.style.textAlign = 'center'; |
| 34 |
|
| 35 |
// === Card === |
| 36 |
var card = document.createElement('div'); |
| 37 |
var cardClass = 'bkbg-tft-card'; |
| 38 |
if (isCard) cardClass += ' bkbg-tft-card--card'; |
| 39 |
if (isDark) cardClass += ' bkbg-tft-card--dark'; |
| 40 |
card.className = cardClass; |
| 41 |
card.style.backgroundColor = cardBgVal; |
| 42 |
if (isCard) card.style.borderColor = borderVal; |
| 43 |
|
| 44 |
// === Decorative quotemark === |
| 45 |
if (a.showQuotemark !== false) { |
| 46 |
var qm = document.createElement('span'); |
| 47 |
qm.className = 'bkbg-tft-quotemark'; |
| 48 |
qm.textContent = '\u201C'; |
| 49 |
qm.style.fontSize = qmSize + 'px'; |
| 50 |
qm.style.color = a.quotemarkColor || '#ede9fe'; |
| 51 |
card.appendChild(qm); |
| 52 |
} |
| 53 |
|
| 54 |
var content = document.createElement('div'); |
| 55 |
content.className = 'bkbg-tft-content'; |
| 56 |
|
| 57 |
// === Side-by-side: separate column for avatar === |
| 58 |
var sideAvatarCol = null; |
| 59 |
if (sideBySide) { |
| 60 |
sideAvatarCol = document.createElement('div'); |
| 61 |
sideAvatarCol.className = 'bkbg-tft-side-avatar'; |
| 62 |
} |
| 63 |
|
| 64 |
// === Company logo === |
| 65 |
if ((a.showCompanyLogo !== false) && a.companyLogoUrl) { |
| 66 |
var cLogo = document.createElement('img'); |
| 67 |
cLogo.className = 'bkbg-tft-company-logo'; |
| 68 |
cLogo.src = a.companyLogoUrl; |
| 69 |
cLogo.alt = a.companyLogoAlt || ''; |
| 70 |
content.appendChild(cLogo); |
| 71 |
} |
| 72 |
|
| 73 |
// === Stars === |
| 74 |
if (a.showRating !== false) { |
| 75 |
var starsRow = document.createElement('div'); |
| 76 |
starsRow.className = 'bkbg-tft-stars'; |
| 77 |
if (centered && !sideBySide) starsRow.style.justifyContent = 'center'; |
| 78 |
for (var s = 1; s <= 5; s++) { |
| 79 |
var star = document.createElement('span'); |
| 80 |
star.textContent = '\u2605'; |
| 81 |
star.style.fontSize = '20px'; |
| 82 |
star.style.color = s <= (a.rating || 5) ? (a.starColor || '#f59e0b') : '#d1d5db'; |
| 83 |
starsRow.appendChild(star); |
| 84 |
} |
| 85 |
content.appendChild(starsRow); |
| 86 |
} |
| 87 |
|
| 88 |
// === Quote === |
| 89 |
var quote = document.createElement('blockquote'); |
| 90 |
quote.className = 'bkbg-tft-quote'; |
| 91 |
quote.style.color = quoteTxtColor; |
| 92 |
quote.innerHTML = a.quote || ''; |
| 93 |
content.appendChild(quote); |
| 94 |
|
| 95 |
// === Attribution row === |
| 96 |
var attrRow = document.createElement('div'); |
| 97 |
attrRow.className = 'bkbg-tft-attribution'; |
| 98 |
if (centered && !sideBySide) attrRow.style.justifyContent = 'center'; |
| 99 |
|
| 100 |
if (!sideBySide) { |
| 101 |
// Avatar inline |
| 102 |
var avatarEl; |
| 103 |
if (a.personAvatarUrl) { |
| 104 |
avatarEl = document.createElement('img'); |
| 105 |
avatarEl.className = 'bkbg-tft-avatar'; |
| 106 |
avatarEl.src = a.personAvatarUrl; |
| 107 |
avatarEl.alt = a.personAvatarAlt || a.personName || ''; |
| 108 |
avatarEl.style.width = avatarSz + 'px'; |
| 109 |
avatarEl.style.height = avatarSz + 'px'; |
| 110 |
} else { |
| 111 |
avatarEl = document.createElement('div'); |
| 112 |
avatarEl.className = 'bkbg-tft-avatar-placeholder'; |
| 113 |
avatarEl.style.width = avatarSz + 'px'; |
| 114 |
avatarEl.style.height = avatarSz + 'px'; |
| 115 |
avatarEl.textContent = '\ud83e\uddd1'; |
| 116 |
} |
| 117 |
attrRow.appendChild(avatarEl); |
| 118 |
} |
| 119 |
|
| 120 |
// Name + title |
| 121 |
var personInfo = document.createElement('div'); |
| 122 |
|
| 123 |
var nameEl = document.createElement('p'); |
| 124 |
nameEl.className = 'bkbg-tft-name'; |
| 125 |
nameEl.style.color = nameTxtColor; |
| 126 |
nameEl.textContent = a.personName || ''; |
| 127 |
personInfo.appendChild(nameEl); |
| 128 |
|
| 129 |
var titleEl = document.createElement('p'); |
| 130 |
titleEl.className = 'bkbg-tft-title'; |
| 131 |
titleEl.style.color = titleTxtColor; |
| 132 |
titleEl.textContent = a.personTitle || ''; |
| 133 |
personInfo.appendChild(titleEl); |
| 134 |
attrRow.appendChild(personInfo); |
| 135 |
|
| 136 |
// Result metric badge |
| 137 |
if (a.showResultMetric && a.resultMetric) { |
| 138 |
var badge = document.createElement('span'); |
| 139 |
badge.className = 'bkbg-tft-result'; |
| 140 |
badge.style.backgroundColor = a.resultBg || '#f0fdf4'; |
| 141 |
badge.style.color = a.resultColor || '#15803d'; |
| 142 |
badge.textContent = a.resultMetric; |
| 143 |
if (centered && !sideBySide) badge.style.marginLeft = '0'; |
| 144 |
attrRow.appendChild(badge); |
| 145 |
} |
| 146 |
|
| 147 |
content.appendChild(attrRow); |
| 148 |
card.appendChild(content); |
| 149 |
|
| 150 |
// Side-by-side: avatar in separate left column |
| 151 |
if (sideBySide && sideAvatarCol) { |
| 152 |
var sideAvatar; |
| 153 |
if (a.personAvatarUrl) { |
| 154 |
sideAvatar = document.createElement('img'); |
| 155 |
sideAvatar.className = 'bkbg-tft-avatar'; |
| 156 |
sideAvatar.src = a.personAvatarUrl; |
| 157 |
sideAvatar.alt = a.personAvatarAlt || a.personName || ''; |
| 158 |
sideAvatar.style.width = '120px'; |
| 159 |
sideAvatar.style.height = '120px'; |
| 160 |
} else { |
| 161 |
sideAvatar = document.createElement('div'); |
| 162 |
sideAvatar.className = 'bkbg-tft-avatar-placeholder'; |
| 163 |
sideAvatar.style.width = '120px'; |
| 164 |
sideAvatar.style.height = '120px'; |
| 165 |
sideAvatar.style.fontSize = '40px'; |
| 166 |
sideAvatar.textContent = '\ud83e\uddd1'; |
| 167 |
} |
| 168 |
sideAvatarCol.appendChild(sideAvatar); |
| 169 |
|
| 170 |
var sideNameEl = document.createElement('p'); |
| 171 |
sideNameEl.className = 'bkbg-tft-name'; |
| 172 |
sideNameEl.style.color = nameTxtColor; |
| 173 |
sideNameEl.textContent = a.personName || ''; |
| 174 |
sideAvatarCol.appendChild(sideNameEl); |
| 175 |
|
| 176 |
var sideTitleEl = document.createElement('p'); |
| 177 |
sideTitleEl.className = 'bkbg-tft-title'; |
| 178 |
sideTitleEl.style.color = titleTxtColor; |
| 179 |
sideTitleEl.textContent = a.personTitle || ''; |
| 180 |
sideAvatarCol.appendChild(sideTitleEl); |
| 181 |
|
| 182 |
card.insertBefore(sideAvatarCol, content); |
| 183 |
} |
| 184 |
|
| 185 |
inner.appendChild(card); |
| 186 |
root.appendChild(inner); |
| 187 |
}); |
| 188 |
})(); |
| 189 |
|
