| 1 |
(function () { |
| 2 |
function typoCssVarsForEl(typo, prefix, el) { |
| 3 |
if (!typo || typeof typo !== 'object') return; |
| 4 |
|
| 5 |
// Non-responsive |
| 6 |
if (typo.family) el.style.setProperty(prefix + 'font-family', "'" + typo.family + "', sans-serif"); |
| 7 |
if (typo.weight) el.style.setProperty(prefix + 'font-weight', typo.weight); |
| 8 |
if (typo.transform) el.style.setProperty(prefix + 'text-transform', typo.transform); |
| 9 |
if (typo.style) el.style.setProperty(prefix + 'font-style', typo.style); |
| 10 |
if (typo.decoration) el.style.setProperty(prefix + 'text-decoration', typo.decoration); |
| 11 |
|
| 12 |
// Responsive |
| 13 |
var su = typo.sizeUnit || 'px'; |
| 14 |
if (typo.sizeDesktop !== '' && typo.sizeDesktop !== undefined && typo.sizeDesktop !== null) el.style.setProperty(prefix + 'font-size-d', typo.sizeDesktop + su); |
| 15 |
if (typo.sizeTablet !== '' && typo.sizeTablet !== undefined && typo.sizeTablet !== null) el.style.setProperty(prefix + 'font-size-t', typo.sizeTablet + su); |
| 16 |
if (typo.sizeMobile !== '' && typo.sizeMobile !== undefined && typo.sizeMobile !== null) el.style.setProperty(prefix + 'font-size-m', typo.sizeMobile + su); |
| 17 |
|
| 18 |
var lhu = typo.lineHeightUnit || 'px'; |
| 19 |
if (typo.lineHeightDesktop !== '' && typo.lineHeightDesktop !== undefined && typo.lineHeightDesktop !== null) el.style.setProperty(prefix + 'line-height-d', typo.lineHeightDesktop + lhu); |
| 20 |
if (typo.lineHeightTablet !== '' && typo.lineHeightTablet !== undefined && typo.lineHeightTablet !== null) el.style.setProperty(prefix + 'line-height-t', typo.lineHeightTablet + lhu); |
| 21 |
if (typo.lineHeightMobile !== '' && typo.lineHeightMobile !== undefined && typo.lineHeightMobile !== null) el.style.setProperty(prefix + 'line-height-m', typo.lineHeightMobile + lhu); |
| 22 |
|
| 23 |
var lsu = typo.letterSpacingUnit || 'px'; |
| 24 |
if (typo.letterSpacingDesktop !== '' && typo.letterSpacingDesktop !== undefined && typo.letterSpacingDesktop !== null) { |
| 25 |
el.style.setProperty(prefix + 'letter-spacing-d', typo.letterSpacingDesktop + lsu); |
| 26 |
el.style.setProperty(prefix + 'letter-spacing', typo.letterSpacingDesktop + lsu); |
| 27 |
} |
| 28 |
if (typo.letterSpacingTablet !== '' && typo.letterSpacingTablet !== undefined && typo.letterSpacingTablet !== null) el.style.setProperty(prefix + 'letter-spacing-t', typo.letterSpacingTablet + lsu); |
| 29 |
if (typo.letterSpacingMobile !== '' && typo.letterSpacingMobile !== undefined && typo.letterSpacingMobile !== null) el.style.setProperty(prefix + 'letter-spacing-m', typo.letterSpacingMobile + lsu); |
| 30 |
|
| 31 |
var wsu = typo.wordSpacingUnit || 'px'; |
| 32 |
if (typo.wordSpacingDesktop !== '' && typo.wordSpacingDesktop !== undefined && typo.wordSpacingDesktop !== null) { |
| 33 |
el.style.setProperty(prefix + 'word-spacing-d', typo.wordSpacingDesktop + wsu); |
| 34 |
el.style.setProperty(prefix + 'word-spacing', typo.wordSpacingDesktop + wsu); |
| 35 |
} |
| 36 |
if (typo.wordSpacingTablet !== '' && typo.wordSpacingTablet !== undefined && typo.wordSpacingTablet !== null) el.style.setProperty(prefix + 'word-spacing-t', typo.wordSpacingTablet + wsu); |
| 37 |
if (typo.wordSpacingMobile !== '' && typo.wordSpacingMobile !== undefined && typo.wordSpacingMobile !== null) el.style.setProperty(prefix + 'word-spacing-m', typo.wordSpacingMobile + wsu); |
| 38 |
} |
| 39 |
|
| 40 |
var presets = { |
| 41 |
info: { bg: '#eff6ff', border: '#3b82f6', title: '#1d4ed8', text: '#1e3a5f', badge: '#dbeafe', badgeColor: '#1d4ed8' }, |
| 42 |
warning: { bg: '#fffbeb', border: '#f59e0b', title: '#92400e', text: '#78350f', badge: '#fef3c7', badgeColor: '#92400e' }, |
| 43 |
success: { bg: '#f0fdf4', border: '#22c55e', title: '#15803d', text: '#14532d', badge: '#dcfce7', badgeColor: '#15803d' }, |
| 44 |
tip: { bg: '#fdf4ff', border: '#a855f7', title: '#7c3aed', text: '#5b21b6', badge: '#f3e8ff', badgeColor: '#7c3aed' }, |
| 45 |
quote: { bg: '#f8fafc', border: '#64748b', title: '#334155', text: '#475569', badge: '#e2e8f0', badgeColor: '#475569' }, |
| 46 |
custom: { bg: '#f9fafb', border: '#d1d5db', title: '#111827', text: '#374151', badge: '#e5e7eb', badgeColor: '#374151' } |
| 47 |
}; |
| 48 |
|
| 49 |
document.querySelectorAll('.bkbg-content-box-app').forEach(function (root) { |
| 50 |
var opts = {}; |
| 51 |
try { opts = JSON.parse(root.dataset.opts || '{}'); } catch (e) {} |
| 52 |
|
| 53 |
var p = presets[opts.variant] || presets.info; |
| 54 |
var bg = opts.bgColor || p.bg; |
| 55 |
var border = opts.borderColor || p.border; |
| 56 |
var titleColor = opts.titleColor || p.title; |
| 57 |
var textColor = opts.textColor || p.text; |
| 58 |
var badgeBg = opts.badgeBg || p.badge; |
| 59 |
var badgeColor = opts.badgeColor || p.badgeColor; |
| 60 |
var iconColor = opts.iconColor || p.border; |
| 61 |
|
| 62 |
var borderProp = opts.borderPosition || 'left'; |
| 63 |
var bw = (opts.borderWidth || 4) + 'px solid ' + border; |
| 64 |
var boxStyle = 'background:' + bg + ';border-radius:' + (opts.borderRadius || 8) + 'px;padding:' + (opts.paddingV || 20) + 'px ' + (opts.paddingH || 24) + 'px;'; |
| 65 |
if (opts.maxWidth > 0) boxStyle += 'max-width:' + opts.maxWidth + 'px;'; |
| 66 |
if (borderProp === 'left') boxStyle += 'border-left:' + bw + ';'; |
| 67 |
if (borderProp === 'top') boxStyle += 'border-top:' + bw + ';'; |
| 68 |
if (borderProp === 'all') boxStyle += 'border:' + bw + ';'; |
| 69 |
|
| 70 |
var wrap = document.createElement('div'); |
| 71 |
wrap.className = 'bkbg-content-box-wrap' + (opts.iconLayout === 'top' ? ' icon-top' : ''); |
| 72 |
wrap.style.cssText = boxStyle; |
| 73 |
|
| 74 |
if (opts.showIcon !== false) { |
| 75 |
var iconEl = document.createElement('div'); |
| 76 |
iconEl.className = 'bkbg-cb-icon'; |
| 77 |
iconEl.style.cssText = 'font-size:' + (opts.iconSize || 28) + 'px;color:' + iconColor + ';'; |
| 78 |
var IP = window.bkbgIconPicker; |
| 79 |
var iconNode = IP ? IP.buildFrontendIcon(opts.iconType || 'custom-char', opts.icon, opts.iconDashicon, opts.iconImageUrl, opts.iconDashiconColor) : null; |
| 80 |
if (iconNode) { |
| 81 |
iconEl.appendChild(iconNode); |
| 82 |
wrap.appendChild(iconEl); |
| 83 |
} else if (opts.icon) { |
| 84 |
iconEl.textContent = opts.icon; |
| 85 |
wrap.appendChild(iconEl); |
| 86 |
} |
| 87 |
} |
| 88 |
|
| 89 |
var bodyCol = document.createElement('div'); |
| 90 |
bodyCol.className = 'bkbg-cb-body-col'; |
| 91 |
|
| 92 |
var header = document.createElement('div'); |
| 93 |
header.className = 'bkbg-cb-header'; |
| 94 |
|
| 95 |
if (opts.showBadge !== false && opts.badge) { |
| 96 |
var badge = document.createElement('span'); |
| 97 |
badge.className = 'bkbg-cb-badge'; |
| 98 |
badge.style.cssText = 'background:' + badgeBg + ';color:' + badgeColor + ';'; |
| 99 |
badge.textContent = opts.badge; |
| 100 |
header.appendChild(badge); |
| 101 |
} |
| 102 |
|
| 103 |
if (opts.showTitle !== false && opts.title) { |
| 104 |
var title = document.createElement('strong'); |
| 105 |
title.className = 'bkbg-cb-title'; |
| 106 |
title.style.color = titleColor; |
| 107 |
title.innerHTML = opts.title; |
| 108 |
header.appendChild(title); |
| 109 |
} |
| 110 |
|
| 111 |
if (header.children.length) bodyCol.appendChild(header); |
| 112 |
|
| 113 |
var body = document.createElement('div'); |
| 114 |
body.className = 'bkbg-cb-text'; |
| 115 |
body.style.color = textColor; |
| 116 |
body.innerHTML = opts.body || ''; |
| 117 |
bodyCol.appendChild(body); |
| 118 |
|
| 119 |
wrap.appendChild(bodyCol); |
| 120 |
typoCssVarsForEl(opts.typoTitle, '--bkcb-title-', wrap); |
| 121 |
typoCssVarsForEl(opts.typoBody, '--bkcb-body-', wrap); |
| 122 |
root.parentNode.replaceChild(wrap, root); |
| 123 |
}); |
| 124 |
})(); |
| 125 |
|
