| 1 |
function typoCssVarsForEl(typo, prefix, el) { |
| 2 |
if (!typo) return; |
| 3 |
if (typo.family) el.style.setProperty(prefix + 'font-family', "'" + typo.family + "', sans-serif"); |
| 4 |
if (typo.weight) el.style.setProperty(prefix + 'font-weight', typo.weight); |
| 5 |
if (typo.transform) el.style.setProperty(prefix + 'text-transform', typo.transform); |
| 6 |
if (typo.style) el.style.setProperty(prefix + 'font-style', typo.style); |
| 7 |
if (typo.decoration) el.style.setProperty(prefix + 'text-decoration', typo.decoration); |
| 8 |
var su = typo.sizeUnit || 'px'; |
| 9 |
if (typo.sizeDesktop !== '' && typo.sizeDesktop != null) el.style.setProperty(prefix + 'font-size-d', typo.sizeDesktop + su); |
| 10 |
if (typo.sizeTablet !== '' && typo.sizeTablet != null) el.style.setProperty(prefix + 'font-size-t', typo.sizeTablet + su); |
| 11 |
if (typo.sizeMobile !== '' && typo.sizeMobile != null) el.style.setProperty(prefix + 'font-size-m', typo.sizeMobile + su); |
| 12 |
var lhu = typo.lineHeightUnit || ''; |
| 13 |
if (typo.lineHeightDesktop !== '' && typo.lineHeightDesktop != null) el.style.setProperty(prefix + 'line-height-d', typo.lineHeightDesktop + lhu); |
| 14 |
if (typo.lineHeightTablet !== '' && typo.lineHeightTablet != null) el.style.setProperty(prefix + 'line-height-t', typo.lineHeightTablet + lhu); |
| 15 |
if (typo.lineHeightMobile !== '' && typo.lineHeightMobile != null) el.style.setProperty(prefix + 'line-height-m', typo.lineHeightMobile + lhu); |
| 16 |
var lsu = typo.letterSpacingUnit || 'px'; |
| 17 |
if (typo.letterSpacingDesktop !== '' && typo.letterSpacingDesktop != null) el.style.setProperty(prefix + 'letter-spacing-d', typo.letterSpacingDesktop + lsu); |
| 18 |
if (typo.letterSpacingTablet !== '' && typo.letterSpacingTablet != null) el.style.setProperty(prefix + 'letter-spacing-t', typo.letterSpacingTablet + lsu); |
| 19 |
if (typo.letterSpacingMobile !== '' && typo.letterSpacingMobile != null) el.style.setProperty(prefix + 'letter-spacing-m', typo.letterSpacingMobile + lsu); |
| 20 |
var wsu = typo.wordSpacingUnit || 'px'; |
| 21 |
if (typo.wordSpacingDesktop !== '' && typo.wordSpacingDesktop != null) el.style.setProperty(prefix + 'word-spacing-d', typo.wordSpacingDesktop + wsu); |
| 22 |
if (typo.wordSpacingTablet !== '' && typo.wordSpacingTablet != null) el.style.setProperty(prefix + 'word-spacing-t', typo.wordSpacingTablet + wsu); |
| 23 |
if (typo.wordSpacingMobile !== '' && typo.wordSpacingMobile != null) el.style.setProperty(prefix + 'word-spacing-m', typo.wordSpacingMobile + wsu); |
| 24 |
} |
| 25 |
|
| 26 |
wp.domReady(function () { |
| 27 |
document.querySelectorAll('.bkbg-chapter-intro-app').forEach(function (app) { |
| 28 |
var opts = {}; |
| 29 |
try { opts = JSON.parse(app.getAttribute('data-opts') || '{}'); } catch (e) {} |
| 30 |
|
| 31 |
var bgColor = opts.bgColor || '#ffffff'; |
| 32 |
var numberColor = opts.numberColor || '#f0eeff'; |
| 33 |
var labelColor = opts.labelColor || '#7c3aed'; |
| 34 |
var headingColor = opts.headingColor || '#111827'; |
| 35 |
var textColor = opts.textColor || '#4b5563'; |
| 36 |
var dividerColor = opts.dividerColor || '#e5e7eb'; |
| 37 |
var accentColor = opts.accentColor || '#7c3aed'; |
| 38 |
var isLeft = (opts.layout || 'centered') === 'left'; |
| 39 |
var align = isLeft ? 'left' : 'center'; |
| 40 |
|
| 41 |
var wrap = document.createElement('div'); |
| 42 |
wrap.className = 'bkbg-ci-wrap'; |
| 43 |
wrap.style.background = bgColor; |
| 44 |
wrap.style.paddingTop = (opts.paddingTop || 80) + 'px'; |
| 45 |
wrap.style.paddingBottom = (opts.paddingBottom || 80) + 'px'; |
| 46 |
|
| 47 |
var inner = document.createElement('div'); |
| 48 |
inner.className = 'bkbg-ci-inner'; |
| 49 |
inner.style.maxWidth = (opts.maxWidth || 760) + 'px'; |
| 50 |
inner.style.textAlign = align; |
| 51 |
|
| 52 |
/* Chapter number */ |
| 53 |
var numEl = document.createElement('div'); |
| 54 |
numEl.className = 'bkbg-ci-number bkbg-ci-number-' + (opts.numberStyle || 'display'); |
| 55 |
numEl.style.fontSize = (opts.numberSize || 160) + 'px'; |
| 56 |
numEl.style.textAlign = align; |
| 57 |
numEl.style.marginBottom = '8px'; |
| 58 |
numEl.style.fontWeight = '900'; |
| 59 |
numEl.style.lineHeight = '0.9'; |
| 60 |
numEl.style.letterSpacing = '-4px'; |
| 61 |
if ((opts.numberStyle || 'display') === 'ghost') { |
| 62 |
numEl.style.color = 'transparent'; |
| 63 |
numEl.style.webkitTextStroke = '2px ' + numberColor; |
| 64 |
} else { |
| 65 |
numEl.style.color = numberColor; |
| 66 |
} |
| 67 |
numEl.textContent = opts.chapterNumber || '01'; |
| 68 |
inner.appendChild(numEl); |
| 69 |
|
| 70 |
/* Label row */ |
| 71 |
if (opts.showLabel !== false && opts.chapterLabel) { |
| 72 |
var labelRow = document.createElement('div'); |
| 73 |
labelRow.className = 'bkbg-ci-label-row'; |
| 74 |
labelRow.style.justifyContent = isLeft ? 'flex-start' : 'center'; |
| 75 |
|
| 76 |
function makeLine() { |
| 77 |
var l = document.createElement('span'); |
| 78 |
l.className = 'bkbg-ci-label-line'; |
| 79 |
l.style.background = labelColor; |
| 80 |
return l; |
| 81 |
} |
| 82 |
|
| 83 |
var labelSpan = document.createElement('span'); |
| 84 |
labelSpan.className = 'bkbg-ci-label'; |
| 85 |
labelSpan.style.color = labelColor; |
| 86 |
labelSpan.textContent = opts.chapterLabel; |
| 87 |
|
| 88 |
labelRow.appendChild(makeLine()); |
| 89 |
labelRow.appendChild(labelSpan); |
| 90 |
labelRow.appendChild(makeLine()); |
| 91 |
inner.appendChild(labelRow); |
| 92 |
} |
| 93 |
|
| 94 |
/* Heading */ |
| 95 |
var hEl = document.createElement('h2'); |
| 96 |
hEl.className = 'bkbg-ci-heading'; |
| 97 |
hEl.style.color = headingColor; |
| 98 |
hEl.style.margin = '0 0 16px'; |
| 99 |
hEl.innerHTML = opts.heading || 'Introduction'; |
| 100 |
inner.appendChild(hEl); |
| 101 |
|
| 102 |
/* Divider */ |
| 103 |
if (opts.showDivider !== false) { |
| 104 |
var div = null; |
| 105 |
var ds = opts.dividerStyle || 'line'; |
| 106 |
if (ds === 'dots') { |
| 107 |
div = document.createElement('div'); |
| 108 |
div.className = 'bkbg-ci-divider bkbg-ci-divider-dots'; |
| 109 |
div.style.color = dividerColor; |
| 110 |
div.style.margin = '24px ' + (isLeft ? '0' : 'auto'); |
| 111 |
div.style.letterSpacing = '6px'; |
| 112 |
div.style.fontSize = '14px'; |
| 113 |
div.textContent = '● ● ●'; |
| 114 |
} else if (ds === 'gradient') { |
| 115 |
div = document.createElement('div'); |
| 116 |
div.className = 'bkbg-ci-divider bkbg-ci-divider-gradient'; |
| 117 |
div.style.height = '3px'; |
| 118 |
div.style.width = '80px'; |
| 119 |
div.style.borderRadius = '2px'; |
| 120 |
div.style.margin = '24px ' + (isLeft ? '0' : 'auto'); |
| 121 |
div.style.background = 'linear-gradient(90deg, ' + accentColor + ', transparent)'; |
| 122 |
} else { |
| 123 |
div = document.createElement('hr'); |
| 124 |
div.className = 'bkbg-ci-divider'; |
| 125 |
div.style.border = 'none'; |
| 126 |
div.style.borderTop = '2px solid ' + dividerColor; |
| 127 |
div.style.width = '80px'; |
| 128 |
div.style.margin = '24px ' + (isLeft ? '0' : 'auto'); |
| 129 |
} |
| 130 |
inner.appendChild(div); |
| 131 |
} |
| 132 |
|
| 133 |
/* Intro text */ |
| 134 |
if (opts.introText) { |
| 135 |
var p = document.createElement('p'); |
| 136 |
p.className = 'bkbg-ci-text'; |
| 137 |
p.style.color = textColor; |
| 138 |
p.style.margin = '16px 0 0'; |
| 139 |
p.innerHTML = opts.introText; |
| 140 |
inner.appendChild(p); |
| 141 |
} |
| 142 |
|
| 143 |
typoCssVarsForEl(opts.typoHeading, '--bkbg-ci-h-', wrap); |
| 144 |
typoCssVarsForEl(opts.typoText, '--bkbg-ci-t-', wrap); |
| 145 |
typoCssVarsForEl(opts.typoLabel, '--bkbg-ci-l-', wrap); |
| 146 |
|
| 147 |
wrap.appendChild(inner); |
| 148 |
app.parentNode.replaceChild(wrap, app); |
| 149 |
}); |
| 150 |
}); |
| 151 |
|
