| 1 |
(function () { |
| 2 |
var _typoKeys = { |
| 3 |
family:'font-family', weight:'font-weight', style:'font-style', |
| 4 |
decoration:'text-decoration', transform:'text-transform', |
| 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 |
}; |
| 10 |
function typoCssVarsForEl(el, obj, prefix) { |
| 11 |
if (!obj || typeof obj !== 'object') return; |
| 12 |
Object.keys(_typoKeys).forEach(function (k) { |
| 13 |
var v = obj[k]; |
| 14 |
if (v === undefined || v === '' || v === null) return; |
| 15 |
if (k === 'sizeDesktop' || k === 'sizeTablet' || k === 'sizeMobile') v = v + (obj.sizeUnit || 'px'); |
| 16 |
else if (k === 'lineHeightDesktop' || k === 'lineHeightTablet' || k === 'lineHeightMobile') v = v + (obj.lineHeightUnit || ''); |
| 17 |
else if (k === 'letterSpacingDesktop' || k === 'letterSpacingTablet' || k === 'letterSpacingMobile') v = v + (obj.letterSpacingUnit || 'px'); |
| 18 |
else if (k === 'wordSpacingDesktop' || k === 'wordSpacingTablet' || k === 'wordSpacingMobile') v = v + (obj.wordSpacingUnit || 'px'); |
| 19 |
el.style.setProperty(prefix + _typoKeys[k], String(v)); |
| 20 |
}); |
| 21 |
} |
| 22 |
|
| 23 |
function init() { |
| 24 |
document.querySelectorAll('.bkbg-mhd-app').forEach(function (appEl) { |
| 25 |
if (appEl.dataset.rendered) return; |
| 26 |
appEl.dataset.rendered = '1'; |
| 27 |
var opts; |
| 28 |
try { opts = JSON.parse(appEl.dataset.opts || '{}'); } catch (e) { opts = {}; } |
| 29 |
var o = Object.assign({ |
| 30 |
segments: [], |
| 31 |
tag: 'h2', |
| 32 |
textAlign: 'center', |
| 33 |
fontSize: 48, |
| 34 |
lineHeight: 1.15, |
| 35 |
letterSpacing: 0, |
| 36 |
maxWidth: 800, |
| 37 |
paddingTop: 0, |
| 38 |
paddingBottom: 0, |
| 39 |
strokeWidth: 2, |
| 40 |
badgeRadius: 6, |
| 41 |
badgePaddingX: 8, |
| 42 |
badgePaddingY: 3, |
| 43 |
gradientDir: 'to right', |
| 44 |
}, opts); |
| 45 |
|
| 46 |
if (!o.segments || !o.segments.length) return; |
| 47 |
|
| 48 |
/* Set CSS vars on wrapper (blockProps parent) */ |
| 49 |
var wrap = appEl.parentNode; |
| 50 |
typoCssVarsForEl(wrap, o.headingTypo, '--bkbg-mhd-hd-'); |
| 51 |
|
| 52 |
var effSize = (o.headingTypo && o.headingTypo.sizeDesktop) || o.fontSize; |
| 53 |
|
| 54 |
var outer = document.createElement('div'); |
| 55 |
outer.className = 'bkbg-mhd-outer'; |
| 56 |
|
| 57 |
var heading = document.createElement(o.tag); |
| 58 |
heading.className = 'bkbg-mhd-heading'; |
| 59 |
heading.style.textAlign = o.textAlign; |
| 60 |
heading.style.maxWidth = o.maxWidth + 'px'; |
| 61 |
heading.style.margin = '0 auto'; |
| 62 |
heading.style.paddingTop = o.paddingTop + 'px'; |
| 63 |
heading.style.paddingBottom = o.paddingBottom + 'px'; |
| 64 |
heading.style.fontWeight = 'normal'; |
| 65 |
|
| 66 |
o.segments.forEach(function (s) { |
| 67 |
var span = document.createElement('span'); |
| 68 |
span.className = 'bkbg-mhd-seg style-' + (s.style || 'normal'); |
| 69 |
span.textContent = s.text || ''; |
| 70 |
|
| 71 |
// Font attrs |
| 72 |
span.style.fontWeight = s.weight || '700'; |
| 73 |
if (s.italic) span.style.fontStyle = 'italic'; |
| 74 |
if (s.underline) span.style.textDecoration = 'underline'; |
| 75 |
if (s.spacing) span.style.letterSpacing = s.spacing + 'em'; |
| 76 |
if (s.scale && s.scale !== 1) span.style.fontSize = (effSize * s.scale) + 'px'; |
| 77 |
|
| 78 |
if (s.style === 'gradient') { |
| 79 |
span.style.backgroundImage = 'linear-gradient(' + o.gradientDir + ', ' + s.color + ', ' + (s.color2 || '#ec4899') + ')'; |
| 80 |
span.style.webkitBackgroundClip = 'text'; |
| 81 |
span.style.backgroundClip = 'text'; |
| 82 |
span.style.webkitTextFillColor = 'transparent'; |
| 83 |
span.style.color = 'transparent'; |
| 84 |
|
| 85 |
} else if (s.style === 'highlight') { |
| 86 |
span.style.color = s.color || '#111827'; |
| 87 |
span.style.background = (s.bg && s.bg !== 'transparent') ? s.bg : '#ede9fe'; |
| 88 |
span.style.borderRadius = '4px'; |
| 89 |
span.style.padding = '0 4px'; |
| 90 |
|
| 91 |
} else if (s.style === 'stroke') { |
| 92 |
span.style.color = 'transparent'; |
| 93 |
span.style.webkitTextStroke = (o.strokeWidth || 2) + 'px ' + (s.color || '#6366f1'); |
| 94 |
span.style.textStroke = (o.strokeWidth || 2) + 'px ' + (s.color || '#6366f1'); |
| 95 |
span.style.webkitTextFillColor = 'transparent'; |
| 96 |
|
| 97 |
} else if (s.style === 'badge') { |
| 98 |
span.style.color = s.color || '#6366f1'; |
| 99 |
span.style.background = (s.bg && s.bg !== 'transparent') ? s.bg : '#f1f5f9'; |
| 100 |
span.style.borderRadius = (o.badgeRadius || 6) + 'px'; |
| 101 |
span.style.padding = (o.badgePaddingY || 3) + 'px ' + (o.badgePaddingX || 8) + 'px'; |
| 102 |
span.style.display = 'inline-block'; |
| 103 |
span.style.verticalAlign = 'middle'; |
| 104 |
|
| 105 |
} else if (s.style === 'mono') { |
| 106 |
span.style.color = s.color || '#374151'; |
| 107 |
span.style.fontFamily = "'Courier New', Courier, monospace"; |
| 108 |
span.style.background = (s.bg && s.bg !== 'transparent') ? s.bg : '#f8f8f8'; |
| 109 |
span.style.borderRadius = '4px'; |
| 110 |
span.style.padding = '2px 6px'; |
| 111 |
span.style.fontSize = '0.88em'; |
| 112 |
|
| 113 |
} else if (s.style === 'ghost') { |
| 114 |
span.style.color = s.color || '#111827'; |
| 115 |
span.style.opacity = '0.35'; |
| 116 |
|
| 117 |
} else { |
| 118 |
// normal |
| 119 |
span.style.color = s.color || '#111827'; |
| 120 |
} |
| 121 |
|
| 122 |
heading.appendChild(span); |
| 123 |
}); |
| 124 |
|
| 125 |
outer.appendChild(heading); |
| 126 |
appEl.parentNode.insertBefore(outer, appEl); |
| 127 |
appEl.style.display = 'none'; |
| 128 |
}); |
| 129 |
} |
| 130 |
|
| 131 |
if (document.readyState !== 'loading') { init(); } |
| 132 |
else { document.addEventListener('DOMContentLoaded', init); } |
| 133 |
})(); |
| 134 |
|
