| 1 |
(function () { |
| 2 |
'use strict'; |
| 3 |
|
| 4 |
function hexToRgb(c) { |
| 5 |
if (!c) return null; |
| 6 |
var m = c.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i); |
| 7 |
if (m) return parseInt(m[1], 16) + ',' + parseInt(m[2], 16) + ',' + parseInt(m[3], 16); |
| 8 |
// Try to extract from rgba if already that format |
| 9 |
var rm = c.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/); |
| 10 |
return rm ? rm[1] + ',' + rm[2] + ',' + rm[3] : '255,255,255'; |
| 11 |
} |
| 12 |
|
| 13 |
function initBlock(root) { |
| 14 |
var app = root.querySelector('.bkbg-lgc-app'); |
| 15 |
if (!app) return; |
| 16 |
|
| 17 |
var raw = app.getAttribute('data-opts') || '{}'; |
| 18 |
var o; |
| 19 |
try { o = JSON.parse(raw); } catch (e) { o = {}; } |
| 20 |
|
| 21 |
var blur = Number(o.blurAmount) || 20; |
| 22 |
var glassOp = (Number(o.glassOpacity) || 18) / 100; |
| 23 |
var borderOp = (Number(o.borderOpacity) || 30) / 100; |
| 24 |
var parallax = Number(o.parallaxStrength) || 8; |
| 25 |
var glassColor = o.glassColor || '#ffffff'; |
| 26 |
var borderColor = o.borderColor || 'rgba(255,255,255,0.3)'; |
| 27 |
var shadowColor = o.shadowColor || 'rgba(0,0,0,0.2)'; |
| 28 |
var iconBg = o.iconBg || 'rgba(255,255,255,0.2)'; |
| 29 |
var titleColor = o.titleColor || '#ffffff'; |
| 30 |
var descColor = o.descColor || 'rgba(255,255,255,0.8)'; |
| 31 |
var linkColor = o.linkColor || '#ffffff'; |
| 32 |
|
| 33 |
var glassRgb = hexToRgb(glassColor); |
| 34 |
var borderRgb = hexToRgb(borderColor); |
| 35 |
|
| 36 |
// Set CSS variable for blur |
| 37 |
app.style.setProperty('--bkbg-lgc-blur', blur + 'px'); |
| 38 |
|
| 39 |
var cards = app.querySelectorAll('.bkbg-lgc-card'); |
| 40 |
|
| 41 |
cards.forEach(function (card) { |
| 42 |
// Apply glass styles |
| 43 |
card.style.background = 'rgba(' + glassRgb + ',' + glassOp + ')'; |
| 44 |
card.style.backdropFilter = 'blur(' + blur + 'px)'; |
| 45 |
card.style.webkitBackdropFilter = 'blur(' + blur + 'px)'; |
| 46 |
card.style.border = '1px solid rgba(' + borderRgb + ',' + borderOp + ')'; |
| 47 |
card.style.boxShadow = '0 8px 32px ' + shadowColor; |
| 48 |
|
| 49 |
// Apply text colors |
| 50 |
var iconEl = card.querySelector('.bkbg-lgc-icon'); |
| 51 |
var titleEl = card.querySelector('.bkbg-lgc-title'); |
| 52 |
var descEl = card.querySelector('.bkbg-lgc-desc'); |
| 53 |
var linkEl = card.querySelector('.bkbg-lgc-link'); |
| 54 |
|
| 55 |
if (iconEl) { iconEl.style.background = iconBg; } |
| 56 |
if (titleEl) { titleEl.style.color = titleColor; } |
| 57 |
if (descEl) { descEl.style.color = descColor; } |
| 58 |
if (linkEl) { linkEl.style.color = linkColor; } |
| 59 |
|
| 60 |
// Parallax on mouse move |
| 61 |
if (parallax > 0) { |
| 62 |
var raf = null; |
| 63 |
var targetX = 0, targetY = 0, currentX = 0, currentY = 0; |
| 64 |
var inside = false; |
| 65 |
|
| 66 |
function animate() { |
| 67 |
currentX += (targetX - currentX) * 0.1; |
| 68 |
currentY += (targetY - currentY) * 0.1; |
| 69 |
card.style.transform = 'translate(' + currentX + 'px,' + currentY + 'px)'; |
| 70 |
|
| 71 |
if (inside || Math.abs(currentX) > 0.05 || Math.abs(currentY) > 0.05) { |
| 72 |
raf = requestAnimationFrame(animate); |
| 73 |
} else { |
| 74 |
card.style.transform = ''; |
| 75 |
raf = null; |
| 76 |
} |
| 77 |
} |
| 78 |
|
| 79 |
card.addEventListener('mousemove', function (e) { |
| 80 |
var rect = app.getBoundingClientRect(); |
| 81 |
var cx = app.offsetWidth / 2; |
| 82 |
var cy = app.offsetHeight / 2; |
| 83 |
var dx = e.clientX - rect.left - cx; |
| 84 |
var dy = e.clientY - rect.top - cy; |
| 85 |
// Each card moves at slightly different rate based on position |
| 86 |
var cardRect = card.getBoundingClientRect(); |
| 87 |
var cardCX = cardRect.left + cardRect.width / 2 - rect.left; |
| 88 |
var cardCY = cardRect.top + cardRect.height / 2 - rect.top; |
| 89 |
var distX = (cardCX - cx) / (app.offsetWidth / 2 + 1); |
| 90 |
var distY = (cardCY - cy) / (app.offsetHeight / 2 + 1); |
| 91 |
targetX = -dx * 0.02 * parallax * (1 - Math.abs(distX) * 0.5); |
| 92 |
targetY = -dy * 0.02 * parallax * (1 - Math.abs(distY) * 0.5); |
| 93 |
if (!raf) { inside = true; raf = requestAnimationFrame(animate); } |
| 94 |
}); |
| 95 |
|
| 96 |
app.addEventListener('mouseleave', function () { |
| 97 |
inside = false; |
| 98 |
targetX = 0; targetY = 0; |
| 99 |
if (!raf) raf = requestAnimationFrame(animate); |
| 100 |
}); |
| 101 |
} |
| 102 |
}); |
| 103 |
} |
| 104 |
|
| 105 |
function init() { |
| 106 |
document.querySelectorAll('.wp-block-blockenberg-liquid-glass-cards').forEach(initBlock); |
| 107 |
} |
| 108 |
|
| 109 |
if (document.readyState === 'loading') { |
| 110 |
document.addEventListener('DOMContentLoaded', init); |
| 111 |
} else { |
| 112 |
init(); |
| 113 |
} |
| 114 |
})(); |
| 115 |
|
