| 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 badgeShapeRadius(shape) { |
| 24 |
if (shape === 'circle') return '50%'; |
| 25 |
if (shape === 'square') return '4px'; |
| 26 |
return '10px'; |
| 27 |
} |
| 28 |
|
| 29 |
function init() { |
| 30 |
document.querySelectorAll('.bkbg-nl-app').forEach(function (appEl) { |
| 31 |
if (appEl.dataset.rendered) return; |
| 32 |
appEl.dataset.rendered = '1'; |
| 33 |
|
| 34 |
var opts; |
| 35 |
try { opts = JSON.parse(appEl.dataset.opts || '{}'); } catch (e) { opts = {}; } |
| 36 |
|
| 37 |
var o = Object.assign({ |
| 38 |
heading: 'Why Choose Us', showHeading: true, subtext: '', showSubtext: false, |
| 39 |
items: [], layout: 'list', badgeType: 'number', badgeShape: 'circle', |
| 40 |
badgeSize: 44, badgeFontSize: 18, showConnector: true, connectorStyle: 'dashed', |
| 41 |
showImage: false, imageSize: 180, imageRadius: 12, imagePosition: 'right', |
| 42 |
columns: 1, gap: 40, headingSize: 20, fontSize: 15, borderRadius: 0, |
| 43 |
paddingTop: 0, paddingBottom: 0, align: 'left', |
| 44 |
bgColor: '', badgeBg: '#6366f1', badgeColor: '#ffffff', |
| 45 |
headingColor: '#111827', textColor: '#4b5563', connectorColor: '#d1d5db', |
| 46 |
sectionHeadingColor: '#111827', subtextColor: '#6b7280', |
| 47 |
sectionHeadingTypo: {}, itemHeadingTypo: {}, bodyTypo: {}, subtextTypo: {} |
| 48 |
}, opts); |
| 49 |
|
| 50 |
var section = document.createElement('div'); |
| 51 |
section.className = 'bkbg-nl-wrap'; |
| 52 |
section.style.cssText = [ |
| 53 |
o.bgColor ? 'background:' + o.bgColor : '', |
| 54 |
'padding-top:' + o.paddingTop + 'px', |
| 55 |
'padding-bottom:' + o.paddingBottom + 'px', |
| 56 |
'text-align:' + o.align |
| 57 |
].filter(Boolean).join(';'); |
| 58 |
|
| 59 |
/* Typography CSS vars */ |
| 60 |
typoCssVarsForEl(section, o.sectionHeadingTypo, '--bkbg-nl-sh-'); |
| 61 |
typoCssVarsForEl(section, o.itemHeadingTypo, '--bkbg-nl-ih-'); |
| 62 |
typoCssVarsForEl(section, o.bodyTypo, '--bkbg-nl-bd-'); |
| 63 |
typoCssVarsForEl(section, o.subtextTypo, '--bkbg-nl-st-'); |
| 64 |
|
| 65 |
if (o.showHeading && o.heading) { |
| 66 |
var h = document.createElement('h2'); |
| 67 |
h.className = 'bkbg-nl-heading'; |
| 68 |
h.innerHTML = o.heading; |
| 69 |
h.style.color = o.sectionHeadingColor; |
| 70 |
section.appendChild(h); |
| 71 |
} |
| 72 |
if (o.showSubtext && o.subtext) { |
| 73 |
var sub = document.createElement('p'); |
| 74 |
sub.className = 'bkbg-nl-subtext'; |
| 75 |
sub.innerHTML = o.subtext; |
| 76 |
sub.style.color = o.subtextColor; |
| 77 |
section.appendChild(sub); |
| 78 |
} |
| 79 |
|
| 80 |
var isGrid = o.layout === 'grid'; |
| 81 |
var container = document.createElement('div'); |
| 82 |
container.className = isGrid ? 'bkbg-nl-grid' : 'bkbg-nl-list'; |
| 83 |
container.style.gap = o.gap + 'px'; |
| 84 |
if (isGrid) { |
| 85 |
container.style.gridTemplateColumns = 'repeat(' + o.columns + ',1fr)'; |
| 86 |
} |
| 87 |
|
| 88 |
var bRadius = badgeShapeRadius(o.badgeShape); |
| 89 |
|
| 90 |
(o.items || []).forEach(function (it, idx) { |
| 91 |
var itemWrap = o.layout !== 'list' || !it.link ? document.createElement('div') : document.createElement('div'); |
| 92 |
itemWrap.className = 'bkbg-nl-item' + (o.showImage ? ' img-' + o.imagePosition : ''); |
| 93 |
|
| 94 |
var inner = document.createElement('div'); |
| 95 |
inner.className = 'bkbg-nl-inner' + (o.align === 'center' ? ' align-center' : ''); |
| 96 |
|
| 97 |
/* Image – above */ |
| 98 |
if (o.showImage && it.imageUrl && o.imagePosition === 'above') { |
| 99 |
var img = makeImg(it, o); |
| 100 |
inner.appendChild(img); |
| 101 |
} |
| 102 |
|
| 103 |
/* Badge */ |
| 104 |
var badgeBg = it.accentColor || o.badgeBg; |
| 105 |
var badgeLabel = o.badgeType === 'number' ? String(idx + 1) |
| 106 |
: o.badgeType === 'icon' ? (it.icon || '� |
| 107 |
') |
| 108 |
: o.badgeType === 'custom' ? (it.customBadge || String(idx + 1)) |
| 109 |
: null; |
| 110 |
|
| 111 |
if (badgeLabel !== null) { |
| 112 |
var badge = document.createElement('div'); |
| 113 |
badge.className = 'bkbg-nl-badge'; |
| 114 |
if (o.badgeType === 'icon') { |
| 115 |
var _IP = window.bkbgIconPicker; |
| 116 |
var _iType = it.iconType || 'custom-char'; |
| 117 |
if (_IP && _iType !== 'custom-char') { |
| 118 |
var _in = _IP.buildFrontendIcon(_iType, it.icon, it.iconDashicon, it.iconImageUrl, it.iconDashiconColor); |
| 119 |
if (_in) badge.appendChild(_in); else badge.textContent = it.icon || '� |
| 120 |
'; |
| 121 |
} else { badge.textContent = it.icon || '� |
| 122 |
'; } |
| 123 |
} else { badge.textContent = badgeLabel; } |
| 124 |
badge.style.cssText = 'background:' + badgeBg + ';color:' + o.badgeColor + ';width:' + o.badgeSize + 'px;height:' + o.badgeSize + 'px;border-radius:' + bRadius + ';font-size:' + o.badgeFontSize + 'px'; |
| 125 |
inner.appendChild(badge); |
| 126 |
} |
| 127 |
|
| 128 |
/* Content body */ |
| 129 |
var body = document.createElement('div'); |
| 130 |
body.className = 'bkbg-nl-body'; |
| 131 |
|
| 132 |
var ht = document.createElement('h4'); |
| 133 |
ht.className = 'bkbg-nl-item-heading'; |
| 134 |
ht.innerHTML = it.heading; |
| 135 |
ht.style.color = o.headingColor; |
| 136 |
body.appendChild(ht); |
| 137 |
|
| 138 |
if (it.content) { |
| 139 |
var p = document.createElement('p'); |
| 140 |
p.className = 'bkbg-nl-item-text'; |
| 141 |
p.innerHTML = it.content; |
| 142 |
p.style.color = o.textColor; |
| 143 |
body.appendChild(p); |
| 144 |
} |
| 145 |
|
| 146 |
/* Image left/right */ |
| 147 |
if (o.showImage && it.imageUrl && o.imagePosition === 'left') { |
| 148 |
inner.appendChild(makeImg(it, o)); |
| 149 |
} |
| 150 |
|
| 151 |
inner.appendChild(body); |
| 152 |
|
| 153 |
if (o.showImage && it.imageUrl && o.imagePosition === 'right') { |
| 154 |
inner.appendChild(makeImg(it, o)); |
| 155 |
} |
| 156 |
|
| 157 |
/* Connector */ |
| 158 |
if (o.showConnector && o.layout === 'list' && badgeLabel && idx < (o.items || []).length - 1) { |
| 159 |
var conn = document.createElement('div'); |
| 160 |
conn.className = 'bkbg-nl-connector'; |
| 161 |
conn.style.cssText = 'left:' + (o.badgeSize / 2 - 1) + 'px;top:' + (o.badgeSize + 6) + 'px;bottom:-' + (o.gap - 4) + 'px;border-left:2px ' + o.connectorStyle + ' ' + o.connectorColor; |
| 162 |
itemWrap.appendChild(conn); |
| 163 |
} |
| 164 |
|
| 165 |
var content = itemWrap; |
| 166 |
if (it.link) { |
| 167 |
var a = document.createElement('a'); |
| 168 |
a.href = it.link; |
| 169 |
a.className = 'bkbg-nl-link'; |
| 170 |
a.appendChild(inner); |
| 171 |
itemWrap.appendChild(a); |
| 172 |
} else { |
| 173 |
itemWrap.appendChild(inner); |
| 174 |
} |
| 175 |
|
| 176 |
container.appendChild(itemWrap); |
| 177 |
}); |
| 178 |
|
| 179 |
section.appendChild(container); |
| 180 |
appEl.parentNode.insertBefore(section, appEl); |
| 181 |
}); |
| 182 |
} |
| 183 |
|
| 184 |
function makeImg(it, o) { |
| 185 |
var img = document.createElement('img'); |
| 186 |
img.className = 'bkbg-nl-img'; |
| 187 |
img.src = it.imageUrl; |
| 188 |
img.alt = it.imageAlt || ''; |
| 189 |
img.style.cssText = 'width:' + o.imageSize + 'px;border-radius:' + o.imageRadius + 'px;object-fit:cover'; |
| 190 |
return img; |
| 191 |
} |
| 192 |
|
| 193 |
if (document.readyState !== 'loading') { init(); } |
| 194 |
else { document.addEventListener('DOMContentLoaded', init); } |
| 195 |
})(); |
| 196 |
|
