| 1 |
(function () { |
| 2 |
function typoCssVarsForEl(typo, prefix, el) { |
| 3 |
if (!typo) return; |
| 4 |
if (typo.family) el.style.setProperty(prefix + 'font-family', "'" + typo.family + "', sans-serif"); |
| 5 |
if (typo.weight) el.style.setProperty(prefix + 'font-weight', typo.weight); |
| 6 |
if (typo.transform) el.style.setProperty(prefix + 'text-transform', typo.transform); |
| 7 |
if (typo.style) el.style.setProperty(prefix + 'font-style', typo.style); |
| 8 |
if (typo.decoration) el.style.setProperty(prefix + 'text-decoration', typo.decoration); |
| 9 |
var su = typo.sizeUnit || 'px'; |
| 10 |
if (typo.sizeDesktop !== '' && typo.sizeDesktop != null) el.style.setProperty(prefix + 'font-size-d', typo.sizeDesktop + su); |
| 11 |
if (typo.sizeTablet !== '' && typo.sizeTablet != null) el.style.setProperty(prefix + 'font-size-t', typo.sizeTablet + su); |
| 12 |
if (typo.sizeMobile !== '' && typo.sizeMobile != null) el.style.setProperty(prefix + 'font-size-m', typo.sizeMobile + su); |
| 13 |
var lhu = typo.lineHeightUnit || 'px'; |
| 14 |
if (typo.lineHeightDesktop !== '' && typo.lineHeightDesktop != null) el.style.setProperty(prefix + 'line-height-d', typo.lineHeightDesktop + lhu); |
| 15 |
if (typo.lineHeightTablet !== '' && typo.lineHeightTablet != null) el.style.setProperty(prefix + 'line-height-t', typo.lineHeightTablet + lhu); |
| 16 |
if (typo.lineHeightMobile !== '' && typo.lineHeightMobile != null) el.style.setProperty(prefix + 'line-height-m', typo.lineHeightMobile + lhu); |
| 17 |
var lsu = typo.letterSpacingUnit || 'px'; |
| 18 |
if (typo.letterSpacingDesktop !== '' && typo.letterSpacingDesktop != null) { |
| 19 |
el.style.setProperty(prefix + 'letter-spacing-d', typo.letterSpacingDesktop + lsu); |
| 20 |
el.style.setProperty(prefix + 'letter-spacing', typo.letterSpacingDesktop + lsu); |
| 21 |
} |
| 22 |
if (typo.letterSpacingTablet !== '' && typo.letterSpacingTablet != null) el.style.setProperty(prefix + 'letter-spacing-t', typo.letterSpacingTablet + lsu); |
| 23 |
if (typo.letterSpacingMobile !== '' && typo.letterSpacingMobile != null) el.style.setProperty(prefix + 'letter-spacing-m', typo.letterSpacingMobile + lsu); |
| 24 |
var wsu = typo.wordSpacingUnit || 'px'; |
| 25 |
if (typo.wordSpacingDesktop !== '' && typo.wordSpacingDesktop != null) { |
| 26 |
el.style.setProperty(prefix + 'word-spacing-d', typo.wordSpacingDesktop + wsu); |
| 27 |
el.style.setProperty(prefix + 'word-spacing', typo.wordSpacingDesktop + wsu); |
| 28 |
} |
| 29 |
if (typo.wordSpacingTablet !== '' && typo.wordSpacingTablet != null) el.style.setProperty(prefix + 'word-spacing-t', typo.wordSpacingTablet + wsu); |
| 30 |
if (typo.wordSpacingMobile !== '' && typo.wordSpacingMobile != null) el.style.setProperty(prefix + 'word-spacing-m', typo.wordSpacingMobile + wsu); |
| 31 |
} |
| 32 |
|
| 33 |
function init() { |
| 34 |
document.querySelectorAll('.bkbg-cw-app').forEach(function (appEl) { |
| 35 |
if (appEl.dataset.rendered) return; |
| 36 |
appEl.dataset.rendered = '1'; |
| 37 |
var opts; |
| 38 |
try { opts = JSON.parse(appEl.dataset.opts || '{}'); } catch (e) { opts = {}; } |
| 39 |
var o = Object.assign({ |
| 40 |
warningType: 'sensitive', icon: '⚠️', iconType: 'custom-char', iconDashicon: 'warning', iconImageUrl: '', |
| 41 |
showIcon: true, |
| 42 |
label: 'Content Warning', topics: '', message: '', showMessage: true, |
| 43 |
collapsible: false, buttonLabel: 'I understand — show content', |
| 44 |
style: 'box', |
| 45 |
bgColor: '#fef2f2', borderColor: '#fca5a5', accentColor: '#dc2626', |
| 46 |
labelColor: '#7f1d1d', textColor: '#450a0a', |
| 47 |
topicBg: '#fee2e2', topicColor: '#991b1b', |
| 48 |
btnBg: '#dc2626', btnColor: '#ffffff', |
| 49 |
borderRadius: 8, paddingTop: 0, paddingBottom: 0 |
| 50 |
}, opts); |
| 51 |
|
| 52 |
function mk(tag, cls, style, text) { |
| 53 |
var n = document.createElement(tag); |
| 54 |
if (cls) n.className = cls; |
| 55 |
if (style) Object.assign(n.style, style); |
| 56 |
if (text != null) n.textContent = text; |
| 57 |
return n; |
| 58 |
} |
| 59 |
|
| 60 |
var outerWrap = mk('div', '', { paddingTop: o.paddingTop + 'px', paddingBottom: o.paddingBottom + 'px' }); |
| 61 |
|
| 62 |
var wrap = mk('div', 'bkbg-cw-wrap bkbg-cw-style-' + o.style, { |
| 63 |
background: o.bgColor, |
| 64 |
borderRadius: o.style === 'pill' ? '999px' : o.borderRadius + 'px' |
| 65 |
}); |
| 66 |
|
| 67 |
if (o.style === 'box' || o.style === 'outline') { |
| 68 |
wrap.style.borderColor = o.borderColor; |
| 69 |
if (o.style === 'outline') wrap.style.background = 'transparent'; |
| 70 |
} else if (o.style === 'banner') { |
| 71 |
wrap.style.borderColor = o.borderColor; |
| 72 |
wrap.style.borderLeftColor = o.accentColor; |
| 73 |
} else if (o.style === 'pill') { |
| 74 |
wrap.style.borderColor = o.accentColor; |
| 75 |
} |
| 76 |
|
| 77 |
/* header */ |
| 78 |
var header = mk('div', 'bkbg-cw-header'); |
| 79 |
if (o.showIcon) { |
| 80 |
var IP = window.bkbgIconPicker; |
| 81 |
var iconEl = IP ? IP.buildFrontendIcon(o.iconType, o.icon, o.iconDashicon, o.iconImageUrl, o.iconDashiconColor) : null; |
| 82 |
if (iconEl) { |
| 83 |
iconEl.classList.add('bkbg-cw-icon'); |
| 84 |
header.appendChild(iconEl); |
| 85 |
} else if (o.icon) { |
| 86 |
header.appendChild(mk('span', 'bkbg-cw-icon', {}, o.icon)); |
| 87 |
} |
| 88 |
} |
| 89 |
header.appendChild(mk('span', 'bkbg-cw-label', { color: o.labelColor }, o.label)); |
| 90 |
wrap.appendChild(header); |
| 91 |
|
| 92 |
/* topics */ |
| 93 |
if (o.topics && o.topics.trim()) { |
| 94 |
var topicsRow = mk('div', 'bkbg-cw-topics'); |
| 95 |
o.topics.split(',').forEach(function (t) { |
| 96 |
var text = t.trim(); |
| 97 |
if (!text) return; |
| 98 |
topicsRow.appendChild(mk('span', 'bkbg-cw-topic', { background: o.topicBg, color: o.topicColor }, text)); |
| 99 |
}); |
| 100 |
wrap.appendChild(topicsRow); |
| 101 |
} |
| 102 |
|
| 103 |
/* message */ |
| 104 |
if (o.showMessage && o.message && o.message.trim()) { |
| 105 |
var msg = mk('p', 'bkbg-cw-message', { color: o.textColor }, ''); |
| 106 |
msg.innerHTML = o.message; |
| 107 |
wrap.appendChild(msg); |
| 108 |
} |
| 109 |
|
| 110 |
/* collapsible: find the next sibling block and hide it */ |
| 111 |
if (o.collapsible) { |
| 112 |
/* find the parent block wrapper and the next block sibling */ |
| 113 |
var parentBlock = appEl.closest('.wp-block-blockenberg-content-warning') || appEl.parentNode; |
| 114 |
var nextBlock = parentBlock ? parentBlock.nextElementSibling : null; |
| 115 |
|
| 116 |
var btn = mk('button', 'bkbg-cw-btn', { background: o.btnBg, color: o.btnColor }); |
| 117 |
btn.textContent = o.buttonLabel; |
| 118 |
|
| 119 |
if (nextBlock) { |
| 120 |
nextBlock.style.display = 'none'; |
| 121 |
var notice = mk('p', 'bkbg-cw-hidden-notice', { color: o.textColor }, 'Content is hidden. Click the button below to reveal it.'); |
| 122 |
wrap.appendChild(notice); |
| 123 |
|
| 124 |
btn.addEventListener('click', function () { |
| 125 |
nextBlock.style.display = ''; |
| 126 |
wrap.style.display = 'none'; |
| 127 |
}); |
| 128 |
} |
| 129 |
wrap.appendChild(btn); |
| 130 |
} |
| 131 |
|
| 132 |
typoCssVarsForEl(o.typoLabel, '--bkbg-cw-label-', outerWrap); |
| 133 |
typoCssVarsForEl(o.typoMessage, '--bkbg-cw-msg-', outerWrap); |
| 134 |
|
| 135 |
outerWrap.appendChild(wrap); |
| 136 |
appEl.parentNode.insertBefore(outerWrap, appEl); |
| 137 |
}); |
| 138 |
} |
| 139 |
|
| 140 |
if (document.readyState !== 'loading') { init(); } |
| 141 |
else { document.addEventListener('DOMContentLoaded', init); } |
| 142 |
})(); |
| 143 |
|
