Tidy code

Author: Rik Roots

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

@@ -326,52 +326,72 @@ export const InteractiveBlockComponent = ({
 	const placeholderLinkRef = useRef<HTMLAnchorElement>(null);
 	const [loaded, setLoaded] = useState(false);
 	const { darkModeAvailable } = useConfig();
+
+	// Define some one-time flags
+	const isDatawrapperGraphic =
+		url &&
+		url.substring &&
+		url.includes('interactive.guim.co.uk/datawrapper');
+
+	const isUploaderEmbedPath =
+		url &&
+		url.substring &&
+		url.includes('interactive.guim.co.uk/uploader/embed/');
+
+	const scriptUrlIsBoot =
+		scriptUrl &&
+		scriptUrl.substring &&
+		scriptUrl.includes(
+			'interactive.guim.co.uk/embed/iframe-wrapper/0.1/boot.js',
+		);
+
 	useOnce(() => {
 		// We've brought the behavior from boot.js into this file to avoid loading 2 extra scripts
-		if (
-			scriptUrl ===
-				'https://interactive.guim.co.uk/embed/iframe-wrapper/0.1/boot.js' &&
-			url &&
-			placeholderLinkRef.current
-		) {
+
+		// Define additional one-time flags - these depend on window/document objects
+		const isRunningInWebEnvironment =
+			!document.querySelector('.ios') &&
+			!document.querySelector('.android');
+
+		const prefersDarkScheme = window.matchMedia(
+			'(prefers-color-scheme: dark)',
+		).matches;
+		const requiresDarkMode = darkModeAvailable && prefersDarkScheme;
+
+		if (url && scriptUrlIsBoot && placeholderLinkRef.current) {
+			// Prepare for graphic url dynamic updates
+			const graphicUrl = new URL(url);
+			const graphicUrlParams = new URLSearchParams(graphicUrl.search);
+
+			// Begin creating new iframe element
 			const iframe = document.createElement('iframe');
 			iframe.style.width = '100%';
 			iframe.style.border = 'none';
 			iframe.height = decideHeight(role).toString();
 			iframe.title = caption ?? alt ?? 'Interactive Content';
-			if (url.startsWith('http:')) {
-				iframe.src = url.replace('http:', 'https:');
-			} else {
-				iframe.src = url;
-			}
 
-			// Datawrapper-specific fix to suppress scrollbars appearing
-			if (url.includes('datawrapper')) iframe.scrolling = 'no';
+			// Fix for Datawrapper graphic
+			if (isDatawrapperGraphic) {
+				iframe.scrolling = 'no';
+			}
 
-			// Bespoke dark mode logic for Datawrapper and ai2html embeds on web
-			// This should be removed if/when dark mode is implements on the website
-			const isai2html = url.includes(
-				'interactive.guim.co.uk/uploader/embed/',
-			);
-			if (
-				!document.querySelector('.ios') &&
-				!document.querySelector('.android') &&
-				(url.includes('datawrapper') || isai2html)
-			) {
-				const prefersDarkScheme = window.matchMedia(
-					'(prefers-color-scheme: dark)',
-				).matches;
-				const darkMode = darkModeAvailable && prefersDarkScheme;
-				if (!darkMode) {
-					iframe.src +=
-						(isai2html ? '/' : '') +
-						(iframe.src.includes('?') ? '&' : '?') +
-						'dark=false';
+			// Fix darkmode for web environment
+			if (isRunningInWebEnvironment && !requiresDarkMode) {
+				if (isDatawrapperGraphic || isUploaderEmbedPath) {
+					// Add the 'dark=false' search param
+					graphicUrlParams.set('dark', 'false');
 				}
 			}
 
-			setupWindowListeners(iframe);
+			// Always serve graphic over https, not http
+			graphicUrl.protocol = 'https:';
+
+			graphicUrl.search = graphicUrlParams.toString();
+
+			// Finalise new iframe element
+			iframe.src = graphicUrl.href;
 
+			setupWindowListeners(iframe);
 			wrapperRef.current?.prepend(iframe);
 
 			setLoaded(true);
@@ -396,18 +416,10 @@ export const InteractiveBlockComponent = ({
 					}
 				},
 			);
-
 			setLoaded(true);
 		}
 	}, [loaded]);
 
-	const isDatawrapperGraphic =
-		url == undefined
-			? false
-			: /^https?:\/\/interactive\.guim\.co\.uk\/datawrapper(-test)?\/embed/.test(
-					url,
-			  );
-
 	return (
 		<>
 			<figure