| 1 |
(function () { |
| 2 |
'use strict'; |
| 3 |
|
| 4 |
function typoCssVarsForEl(typo, prefix, el) { |
| 5 |
if (!typo || typeof typo !== 'object') return; |
| 6 |
var map = { |
| 7 |
family: 'font-family', weight: 'font-weight', transform: 'text-transform', |
| 8 |
style: 'font-style', decoration: 'text-decoration', |
| 9 |
sizeDesktop: 'font-size-d', sizeTablet: 'font-size-t', sizeMobile: 'font-size-m', sizeUnit: 'font-size-unit', |
| 10 |
lineHeightDesktop: 'line-height-d', lineHeightTablet: 'line-height-t', lineHeightMobile: 'line-height-m', lineHeightUnit: 'line-height-unit', |
| 11 |
letterSpacingDesktop: 'letter-spacing-d', letterSpacingTablet: 'letter-spacing-t', letterSpacingMobile: 'letter-spacing-m', letterSpacingUnit: 'letter-spacing-unit', |
| 12 |
wordSpacingDesktop: 'word-spacing-d', wordSpacingTablet: 'word-spacing-t', wordSpacingMobile: 'word-spacing-m', wordSpacingUnit: 'word-spacing-unit' |
| 13 |
}; |
| 14 |
Object.keys(map).forEach(function (k) { |
| 15 |
if (typo[k] !== undefined && typo[k] !== '') { |
| 16 |
var v = typo[k]; |
| 17 |
if (typeof v === 'number') { |
| 18 |
var css = map[k]; |
| 19 |
var unit = ''; |
| 20 |
if (css.indexOf('font-size') === 0 && css !== 'font-size-unit') unit = typo.sizeUnit || 'px'; |
| 21 |
else if (css.indexOf('line-height') === 0 && css !== 'line-height-unit') unit = typo.lineHeightUnit || ''; |
| 22 |
else if (css.indexOf('letter-spacing') === 0 && css !== 'letter-spacing-unit') unit = typo.letterSpacingUnit || 'px'; |
| 23 |
else if (css.indexOf('word-spacing') === 0 && css !== 'word-spacing-unit') unit = typo.wordSpacingUnit || 'px'; |
| 24 |
v = v + unit; |
| 25 |
} |
| 26 |
el.style.setProperty(prefix + map[k], v); |
| 27 |
} |
| 28 |
}); |
| 29 |
} |
| 30 |
|
| 31 |
function mk(tag, cls, styles) { |
| 32 |
var d = document.createElement(tag); |
| 33 |
if (cls) d.className = cls; |
| 34 |
if (styles) Object.keys(styles).forEach(function (k) { d.style[k] = styles[k]; }); |
| 35 |
return d; |
| 36 |
} |
| 37 |
function tx(tag, cls, text, styles) { |
| 38 |
var d = mk(tag, cls, styles); |
| 39 |
d.textContent = text; |
| 40 |
return d; |
| 41 |
} |
| 42 |
function ap(parent) { |
| 43 |
Array.prototype.slice.call(arguments, 1).forEach(function (c) { if (c) parent.appendChild(c); }); |
| 44 |
return parent; |
| 45 |
} |
| 46 |
|
| 47 |
var eventTypeInfo = { |
| 48 |
conference: { label: 'Conference', bg: '#ede9fe', color: '#5b21b6' }, |
| 49 |
webinar: { label: 'Webinar', bg: '#dbeafe', color: '#1e40af' }, |
| 50 |
meetup: { label: 'Meetup', bg: '#dcfce7', color: '#14532d' }, |
| 51 |
workshop: { label: 'Workshop', bg: '#fef3c7', color: '#78350f' } |
| 52 |
}; |
| 53 |
|
| 54 |
function sectionHead(label, a) { |
| 55 |
return tx('div', 'bkbg-ed-section-head', label, { color: a.accentColor || '#6366f1', borderBottomColor: a.accentColor || '#6366f1' }); |
| 56 |
} |
| 57 |
|
| 58 |
function init() { |
| 59 |
document.querySelectorAll('.bkbg-event-debrief-app').forEach(function (appEl) { |
| 60 |
if (appEl.dataset.rendered) return; |
| 61 |
appEl.dataset.rendered = '1'; |
| 62 |
|
| 63 |
var a; |
| 64 |
try { a = JSON.parse(appEl.dataset.opts || '{}'); } catch (e) { return; } |
| 65 |
|
| 66 |
var lh = ((a.lineHeight || 168) / 100).toFixed(2); |
| 67 |
var tInfo = eventTypeInfo[a.eventType] || eventTypeInfo.conference; |
| 68 |
|
| 69 |
var wrap = mk('div', 'bkbg-ed-wrap', { |
| 70 |
border: '1px solid ' + (a.borderColor || '#e5e7eb'), |
| 71 |
borderRadius: (a.borderRadius || 12) + 'px', |
| 72 |
overflow: 'hidden', |
| 73 |
background: a.bgColor || '#fff' |
| 74 |
}); |
| 75 |
|
| 76 |
typoCssVarsForEl(a.typoTitle, '--bkbg-ed-ttl-', wrap); |
| 77 |
typoCssVarsForEl(a.typoBody, '--bkbg-ed-bdy-', wrap); |
| 78 |
|
| 79 |
// ── Header ─────────────────────────────────────────────────── |
| 80 |
var header = mk('div', 'bkbg-ed-header', { background: a.headerBg || '#1e1b4b' }); |
| 81 |
var metaRow = mk('div', 'bkbg-ed-header-meta'); |
| 82 |
ap(metaRow, tx('span', 'bkbg-ed-type-badge', tInfo.label, { background: tInfo.bg, color: tInfo.color })); |
| 83 |
if (a.eventLocation) ap(metaRow, tx('span', 'bkbg-ed-meta-item', '📍 ' + a.eventLocation, { color: a.metaColor || '#a5b4fc' })); |
| 84 |
if (a.eventDate) ap(metaRow, tx('span', 'bkbg-ed-meta-item', '� |
| 85 |
' + a.eventDate, { color: a.metaColor || '#a5b4fc' })); |
| 86 |
ap(header, metaRow); |
| 87 |
ap(header, tx('h2', 'bkbg-ed-title', a.eventName || '', { color: a.headerColor || '#fff' })); |
| 88 |
ap(wrap, header); |
| 89 |
|
| 90 |
// ── Stats ───────────────────────────────────────────────────── |
| 91 |
if (a.showStats) { |
| 92 |
var statsRow = mk('div', 'bkbg-ed-stats', { borderBottomColor: a.borderColor || '#e5e7eb' }); |
| 93 |
[[a.attendees, 'In-Person'], [a.onlineAttendees, 'Online'], [a.nps, 'NPS Score']].forEach(function (pair) { |
| 94 |
var tile = mk('div', 'bkbg-ed-stat', { background: a.statBg || '#f5f3ff' }); |
| 95 |
ap(tile, tx('div', 'bkbg-ed-stat-value', typeof pair[0] === 'number' ? pair[0].toLocaleString() : (pair[0] || '0'), { color: a.statColor || '#4338ca' })); |
| 96 |
ap(tile, tx('div', 'bkbg-ed-stat-label', pair[1])); |
| 97 |
ap(statsRow, tile); |
| 98 |
}); |
| 99 |
ap(wrap, statsRow); |
| 100 |
} |
| 101 |
|
| 102 |
// ── Body ───────────────────────────────────────────────────── |
| 103 |
var body = mk('div', 'bkbg-ed-body'); |
| 104 |
|
| 105 |
if (a.showSummary && a.summary) { |
| 106 |
ap(body, tx('div', 'bkbg-ed-summary', a.summary, { background: a.summaryBg || '#f8fafc', color: a.summaryColor || '#374151' })); |
| 107 |
} |
| 108 |
|
| 109 |
// Highlights |
| 110 |
if (a.showHighlights && a.highlights && a.highlights.length) { |
| 111 |
var hlSection = mk('div', 'bkbg-ed-highlights-section'); |
| 112 |
ap(hlSection, sectionHead(a.highlightsLabel || 'Event Highlights', a)); |
| 113 |
a.highlights.forEach(function (h) { |
| 114 |
var card = mk('div', 'bkbg-ed-highlight', { background: a.highlightBg || '#f8fafc', borderLeftColor: a.highlightBorder || '#6366f1' }); |
| 115 |
ap(card, tx('strong', 'bkbg-ed-highlight-title', h.title)); |
| 116 |
if (h.description) { |
| 117 |
var desc = mk('p', 'bkbg-ed-highlight-desc', { color: a.summaryColor || '#374151' }); |
| 118 |
desc.textContent = h.description; |
| 119 |
ap(card, desc); |
| 120 |
} |
| 121 |
ap(hlSection, card); |
| 122 |
}); |
| 123 |
ap(body, hlSection); |
| 124 |
} |
| 125 |
|
| 126 |
// Quotes |
| 127 |
if (a.showQuotes && a.quotes && a.quotes.length) { |
| 128 |
var qSection = mk('div', 'bkbg-ed-quotes-section'); |
| 129 |
ap(qSection, sectionHead(a.quotesLabel || 'Attendee Voices', a)); |
| 130 |
a.quotes.forEach(function (q) { |
| 131 |
var fig = mk('figure', 'bkbg-ed-quote', { background: a.quoteBg || '#f5f3ff', borderLeftColor: a.quoteBorder || '#818cf8' }); |
| 132 |
var bq = mk('blockquote', '', { color: a.quoteColor || '#4338ca', margin: '0 0 6px', fontStyle: 'italic' }); |
| 133 |
bq.textContent = '\u201c' + q.quote + '\u201d'; |
| 134 |
var fc = tx('figcaption', '', '— ' + q.speaker + (q.role ? ', ' + q.role : ''), { color: a.quoteColor || '#4338ca', fontSize: '12px', fontWeight: '700' }); |
| 135 |
ap(fig, bq, fc); |
| 136 |
ap(qSection, fig); |
| 137 |
}); |
| 138 |
ap(body, qSection); |
| 139 |
} |
| 140 |
|
| 141 |
// Outcomes |
| 142 |
if (a.showOutcomes && a.outcomes && a.outcomes.length) { |
| 143 |
var outSection = mk('div', 'bkbg-ed-outcomes-section'); |
| 144 |
ap(outSection, sectionHead(a.outcomesLabel || 'Key Outcomes', a)); |
| 145 |
var ul = mk('ul', 'bkbg-ed-list', { color: a.outcomeColor || '#166534' }); |
| 146 |
a.outcomes.forEach(function (o) { ap(ul, tx('li', '', o)); }); |
| 147 |
ap(outSection, ul); |
| 148 |
ap(body, outSection); |
| 149 |
} |
| 150 |
|
| 151 |
// Lessons |
| 152 |
if (a.showLessons && a.lessonsLearned && a.lessonsLearned.length) { |
| 153 |
var lsSection = mk('div', 'bkbg-ed-lessons-section'); |
| 154 |
ap(lsSection, sectionHead(a.lessonsLabel || 'Lessons Learned', a)); |
| 155 |
var ll = mk('ul', 'bkbg-ed-list', { color: a.lessonColor || '#92400e' }); |
| 156 |
a.lessonsLearned.forEach(function (l) { ap(ll, tx('li', '', l)); }); |
| 157 |
ap(lsSection, ll); |
| 158 |
ap(body, lsSection); |
| 159 |
} |
| 160 |
|
| 161 |
// Next Event |
| 162 |
if (a.showNextEvent && a.nextEventName) { |
| 163 |
var nextBox = mk('div', 'bkbg-ed-next', { background: a.nextEventBg || '#1e1b4b' }); |
| 164 |
var nextLeft = mk('div'); |
| 165 |
ap(nextLeft, tx('div', 'bkbg-ed-next-label', 'UP NEXT', { color: a.nextEventColor || '#fff' })); |
| 166 |
ap(nextLeft, tx('div', 'bkbg-ed-next-name', a.nextEventName, { color: a.nextEventColor || '#fff' })); |
| 167 |
if (a.nextEventDate) ap(nextLeft, tx('div', 'bkbg-ed-next-date', '� |
| 168 |
' + a.nextEventDate, { color: a.nextEventColor || '#fff' })); |
| 169 |
var nextBtn = mk('a', 'bkbg-ed-next-btn'); |
| 170 |
nextBtn.textContent = 'Learn More →'; |
| 171 |
nextBtn.href = a.nextEventUrl || '#'; |
| 172 |
nextBtn.style.background = a.accentColor || '#6366f1'; |
| 173 |
nextBtn.style.color = '#fff'; |
| 174 |
ap(nextBox, nextLeft, nextBtn); |
| 175 |
ap(body, nextBox); |
| 176 |
} |
| 177 |
|
| 178 |
ap(wrap, body); |
| 179 |
appEl.appendChild(wrap); |
| 180 |
}); |
| 181 |
} |
| 182 |
|
| 183 |
if (document.readyState !== 'loading') { init(); } |
| 184 |
else { document.addEventListener('DOMContentLoaded', init); } |
| 185 |
})(); |
| 186 |
|
