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,22 +12,34 @@ 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({
+
+// Fonction pour initialiser les ScrollTriggers (desktop)
+function initScrollTriggers() {
+  // Nettoyer d'abord les ScrollTriggers existants
+  killScrollTriggers();
+  if (cards.length === 0) return;
+  let firstCardST = ScrollTrigger.create({
     trigger: cards[0],
     start: "top 10%"
-});
+  });
-let lastCardST = ScrollTrigger.create({
+  scrollTriggers.push(firstCardST);
+  let lastCardST = ScrollTrigger.create({
     trigger: cards[cards.length - 1],
     start: "top 10%"
-});
+  });
-cards.forEach((card, index) => {
+  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) + '"'
     });
-  ScrollTrigger.create({
+    let cardST = ScrollTrigger.create({
       trigger: card,
       start: "top 10%",
       end: () => lastCardST.start + stickDistance,
@@ -38,6 +50,47 @@ cards.forEach((card, index) => {
       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,26 +9,39 @@ 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)
+function initScrollTriggers() {
+	// Nettoyer d'abord les ScrollTriggers existants
+	killScrollTriggers();
+
+	if (cards.length === 0) return;
+
+	let firstCardST = ScrollTrigger.create({
 		trigger: cards[0],
 		start: "top 10%",
-});
+	});
+	scrollTriggers.push(firstCardST);
 
-let lastCardST = ScrollTrigger.create({
+	let lastCardST = ScrollTrigger.create({
 		trigger: cards[cards.length - 1],
 		start: "top 10%",
-});
+	});
+	scrollTriggers.push(lastCardST);
 
-cards.forEach((card, index) => {
+	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) + '"',
 		});
 
-	ScrollTrigger.create({
+		let cardST = ScrollTrigger.create({
 			trigger: card,
 			start: "top 10%",
 			end: () => lastCardST.start + stickDistance,
@@ -39,4 +52,45 @@ cards.forEach((card, index) => {
 			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);
 });