| 1 |
(function () { |
| 2 |
var _typoKeys = { family:'font-family', weight:'font-weight', style:'font-style', |
| 3 |
decoration:'text-decoration', transform:'text-transform', |
| 4 |
sizeDesktop:'font-size-d', sizeTablet:'font-size-t', sizeMobile:'font-size-m', |
| 5 |
lineHeightDesktop:'line-height-d', lineHeightTablet:'line-height-t', lineHeightMobile:'line-height-m', |
| 6 |
letterSpacingDesktop:'letter-spacing-d', letterSpacingTablet:'letter-spacing-t', letterSpacingMobile:'letter-spacing-m', |
| 7 |
wordSpacingDesktop:'word-spacing-d', wordSpacingTablet:'word-spacing-t', wordSpacingMobile:'word-spacing-m' }; |
| 8 |
function typoCssVarsForEl(el, typo, prefix) { |
| 9 |
if (!typo || typeof typo !== 'object') return; |
| 10 |
Object.keys(_typoKeys).forEach(function (k) { |
| 11 |
if (typo[k] !== undefined && typo[k] !== '') el.style.setProperty(prefix + _typoKeys[k], String(typo[k])); |
| 12 |
}); |
| 13 |
} |
| 14 |
var MEDIA_ICONS = { video: '▶', audio: '🎙️', image: '🖼️' }; |
| 15 |
|
| 16 |
document.querySelectorAll('.bkbg-mqu-app').forEach(function (app) { |
| 17 |
var opts = {}; |
| 18 |
try { opts = JSON.parse(app.dataset.opts || '{}'); } catch (e) { } |
| 19 |
|
| 20 |
var quote = opts.quote || ''; |
| 21 |
var videoUrl = opts.videoUrl || ''; |
| 22 |
var thumbnailUrl = opts.thumbnailUrl || ''; |
| 23 |
var showVideo = opts.showVideo !== false; |
| 24 |
var mediaType = opts.mediaType || 'video'; |
| 25 |
var mediaLabel = opts.mediaLabel || ''; |
| 26 |
var showMediaLabel = opts.showMediaLabel !== false; |
| 27 |
var speakerName = opts.speakerName || ''; |
| 28 |
var speakerTitle = opts.speakerTitle || ''; |
| 29 |
var speakerAvatarUrl = opts.speakerAvatarUrl || ''; |
| 30 |
var layout = opts.layout || 'media-left'; |
| 31 |
var cardStyle = opts.style || 'card'; |
| 32 |
var quoteColor = opts.quoteColor || '#111827'; |
| 33 |
var speakerColor = opts.speakerColor || '#374151'; |
| 34 |
var bgColor = opts.bgColor || '#ffffff'; |
| 35 |
var accentColor = opts.accentColor || '#7c3aed'; |
| 36 |
var borderColor = opts.borderColor || '#e5e7eb'; |
| 37 |
var cardBg = opts.cardBg || '#f9fafb'; |
| 38 |
var playBtnBg = opts.playBtnBg || '#ffffff'; |
| 39 |
var playBtnColor = opts.playBtnColor || '#7c3aed'; |
| 40 |
var quoteSize = opts.quoteSize || 20; |
| 41 |
var showQuoteIcon = opts.showQuoteIcon !== false; |
| 42 |
var mediaRadius = opts.mediaRadius !== undefined ? opts.mediaRadius : 12; |
| 43 |
var borderRadius = opts.borderRadius !== undefined ? opts.borderRadius : 16; |
| 44 |
var maxWidth = opts.maxWidth || 900; |
| 45 |
var paddingTop = opts.paddingTop !== undefined ? opts.paddingTop : 64; |
| 46 |
var paddingBottom = opts.paddingBottom !== undefined ? opts.paddingBottom : 64; |
| 47 |
|
| 48 |
var isTop = layout === 'media-top'; |
| 49 |
var isRight = layout === 'media-right'; |
| 50 |
var isOnly = layout === 'quote-only'; |
| 51 |
|
| 52 |
/* wrap */ |
| 53 |
var wrap = document.createElement('div'); |
| 54 |
wrap.className = 'bkbg-mqu-wrap'; |
| 55 |
wrap.style.cssText = 'background:' + bgColor + ';padding-top:' + paddingTop + 'px;padding-bottom:' + paddingBottom + 'px;'; |
| 56 |
|
| 57 |
typoCssVarsForEl(wrap, opts.quoteTypo, '--bkbg-mqu-qt-'); |
| 58 |
typoCssVarsForEl(wrap, opts.speakerNameTypo, '--bkbg-mqu-sn-'); |
| 59 |
typoCssVarsForEl(wrap, opts.speakerTitleTypo, '--bkbg-mqu-st-'); |
| 60 |
|
| 61 |
/* card */ |
| 62 |
var card = document.createElement('div'); |
| 63 |
card.className = 'bkbg-mqu-card bkbg-mqu-card--' + cardStyle; |
| 64 |
card.style.maxWidth = maxWidth + 'px'; |
| 65 |
if (cardStyle === 'card') { |
| 66 |
card.style.cssText += ';background:' + cardBg + ';border-radius:' + borderRadius + 'px;'; |
| 67 |
} else if (cardStyle === 'bordered') { |
| 68 |
card.style.cssText += ';border-color:' + borderColor + ';border-radius:' + borderRadius + 'px;'; |
| 69 |
} else if (cardStyle === 'minimal') { |
| 70 |
card.style.borderLeftColor = accentColor; |
| 71 |
} |
| 72 |
|
| 73 |
/* inner */ |
| 74 |
var inner = document.createElement('div'); |
| 75 |
inner.className = 'bkbg-mqu-inner bkbg-mqu-inner--' + layout; |
| 76 |
if (isOnly) inner.className = 'bkbg-mqu-inner bkbg-mqu-inner--quote-only'; |
| 77 |
|
| 78 |
/* media column */ |
| 79 |
if (!isOnly && showVideo) { |
| 80 |
var mediaCol = document.createElement('div'); |
| 81 |
mediaCol.className = 'bkbg-mqu-media-col'; |
| 82 |
|
| 83 |
var thumbWrap = document.createElement(videoUrl ? 'a' : 'div'); |
| 84 |
thumbWrap.className = 'bkbg-mqu-thumbnail-wrap'; |
| 85 |
thumbWrap.style.borderRadius = mediaRadius + 'px'; |
| 86 |
thumbWrap.style.overflow = 'hidden'; |
| 87 |
if (videoUrl) { |
| 88 |
thumbWrap.href = videoUrl; |
| 89 |
thumbWrap.target = '_blank'; |
| 90 |
thumbWrap.rel = 'noopener noreferrer'; |
| 91 |
} |
| 92 |
|
| 93 |
if (thumbnailUrl) { |
| 94 |
var thumb = document.createElement('img'); |
| 95 |
thumb.className = 'bkbg-mqu-thumbnail'; |
| 96 |
thumb.src = thumbnailUrl; |
| 97 |
thumb.alt = speakerName ? 'Watch: ' + speakerName : 'Watch'; |
| 98 |
thumb.style.borderRadius = mediaRadius + 'px'; |
| 99 |
thumbWrap.appendChild(thumb); |
| 100 |
|
| 101 |
/* play overlay */ |
| 102 |
var overlay = document.createElement('div'); |
| 103 |
overlay.className = 'bkbg-mqu-play-overlay'; |
| 104 |
var playBtn = document.createElement('div'); |
| 105 |
playBtn.className = 'bkbg-mqu-play-btn'; |
| 106 |
playBtn.style.cssText = 'background:' + playBtnBg + ';color:' + playBtnColor; |
| 107 |
playBtn.textContent = MEDIA_ICONS[mediaType] || '▶'; |
| 108 |
overlay.appendChild(playBtn); |
| 109 |
thumbWrap.appendChild(overlay); |
| 110 |
} else { |
| 111 |
thumbWrap.style.cssText += ';background:#f3f4f6;height:200px;display:flex;align-items:center;justify-content:center;font-size:40px;color:#d1d5db;'; |
| 112 |
thumbWrap.textContent = MEDIA_ICONS[mediaType] || '▶'; |
| 113 |
} |
| 114 |
mediaCol.appendChild(thumbWrap); |
| 115 |
|
| 116 |
if (showMediaLabel && mediaLabel) { |
| 117 |
var lbl = document.createElement('a'); |
| 118 |
lbl.className = 'bkbg-mqu-media-label'; |
| 119 |
lbl.textContent = mediaLabel; |
| 120 |
lbl.style.color = accentColor; |
| 121 |
if (videoUrl) { lbl.href = videoUrl; lbl.target = '_blank'; lbl.rel = 'noopener noreferrer'; } else { lbl.href = '#'; } |
| 122 |
mediaCol.appendChild(lbl); |
| 123 |
} |
| 124 |
inner.appendChild(mediaCol); |
| 125 |
} |
| 126 |
|
| 127 |
/* quote column */ |
| 128 |
var quoteCol = document.createElement('div'); |
| 129 |
quoteCol.className = 'bkbg-mqu-quote-col'; |
| 130 |
|
| 131 |
if (showQuoteIcon) { |
| 132 |
var ico = document.createElement('span'); |
| 133 |
ico.className = 'bkbg-mqu-icon'; |
| 134 |
ico.style.color = accentColor; |
| 135 |
ico.textContent = '\u201c'; |
| 136 |
quoteCol.appendChild(ico); |
| 137 |
} |
| 138 |
|
| 139 |
var bq = document.createElement('blockquote'); |
| 140 |
bq.className = 'bkbg-mqu-blockquote'; |
| 141 |
bq.style.color = quoteColor; |
| 142 |
bq.textContent = quote; |
| 143 |
quoteCol.appendChild(bq); |
| 144 |
|
| 145 |
/* speaker */ |
| 146 |
var speaker = document.createElement('div'); |
| 147 |
speaker.className = 'bkbg-mqu-speaker'; |
| 148 |
if (speakerAvatarUrl) { |
| 149 |
var av = document.createElement('img'); |
| 150 |
av.className = 'bkbg-mqu-avatar'; |
| 151 |
av.src = speakerAvatarUrl; |
| 152 |
av.alt = speakerName; |
| 153 |
av.style.borderColor = borderColor; |
| 154 |
speaker.appendChild(av); |
| 155 |
} else { |
| 156 |
var avPh = document.createElement('div'); |
| 157 |
avPh.className = 'bkbg-mqu-avatar-placeholder'; |
| 158 |
avPh.textContent = '👤'; |
| 159 |
speaker.appendChild(avPh); |
| 160 |
} |
| 161 |
var spInfo = document.createElement('div'); |
| 162 |
var spName = document.createElement('p'); |
| 163 |
spName.className = 'bkbg-mqu-speaker-name'; |
| 164 |
spName.style.color = quoteColor; |
| 165 |
spName.textContent = speakerName; |
| 166 |
spInfo.appendChild(spName); |
| 167 |
if (speakerTitle) { |
| 168 |
var spRole = document.createElement('p'); |
| 169 |
spRole.className = 'bkbg-mqu-speaker-title'; |
| 170 |
spRole.style.color = speakerColor; |
| 171 |
spRole.textContent = speakerTitle; |
| 172 |
spInfo.appendChild(spRole); |
| 173 |
} |
| 174 |
speaker.appendChild(spInfo); |
| 175 |
quoteCol.appendChild(speaker); |
| 176 |
|
| 177 |
inner.appendChild(quoteCol); |
| 178 |
card.appendChild(inner); |
| 179 |
wrap.appendChild(card); |
| 180 |
app.replaceWith(wrap); |
| 181 |
}); |
| 182 |
})(); |
| 183 |
|
