| 1 |
(function () { |
| 2 |
'use strict'; |
| 3 |
|
| 4 |
function initBlock(root) { |
| 5 |
var appEl = root.querySelector('.bkbg-ufd-app'); |
| 6 |
if (!appEl) return; |
| 7 |
|
| 8 |
var raw = appEl.getAttribute('data-opts') || '{}'; |
| 9 |
var o; |
| 10 |
try { o = JSON.parse(raw); } catch (e) { o = {}; } |
| 11 |
|
| 12 |
var previewHeight = Number(o.previewHeight) || 200; |
| 13 |
var expandText = o.expandText || 'Read More ↓'; |
| 14 |
var collapseText = o.collapseText || 'Show Less ↑'; |
| 15 |
var showCollapseBtn = o.showCollapseBtn !== false; |
| 16 |
var gradientHeight = Number(o.gradientHeight) || 60; |
| 17 |
var animationDuration = Number(o.animationDuration) || 400; |
| 18 |
var buttonAlign = o.buttonAlign || 'center'; |
| 19 |
var buttonStyle = o.buttonStyle || 'filled'; |
| 20 |
var borderRadius = Number(o.borderRadius) || 8; |
| 21 |
|
| 22 |
var sectionBg = o.sectionBg || '#ffffff'; |
| 23 |
var contentColor = o.contentColor || '#374151'; |
| 24 |
var gradientTo = o.gradientTo || '#ffffff'; |
| 25 |
var accentColor = o.accentColor || '#6366f1'; |
| 26 |
var buttonBg = o.buttonBg || '#6366f1'; |
| 27 |
var buttonColor = o.buttonColor || '#ffffff'; |
| 28 |
|
| 29 |
// Read inner content HTML from .bkbg-ufd-content-src |
| 30 |
var srcEl = appEl.querySelector('.bkbg-ufd-content-src'); |
| 31 |
var contentHTML = srcEl ? srcEl.innerHTML : ''; |
| 32 |
|
| 33 |
appEl.innerHTML = ''; |
| 34 |
|
| 35 |
// ── Section wrapper ───────────────────────────────────────────── |
| 36 |
var section = document.createElement('div'); |
| 37 |
section.style.background = sectionBg; |
| 38 |
section.style.borderRadius = borderRadius + 'px'; |
| 39 |
section.style.overflow = 'hidden'; |
| 40 |
|
| 41 |
// ── Content wrap (clamped height) ─────────────────────────────── |
| 42 |
var contentWrap = document.createElement('div'); |
| 43 |
contentWrap.className = 'bkbg-ufd-content-wrap'; |
| 44 |
contentWrap.style.transition = 'max-height ' + animationDuration + 'ms ease-in-out'; |
| 45 |
contentWrap.style.maxHeight = previewHeight + 'px'; |
| 46 |
|
| 47 |
// ── Content body ───────────────────────────────────────────────── |
| 48 |
var contentBody = document.createElement('div'); |
| 49 |
contentBody.className = 'bkbg-ufd-content-body'; |
| 50 |
contentBody.style.color = contentColor; |
| 51 |
contentBody.innerHTML = contentHTML; |
| 52 |
contentWrap.appendChild(contentBody); |
| 53 |
|
| 54 |
// ── Gradient overlay ───────────────────────────────────────────── |
| 55 |
var gradient = document.createElement('div'); |
| 56 |
gradient.className = 'bkbg-ufd-gradient'; |
| 57 |
gradient.style.height = gradientHeight + 'px'; |
| 58 |
gradient.style.background = 'linear-gradient(transparent, ' + gradientTo + ')'; |
| 59 |
contentWrap.appendChild(gradient); |
| 60 |
|
| 61 |
section.appendChild(contentWrap); |
| 62 |
|
| 63 |
// ── Button ──────────────────────────────────────────────────────── |
| 64 |
var btnWrap = document.createElement('div'); |
| 65 |
btnWrap.className = 'bkbg-ufd-btn-wrap'; |
| 66 |
btnWrap.style.textAlign = buttonAlign; |
| 67 |
btnWrap.style.marginTop = '16px'; |
| 68 |
|
| 69 |
var btn = document.createElement('button'); |
| 70 |
btn.type = 'button'; |
| 71 |
btn.className = 'bkbg-ufd-btn bkbg-ufd-btn-' + buttonStyle; |
| 72 |
btn.style.borderRadius = borderRadius + 'px'; |
| 73 |
|
| 74 |
if (buttonStyle === 'filled') { |
| 75 |
btn.style.background = buttonBg; |
| 76 |
btn.style.color = buttonColor; |
| 77 |
btn.style.border = 'none'; |
| 78 |
} else if (buttonStyle === 'outline') { |
| 79 |
btn.style.background = 'transparent'; |
| 80 |
btn.style.color = accentColor; |
| 81 |
btn.style.border = '2px solid ' + accentColor; |
| 82 |
} else { // text |
| 83 |
btn.style.background = 'none'; |
| 84 |
btn.style.color = accentColor; |
| 85 |
btn.style.border = 'none'; |
| 86 |
} |
| 87 |
|
| 88 |
btn.textContent = expandText; |
| 89 |
btnWrap.appendChild(btn); |
| 90 |
section.appendChild(btnWrap); |
| 91 |
|
| 92 |
appEl.appendChild(section); |
| 93 |
|
| 94 |
// ── Check if content is shorter than previewHeight ─────────────── |
| 95 |
var fullHeight = contentBody.scrollHeight; |
| 96 |
|
| 97 |
if (fullHeight <= previewHeight) { |
| 98 |
// No need for expand — remove gradient and button |
| 99 |
gradient.style.display = 'none'; |
| 100 |
btnWrap.style.display = 'none'; |
| 101 |
contentWrap.style.maxHeight = 'none'; |
| 102 |
return; |
| 103 |
} |
| 104 |
|
| 105 |
// ── Toggle state ────────────────────────────────────────────────── |
| 106 |
var expanded = false; |
| 107 |
|
| 108 |
btn.addEventListener('click', function () { |
| 109 |
if (!expanded) { |
| 110 |
// Expand |
| 111 |
contentWrap.style.maxHeight = fullHeight + 'px'; |
| 112 |
contentWrap.classList.add('bkbg-ufd-expanded'); |
| 113 |
expanded = true; |
| 114 |
if (!showCollapseBtn) { |
| 115 |
btnWrap.style.display = 'none'; |
| 116 |
} else { |
| 117 |
btn.textContent = collapseText; |
| 118 |
} |
| 119 |
} else { |
| 120 |
// Collapse |
| 121 |
contentWrap.style.maxHeight = previewHeight + 'px'; |
| 122 |
contentWrap.classList.remove('bkbg-ufd-expanded'); |
| 123 |
expanded = false; |
| 124 |
btn.textContent = expandText; |
| 125 |
|
| 126 |
// Scroll back to top of block if out of view |
| 127 |
var rect = root.getBoundingClientRect(); |
| 128 |
if (rect.top < 0) { |
| 129 |
root.scrollIntoView({ behavior: 'smooth', block: 'start' }); |
| 130 |
} |
| 131 |
} |
| 132 |
}); |
| 133 |
|
| 134 |
// Accessibility |
| 135 |
btn.setAttribute('aria-expanded', 'false'); |
| 136 |
var origToggle = btn.addEventListener; |
| 137 |
contentWrap.addEventListener('transitionend', function () { |
| 138 |
btn.setAttribute('aria-expanded', expanded ? 'true' : 'false'); |
| 139 |
}); |
| 140 |
} |
| 141 |
|
| 142 |
function init() { |
| 143 |
document.querySelectorAll('.wp-block-blockenberg-unfold').forEach(initBlock); |
| 144 |
} |
| 145 |
|
| 146 |
if (document.readyState === 'loading') { |
| 147 |
document.addEventListener('DOMContentLoaded', init); |
| 148 |
} else { |
| 149 |
init(); |
| 150 |
} |
| 151 |
})(); |
| 152 |
|
