Merge pull request #1302 from incubateur-ademe/iframe-resizing

Nouvel Iframe de simulation
incubateur-ademe · Sep 14, 2023 · 20fb496 · 20fb496
2 parents 25191ba + 9514d88
commit 20fb496
Show file tree

Hide file tree

Showing 18 changed files with 358 additions and 147 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,6 +3,7 @@
 dist/*
 !dist/_redirects
 !/dist/demo-iframe.html
+!/dist/demo-iframeSimulation.html
 .DS_Store
 yarn-error.log
 

diff --git a/dist/demo-iframe.html b/dist/demo-iframe.html
@@ -6,11 +6,12 @@
 	</head>
 
 	<body>
-
-			<h2>iframe paramétré</h2>
-			Ci-dessous, nosgestesclimat.fr intégré comme un iframe paramétré.
-			<script id="nosgestesclimat" src="/iframe.js" data-share-data="true"></script>
-
-
+		<h2>iframe paramétré</h2>
+		Ci-dessous, nosgestesclimat.fr intégré comme un iframe paramétré.
+		<script
+			id="nosgestesclimat"
+			src="/iframe.js"
+			data-share-data="true"
+		></script>
 	</body>
 </html>
diff --git a/dist/demo-iframeSimulation.html b/dist/demo-iframeSimulation.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="fr">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="initial-scale=1" />
+	</head>
+	<body>
+		<h2>Exemple d'intégration du test avec région fixée par l'intégrateur.</h2>
+		Ci-dessous, nosgestesclimat.fr intégré comme un iframe paramétré ne
+		contenant que la partie simulation du test. Dans cet exemple, la Suisse a
+		été définie comme étant la région par défaut du test.
+		<script
+			id="nosgestesclimat"
+			src="/iframeSimulation.js"
+			data-only-simulation="true"
+			data-localisation="CH"
+			data-pr="1872"
+		></script>
+	</body>
+</html>
diff --git a/source/Provider.tsx b/source/Provider.tsx
@@ -9,6 +9,7 @@ import { BrowserRouter } from 'react-router-dom'
 import reducers, { AppState } from 'Reducers/rootReducer'
 import { applyMiddleware, compose, createStore, Middleware, Store } from 'redux'
 import thunk from 'redux-thunk'
+import { IframeResizer } from './components/IframeResizer'
 import { MatomoProvider } from './contexts/MatomoContext'
 import RulesProvider from './RulesProvider'
 import { getIsIframe } from './utils'
@@ -85,6 +86,7 @@ export default function Provider({
 						color={iframeCouleur && decodeURIComponent(iframeCouleur)}
 					>
 						<IframeOptionsProvider>
+							<IframeResizer />
 							<SitePathProvider value={sitePaths}>
 								<I18nextProvider i18n={i18next}>
 									<BrowserRouter>

diff --git a/source/components/Footer.tsx b/source/components/Footer.tsx
@@ -1,25 +1,32 @@
-import { useContext } from 'react'
+import { AppState } from '@/reducers/rootReducer'
+import { getIsIframe } from '@/utils'
 import { Trans } from 'react-i18next'
+import { useSelector } from 'react-redux'
 import { Link, useLocation } from 'react-router-dom'
 import { useMediaQuery } from 'usehooks-ts'
 import DocumentationButton from '../sites/publicodes/DocumentationButton'
 import LandingContent from '../sites/publicodes/LandingContent'
 import { isFluidLayout } from '../sites/publicodes/utils'
-import { IframeOptionsContext } from './utils/IframeOptionsProvider'
 
 export default ({}) => {
 	const location = useLocation(),
 		path = decodeURIComponent(location.pathname)
 
-	const { isIframe } = useContext(IframeOptionsContext),
-		displaySponsorLogos =
-			path === '/' &&
-			// would be a repetition with header logos
-			!isIframe
+	const isIframe = getIsIframe()
+	const iframeOnlySimulationOption = useSelector(
+		(state: AppState) => state?.iframeOptions?.iframeOnlySimulation
+	)
+
+	const displaySponsorLogos =
+		path === '/' &&
+		// would be a repetition with header logos
+		!isIframe
 
 	const mobileNoFooter = !isFluidLayout(path)
 	const mobileScreen = useMediaQuery('(max-width: 800px)')
 
+	if (iframeOnlySimulationOption) return null
+
 	if (mobileScreen && mobileNoFooter) return null
 
 	return (

diff --git a/source/components/IframeResizer.tsx b/source/components/IframeResizer.tsx
@@ -0,0 +1,25 @@
+import { getIsIframe } from '@/utils'
+import { useEffect } from 'react'
+
+export function IframeResizer() {
+	const isIframe = getIsIframe()
+	useEffect(() => {
+		// The code below communicate with the iframe.js script on a host site
+		// to automatically resize the iframe when its inner content height
+		// change.
+
+		if (!isIframe) {
+			return
+		}
+
+		const minHeight = 800 // Also used in iframe.js
+		const observer = new ResizeObserver(([entry]) => {
+			const value = Math.max(minHeight, entry.contentRect.height)
+			window.parent?.postMessage({ kind: 'resize-height', value }, '*')
+		})
+		observer.observe(window.document.body)
+		return () => observer.disconnect()
+	}, [isIframe])
+
+	return null
+}
diff --git a/source/components/Logo.tsx b/source/components/Logo.tsx
@@ -1,62 +1,75 @@
+import { AppState } from '@/reducers/rootReducer'
+import { useSelector } from 'react-redux'
 import { Link } from 'react-router-dom'
 
-export default ({ showText, size = 'large' }) => (
-	<div
-		css={`
-			width: 100%;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		`}
-	>
-		<Link
-			to="/"
-			data-cypress-id="home-logo-link"
+export default ({ showText, size = 'large' }) => {
+	const iframeOnlySimulationOption = useSelector(
+		(state: AppState) => state?.iframeOptions?.iframeOnlySimulation
+	)
+	return (
+		<div
 			css={`
+				width: 100%;
 				display: flex;
 				align-items: center;
 				justify-content: center;
-				text-decoration: none;
-				margin: ${{
-					large: '1rem auto',
-					medium: '1rem 3rem 0rem 0rem',
-					small: '.1rem auto',
-				}[size]};
-				img {
-					width: ${{ large: '100px', medium: '55px', small: '30px' }[size]};
-					height: auto;
-				}
+				${iframeOnlySimulationOption &&
+				`
+				pointer-events: none;
+				`}
 			`}
 		>
-			<img
-				src={`/images/petit-logo${size === 'large' ? '@2x' : ''}.png`}
-				srcSet="/images/petit-logo@2x.png 2x,
+			<Link
+				to="/"
+				data-cypress-id="home-logo-link"
+				css={`
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					text-decoration: none;
+					margin: ${{
+						large: '1rem auto',
+						medium: '1rem 3rem 0rem 0rem',
+						small: '.1rem auto',
+					}[size]};
+					img {
+						width: ${{ large: '100px', medium: '55px', small: '30px' }[size]};
+						height: auto;
+					}
+				`}
+			>
+				<img
+					src={`/images/petit-logo${size === 'large' ? '@2x' : ''}.png`}
+					srcSet="/images/petit-logo@2x.png 2x,
 							/images/petit-logo@3x.png 3x"
-				width="75"
-				height="75"
-			/>
-			{showText && (
-				<div
-					css={`
-						font-weight: 900;
-						line-height: ${{
-							large: '1.5rem',
-							medium: '1.05rem',
-							small: '1rem',
-						}[size]};
-						color: var(--darkColor);
-						text-transform: uppercase;
-						font-size: ${{ large: '160%', medium: '113%', small: '60%' }[size]};
-						margin-left: 0.2rem;
-					`}
-				>
-					Nos
-					<br />
-					Gestes
-					<br />
-					Climat
-				</div>
-			)}
-		</Link>
-	</div>
-)
+					width="75"
+					height="75"
+				/>
+				{showText && (
+					<div
+						css={`
+							font-weight: 900;
+							line-height: ${{
+								large: '1.5rem',
+								medium: '1.05rem',
+								small: '1rem',
+							}[size]};
+							color: var(--darkColor);
+							text-transform: uppercase;
+							font-size: ${{ large: '160%', medium: '113%', small: '60%' }[
+								size
+							]};
+							margin-left: 0.2rem;
+						`}
+					>
+						Nos
+						<br />
+						Gestes
+						<br />
+						Climat
+					</div>
+				)}
+			</Link>
+		</div>
+	)
+}