| 1 |
(function () { |
| 2 |
function typoCssVarsForEl(typo, prefix, el) { |
| 3 |
if (!typo || typeof typo !== 'object') return; |
| 4 |
var m = { family:'font-family', weight:'font-weight', transform:'text-transform', style:'font-style', decoration:'text-decoration', |
| 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 |
Object.keys(m).forEach(function (k) { |
| 10 |
if (typo[k] !== undefined && typo[k] !== '') { |
| 11 |
var v = typo[k], u = typo[k + 'Unit'] || ''; |
| 12 |
if (/Desktop|Tablet|Mobile/.test(k) && typeof v === 'number') v = v + (u || 'px'); |
| 13 |
el.style.setProperty(prefix + m[k], '' + v); |
| 14 |
} |
| 15 |
}); |
| 16 |
} |
| 17 |
|
| 18 |
var PROVIDER_ICONS = { |
| 19 |
figma: '🎨', |
| 20 |
loom: '🎥', |
| 21 |
youtube: '▶', |
| 22 |
typeform: '📋', |
| 23 |
calendly: '� |
| 24 |
', |
| 25 |
miro: '🗂', |
| 26 |
notion: '📄', |
| 27 |
airtable: '🗃', |
| 28 |
custom: '🔗', |
| 29 |
}; |
| 30 |
|
| 31 |
var ASPECT_RATIOS = { |
| 32 |
'16-9': 56.25, |
| 33 |
'4-3': 75, |
| 34 |
'1-1': 100, |
| 35 |
'3-2': 66.67, |
| 36 |
'21-9': 42.86, |
| 37 |
}; |
| 38 |
|
| 39 |
function hexToRgba(hex, opacity) { |
| 40 |
var r = parseInt((hex || '#000000').substr(1, 2), 16); |
| 41 |
var g = parseInt((hex || '#000000').substr(3, 2), 16); |
| 42 |
var b = parseInt((hex || '#000000').substr(5, 2), 16); |
| 43 |
return 'rgba(' + r + ',' + g + ',' + b + ',' + (opacity / 100) + ')'; |
| 44 |
} |
| 45 |
|
| 46 |
function init() { |
| 47 |
document.querySelectorAll('.bkbg-ep-app').forEach(function (appEl) { |
| 48 |
if (appEl.dataset.rendered) return; |
| 49 |
appEl.dataset.rendered = '1'; |
| 50 |
|
| 51 |
var opts; |
| 52 |
try { opts = JSON.parse(appEl.dataset.opts || '{}'); } catch (e) { opts = {}; } |
| 53 |
var o = Object.assign({ |
| 54 |
embedUrl: '', |
| 55 |
embedProvider: 'custom', |
| 56 |
embedTitle: 'Open', |
| 57 |
showTitle: true, |
| 58 |
description: '', |
| 59 |
showDescription: false, |
| 60 |
thumbnailUrl: '', |
| 61 |
ctaLabel: 'Click to open', |
| 62 |
ctaStyle: 'filled', |
| 63 |
aspectRatio: '16-9', |
| 64 |
customHeight: 480, |
| 65 |
maxWidth: 900, |
| 66 |
borderRadius: 12, |
| 67 |
showBrand: true, |
| 68 |
showLoadingBar: true, |
| 69 |
privacyNote: 'No data is loaded until you click.', |
| 70 |
showPrivacyNote: true, |
| 71 |
iframeSandbox: 'allow-scripts allow-same-origin allow-forms allow-popups allow-presentation', |
| 72 |
overlayBg: '#0f172a', |
| 73 |
overlayOpacity: 55, |
| 74 |
ctaBg: '#6366f1', |
| 75 |
ctaColor: '#ffffff', |
| 76 |
titleColor: '#f8fafc', |
| 77 |
descColor: '#cbd5e1', |
| 78 |
privacyColor: '#94a3b8', |
| 79 |
borderColor: '#e5e7eb', |
| 80 |
}, opts); |
| 81 |
|
| 82 |
if (!o.embedUrl) return; // nothing to show without a URL |
| 83 |
|
| 84 |
// ── Outer wrapper ── |
| 85 |
var wrap = document.createElement('div'); |
| 86 |
wrap.className = 'bkbg-ep-wrap'; |
| 87 |
wrap.style.maxWidth = o.maxWidth + 'px'; |
| 88 |
wrap.style.margin = '0 auto'; |
| 89 |
wrap.style.borderRadius = o.borderRadius + 'px'; |
| 90 |
wrap.style.overflow = 'hidden'; |
| 91 |
wrap.style.border = '1px solid ' + o.borderColor; |
| 92 |
|
| 93 |
typoCssVarsForEl(o.typoTitle, '--bkbg-ep-ttl-', wrap); |
| 94 |
typoCssVarsForEl(o.typoDesc, '--bkbg-ep-dsc-', wrap); |
| 95 |
typoCssVarsForEl(o.typoCta, '--bkbg-ep-cta-', wrap); |
| 96 |
|
| 97 |
// ── Container (aspect ratio box) ── |
| 98 |
var container = document.createElement('div'); |
| 99 |
container.className = 'bkbg-ep-container'; |
| 100 |
|
| 101 |
if (o.aspectRatio !== 'custom') { |
| 102 |
container.classList.add('ratio-' + o.aspectRatio); |
| 103 |
} else { |
| 104 |
container.style.height = o.customHeight + 'px'; |
| 105 |
} |
| 106 |
|
| 107 |
// ── Thumbnail ── |
| 108 |
if (o.thumbnailUrl) { |
| 109 |
var thumb = document.createElement('img'); |
| 110 |
thumb.className = 'bkbg-ep-thumbnail'; |
| 111 |
thumb.src = o.thumbnailUrl; |
| 112 |
thumb.alt = ''; |
| 113 |
container.appendChild(thumb); |
| 114 |
} |
| 115 |
|
| 116 |
// ── Overlay ── |
| 117 |
var overlay = document.createElement('div'); |
| 118 |
overlay.className = 'bkbg-ep-overlay'; |
| 119 |
overlay.style.background = hexToRgba(o.overlayBg, o.overlayOpacity); |
| 120 |
|
| 121 |
// Provider badge |
| 122 |
if (o.showBrand) { |
| 123 |
var badge = document.createElement('div'); |
| 124 |
badge.className = 'bkbg-ep-badge'; |
| 125 |
var icon = PROVIDER_ICONS[o.embedProvider] || PROVIDER_ICONS.custom; |
| 126 |
var providerName = o.embedProvider.charAt(0).toUpperCase() + o.embedProvider.slice(1); |
| 127 |
badge.textContent = icon + ' ' + providerName; |
| 128 |
overlay.appendChild(badge); |
| 129 |
} |
| 130 |
|
| 131 |
// Title |
| 132 |
if (o.showTitle && o.embedTitle) { |
| 133 |
var titleEl = document.createElement('p'); |
| 134 |
titleEl.className = 'bkbg-ep-title'; |
| 135 |
titleEl.textContent = o.embedTitle; |
| 136 |
titleEl.style.color = o.titleColor; |
| 137 |
overlay.appendChild(titleEl); |
| 138 |
} |
| 139 |
|
| 140 |
// Description |
| 141 |
if (o.showDescription && o.description) { |
| 142 |
var descEl = document.createElement('p'); |
| 143 |
descEl.className = 'bkbg-ep-description'; |
| 144 |
descEl.textContent = o.description; |
| 145 |
descEl.style.color = o.descColor; |
| 146 |
overlay.appendChild(descEl); |
| 147 |
} |
| 148 |
|
| 149 |
// CTA button |
| 150 |
var cta = document.createElement('button'); |
| 151 |
cta.className = 'bkbg-ep-cta style-' + o.ctaStyle; |
| 152 |
cta.textContent = o.ctaLabel; |
| 153 |
cta.setAttribute('type', 'button'); |
| 154 |
cta.setAttribute('aria-label', o.embedTitle || 'Open embed'); |
| 155 |
|
| 156 |
if (o.ctaStyle === 'filled') { |
| 157 |
cta.style.background = o.ctaBg; |
| 158 |
cta.style.color = o.ctaColor; |
| 159 |
cta.style.borderColor = o.ctaBg; |
| 160 |
} else if (o.ctaStyle === 'outline') { |
| 161 |
cta.style.background = 'transparent'; |
| 162 |
cta.style.color = o.ctaBg; |
| 163 |
cta.style.borderColor = o.ctaBg; |
| 164 |
} else { |
| 165 |
cta.style.background = 'transparent'; |
| 166 |
cta.style.color = o.ctaColor; |
| 167 |
cta.style.borderColor = 'transparent'; |
| 168 |
} |
| 169 |
overlay.appendChild(cta); |
| 170 |
|
| 171 |
// Privacy note |
| 172 |
if (o.showPrivacyNote && o.privacyNote) { |
| 173 |
var privacy = document.createElement('p'); |
| 174 |
privacy.className = 'bkbg-ep-privacy'; |
| 175 |
privacy.textContent = '🔒 ' + o.privacyNote; |
| 176 |
privacy.style.color = o.privacyColor; |
| 177 |
overlay.appendChild(privacy); |
| 178 |
} |
| 179 |
|
| 180 |
container.appendChild(overlay); |
| 181 |
|
| 182 |
// ── Click → load iframe ── |
| 183 |
function loadEmbed() { |
| 184 |
// Remove overlay |
| 185 |
if (overlay.parentNode) overlay.parentNode.removeChild(overlay); |
| 186 |
if (thumb && thumb.parentNode) thumb.parentNode.removeChild(thumb); |
| 187 |
|
| 188 |
// Loading bar |
| 189 |
if (o.showLoadingBar) { |
| 190 |
var bar = document.createElement('div'); |
| 191 |
bar.className = 'bkbg-ep-loading'; |
| 192 |
bar.style.background = o.ctaBg || '#6366f1'; |
| 193 |
container.appendChild(bar); |
| 194 |
setTimeout(function () { |
| 195 |
if (bar.parentNode) bar.parentNode.removeChild(bar); |
| 196 |
}, 2200); |
| 197 |
} |
| 198 |
|
| 199 |
// iframe |
| 200 |
var iframe = document.createElement('iframe'); |
| 201 |
iframe.className = 'bkbg-ep-iframe'; |
| 202 |
iframe.src = o.embedUrl; |
| 203 |
iframe.setAttribute('allowfullscreen', ''); |
| 204 |
iframe.setAttribute('allow', 'fullscreen; autoplay; camera; microphone'); |
| 205 |
if (o.iframeSandbox) { |
| 206 |
iframe.setAttribute('sandbox', o.iframeSandbox); |
| 207 |
} |
| 208 |
iframe.setAttribute('loading', 'eager'); |
| 209 |
container.appendChild(iframe); |
| 210 |
} |
| 211 |
|
| 212 |
overlay.addEventListener('click', loadEmbed); |
| 213 |
|
| 214 |
wrap.appendChild(container); |
| 215 |
appEl.parentNode.insertBefore(wrap, appEl); |
| 216 |
appEl.style.display = 'none'; |
| 217 |
}); |
| 218 |
} |
| 219 |
|
| 220 |
if (document.readyState !== 'loading') { init(); } |
| 221 |
else { document.addEventListener('DOMContentLoaded', init); } |
| 222 |
})(); |
| 223 |
|
