https://www.shipstation.com/wp-content/plugins/shipshape/blocks/stories-slider/view.js?ver=1776360793

1/**
2 * Stories Slider - Frontend Swiper Initialization
3 * 
4 * Initializes Swiper carousel for the Stories Slider block
5 * Uses Swiper loaded from CDN
6 */
7
8(function() {
9    'use strict';
10
11    /**
12     * Updates aria-disabled attribute on navigation buttons based on their disabled state
13     * @param {Swiper} swiper - The Swiper instance
14     */
15    function updateNavigationAccessibility(swiper) {
16        var prevButton = swiper.navigation && swiper.navigation.prevEl;
17        var nextButton = swiper.navigation && swiper.navigation.nextEl;
18
19        if (prevButton) {
20            var isDisabled = prevButton.classList.contains('swiper-button-disabled');
21            prevButton.setAttribute('aria-disabled', isDisabled ? 'true' : 'false');
22        }
23
24        if (nextButton) {
25            var isDisabled = nextButton.classList.contains('swiper-button-disabled');
26            nextButton.setAttribute('aria-disabled', isDisabled ? 'true' : 'false');
27        }
28
29        // Handle pagination accessibility when locked
30        var pagination = swiper.pagination && swiper.pagination.el;
31        if (pagination) {

32            var isLocked = pagination.classList.contains('swiper-pagination-lock');
33            if (isLocked) {
34                pagination.setAttribute('aria-hidden', 'true');
35            } else {
36                pagination.removeAttribute('aria-hidden');
37            }
38        }
39    }
40
41    /**
42     * Initialize a single Stories Slider instance
43     * @param {Element} wrapper - The wrapper element containing the slider
44     */
45    function initStoriesSlider(wrapper) {
46        var swiperId = wrapper.id + '_swiper';
47        var swiperElement = document.getElementById(swiperId);
48        
49        if (!swiperElement || swiperElement.dataset.initialized) {
50            return;
51        }
52
53        // Mark as initialized to prevent duplicate initialization
54        swiperElement.dataset.initialized = 'true';
55
56        var swiperInstance = new Swiper(swiperElement, {
57            slidesPerView: 1.4,
58            spaceBetween: 10,
59            centeredSlides: true,
60            loop: true,
61            breakpoints: {
62                992: {
63                    centeredSlides: false,
64                    slidesPerView: 1.2,
65                    spaceBetween: 48
66                }
67            },
68            navigation: {
69                nextEl: wrapper.querySelector('.js-next'),
70                prevEl: wrapper.querySelector('.js-prev')
71            },
72            on: {
73                init: function() {
74                    updateNavigationAccessibility(this);
75                },
76                reachBeginning: function() {
77                    updateNavigationAccessibility(this);
78                },
79                reachEnd: function() {
80                    updateNavigationAccessibility(this);
81                }
82            }
83        });
84
85        // Handle slide change to update info panels
86        swiperInstance.on('slideChange', function(swiper) {
87            updateNavigationAccessibility(swiper);
88
89            // Remove active class from current info
90            var currentActive = wrapper.querySelector('.js-info.active');
91            if (currentActive) {
92                currentActive.classList.remove('active');
93            }
94
95            // Add active class to new info
96            var nextInfo = wrapper.querySelector('.js-info[data-index="' + swiper.realIndex + '"]');
97            if (nextInfo) {
98                nextInfo.classList.add('active');
99            }
100        });
101    }
102
103    /**
104     * Initialize all Stories Slider instances on the page
105     */
106    function initAllSliders() {
107        // Check if Swiper is available
108        if (typeof Swiper === 'undefined') {
109            // Swiper not loaded yet, wait and try again
110            setTimeout(initAllSliders, 100);
111            return;
112        }
113
114        var sliders = document.querySelectorAll('[id^="stories-slider-"]');
115        sliders.forEach(function(wrapper) {
116            // Only initialize wrapper elements, not swiper containers
117            if (!wrapper.id.includes('_swiper')) {
118                initStoriesSlider(wrapper);
119            }
120        });
121    }
122
123    // Initialize on DOMContentLoaded
124    if (document.readyState === 'loading') {
125        document.addEventListener('DOMContentLoaded', initAllSliders);
126    } else {
127        // DOM already loaded, initialize immediately
128        initAllSliders();
129    }
130
131    // Also initialize when Swiper becomes available (for deferred loading)
132    if (typeof Swiper === 'undefined') {
133        var checkSwiper = setInterval(function() {
134            if (typeof Swiper !== 'undefined') {
135                clearInterval(checkSwiper);
136                initAllSliders();
137            }
138        }, 100);
139        
140        // Stop checking after 10 seconds
141        setTimeout(function() {
142            clearInterval(checkSwiper);
143        }, 10000);
144    }
145})();