| 1 |
(function () { |
| 2 |
'use strict'; |
| 3 |
|
| 4 |
function reducedMotion() { |
| 5 |
return window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; |
| 6 |
} |
| 7 |
|
| 8 |
function initMarqueeCards(outer) { |
| 9 |
var cfg = { |
| 10 |
speed: parseFloat(outer.dataset.speed) || 40, |
| 11 |
direction: outer.dataset.direction || 'left', |
| 12 |
pause: outer.dataset.pause !== 'false', |
| 13 |
cardWidth: parseInt(outer.dataset.cardWidth) || 280, |
| 14 |
cardGap: parseInt(outer.dataset.cardGap) || 20, |
| 15 |
hoverLift: outer.dataset.hoverLift !== 'false', |
| 16 |
fade: outer.dataset.fade !== 'false', |
| 17 |
}; |
| 18 |
|
| 19 |
if (reducedMotion()) return; |
| 20 |
|
| 21 |
var tracks = Array.prototype.slice.call(outer.querySelectorAll('.bkmc-track')); |
| 22 |
|
| 23 |
tracks.forEach(function (track, rowIdx) { |
| 24 |
var isReverse = track.dataset.reverse === 'true'; |
| 25 |
var dir = isReverse |
| 26 |
? (cfg.direction === 'left' ? 'right' : 'left') |
| 27 |
: cfg.direction; |
| 28 |
|
| 29 |
// Set gap between cards |
| 30 |
var cards = track.querySelectorAll('.bkmc-card'); |
| 31 |
cards.forEach(function (card) { |
| 32 |
card.style.marginRight = cfg.cardGap + 'px'; |
| 33 |
card.style.width = cfg.cardWidth + 'px'; |
| 34 |
}); |
| 35 |
|
| 36 |
// Calculate animation duration based on speed and total width |
| 37 |
var totalWidth = cfg.cardWidth * (cards.length / 2) + cfg.cardGap * (cards.length / 2); |
| 38 |
var duration = totalWidth / cfg.speed; |
| 39 |
|
| 40 |
track.dataset.anim = dir; |
| 41 |
track.style.animationDuration = duration + 's'; |
| 42 |
|
| 43 |
// Pause on hover |
| 44 |
if (cfg.pause) { |
| 45 |
outer.addEventListener('mouseenter', function () { |
| 46 |
track.style.animationPlayState = 'paused'; |
| 47 |
}); |
| 48 |
outer.addEventListener('mouseleave', function () { |
| 49 |
track.style.animationPlayState = 'running'; |
| 50 |
}); |
| 51 |
} |
| 52 |
}); |
| 53 |
|
| 54 |
// Set fade color from parent background if available |
| 55 |
if (cfg.fade) { |
| 56 |
var bg = window.getComputedStyle(outer.parentElement || outer).backgroundColor; |
| 57 |
if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') { |
| 58 |
outer.style.setProperty('--bkmc-fade-bg', bg); |
| 59 |
} |
| 60 |
} |
| 61 |
} |
| 62 |
|
| 63 |
function init() { |
| 64 |
var outers = document.querySelectorAll('.bkmc-outer[data-speed]'); |
| 65 |
outers.forEach(function (outer) { initMarqueeCards(outer); }); |
| 66 |
} |
| 67 |
|
| 68 |
if (document.readyState === 'loading') { |
| 69 |
document.addEventListener('DOMContentLoaded', init); |
| 70 |
} else { |
| 71 |
init(); |
| 72 |
} |
| 73 |
|
| 74 |
}()); |
| 75 |
|
