https://pastureslodge.com/wp-content/plugins/mr-blocks/build/carousel/view.js?ver=8b8bb979ad747bd17e20

1/******/ (() => { // webpackBootstrap
2/*!******************************!*\
3  !*** ./src/carousel/view.js ***!
4  \******************************/
5/**
6 * Frontend JavaScript for MR Blocks Carousel using Splide.js
7 */
8
9document.addEventListener("DOMContentLoaded", function () {
10  console.log("MR Blocks Carousel: DOM loaded, initializing carousels...");
11
12  // Function to initialize a single carousel
13  function initializeCarousel(carouselElement) {
14    console.log("Initializing carousel:", carouselElement);
15
16    // Get the splide element
17    const splideElement = carouselElement.querySelector(".splide");
18    if (!splideElement) {
19      console.warn("No .splide element found in carousel");
20      return;
21    }
22
23    // Check if already initialized
24    if (splideElement.classList.contains("is-initialized")) {
25      console.log("Carousel already initialized, skipping");
26      return;
27    }
28
29    // Get configuration from data attribute
30    let config = {};
31    try {
32      const configData = carouselElement.getAttribute("data-splide");
33      if (configData) {
34        config = JSON.parse(configData);
35      }
36    } catch (error) {
37      console.warn("Error parsing carousel configuration:", error);
38    }
39
40    // Default configuration
41    const defaultConfig = {
42      type: "loop",
43      perPage: 1,
44      gap: 20,
45      padding: 0,
46      autoplay: false,
47      pauseOnHover: true,
48      pauseOnFocus: true,
49      easing: "ease",
50      arrows: true,
51      pagination: true,
52      breakpoints: {
53        768: {
54          perPage: 1,
55          gap: 10,
56          padding: 0 // Will be updated after config merge
57        }
58      }
59    };
60
61    // Merge configurations
62    const finalConfig = {
63      ...defaultConfig,
64      ...config
65    };
66
67    // Handle centerMode with Splide's padding option
68    if (config.focus === 0 && config.rewind === false) {
69      // Calculate left padding for centerMode
70      const screenWidth = window.innerWidth;
71      const preferredWidth = screenWidth * 0.8; // 80vw
72      const containerWidth = Math.max(1260, Math.min(preferredWidth, 1440));
73      const leftPadding = Math.max(0, (screenWidth - containerWidth) / 2);
74      console.log("CenterMode detected - using Splide padding option");
75      console.log("leftPadding:", leftPadding);
76
77      // Use Splide's padding option for centerMode
78      finalConfig.padding = {
79        left: leftPadding,
80        right: 0
81      };
82    }
83
84    // Add tablet breakpoint with proper logic after merge
85    const tabletPerPage = finalConfig.perPage && finalConfig.perPage > 2 ? 2 : finalConfig.perPage || 1;
86
87    // Calculate responsive padding/peek values
88    const originalPadding = finalConfig.padding || 0;
89    const tabletPadding = originalPadding > 0 ? Math.max(originalPadding * 0.6, 10) : 0;
90    const mobilePadding = originalPadding > 0 ? Math.max(originalPadding * 0.3, 5) : 0;
91    finalConfig.breakpoints[1024] = {
92      perPage: finalConfig.autoWidth ? undefined : tabletPerPage,
93      gap: finalConfig.gap > 15 ? 15 : finalConfig.gap || 20,
94      padding: tabletPadding
95    };
96
97    // Update mobile breakpoint with responsive padding
98    finalConfig.breakpoints[768] = {
99      perPage: 1,
100      gap: finalConfig.gap > 10 ? 10 : finalConfig.gap || 20,
101      padding: mobilePadding
102    };
103    console.log("Carousel configuration:", finalConfig);
104
105    // Wait for Splide.js to be available
106    function waitForSplide() {
107      if (typeof window.Splide !== "undefined") {
108        console.log("Splide.js is available, creating carousel instance");
109        try {
110          // Create and mount the Splide instance
111          const splide = new window.Splide(splideElement, finalConfig);
112          splide.mount();
113
114          // Mark as initialized
115          splideElement.classList.add("is-initialized");
116
117          // Handle window resize for centerMode dynamic padding
118          if (config.focus === 0 && config.rewind === false) {
119            const handleResize = () => {
120              const screenWidth = window.innerWidth;
121              const preferredWidth = screenWidth * 0.8;
122              const containerWidth = Math.max(1260, Math.min(preferredWidth, 1440));
123              const leftPadding = Math.max(0, (screenWidth - containerWidth) / 2);
124
125              // Refresh carousel with new padding
126              try {
127                splide.destroy();
128                const newConfig = {
129                  ...finalConfig,
130                  padding: {
131                    left: leftPadding,
132                    right: 0
133                  }
134                };
135                const newSplide = new window.Splide(splideElement, newConfig);
136                newSplide.mount();
137                splideElement.splide = newSplide;
138              } catch (error) {
139                console.warn("Error updating centerMode padding:", error);
140              }
141            };
142            window.addEventListener("resize", handleResize);
143
144            // Store cleanup function
145            splideElement._paddingCleanup = () => {
146              window.removeEventListener("resize", handleResize);
147            };
148          }
149          console.log("Carousel initialized successfully");
150        } catch (error) {
151          console.error("Error initializing Splide carousel:", error);
152        }
153      } else {
154        console.log("Splide.js not yet available, retrying...");
155        setTimeout(waitForSplide, 100);
156      }
157    }
158    waitForSplide();
159  }
160
161  // Initialize all carousels on the page
162  function initializeAllCarousels() {
163    const carousels = document.querySelectorAll(".mr-carousel");
164    console.log(`Found ${carousels.length} carousel(s) to initialize`);

165    carousels.forEach((carousel, index) => {
166      console.log(`Initializing carousel ${index + 1}/${carousels.length}`);
167      initializeCarousel(carousel);
168    });
169  }
170
171  // Initialize carousels
172  initializeAllCarousels();
173
174  // Re-initialize carousels when new content is loaded (for AJAX/dynamic content)
175  const observer = new MutationObserver(function (mutations) {
176    mutations.forEach(function (mutation) {
177      if (mutation.type === "childList") {
178        mutation.addedNodes.forEach(function (node) {
179          if (node.nodeType === Node.ELEMENT_NODE) {
180            // Check if the added node is a carousel or contains carousels
181            const carousels = node.classList?.contains("mr-carousel") ? [node] : node.querySelectorAll?.(".mr-carousel") || [];
182            if (carousels.length > 0) {
183              console.log(`Found ${carousels.length} new carousel(s), initializing...`);
184              carousels.forEach(initializeCarousel);
185            }
186          }
187        });
188      }
189    });
190  });
191
192  // Start observing
193  observer.observe(document.body, {
194    childList: true,
195    subtree: true
196  });
197  console.log("MR Blocks Carousel: Initialization complete");
198});
199
200// Also handle ACF and other dynamic content loaders
201if (typeof window.acf !== "undefined") {
202  window.acf.addAction("render_block_preview", function () {
203    setTimeout(function () {
204      const carousels = document.querySelectorAll(".mr-carousel");
205      carousels.forEach(function (carousel) {
206        const splideElement = carousel.querySelector(".splide");
207        if (splideElement && !splideElement.classList.contains("is-initialized")) {
208          const event = new Event("DOMContentLoaded");
209          document.dispatchEvent(event);
210        }
211      });
212    }, 100);
213  });
214}
215/******/ })()
216;
217//# sourceMappingURL=view.js.map