| 1 |
(function () { |
| 2 |
'use strict'; |
| 3 |
|
| 4 |
var _typoKeys = { |
| 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 |
function typoCssVarsForEl(el, obj, prefix) { |
| 13 |
if (!obj || typeof obj !== 'object') return; |
| 14 |
Object.keys(_typoKeys).forEach(function (k) { |
| 15 |
var v = obj[k]; |
| 16 |
if (v === undefined || v === '' || v === null) return; |
| 17 |
if (k === 'sizeDesktop' || k === 'sizeTablet' || k === 'sizeMobile') v = v + (obj.sizeUnit || 'px'); |
| 18 |
else if (k === 'lineHeightDesktop' || k === 'lineHeightTablet' || k === 'lineHeightMobile') v = v + (obj.lineHeightUnit || ''); |
| 19 |
else if (k === 'letterSpacingDesktop' || k === 'letterSpacingTablet' || k === 'letterSpacingMobile') v = v + (obj.letterSpacingUnit || 'px'); |
| 20 |
else if (k === 'wordSpacingDesktop' || k === 'wordSpacingTablet' || k === 'wordSpacingMobile') v = v + (obj.wordSpacingUnit || 'px'); |
| 21 |
el.style.setProperty(prefix + _typoKeys[k], String(v)); |
| 22 |
}); |
| 23 |
} |
| 24 |
|
| 25 |
function mk(tag, cls, styles) { |
| 26 |
var d = document.createElement(tag); |
| 27 |
if (cls) d.className = cls; |
| 28 |
if (styles) Object.keys(styles).forEach(function (k) { d.style[k] = styles[k]; }); |
| 29 |
return d; |
| 30 |
} |
| 31 |
function mkText(tag, cls, text, styles) { |
| 32 |
var d = mk(tag, cls, styles); |
| 33 |
d.textContent = text; |
| 34 |
return d; |
| 35 |
} |
| 36 |
|
| 37 |
function init() { |
| 38 |
document.querySelectorAll('.bkbg-press-release-app').forEach(function (appEl) { |
| 39 |
if (appEl.dataset.rendered) return; |
| 40 |
appEl.dataset.rendered = '1'; |
| 41 |
|
| 42 |
var opts; try { opts = JSON.parse(appEl.dataset.opts || '{}'); } catch (e) { opts = {}; } |
| 43 |
|
| 44 |
var o = { |
| 45 |
releaseLabel: opts.releaseLabel || 'FOR IMMEDIATE RELEASE', |
| 46 |
showReleaseLabel: opts.showReleaseLabel !== false, |
| 47 |
city: opts.city || '', |
| 48 |
releaseDate: opts.releaseDate || '', |
| 49 |
showDateline: opts.showDateline !== false, |
| 50 |
headline: opts.headline || '', |
| 51 |
subheadline: opts.subheadline || '', |
| 52 |
showSubheadline: opts.showSubheadline !== false, |
| 53 |
introParagraph: opts.introParagraph || '', |
| 54 |
bodyParagraphs: opts.bodyParagraphs || [], |
| 55 |
endMarker: opts.endMarker || '###', |
| 56 |
showEndMarker: opts.showEndMarker !== false, |
| 57 |
boilerplateTitle: opts.boilerplateTitle || 'About', |
| 58 |
boilerplateText: opts.boilerplateText || '', |
| 59 |
showBoilerplate: opts.showBoilerplate !== false, |
| 60 |
mediaContactName: opts.mediaContactName || '', |
| 61 |
mediaContactTitle: opts.mediaContactTitle || '', |
| 62 |
mediaContactCompany: opts.mediaContactCompany || '', |
| 63 |
mediaContactEmail: opts.mediaContactEmail || '', |
| 64 |
mediaContactPhone: opts.mediaContactPhone || '', |
| 65 |
showMediaContact: opts.showMediaContact !== false, |
| 66 |
headlineTypo: opts.headlineTypo || {}, |
| 67 |
bodyTypo: opts.bodyTypo || {}, |
| 68 |
maxWidth: opts.maxWidth !== undefined ? opts.maxWidth : 760, |
| 69 |
borderRadius: opts.borderRadius !== undefined ? opts.borderRadius : 8, |
| 70 |
bgColor: opts.bgColor || '#ffffff', |
| 71 |
textColor: opts.textColor || '#1a1a2e', |
| 72 |
headlineColor: opts.headlineColor || '#0f172a', |
| 73 |
subheadlineColor: opts.subheadlineColor || '#475569', |
| 74 |
dateBorderColor: opts.dateBorderColor || '#e2e8f0', |
| 75 |
releaseLabelColor: opts.releaseLabelColor || '#dc2626', |
| 76 |
boilerplateBg: opts.boilerplateBg || '#f8fafc', |
| 77 |
boilerplateBorderColor:opts.boilerplateBorderColor|| '#e2e8f0', |
| 78 |
boilerplateTextColor: opts.boilerplateTextColor || '#64748b', |
| 79 |
contactBg: opts.contactBg || '#f1f5f9', |
| 80 |
contactBorderColor: opts.contactBorderColor || '#cbd5e1', |
| 81 |
contactColor: opts.contactColor || '#334155', |
| 82 |
accentColor: opts.accentColor || '#2563eb' |
| 83 |
}; |
| 84 |
|
| 85 |
/* ── Outer block ─────────────────────────────────── */ |
| 86 |
var block = mk('div', 'bkbg-pr-block', { |
| 87 |
background: o.bgColor, |
| 88 |
maxWidth: o.maxWidth + 'px', |
| 89 |
margin: '0 auto', |
| 90 |
color: o.textColor, |
| 91 |
padding: '40px 48px', |
| 92 |
border: '1px solid ' + o.dateBorderColor, |
| 93 |
borderRadius: o.borderRadius + 'px', |
| 94 |
boxSizing: 'border-box' |
| 95 |
}); |
| 96 |
|
| 97 |
/* Release label */ |
| 98 |
if (o.showReleaseLabel && o.releaseLabel) { |
| 99 |
block.appendChild(mkText('div', 'bkbg-pr-release-label', o.releaseLabel, { |
| 100 |
fontSize: '11px', fontWeight: '700', textTransform: 'uppercase', |
| 101 |
letterSpacing: '.12em', color: o.releaseLabelColor, marginBottom: '8px' |
| 102 |
})); |
| 103 |
} |
| 104 |
|
| 105 |
/* Dateline */ |
| 106 |
if (o.showDateline) { |
| 107 |
var dateline = []; |
| 108 |
if (o.city) dateline.push(o.city); |
| 109 |
if (o.releaseDate) dateline.push(o.releaseDate); |
| 110 |
if (dateline.length) { |
| 111 |
block.appendChild(mkText('div', 'bkbg-pr-dateline', dateline.join(', '), { |
| 112 |
fontSize: '13px', color: o.subheadlineColor, |
| 113 |
marginBottom: '24px', paddingBottom: '16px', |
| 114 |
borderBottom: '1px solid ' + o.dateBorderColor |
| 115 |
})); |
| 116 |
} |
| 117 |
} |
| 118 |
|
| 119 |
/* Headline */ |
| 120 |
if (o.headline) { |
| 121 |
block.appendChild(mkText('h1', 'bkbg-pr-headline', o.headline, { |
| 122 |
color: o.headlineColor, |
| 123 |
margin: '0 0 12px' |
| 124 |
})); |
| 125 |
} |
| 126 |
|
| 127 |
/* Subheadline */ |
| 128 |
if (o.showSubheadline && o.subheadline) { |
| 129 |
block.appendChild(mkText('h2', 'bkbg-pr-subheadline', o.subheadline, { |
| 130 |
color: o.subheadlineColor, |
| 131 |
margin: '0 0 28px' |
| 132 |
})); |
| 133 |
} |
| 134 |
|
| 135 |
/* Intro paragraph */ |
| 136 |
if (o.introParagraph) { |
| 137 |
block.appendChild(mkText('p', 'bkbg-pr-intro', o.introParagraph, { |
| 138 |
margin: '0 0 18px', color: o.textColor |
| 139 |
})); |
| 140 |
} |
| 141 |
|
| 142 |
/* Body paragraphs */ |
| 143 |
o.bodyParagraphs.forEach(function (para) { |
| 144 |
if (para) { |
| 145 |
block.appendChild(mkText('p', 'bkbg-pr-para', para, { |
| 146 |
margin: '0 0 18px', color: o.textColor |
| 147 |
})); |
| 148 |
} |
| 149 |
}); |
| 150 |
|
| 151 |
/* End marker */ |
| 152 |
if (o.showEndMarker && o.endMarker) { |
| 153 |
block.appendChild(mkText('p', 'bkbg-pr-end', o.endMarker, { |
| 154 |
textAlign: 'center', color: o.textColor, margin: '24px 0' |
| 155 |
})); |
| 156 |
} |
| 157 |
|
| 158 |
/* Boilerplate */ |
| 159 |
if (o.showBoilerplate && o.boilerplateText) { |
| 160 |
var boiler = mk('div', 'bkbg-pr-boilerplate', { |
| 161 |
background: o.boilerplateBg, border: '1px solid ' + o.boilerplateBorderColor, |
| 162 |
borderRadius: (o.borderRadius > 2 ? o.borderRadius - 2 : o.borderRadius) + 'px', |
| 163 |
padding: '18px 20px', marginBottom: '16px', fontFamily: 'Arial, sans-serif' |
| 164 |
}); |
| 165 |
boiler.appendChild(mkText('strong', 'bkbg-pr-boilerplate-title', o.boilerplateTitle, { |
| 166 |
fontSize: '13px', fontWeight: '700', display: 'block', marginBottom: '6px', color: o.textColor |
| 167 |
})); |
| 168 |
boiler.appendChild(mkText('p', 'bkbg-pr-boilerplate-text', o.boilerplateText, { |
| 169 |
margin: '0', color: o.boilerplateTextColor |
| 170 |
})); |
| 171 |
block.appendChild(boiler); |
| 172 |
} |
| 173 |
|
| 174 |
/* Media contact */ |
| 175 |
if (o.showMediaContact && o.mediaContactName) { |
| 176 |
var contact = mk('div', 'bkbg-pr-contact', { |
| 177 |
background: o.contactBg, border: '1px solid ' + o.contactBorderColor, |
| 178 |
borderRadius: (o.borderRadius > 2 ? o.borderRadius - 2 : o.borderRadius) + 'px', |
| 179 |
padding: '14px 20px', fontSize: '13px', fontFamily: 'Arial, sans-serif', |
| 180 |
lineHeight: '1.65' |
| 181 |
}); |
| 182 |
|
| 183 |
contact.appendChild(mkText('div', 'bkbg-pr-contact-heading', 'Media Contact', { |
| 184 |
fontWeight: '700', marginBottom: '4px', color: o.contactColor |
| 185 |
})); |
| 186 |
|
| 187 |
var nameTitle = o.mediaContactName + (o.mediaContactTitle ? ', ' + o.mediaContactTitle : ''); |
| 188 |
contact.appendChild(mkText('div', '', nameTitle, { color: o.contactColor })); |
| 189 |
|
| 190 |
if (o.mediaContactCompany) { |
| 191 |
contact.appendChild(mkText('div', '', o.mediaContactCompany, { color: o.contactColor, opacity: '.85' })); |
| 192 |
} |
| 193 |
|
| 194 |
if (o.mediaContactEmail) { |
| 195 |
var emailWrap = mk('div', '', { marginTop: '4px' }); |
| 196 |
var emailLink = mk('a', '', { color: o.accentColor, textDecoration: 'none' }); |
| 197 |
emailLink.href = 'mailto:' + o.mediaContactEmail; |
| 198 |
emailLink.textContent = o.mediaContactEmail; |
| 199 |
emailWrap.appendChild(emailLink); |
| 200 |
contact.appendChild(emailWrap); |
| 201 |
} |
| 202 |
|
| 203 |
if (o.mediaContactPhone) { |
| 204 |
contact.appendChild(mkText('div', '', o.mediaContactPhone, { color: o.contactColor })); |
| 205 |
} |
| 206 |
|
| 207 |
block.appendChild(contact); |
| 208 |
} |
| 209 |
|
| 210 |
/* ── Insert ──────────────────────────────────────── */ |
| 211 |
appEl.parentNode.insertBefore(block, appEl); |
| 212 |
appEl.style.display = 'none'; |
| 213 |
|
| 214 |
/* Apply typography CSS vars to the block wrapper */ |
| 215 |
var wrapper = appEl.parentElement; |
| 216 |
if (wrapper) { |
| 217 |
typoCssVarsForEl(wrapper, o.headlineTypo, '--bkbg-pr-hl-'); |
| 218 |
typoCssVarsForEl(wrapper, o.bodyTypo, '--bkbg-pr-bd-'); |
| 219 |
} |
| 220 |
}); |
| 221 |
} |
| 222 |
|
| 223 |
if (document.readyState !== 'loading') { init(); } |
| 224 |
else { document.addEventListener('DOMContentLoaded', init); } |
| 225 |
})(); |
| 226 |
|
