| 1 |
(function () { |
| 2 |
var typoMap = [ |
| 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(typo, prefix, el) { |
| 11 |
if (!typo || typeof typo !== 'object') return; |
| 12 |
for (var i = 0; i < typoMap.length; i++) { |
| 13 |
var v = typo[typoMap[i][0]]; |
| 14 |
if (v !== undefined && v !== '' && v !== null) el.style.setProperty(prefix + typoMap[i][1], String(v)); |
| 15 |
} |
| 16 |
} |
| 17 |
|
| 18 |
function init() { |
| 19 |
document.querySelectorAll('.bkbg-iac-app').forEach(function (appEl) { |
| 20 |
if (appEl.dataset.rendered) return; |
| 21 |
appEl.dataset.rendered = '1'; |
| 22 |
var opts; |
| 23 |
try { opts = JSON.parse(appEl.dataset.opts || '{}'); } catch (e) { opts = {}; } |
| 24 |
var o = Object.assign({ |
| 25 |
items: [], accordionStyle: 'card', iconStyle: 'rounded', iconSize: 44, |
| 26 |
expandIcon: 'chevron', allowMultiple: false, animDuration: 300, |
| 27 |
gap: 8, borderRadius: 12, paddingTop: 0, paddingBottom: 0, |
| 28 |
bgColor: '', panelBg: '#ffffff', panelBorder: '#e5e7eb', headerBg: '', |
| 29 |
titleColor: '#111827', contentColor: '#6b7280', |
| 30 |
badgeBg: '#f3f4f6', badgeColor: '#374151', |
| 31 |
accentColor: '#6366f1', expandColor: '#9ca3af' |
| 32 |
}, opts); |
| 33 |
|
| 34 |
var items = o.items || []; |
| 35 |
if (!items.length) { appEl.style.display = 'none'; return; } |
| 36 |
|
| 37 |
var expIcons = { |
| 38 |
chevron: { open: '▾', closed: '▸' }, |
| 39 |
plus: { open: '−', closed: '+' }, |
| 40 |
arrow: { open: '↑', closed: '↓' }, |
| 41 |
caret: { open: '◀', closed: '▶' } |
| 42 |
}; |
| 43 |
var eIcons = expIcons[o.expandIcon] || expIcons.chevron; |
| 44 |
|
| 45 |
var iStyle = o.iconStyle; |
| 46 |
var iRadius = iStyle === 'circle' ? '50%' : iStyle === 'rounded' ? '10px' : '4px'; |
| 47 |
var iFontSize = Math.round(o.iconSize * 0.5) + 'px'; |
| 48 |
|
| 49 |
function mk(tag, cls, style) { |
| 50 |
var n = document.createElement(tag); |
| 51 |
if (cls) n.className = cls; |
| 52 |
if (style) Object.assign(n.style, style); |
| 53 |
return n; |
| 54 |
} |
| 55 |
|
| 56 |
/* Section */ |
| 57 |
var section = mk('div', 'bkbg-iac-section bkbg-iac-style-' + o.accordionStyle, { |
| 58 |
background: o.bgColor || '', |
| 59 |
paddingTop: o.paddingTop + 'px', |
| 60 |
paddingBottom: o.paddingBottom + 'px' |
| 61 |
}); |
| 62 |
section.style.setProperty('--bkbg-iac-tt-sz', (o.titleFontSize || 15) + 'px'); |
| 63 |
section.style.setProperty('--bkbg-iac-tt-w', o.titleFontWeight || '700'); |
| 64 |
section.style.setProperty('--bkbg-iac-tt-lh', String(o.titleLineHeight || 1.3)); |
| 65 |
section.style.setProperty('--bkbg-iac-ct-sz', (o.contentFontSize || 14) + 'px'); |
| 66 |
section.style.setProperty('--bkbg-iac-ct-w', o.contentFontWeight || '400'); |
| 67 |
section.style.setProperty('--bkbg-iac-ct-lh', String(o.contentLineHeight || 1.7)); |
| 68 |
typoCssVarsForEl(o.titleTypo, '--bkbg-iac-tt-', section); |
| 69 |
typoCssVarsForEl(o.contentTypo, '--bkbg-iac-ct-', section); |
| 70 |
|
| 71 |
var panelEls = []; |
| 72 |
|
| 73 |
items.forEach(function (it, idx) { |
| 74 |
var isOpen = it.defaultOpen || false; |
| 75 |
var isFilled = o.accordionStyle === 'filled'; |
| 76 |
|
| 77 |
function panelBgColor() { |
| 78 |
return isFilled && isOpen ? o.accentColor : o.panelBg; |
| 79 |
} |
| 80 |
|
| 81 |
var panelStyle = { |
| 82 |
borderRadius: o.borderRadius + 'px', |
| 83 |
marginBottom: o.gap + 'px', |
| 84 |
overflow: 'hidden', |
| 85 |
background: panelBgColor(), |
| 86 |
transition: 'background ' + (o.animDuration / 1000) + 's ease, box-shadow 0.25s ease' |
| 87 |
}; |
| 88 |
if (o.accordionStyle === 'card') { panelStyle.border = '1px solid ' + o.panelBorder; } |
| 89 |
if (o.accordionStyle === 'minimal') { |
| 90 |
panelStyle.borderBottom = '1px solid ' + o.panelBorder; |
| 91 |
panelStyle.borderRadius = '0'; |
| 92 |
panelStyle.background = 'transparent'; |
| 93 |
} |
| 94 |
|
| 95 |
var panel = mk('div', 'bkbg-iac-panel' + (isOpen ? ' open' : ''), panelStyle); |
| 96 |
|
| 97 |
/* Header */ |
| 98 |
var header = mk('div', 'bkbg-iac-header', { background: o.headerBg || 'transparent' }); |
| 99 |
|
| 100 |
/* Icon */ |
| 101 |
var icon = mk('div', 'bkbg-iac-icon', { |
| 102 |
width: o.iconSize + 'px', |
| 103 |
height: o.iconSize + 'px', |
| 104 |
background: isFilled && isOpen ? 'rgba(255,255,255,0.2)' : (it.iconBg || '#ede9fe'), |
| 105 |
borderRadius: iRadius, |
| 106 |
fontSize: iFontSize |
| 107 |
}); |
| 108 |
icon.textContent = ''; |
| 109 |
var _IP = window.bkbgIconPicker; |
| 110 |
var _iType = it.iconType || 'custom-char'; |
| 111 |
if (_IP && _iType !== 'custom-char') { |
| 112 |
var _in = _IP.buildFrontendIcon(_iType, it.icon, it.iconDashicon, it.iconImageUrl, it.iconDashiconColor); |
| 113 |
if (_in) icon.appendChild(_in); else icon.textContent = it.icon || '●'; |
| 114 |
} else { icon.textContent = it.icon || '●'; } |
| 115 |
header.appendChild(icon); |
| 116 |
|
| 117 |
/* Title row */ |
| 118 |
var titleRow = mk('div', 'bkbg-iac-title-row'); |
| 119 |
var titleEl = mk('span', 'bkbg-iac-title', { color: isFilled && isOpen ? '#ffffff' : o.titleColor }); |
| 120 |
titleEl.textContent = it.title || ''; |
| 121 |
titleRow.appendChild(titleEl); |
| 122 |
if (it.badge) { |
| 123 |
var badge = mk('span', 'bkbg-iac-badge', { |
| 124 |
background: isFilled && isOpen ? 'rgba(255,255,255,0.25)' : o.badgeBg, |
| 125 |
color: isFilled && isOpen ? '#ffffff' : o.badgeColor |
| 126 |
}); |
| 127 |
badge.textContent = it.badge; |
| 128 |
titleRow.appendChild(badge); |
| 129 |
} |
| 130 |
header.appendChild(titleRow); |
| 131 |
|
| 132 |
/* Expand icon */ |
| 133 |
var expEl = mk('span', 'bkbg-iac-expand', { color: isFilled && isOpen ? 'rgba(255,255,255,0.8)' : o.expandColor }); |
| 134 |
expEl.textContent = isOpen ? eIcons.open : eIcons.closed; |
| 135 |
header.appendChild(expEl); |
| 136 |
panel.appendChild(header); |
| 137 |
|
| 138 |
/* Body */ |
| 139 |
var body = mk('div', 'bkbg-iac-body'); |
| 140 |
var bodyInner = mk('div', 'bkbg-iac-body-inner', { |
| 141 |
paddingLeft: (18 + o.iconSize + 14) + 'px', |
| 142 |
color: isFilled && isOpen ? 'rgba(255,255,255,0.85)' : o.contentColor |
| 143 |
}); |
| 144 |
bodyInner.innerHTML = it.content || ''; |
| 145 |
body.appendChild(bodyInner); |
| 146 |
panel.appendChild(body); |
| 147 |
|
| 148 |
/* Initial state */ |
| 149 |
if (isOpen) { body.style.maxHeight = '1000px'; } |
| 150 |
|
| 151 |
/* Toggle handler */ |
| 152 |
header.addEventListener('click', function () { |
| 153 |
isOpen = !isOpen; |
| 154 |
|
| 155 |
if (!o.allowMultiple && isOpen) { |
| 156 |
/* close others */ |
| 157 |
panelEls.forEach(function (info) { |
| 158 |
if (info.panel === panel) return; |
| 159 |
info.isOpen = false; |
| 160 |
info.panel.classList.remove('open'); |
| 161 |
info.body.style.maxHeight = '0'; |
| 162 |
info.expEl.textContent = eIcons.closed; |
| 163 |
if (o.accordionStyle === 'filled') { |
| 164 |
info.panel.style.background = o.panelBg; |
| 165 |
info.icon.style.background = info.iconBg || '#ede9fe'; |
| 166 |
info.titleEl.style.color = o.titleColor; |
| 167 |
info.expEl.style.color = o.expandColor; |
| 168 |
info.bodyInner.style.color = o.contentColor; |
| 169 |
if (info.badge) { info.badge.style.background = o.badgeBg; info.badge.style.color = o.badgeColor; } |
| 170 |
} |
| 171 |
}); |
| 172 |
} |
| 173 |
|
| 174 |
panel.classList.toggle('open', isOpen); |
| 175 |
body.style.maxHeight = isOpen ? '1000px' : '0'; |
| 176 |
expEl.textContent = isOpen ? eIcons.open : eIcons.closed; |
| 177 |
|
| 178 |
if (o.accordionStyle === 'filled') { |
| 179 |
panel.style.background = isOpen ? o.accentColor : o.panelBg; |
| 180 |
icon.style.background = isOpen ? 'rgba(255,255,255,0.2)' : (it.iconBg || '#ede9fe'); |
| 181 |
titleEl.style.color = isOpen ? '#ffffff' : o.titleColor; |
| 182 |
expEl.style.color = isOpen ? 'rgba(255,255,255,0.8)' : o.expandColor; |
| 183 |
bodyInner.style.color = isOpen ? 'rgba(255,255,255,0.85)' : o.contentColor; |
| 184 |
if (badge) { badge.style.background = isOpen ? 'rgba(255,255,255,0.25)' : o.badgeBg; badge.style.color = isOpen ? '#fff' : o.badgeColor; } |
| 185 |
} |
| 186 |
}); |
| 187 |
|
| 188 |
section.appendChild(panel); |
| 189 |
panelEls.push({ panel: panel, body: body, icon: icon, titleEl: titleEl, expEl: expEl, badge: it.badge ? panel.querySelector('.bkbg-iac-badge') : null, bodyInner: bodyInner, iconBg: it.iconBg, isOpen: isOpen }); |
| 190 |
}); |
| 191 |
|
| 192 |
appEl.parentNode.insertBefore(section, appEl); |
| 193 |
}); |
| 194 |
} |
| 195 |
|
| 196 |
if (document.readyState !== 'loading') { init(); } |
| 197 |
else { document.addEventListener('DOMContentLoaded', init); } |
| 198 |
})(); |
| 199 |
|
