https://danggoodbooths.com/wp-content/plugins/wml-elements-pro/assets/js/stacking-cards.js?ver=1.0.2

1/**
2 * WML Stacking Cards
3 * Uses aat.js (ScrollObserver, valueAtPercentage) for scroll-based stacking animation
4 */
5(function () {
6    var resizeTimer;
7
8    function initStackingCards() {
9        var containers = document.querySelectorAll('.wml-stacking-cards__container');
10
11        containers.forEach(function (cardsContainer) {
12            // Skip if already initialized
13            if (cardsContainer.dataset.wmlInit) return;
14            cardsContainer.dataset.wmlInit = '1';
15
16            var cards = cardsContainer.querySelectorAll('.wml-stacking-card');
17            if (!cards.length) return;
18
19            // Set card count
20            cardsContainer.style.setProperty('--wml-cards-count', cards.length);
21
22            // Measure and set card height
23            function updateCardHeight() {
24                cardsContainer.style.setProperty(
25                    '--wml-card-height',
26                    cards[0].clientHeight + 'px'
27                );
28            }
29            updateCardHeight();
30
31            // Store for cleanup on re-init
32            if (!cardsContainer._wmlResizeHandler) {
33                cardsContainer._wmlResizeHandler = function () {
34                    clearTimeout(resizeTimer);
35                    resizeTimer = setTimeout(updateCardHeight, 150);
36                };
37                window.addEventListener('resize', cardsContainer._wmlResizeHandler);
38            }
39

40            Array.from(cards).forEach(function (card, index) {
41                var offsetTop = 20 + index * 20;
42                card.style.paddingTop = offsetTop + 'px';
43
44                if (index === cards.length - 1) {
45                    return;
46                }
47
48                var toScale = 1 - (cards.length - 1 - index) * 0.1;
49                var nextCard = cards[index + 1];
50                var cardInner = card.querySelector('.wml-stacking-card__inner');
51
52                aat.ScrollObserver.Element(nextCard, {
53                    offsetTop: offsetTop,
54                    offsetBottom: window.innerHeight - card.clientHeight
55                }).onScroll(function (scrollData) {
56                    cardInner.style.scale = aat.valueAtPercentage({
57                        from: 1,
58                        to: toScale,
59                        percentage: scrollData.percentageY
60                    });
61                    cardInner.style.filter = 'brightness(' + aat.valueAtPercentage({
62                        from: 1,
63                        to: 0.6,
64                        percentage: scrollData.percentageY
65                    }) + ')';
66                });
67            });
68        });
69    }
70
71    // Initialize on DOMContentLoaded
72    if (document.readyState === 'loading') {
73        document.addEventListener('DOMContentLoaded', initStackingCards);
74    } else {
75        initStackingCards();
76    }
77
78    // Re-initialize on Bricks re-render (editor)
79    document.addEventListener('bricks:render', function () {
80        // Reset init flags to allow re-initialization
81        document.querySelectorAll('.wml-stacking-cards__container[data-wml-init]').forEach(function (el) {
82            if (el._wmlResizeHandler) {
83                window.removeEventListener('resize', el._wmlResizeHandler);
84                el._wmlResizeHandler = null;
85            }
86            delete el.dataset.wmlInit;
87        });
88        setTimeout(initStackingCards, 200);
89    });
90})();