| 1 |
/* Logo Wall — frontend */ |
| 2 |
(function () { |
| 3 |
'use strict'; |
| 4 |
|
| 5 |
var reducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; |
| 6 |
|
| 7 |
function initGrid(grid) { |
| 8 |
if (grid._bklwInit) { return; } |
| 9 |
grid._bklwInit = true; |
| 10 |
|
| 11 |
var grayscale = grid.getAttribute('data-grayscale') !== '0'; |
| 12 |
var colorHover = grid.getAttribute('data-color-hover') !== '0'; |
| 13 |
var opacity = parseInt(grid.getAttribute('data-opacity'), 10) / 100 || 0.6; |
| 14 |
var hoverFx = grid.getAttribute('data-hover-fx') || 'lift'; |
| 15 |
var cardBg = grid.getAttribute('data-card-bg') || 'transparent'; |
| 16 |
var cardHover = grid.getAttribute('data-card-hover') || '#f9fafb'; |
| 17 |
|
| 18 |
var cards = Array.prototype.slice.call(grid.querySelectorAll('.bklw-card')); |
| 19 |
|
| 20 |
cards.forEach(function (card) { |
| 21 |
var img = card.querySelector('.bklw-img'); |
| 22 |
|
| 23 |
card.addEventListener('mouseenter', function () { |
| 24 |
if (reducedMotion) { return; } |
| 25 |
|
| 26 |
/* bg swap */ |
| 27 |
card.style.background = cardHover; |
| 28 |
|
| 29 |
/* hover effect */ |
| 30 |
if (hoverFx === 'lift') { |
| 31 |
card.style.transform = 'translateY(-4px)'; |
| 32 |
card.style.boxShadow = '0 8px 24px rgba(0,0,0,0.12)'; |
| 33 |
} else if (hoverFx === 'scale') { |
| 34 |
card.style.transform = 'scale(1.04)'; |
| 35 |
} else if (hoverFx === 'glow') { |
| 36 |
card.style.boxShadow = '0 0 0 3px rgba(108,63,181,0.25)'; |
| 37 |
} |
| 38 |
|
| 39 |
/* image effect */ |
| 40 |
if (img) { |
| 41 |
if (grayscale && colorHover) { |
| 42 |
img.style.filter = 'grayscale(0%)'; |
| 43 |
} |
| 44 |
img.style.opacity = '1'; |
| 45 |
} |
| 46 |
}); |
| 47 |
|
| 48 |
card.addEventListener('mouseleave', function () { |
| 49 |
/* restore */ |
| 50 |
card.style.background = cardBg; |
| 51 |
card.style.transform = ''; |
| 52 |
card.style.boxShadow = ''; |
| 53 |
|
| 54 |
if (img) { |
| 55 |
if (grayscale) { |
| 56 |
img.style.filter = 'grayscale(100%)'; |
| 57 |
} |
| 58 |
img.style.opacity = opacity.toString(); |
| 59 |
} |
| 60 |
}); |
| 61 |
}); |
| 62 |
} |
| 63 |
|
| 64 |
function init() { |
| 65 |
document.querySelectorAll('.bklw-grid[data-grayscale]').forEach(initGrid); |
| 66 |
} |
| 67 |
|
| 68 |
if (document.readyState === 'loading') { |
| 69 |
document.addEventListener('DOMContentLoaded', init); |
| 70 |
} else { |
| 71 |
init(); |
| 72 |
} |
| 73 |
}()); |
| 74 |
|
