mp-design-system 2.0.74 → 2.0.76

package/dist/assets/js/mp-academy.js

@@ -1119,20 +1119,10 @@
     document.querySelectorAll('[data-carousel="cards"]').forEach((el) => {
       const type = el.dataset.carouselType || "slide";
       const rewind = el.dataset.carouselRewind === "true";
-      let perPage = parseInt(el.dataset.carouselPerPage) || 4;
       const perMove = parseInt(el.dataset.carouselPerMove) || 1;
-      const wrapper = getComputedStyle(document.documentElement).getPropertyValue("--wrapper").trim();
-      const wrapperWidth = parseInt(wrapper);
-      const gap = parseInt(getComputedStyle(el).getPropertyValue("--row-gap"));
-      const cardWidth = (wrapperWidth + "px" - (perPage - 1) * gap) / perPage;
-      el.querySelectorAll(".splide__slide").forEach((slide) => {
-        slide.style.width = `${cardWidth}`;
-      });
       const splide = new import_splide_min.default(el, {
         type,
-        perPage,
         perMove,
-        gap,
         focus: 0,
         arrows: false,
         drag: true,
@@ -1140,12 +1130,28 @@
         preventClick: true,
         rewind,
         clones: 0,
-        breakpoints: {
-          768: { perPage: 3 },
-          608: { perPage: 2 },
-          320: { perPage: 1 }
-        }
+        autoWidth: true
       });
+      function setSlideWidths() {
+        const wrapperWidth = parseInt(
+          getComputedStyle(document.documentElement).getPropertyValue(
+            "--wrapper"
+          )
+        );
+        const gap = parseInt(getComputedStyle(el).getPropertyValue("--row-gap"));
+        let cardWidth;
+        if (window.innerWidth >= 1024) cardWidth = (wrapperWidth - 3 * gap) / 4;
+        else if (window.innerWidth >= 768)
+          cardWidth = (wrapperWidth - 2 * gap) / 3;
+        else if (window.innerWidth >= 680) cardWidth = (wrapperWidth - gap) / 2;
+        else cardWidth = wrapperWidth;
+        el.querySelectorAll(".splide__slide").forEach((slide) => {
+          slide.style.width = `${cardWidth}px`;
+        });
+        splide.refresh();
+      }
+      window.addEventListener("resize", setSlideWidths);
+      setSlideWidths();
       el.querySelector(".c-carousel__arrow--prev")?.addEventListener(
         "click",
         () => splide.go("<")
@@ -1154,12 +1160,6 @@
         "click",
         () => splide.go(">")
       );
-      const list = el.querySelector(".splide__list");
-      if (list) {
-        const padding = `calc((100vw - var(--wrapper)) * 0.5)`;
-        list.style.paddingInlineStart = padding;
-        list.style.paddingInlineEnd = padding;
-      }
       el.querySelectorAll("a").forEach((link) => {
         link.addEventListener("click", (e) => e.stopPropagation());
       });