| 1 |
(function () { |
| 2 |
function typoCssVarsForEl(typo, prefix, el) { |
| 3 |
if (!typo || typeof typo !== 'object') return; |
| 4 |
var m = { |
| 5 |
family: 'font-family', weight: 'font-weight', transform: 'text-transform', |
| 6 |
style: 'font-style', decoration: 'text-decoration', |
| 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 |
var units = { size: 'sizeUnit', lineHeight: 'lineHeightUnit', letterSpacing: 'letterSpacingUnit', wordSpacing: 'wordSpacingUnit' }; |
| 13 |
Object.keys(m).forEach(function (k) { |
| 14 |
var v = typo[k]; if (v === undefined || v === '' || v === null) return; |
| 15 |
var prop = prefix + m[k]; |
| 16 |
var base = k.replace(/Desktop|Tablet|Mobile/, ''); |
| 17 |
if (units[base] && typeof v === 'number') v = v + (typo[units[base]] || 'px'); |
| 18 |
el.style.setProperty(prop, String(v)); |
| 19 |
}); |
| 20 |
} |
| 21 |
|
| 22 |
document.querySelectorAll('.bkbg-error-page-app').forEach(function (root) { |
| 23 |
var opts = {}; |
| 24 |
try { opts = JSON.parse(root.dataset.opts || '{}'); } catch (e) {} |
| 25 |
|
| 26 |
var wrap = document.createElement('div'); |
| 27 |
wrap.className = 'bkbg-error-page-wrap'; |
| 28 |
wrap.style.cssText = 'background:' + (opts.bgColor || '#ffffff') + ';padding:' + (opts.paddingTop || 100) + 'px 40px ' + (opts.paddingBottom || 100) + 'px;'; |
| 29 |
wrap.style.setProperty('--bkbg-ep-max', (opts.maxWidth || 700) + 'px'); |
| 30 |
|
| 31 |
typoCssVarsForEl(opts.typoCode || {}, '--bkbg-ep-cd-', wrap); |
| 32 |
typoCssVarsForEl(opts.typoHeading || {}, '--bkbg-ep-hd-', wrap); |
| 33 |
typoCssVarsForEl(opts.typoBody || {}, '--bkbg-ep-bd-', wrap); |
| 34 |
|
| 35 |
var inner = document.createElement('div'); |
| 36 |
inner.className = 'bkbg-ep-inner'; |
| 37 |
|
| 38 |
if (opts.showImage && opts.imageUrl) { |
| 39 |
var illus = document.createElement('div'); |
| 40 |
illus.className = 'bkbg-ep-illustration'; |
| 41 |
var img = document.createElement('img'); |
| 42 |
img.src = opts.imageUrl; |
| 43 |
img.alt = opts.imageAlt || ''; |
| 44 |
img.style.width = (opts.imageWidth || 360) + 'px'; |
| 45 |
illus.appendChild(img); |
| 46 |
inner.appendChild(illus); |
| 47 |
} |
| 48 |
|
| 49 |
if (opts.showError !== false && opts.errorCode) { |
| 50 |
var code = document.createElement('div'); |
| 51 |
code.className = 'bkbg-ep-code'; |
| 52 |
code.style.color = opts.errorCodeColor || '#f3f0ff'; |
| 53 |
code.textContent = opts.errorCode; |
| 54 |
inner.appendChild(code); |
| 55 |
} |
| 56 |
|
| 57 |
var h1 = document.createElement('h1'); |
| 58 |
h1.className = 'bkbg-ep-heading'; |
| 59 |
h1.style.color = opts.headingColor || '#111827'; |
| 60 |
h1.innerHTML = opts.heading || ''; |
| 61 |
inner.appendChild(h1); |
| 62 |
|
| 63 |
var p = document.createElement('p'); |
| 64 |
p.className = 'bkbg-ep-body'; |
| 65 |
p.style.color = opts.textColor || '#6b7280'; |
| 66 |
p.innerHTML = opts.subtext || ''; |
| 67 |
inner.appendChild(p); |
| 68 |
|
| 69 |
if (opts.showSearch) { |
| 70 |
var searchDiv = document.createElement('div'); |
| 71 |
searchDiv.className = 'bkbg-ep-search'; |
| 72 |
var searchInput = document.createElement('input'); |
| 73 |
searchInput.type = 'search'; |
| 74 |
searchInput.name = 's'; |
| 75 |
searchInput.placeholder = 'Search\u2026'; |
| 76 |
var searchBtn = document.createElement('button'); |
| 77 |
searchBtn.style.cssText = 'background:' + (opts.primaryBg || '#7c3aed') + ';color:' + (opts.primaryColor || '#fff') + ';'; |
| 78 |
searchBtn.textContent = 'Search'; |
| 79 |
searchDiv.appendChild(searchInput); |
| 80 |
searchDiv.appendChild(searchBtn); |
| 81 |
var searchForm = document.createElement('form'); |
| 82 |
searchForm.action = '/'; |
| 83 |
searchForm.method = 'get'; |
| 84 |
searchForm.className = 'bkbg-ep-search'; |
| 85 |
searchForm.appendChild(searchInput); |
| 86 |
searchForm.appendChild(searchBtn); |
| 87 |
inner.appendChild(searchForm); |
| 88 |
} |
| 89 |
|
| 90 |
var actions = document.createElement('div'); |
| 91 |
actions.className = 'bkbg-ep-actions'; |
| 92 |
|
| 93 |
var primary = document.createElement('a'); |
| 94 |
primary.className = 'bkbg-ep-primary'; |
| 95 |
primary.href = opts.primaryUrl || '/'; |
| 96 |
primary.style.cssText = 'background:' + (opts.primaryBg || '#7c3aed') + ';color:' + (opts.primaryColor || '#fff') + ';'; |
| 97 |
primary.textContent = '\u2190 ' + (opts.primaryLabel || 'Go to Homepage'); |
| 98 |
actions.appendChild(primary); |
| 99 |
|
| 100 |
if (opts.showSecondary && opts.secondaryLabel) { |
| 101 |
var secondary = document.createElement('a'); |
| 102 |
secondary.className = 'bkbg-ep-secondary'; |
| 103 |
secondary.href = opts.secondaryUrl || '/contact'; |
| 104 |
secondary.style.color = opts.secondaryColor || '#374151'; |
| 105 |
secondary.textContent = opts.secondaryLabel; |
| 106 |
actions.appendChild(secondary); |
| 107 |
} |
| 108 |
|
| 109 |
inner.appendChild(actions); |
| 110 |
wrap.appendChild(inner); |
| 111 |
root.parentNode.replaceChild(wrap, root); |
| 112 |
}); |
| 113 |
})(); |
| 114 |
|
