add carousel count for mobile

Author: oliverabrahams

dotcom-rendering/src/components/CarouselCount.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+export const CarouselCount = ({
+	sectionId,
+	count,
+	total,
+}: {
+	sectionId: string;
+	count: number;
+	total: number;
+}) => {
+	const [portalNode, setPortalNode] = useState<HTMLElement | null>(null);
+
+	useEffect(() => {
+		const node = document.getElementById(`${sectionId}-carousel-count`);
+		if (!node) {
+			console.warn(
+				`Portal node with ID "${sectionId}-carousel-count" not found.`,
+			);
+		}
+		setPortalNode(node);
+	}, [sectionId]);
+
+	if (!portalNode) return null;
+
+	return createPortal(
+		<div>
+			{count} of {total}
+		</div>,
+		portalNode,
+	);
+};

dotcom-rendering/src/components/ScrollableProduct.importable.tsx

@@ -1,12 +1,13 @@
 import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
 import type { Breakpoint } from '@guardian/source/foundations';
-import { from, space } from '@guardian/source/foundations';
-import { useEffect, useRef, useState } from 'react';
+import { from, space, textSans14 } from '@guardian/source/foundations';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { ArticleFormat } from '../lib/articleFormat';
 import { nestedOphanComponents } from '../lib/ophan-helpers';
 import { palette } from '../palette';
 import type { ProductBlockElement } from '../types/content';
+import { CarouselCount } from './CarouselCount';
 import { CarouselNavigationButtons } from './CarouselNavigationButtons';
 import { ProductCarouselCard } from './ProductCarouselCard';
 import { Subheading } from './Subheading';
@@ -20,6 +21,15 @@ const carouselHeader = css`
 	justify-content: space-between;
 `;
 
+const countStyles = css`
+	${textSans14};
+	color: ${palette('--card-trail-text')};
+	display: block;
+	${from.tablet} {
+		display: none;
+	}
+`;
+
 export type FixedSlideWidth = {
 	defaultWidth: number;
 	widthFromBreakpoints: { breakpoint: Breakpoint; width: number }[];
@@ -110,6 +120,7 @@ export const ScrollableProduct = ({ products, format }: Props) => {
 	const carouselRef = useRef<HTMLOListElement | null>(null);
 	const [previousButtonEnabled, setPreviousButtonEnabled] = useState(false);
 	const [nextButtonEnabled, setNextButtonEnabled] = useState(true);
+	const [cardCount, setCardCount] = useState(1);
 
 	const carouselLength = products.length;
 	const fixedSlideWidth: FixedSlideWidth = {
@@ -157,27 +168,6 @@ export const ScrollableProduct = ({ products, format }: Props) => {
 		};
 	};
 
-	/**
-	 * Updates state of navigation buttons based on carousel's scroll position.
-	 *
-	 * This function checks the current scroll position of the carousel and sets
-	 * the styles of the previous and next buttons accordingly. The button state
-	 * is toggled when the midpoint of the first or last card has been scrolled
-	 * in or out of view.
-	 */
-	const updateButtonVisibilityOnScroll = () => {
-		const carouselElement = carouselRef.current;
-		if (!carouselElement) return;
-
-		const scrollLeft = carouselElement.scrollLeft;
-		const maxScrollLeft =
-			carouselElement.scrollWidth - carouselElement.clientWidth;
-		const cardWidth = carouselElement.querySelector('li')?.offsetWidth ?? 0;
-
-		setPreviousButtonEnabled(scrollLeft > cardWidth / 2);
-		setNextButtonEnabled(scrollLeft < maxScrollLeft - cardWidth / 2);
-	};
-
 	/**
 	 * Scrolls the carousel to a certain position when a card gains focus.
 	 *
@@ -232,22 +222,73 @@ export const ScrollableProduct = ({ products, format }: Props) => {
 		}
 	};
 
-	useEffect(() => {
+	/**
+	 * Update the count of the first card / how far scrolled the carousel is
+	 *
+	 * This function checks how far along the carousel is scrolled and then
+	 * updates the state of cardCount. we use the half of a card because at
+	 * this scroll amount the carousel will snap to that card.
+	 */
+	const updateCardCountOnScroll = useCallback(() => {
 		const carouselElement = carouselRef.current;
 		if (!carouselElement) return;
 
-		carouselElement.addEventListener(
-			'scroll',
-			throttleEvent(updateButtonVisibilityOnScroll),
+		const cardWidth = carouselElement.querySelector('li')?.offsetWidth ?? 0;
+		if (!cardWidth) return;
+
+		const count = Math.ceil(
+			(carouselElement.scrollLeft + cardWidth / 2) / cardWidth,
 		);
 
+		setCardCount((prev) => (prev === count ? prev : count));
+	}, []);
+
+	/**
+	 * Updates state of navigation buttons based on carousel's scroll position.
+	 *
+	 * This function checks the current scroll position of the carousel and sets
+	 * the styles of the previous and next buttons accordingly. The button state
+	 * is toggled when the midpoint of the first or last card has been scrolled
+	 * in or out of view.
+	 */
+	const updateButtonVisibilityOnScroll = useCallback(() => {
+		const carouselElement = carouselRef.current;
+		if (!carouselElement) return;
+
+		const scrollLeft = carouselElement.scrollLeft;
+		const maxScrollLeft =
+			carouselElement.scrollWidth - carouselElement.clientWidth;
+		const cardWidth = carouselElement.querySelector('li')?.offsetWidth ?? 0;
+
+		setPreviousButtonEnabled(scrollLeft > cardWidth / 2);
+		setNextButtonEnabled(scrollLeft < maxScrollLeft - cardWidth / 2);
+	}, []);
+
+	const throttledCardCount = useMemo(
+		() => throttleEvent(updateCardCountOnScroll),
+		[updateCardCountOnScroll],
+	);
+
+	const throttledButtonVisibility = useMemo(
+		() => throttleEvent(updateButtonVisibilityOnScroll),
+		[updateButtonVisibilityOnScroll],
+	);
+
+	useEffect(() => {
+		const carouselElement = carouselRef.current;
+		if (!carouselElement) return;
+
+		carouselElement.addEventListener('scroll', throttledCardCount);
+		carouselElement.addEventListener('scroll', throttledButtonVisibility);
+
 		return () => {
+			carouselElement.removeEventListener('scroll', throttledCardCount);
 			carouselElement.removeEventListener(
 				'scroll',
-				throttleEvent(updateButtonVisibilityOnScroll),
+				throttledButtonVisibility,
 			);
 		};
-	}, []);
+	}, [throttledCardCount, throttledButtonVisibility]);
 
 	return (
 		<>
@@ -263,6 +304,7 @@ export const ScrollableProduct = ({ products, format }: Props) => {
 					css={navigationStyles}
 					id={'at-a-glance-carousel-navigation'}
 				></div>
+				<div css={countStyles} id={'at-a-glance-carousel-count'}></div>
 			</div>
 			<div css={[baseContainerStyles]}>
 				<ol
@@ -300,6 +342,11 @@ export const ScrollableProduct = ({ products, format }: Props) => {
 						'next-button',
 					)}
 				/>
+				<CarouselCount
+					sectionId={'at-a-glance'}
+					count={cardCount}
+					total={carouselLength}
+				/>
 			</div>
 		</>
 	);