RESPONSIVE FIX detroying the scroll trigger on mobile

plugins/carhop-blocks/blocks/narrative-card/build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n', 'wp-primitives'), 'version' => '2721f0bd0927b41830cc');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n', 'wp-primitives'), 'version' => '87a2a00fa1123fa69557');

plugins/carhop-blocks/blocks/narrative-card/build/index.js

@@ -212,7 +212,20 @@ function Edit({
       ...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps)({
         className: `narrative-card ${hasCover ? `narrative-card--has-cover narrative-card--has-cover--${coverPosition} ${blackWhiteCoverFilter ? "narrative-card--black-white-cover-filter" : ""}` : ""}`
       }),
-      children: [shouldShowCoverLeft && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_Cover__WEBPACK_IMPORTED_MODULE_4__["default"], {
+      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("svg", {
+        viewBox: "0 0 1216 407",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        preserveAspectRatio: "none",
+        className: "narrative-card__background",
+        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("path", {
+          d: "M1 11V406H1205L1215 1L1 11Z",
+          fill: "white",
+          stroke: "#136F63",
+          strokeWidth: "2",
+          vectorEffect: "non-scaling-stroke"
+        })
+      }), shouldShowCoverLeft && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_Cover__WEBPACK_IMPORTED_MODULE_4__["default"], {
         coverUrl: coverUrl,
         coverAlt: coverAlt,
         onSelect: setCoverAttributes
@@ -318,7 +331,20 @@ function save({
     ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.useBlockProps.save({
       className: `narrative-card ${hasCover ? `narrative-card--has-cover narrative-card--has-cover--${coverPosition} ${blackWhiteCoverFilter ? "narrative-card--black-white-cover-filter" : ""}` : ""}`
     }),
-    children: [hasCover && coverPosition === "left" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div", {
+    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("svg", {
+      viewBox: "0 0 1216 407",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      preserveAspectRatio: "none",
+      className: "narrative-card__background",
+      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("path", {
+        d: "M1 11V406H1205L1215 1L1 11Z",
+        fill: "white",
+        stroke: "#136F63",
+        strokeWidth: "2",
+        vectorEffect: "non-scaling-stroke"
+      })
+    }), hasCover && coverPosition === "left" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div", {
       className: "narrative-card__cover",
       children: hasCover && coverUrl && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("img", {
         src: coverUrl,

plugins/carhop-blocks/blocks/narrative-card/src/edit.js

@@ -130,6 +130,22 @@ export default function Edit({ attributes, setAttributes }) {
 					}`,
 				})}
 			>
+				<svg
+					viewBox="0 0 1216 407"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+					preserveAspectRatio="none"
+					className="narrative-card__background"
+				>
+					<path
+						d="M1 11V406H1205L1215 1L1 11Z"
+						fill="white"
+						stroke="#136F63"
+						strokeWidth="2"
+						vectorEffect="non-scaling-stroke"
+					/>
+				</svg>
+
 				{shouldShowCoverLeft && (
 					<CoverImage
 						coverUrl={coverUrl}

plugins/carhop-blocks/blocks/narrative-card/src/img/skew-background.svg

@@ -0,0 +1,3 @@
+<svg width="1216" height="407" viewBox="0 0 1216 407" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
+<path d="M0.5 11.1045V406.5H1205.51L1215.49 0.503906L0.5 11.1045Z" fill="white" stroke="#136F63"/>
+</svg>

plugins/carhop-blocks/blocks/narrative-card/src/save.js

@@ -19,6 +19,22 @@ export default function save({ attributes }) {
 				}`,
 			})}
 		>
+			<svg
+				viewBox="0 0 1216 407"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				preserveAspectRatio="none"
+				className="narrative-card__background"
+			>
+				<path
+					d="M1 11V406H1205L1215 1L1 11Z"
+					fill="white"
+					stroke="#136F63"
+					strokeWidth="2"
+					vectorEffect="non-scaling-stroke"
+				/>
+			</svg>
+
 			{hasCover && coverPosition === "left" && (
 				<div className="narrative-card__cover">
 					{hasCover && coverUrl && <img src={coverUrl} alt={coverAlt} />}

plugins/carhop-blocks/blocks/scroll-story-block/build/view.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '21d21202ac10eacbe2b5');
+<?php return array('dependencies' => array(), 'version' => '1b701c330e8d0efc09fe');

plugins/carhop-blocks/blocks/scroll-story-block/build/view.js

@@ -12,32 +12,85 @@ cards.forEach((card, index) => {
     card.classList.add("narrative-card--odd");
   }
 });
+
+// Définir le breakpoint pour mobile/desktop (vous pouvez l'ajuster selon vos besoins)
+const MOBILE_BREAKPOINT = 768;
+let scrollTriggers = [];
 let stickDistance = 0;
-let firstCardST = ScrollTrigger.create({
+
-  trigger: cards[0],
+// Fonction pour initialiser les ScrollTriggers (desktop)
-  start: "top 10%"
+function initScrollTriggers() {
-});
+  // Nettoyer d'abord les ScrollTriggers existants
-let lastCardST = ScrollTrigger.create({
+  killScrollTriggers();
-  trigger: cards[cards.length - 1],
+  if (cards.length === 0) return;
-  start: "top 10%"
+  let firstCardST = ScrollTrigger.create({
-});
+    trigger: cards[0],
-cards.forEach((card, index) => {
+    start: "top 10%"
-  var scale = 1 - (cards.length - index) * 0.025;
-  let scaleDown = gsap.to(card, {
-    scale: scale,
-    "transform-origin": '"50% ' + (lastCardST.start + stickDistance) + '"'
   });
-  ScrollTrigger.create({
+  scrollTriggers.push(firstCardST);
-    trigger: card,
+  let lastCardST = ScrollTrigger.create({
-    start: "top 10%",
+    trigger: cards[cards.length - 1],
-    end: () => lastCardST.start + stickDistance,
+    start: "top 10%"
-    pin: true,
-    // markers: true,
-    pinSpacing: false,
-    ease: "none",
-    animation: scaleDown,
-    toggleActions: "restart none none reverse"
   });
+  scrollTriggers.push(lastCardST);
+  cards.forEach((card, index) => {
+    var scale = 1 - (cards.length - index) * 0.025;
+    let scaleDown = gsap.to(card, {
+      scale: scale,
+      "transform-origin": '"50% ' + (lastCardST.start + stickDistance) + '"'
+    });
+    let cardST = ScrollTrigger.create({
+      trigger: card,
+      start: "top 10%",
+      end: () => lastCardST.start + stickDistance,
+      pin: true,
+      // markers: true,
+      pinSpacing: false,
+      ease: "none",
+      animation: scaleDown,
+      toggleActions: "restart none none reverse"
+    });
+    scrollTriggers.push(cardST);
+  });
+}
+
+// Fonction pour détruire tous les ScrollTriggers
+function killScrollTriggers() {
+  scrollTriggers.forEach(st => st.kill());
+  scrollTriggers = [];
+
+  // Réinitialiser les styles inline des cartes
+  cards.forEach(card => {
+    gsap.set(card, {
+      clearProps: "all"
+    });
+  });
+}
+
+// Fonction pour gérer le responsive
+function handleResize() {
+  const isMobile = window.innerWidth < MOBILE_BREAKPOINT;
+  if (isMobile) {
+    // Sur mobile : détruire les ScrollTriggers
+    killScrollTriggers();
+  } else {
+    // Sur desktop : créer les ScrollTriggers s'ils n'existent pas
+    if (scrollTriggers.length === 0) {
+      initScrollTriggers();
+    }
+  }
+}
+
+// Initialisation au chargement
+handleResize();
+
+// Écouter les événements de resize avec debounce pour optimiser les performances
+let resizeTimer;
+window.addEventListener("resize", () => {
+  clearTimeout(resizeTimer);
+  resizeTimer = setTimeout(() => {
+    handleResize();
+  }, 250);
 });
 /******/ })()
 ;

plugins/carhop-blocks/blocks/scroll-story-block/src/view.js

@@ -9,34 +9,88 @@ cards.forEach((card, index) => {
 	}
 });
 
+// Définir le breakpoint pour mobile/desktop (vous pouvez l'ajuster selon vos besoins)
+const MOBILE_BREAKPOINT = 768;
+
+let scrollTriggers = [];
 let stickDistance = 0;
 
-let firstCardST = ScrollTrigger.create({
+// Fonction pour initialiser les ScrollTriggers (desktop)
-	trigger: cards[0],
+function initScrollTriggers() {
-	start: "top 10%",
+	// Nettoyer d'abord les ScrollTriggers existants
-});
+	killScrollTriggers();
 
-let lastCardST = ScrollTrigger.create({
+	if (cards.length === 0) return;
-	trigger: cards[cards.length - 1],
-	start: "top 10%",
-});
 
-cards.forEach((card, index) => {
+	let firstCardST = ScrollTrigger.create({
-	var scale = 1 - (cards.length - index) * 0.025;
+		trigger: cards[0],
-	let scaleDown = gsap.to(card, {
-		scale: scale,
-		"transform-origin": '"50% ' + (lastCardST.start + stickDistance) + '"',
-	});
-
-	ScrollTrigger.create({
-		trigger: card,
 		start: "top 10%",
-		end: () => lastCardST.start + stickDistance,
-		pin: true,
-		// markers: true,
-		pinSpacing: false,
-		ease: "none",
-		animation: scaleDown,
-		toggleActions: "restart none none reverse",
 	});
+	scrollTriggers.push(firstCardST);
+
+	let lastCardST = ScrollTrigger.create({
+		trigger: cards[cards.length - 1],
+		start: "top 10%",
+	});
+	scrollTriggers.push(lastCardST);
+
+	cards.forEach((card, index) => {
+		var scale = 1 - (cards.length - index) * 0.025;
+		let scaleDown = gsap.to(card, {
+			scale: scale,
+			"transform-origin": '"50% ' + (lastCardST.start + stickDistance) + '"',
+		});
+
+		let cardST = ScrollTrigger.create({
+			trigger: card,
+			start: "top 10%",
+			end: () => lastCardST.start + stickDistance,
+			pin: true,
+			// markers: true,
+			pinSpacing: false,
+			ease: "none",
+			animation: scaleDown,
+			toggleActions: "restart none none reverse",
+		});
+
+		scrollTriggers.push(cardST);
+	});
+}
+
+// Fonction pour détruire tous les ScrollTriggers
+function killScrollTriggers() {
+	scrollTriggers.forEach((st) => st.kill());
+	scrollTriggers = [];
+
+	// Réinitialiser les styles inline des cartes
+	cards.forEach((card) => {
+		gsap.set(card, { clearProps: "all" });
+	});
+}
+
+// Fonction pour gérer le responsive
+function handleResize() {
+	const isMobile = window.innerWidth < MOBILE_BREAKPOINT;
+
+	if (isMobile) {
+		// Sur mobile : détruire les ScrollTriggers
+		killScrollTriggers();
+	} else {
+		// Sur desktop : créer les ScrollTriggers s'ils n'existent pas
+		if (scrollTriggers.length === 0) {
+			initScrollTriggers();
+		}
+	}
+}
+
+// Initialisation au chargement
+handleResize();
+
+// Écouter les événements de resize avec debounce pour optimiser les performances
+let resizeTimer;
+window.addEventListener("resize", () => {
+	clearTimeout(resizeTimer);
+	resizeTimer = setTimeout(() => {
+		handleResize();
+	}, 250);
 });