WIP

guardian · Oct 18, 2024 · e1d1910 · e1d1910
1 parent da0e17a
commit e1d1910
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 19 deletions.
diff --git a/dotcom-rendering/src/components/ExpandableMarketingCard.tsx b/dotcom-rendering/src/components/ExpandableMarketingCard.tsx
@@ -225,6 +225,7 @@ export const ExpandableMarketingCard = ({
 							role="button"
 							tabIndex={0}
 							onClick={() => {
+								console.log('Expand the accordion!');
 								setIsExpanded(true);
 							}}
 							onKeyDown={(event) => {
@@ -261,6 +262,7 @@ export const ExpandableMarketingCard = ({
 								<button
 									data-link-name="us-expandable-marketing-card close"
 									onClick={() => {
+										console.log('Close button clicked');
 										setIsClosed(true);
 									}}
 									type="button"

diff --git a/dotcom-rendering/src/components/ExpandableMarketingCardWrapper.importable.tsx b/dotcom-rendering/src/components/ExpandableMarketingCardWrapper.importable.tsx
@@ -21,6 +21,7 @@ const handlePointerDown = (
 	setIsDown: Dispatch<SetStateAction<boolean>>,
 	setLastDownXCoord: Dispatch<SetStateAction<number | null>>,
 ) => {
+	console.log('event => handlePointerDown');
 	event.preventDefault();
 
 	setIsDown(true);
@@ -34,32 +35,39 @@ const handlePointerUp = (
 	setIsDown: Dispatch<SetStateAction<boolean>>,
 	setIsSwipeLeft: Dispatch<SetStateAction<boolean>>,
 ) => {
+	console.log('event => handlePointerUp');
 	event.preventDefault();
 
 	setIsDown(false);
 
 	if (lastDownXCoord !== null && event.clientX + THRESHOLD < lastDownXCoord) {
+		console.log('1 swiped left');
 		setIsSwipeLeft(true);
 	}
 };
 
-const handlePointerLeave = (
-	event: React.PointerEvent,
-	lastDownXCoord: number | null,
-	setIsSwipeLeft: Dispatch<SetStateAction<boolean>>,
-) => {
-	event.preventDefault();
+// const handlePointerLeave = (
+// 	event: React.PointerEvent,
+// 	lastDownXCoord: number | null,
+// 	setIsSwipeLeft: Dispatch<SetStateAction<boolean>>,
+// ) => {
+// 	console.log('event => handlePointerLeave');
+// 	event.preventDefault();
+
+// 	if (lastDownXCoord !== null && event.clientX + THRESHOLD < lastDownXCoord) {
+// 		console.log('2 swiped left');
+// 		setIsSwipeLeft(true);
+// 	}
+// };
 
-	if (lastDownXCoord !== null && event.clientX + THRESHOLD < lastDownXCoord) {
-		setIsSwipeLeft(true);
-	}
-};
 const handlePointerMove = (
 	event: React.PointerEvent,
 	isDown: boolean,
 	lastDownXCoord: number | null,
 	setPointerLeftDistance: Dispatch<SetStateAction<number>>,
 ) => {
+	console.log('event => handlePointerMove');
+	event.preventDefault();
 	if (isDown) {
 		setPointerLeftDistance(
 			Math.min(0, event.clientX - (lastDownXCoord ?? 0)),
@@ -244,13 +252,13 @@ export const ExpandableMarketingCardWrapper = ({ guardianBaseURL }: Props) => {
 									setIsSwipeLeft,
 								);
 							}}
-							onPointerLeave={(event) => {
-								handlePointerLeave(
-									event,
-									lastDownXCoord,
-									setIsSwipeLeft,
-								);
-							}}
+							// onPointerLeave={(event) => {
+							// 	handlePointerLeave(
+							// 		event,
+							// 		lastDownXCoord,
+							// 		setIsSwipeLeft,
+							// 	);
+							// }}
 							onPointerMove={(event) => {
 								handlePointerMove(
 									event,
@@ -260,18 +268,22 @@ export const ExpandableMarketingCardWrapper = ({ guardianBaseURL }: Props) => {
 								);
 							}}
 							onTouchStart={(event) => {
+								console.log('event => onTouchStart');
 								event.preventDefault();
 							}}
 							onTouchEnd={(event) => {
+								console.log('event => onTouchEnd');
 								event.preventDefault();
-								setIsExpanded(true);
+								!isSwipeLeft &&
+									!isExpanded &&
+									setIsExpanded(true);
 							}}
 						>
 							<ExpandableMarketingCard
 								guardianBaseURL={guardianBaseURL}
 								heading={heading}
 								kicker={kicker}
-								isExpanded={isExpanded}
+								isExpanded={false}
 								setIsExpanded={setIsExpanded}
 								setIsClosed={setIsClosed}
 							/>