add touch events for carousel for apps rendering target

guardian · Dec 13, 2024 · 1132cab · 1132cab
1 parent b7c31f6
commit 1132cab
Show file tree

Hide file tree

Showing 18 changed files with 76 additions and 4 deletions.
diff --git a/dotcom-rendering/src/components/Carousel.importable.tsx b/dotcom-rendering/src/components/Carousel.importable.tsx
@@ -32,6 +32,8 @@ import { ContainerOverrides } from './ContainerOverrides';
 import { FormatBoundary } from './FormatBoundary';
 import { Hide } from './Hide';
 import { LeftColumn } from './LeftColumn';
+import { getInteractionClient } from '../lib/bridgetApi';
+import { RenderingTarget } from 'src/types/renderingTarget';
 
 type Props = {
 	heading: string;
@@ -42,6 +44,7 @@ type Props = {
 	leftColSize: LeftColSize;
 	discussionApiUrl: string;
 	absoluteServerTimes: boolean;
+	renderingTarget: RenderingTarget;
 };
 
 type ArticleProps = Props & {
@@ -792,6 +795,7 @@ export const Carousel = ({
 	discussionApiUrl,
 	isOnwardContent = true,
 	absoluteServerTimes,
+	renderingTarget,
 	...props
 }: ArticleProps | FrontProps) => {
 	const carouselRef = useRef<HTMLUListElement>(null);
@@ -800,6 +804,8 @@ export const Carousel = ({
 	const [maxIndex, setMaxIndex] = useState(0);
 	const isHorizontalScrollingSupported = useIsHorizontalScrollingSupported();
 
+	const isApps = renderingTarget === 'Apps';
+
 	const arrowName = 'carousel-small-arrow';
 
 	const isCuratedContent = onwardsSource === 'curated-content';
@@ -907,6 +913,14 @@ export const Carousel = ({
 	// when index changes and compare it against the prior maxIndex only.
 	useEffect(() => setMaxIndex((m) => Math.max(index, m)), [index]);
 
+	const onTouchStart = async () => {
+		await getInteractionClient().disableArticleSwipe(true);
+	};
+
+	const onTouchEnd = async () => {
+		await getInteractionClient().disableArticleSwipe(false);
+	};
+
 	if (!isHorizontalScrollingSupported) {
 		return null;
 	}
@@ -974,6 +988,8 @@ export const Carousel = ({
 						ref={carouselRef}
 						data-component={`carousel-small | maxIndex-${maxIndex}`}
 						data-heatphan-type="carousel"
+						onTouchStart={isApps ? onTouchStart : undefined}
+						onTouchEnd={isApps ? onTouchEnd : undefined}
 					>
 						{trails.map((trail, i) => {
 							const {

diff --git a/dotcom-rendering/src/components/Carousel.stories.tsx b/dotcom-rendering/src/components/Carousel.stories.tsx
@@ -270,6 +270,7 @@ export const Headlines: StoryObj = ({ format }: StoryProps) => {
 				leftColSize="compact"
 				discussionApiUrl={discussionApiUrl}
 				absoluteServerTimes={true}
+				renderingTarget="Web"
 			/>
 		</Section>
 	);
@@ -295,6 +296,7 @@ export const SingleItemCarousel = () => {
 				leftColSize="compact"
 				discussionApiUrl={discussionApiUrl}
 				absoluteServerTimes={true}
+				renderingTarget="Web"
 			/>
 		</Section>
 	);
@@ -349,6 +351,7 @@ export const SingleOpinionCarousel = () => {
 				leftColSize="compact"
 				discussionApiUrl={discussionApiUrl}
 				absoluteServerTimes={true}
+				renderingTarget="Web"
 			/>
 		</Section>
 	);
@@ -379,6 +382,7 @@ export const Immersive = () => {
 					leftColSize="compact"
 					discussionApiUrl={discussionApiUrl}
 					absoluteServerTimes={true}
+					renderingTarget="Web"
 				/>
 			</Section>
 		</>
@@ -424,6 +428,7 @@ export const SpecialReportAlt = () => {
 				leftColSize="compact"
 				discussionApiUrl={discussionApiUrl}
 				absoluteServerTimes={true}
+				renderingTarget="Web"
 			/>
 		</Section>
 	);
@@ -639,6 +644,7 @@ export const AllCards = () => {
 				discussionApiUrl={discussionApiUrl}
 				format={defaultFormat}
 				absoluteServerTimes={true}
+				renderingTarget="Web"
 			/>
 		</Section>
 	);
@@ -663,6 +669,7 @@ export const FrontCarousel = () => (
 				discussionApiUrl={discussionApiUrl}
 				palette="PodcastPalette"
 				absoluteServerTimes={true}
+				renderingTarget="Web"
 			/>
 		</Section>
 	</>

diff --git a/dotcom-rendering/src/components/FetchOnwardsData.importable.tsx b/dotcom-rendering/src/components/FetchOnwardsData.importable.tsx
@@ -9,6 +9,7 @@ import type { OnwardsSource } from '../types/onwards';
 import type { FETrailType, TrailType } from '../types/trails';
 import { Carousel } from './Carousel.importable';
 import { Placeholder } from './Placeholder';
+import { RenderingTarget } from 'src/types/renderingTarget';
 
 type Props = {
 	url: string;
@@ -17,6 +18,7 @@ type Props = {
 	format: ArticleFormat;
 	discussionApiUrl: string;
 	absoluteServerTimes: boolean;
+	renderingTarget: RenderingTarget;
 };
 
 type OnwardsResponse = {
@@ -37,6 +39,7 @@ export const FetchOnwardsData = ({
 	format,
 	discussionApiUrl,
 	absoluteServerTimes,
+	renderingTarget,
 }: Props) => {
 	const { data, error } = useApi<OnwardsResponse>(url);
 
@@ -85,6 +88,7 @@ export const FetchOnwardsData = ({
 				}
 				discussionApiUrl={discussionApiUrl}
 				absoluteServerTimes={absoluteServerTimes}
+				renderingTarget={renderingTarget}
 			/>
 		</div>
 	);

diff --git a/dotcom-rendering/src/components/Island.test.tsx b/dotcom-rendering/src/components/Island.test.tsx
@@ -205,6 +205,7 @@ describe('Island: server-side rendering', () => {
 						shortUrlId=""
 						discussionApiUrl=""
 						absoluteServerTimes={true}
+						renderingTarget="Web"
 					/>
 				</WithConfig>,
 			),

diff --git a/dotcom-rendering/src/components/OnwardsUpper.importable.tsx b/dotcom-rendering/src/components/OnwardsUpper.importable.tsx
@@ -14,6 +14,7 @@ import type { TagType } from '../types/tag';
 import { BigSixOnwardsContent } from './BigSixOnwardsContent';
 import { FetchOnwardsData } from './FetchOnwardsData.importable';
 import { Section } from './Section';
+import { RenderingTarget } from 'src/types/renderingTarget';
 
 type PillarForContainer =
 	| 'headlines'
@@ -181,6 +182,7 @@ type Props = {
 	shortUrlId: string;
 	discussionApiUrl: string;
 	absoluteServerTimes: boolean;
+	renderingTarget: RenderingTarget;
 };
 
 /**
@@ -215,6 +217,7 @@ export const OnwardsUpper = ({
 	shortUrlId,
 	discussionApiUrl,
 	absoluteServerTimes,
+	renderingTarget,
 }: Props) => {
 	const abTestAPI = useAB()?.api;
 	const isInOnwardsAbTestVariant = abTestAPI?.isUserInVariant(
@@ -329,6 +332,7 @@ export const OnwardsUpper = ({
 						format={format}
 						discussionApiUrl={discussionApiUrl}
 						absoluteServerTimes={absoluteServerTimes}
+						renderingTarget={renderingTarget}
 					/>
 				</Section>
 			)}
@@ -344,6 +348,7 @@ export const OnwardsUpper = ({
 						format={format}
 						discussionApiUrl={discussionApiUrl}
 						absoluteServerTimes={absoluteServerTimes}
+						renderingTarget={renderingTarget}
 					/>
 				</Section>
 			)}

diff --git a/dotcom-rendering/src/layouts/AudioLayout.tsx b/dotcom-rendering/src/layouts/AudioLayout.tsx
@@ -47,6 +47,7 @@ import type { NavType } from '../model/extract-nav';
 import { palette as themePalette } from '../palette';
 import type { ArticleDeprecated } from '../types/article';
 import { BannerWrapper, Stuck } from './lib/stickiness';
+import { RenderingTarget } from '../types/renderingTarget';
 
 const AudioGrid = ({ children }: { children: React.ReactNode }) => (
 	<div
@@ -147,14 +148,16 @@ const usCardStyles = css`
 interface Props {
 	article: ArticleDeprecated;
 	format: ArticleFormat;
+	renderingTarget: RenderingTarget;
 }
 
 interface WebProps extends Props {
 	NAV: NavType;
+	renderingTarget: 'Web';
 }
 
 export const AudioLayout = (props: WebProps) => {
-	const { article, format } = props;
+	const { article, format, renderingTarget } = props;
 	const audioData = getAudioData(article.mainMediaElements);
 
 	const {
@@ -552,6 +555,7 @@ export const AudioLayout = (props: WebProps) => {
 									article.config.discussionApiUrl
 								}
 								absoluteServerTimes={absoluteServerTimes}
+								renderingTarget={renderingTarget}
 							/>
 						</Island>
 					</Section>
@@ -575,6 +579,7 @@ export const AudioLayout = (props: WebProps) => {
 						shortUrlId={article.config.shortUrlId}
 						discussionApiUrl={article.config.discussionApiUrl}
 						absoluteServerTimes={absoluteServerTimes}
+						renderingTarget={renderingTarget}
 					/>
 				</Island>
 				{showComments && (

diff --git a/dotcom-rendering/src/layouts/CommentLayout.tsx b/dotcom-rendering/src/layouts/CommentLayout.tsx
@@ -798,6 +798,7 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
 									article.config.discussionApiUrl
 								}
 								absoluteServerTimes={absoluteServerTimes}
+								renderingTarget={renderingTarget}
 							/>
 						</Island>
 					</Section>
@@ -821,6 +822,7 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
 						shortUrlId={article.config.shortUrlId}
 						discussionApiUrl={article.config.discussionApiUrl}
 						absoluteServerTimes={absoluteServerTimes}
+						renderingTarget={renderingTarget}
 					/>
 				</Island>
 

diff --git a/dotcom-rendering/src/layouts/DecideLayout.tsx b/dotcom-rendering/src/layouts/DecideLayout.tsx
@@ -263,6 +263,7 @@ const DecideLayoutWeb = ({
 							article={article}
 							NAV={NAV}
 							format={format}
+							renderingTarget={renderingTarget}
 						/>
 					);
 				case ArticleDesign.Audio:
@@ -271,6 +272,7 @@ const DecideLayoutWeb = ({
 							article={article}
 							format={format}
 							NAV={NAV}
+							renderingTarget={renderingTarget}
 						/>
 					);
 				default:

diff --git a/dotcom-rendering/src/layouts/FrontLayout.tsx b/dotcom-rendering/src/layouts/FrontLayout.tsx
@@ -53,6 +53,7 @@ import type {
 } from '../types/front';
 import { pageSkinContainer } from './lib/pageSkin';
 import { BannerWrapper, Stuck } from './lib/stickiness';
+import { useConfig } from '../components/ConfigContext';
 
 interface Props {
 	front: DCRFrontType;
@@ -135,6 +136,8 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 		editionId,
 	} = front;
 
+	const { renderingTarget } = useConfig();
+
 	const renderAds = canRenderAds(front);
 
 	const hasPageSkin = renderAds && hasPageSkinConfig;
@@ -676,6 +679,7 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 											absoluteServerTimes={
 												absoluteServerTimes
 											}
+											renderingTarget={renderingTarget}
 										/>
 									</Island>
 								</Section>

diff --git a/dotcom-rendering/src/layouts/ImmersiveLayout.tsx b/dotcom-rendering/src/layouts/ImmersiveLayout.tsx
@@ -866,6 +866,7 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
 									article.config.discussionApiUrl
 								}
 								absoluteServerTimes={absoluteServerTimes}
+								renderingTarget={renderingTarget}
 							/>
 						</Island>
 					</Section>
@@ -889,6 +890,7 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
 						shortUrlId={article.config.shortUrlId}
 						discussionApiUrl={article.config.discussionApiUrl}
 						absoluteServerTimes={absoluteServerTimes}
+						renderingTarget={renderingTarget}
 					/>
 				</Island>
 

diff --git a/dotcom-rendering/src/layouts/InteractiveLayout.tsx b/dotcom-rendering/src/layouts/InteractiveLayout.tsx
@@ -647,6 +647,7 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
 									article.config.discussionApiUrl
 								}
 								absoluteServerTimes={absoluteServerTimes}
+								renderingTarget={renderingTarget}
 							/>
 						</Island>
 					</Section>
@@ -670,6 +671,7 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
 						shortUrlId={article.config.shortUrlId}
 						discussionApiUrl={article.config.discussionApiUrl}
 						absoluteServerTimes={absoluteServerTimes}
+						renderingTarget={renderingTarget}
 					/>
 				</Island>
 

diff --git a/dotcom-rendering/src/layouts/LiveLayout.tsx b/dotcom-rendering/src/layouts/LiveLayout.tsx
@@ -973,6 +973,7 @@ export const LiveLayout = (props: WebProps | AppsProps) => {
 										article.config.discussionApiUrl
 									}
 									absoluteServerTimes={absoluteServerTimes}
+									renderingTarget={renderingTarget}
 								/>
 							</Island>
 						</Section>
@@ -998,6 +999,7 @@ export const LiveLayout = (props: WebProps | AppsProps) => {
 							shortUrlId={article.config.shortUrlId}
 							discussionApiUrl={article.config.discussionApiUrl}
 							absoluteServerTimes={absoluteServerTimes}
+							renderingTarget={renderingTarget}
 						/>
 					</Island>
 

diff --git a/dotcom-rendering/src/layouts/NewsletterSignupLayout.tsx b/dotcom-rendering/src/layouts/NewsletterSignupLayout.tsx
@@ -41,11 +41,13 @@ import { isValidUrl } from '../lib/isValidUrl';
 import type { NavType } from '../model/extract-nav';
 import type { ArticleDeprecated } from '../types/article';
 import { BannerWrapper, Stuck } from './lib/stickiness';
+import { RenderingTarget } from '../types/renderingTarget';
 
 type Props = {
 	article: ArticleDeprecated;
 	NAV: NavType;
 	format: ArticleFormat;
+	renderingTarget: RenderingTarget;
 };
 
 const mainColWrapperStyle = css`
@@ -183,7 +185,12 @@ const getMainMediaCaptions = (
 			: undefined,
 	);
 
-export const NewsletterSignupLayout = ({ article, NAV, format }: Props) => {
+export const NewsletterSignupLayout = ({
+	article,
+	NAV,
+	format,
+	renderingTarget,
+}: Props) => {
 	const {
 		promotedNewsletter,
 		config: { host, hasSurveyAd },
@@ -435,6 +442,7 @@ export const NewsletterSignupLayout = ({ article, NAV, format }: Props) => {
 									article.config.discussionApiUrl
 								}
 								absoluteServerTimes={absoluteServerTimes}
+								renderingTarget={renderingTarget}
 							/>
 						</Island>
 					</Section>
@@ -458,6 +466,7 @@ export const NewsletterSignupLayout = ({ article, NAV, format }: Props) => {
 						shortUrlId={article.config.shortUrlId}
 						discussionApiUrl={article.config.discussionApiUrl}
 						absoluteServerTimes={absoluteServerTimes}
+						renderingTarget={renderingTarget}
 					/>
 				</Island>
 			</main>