From 77ee1193212ce8dfc3fdd91e9596a8acec924f91 Mon Sep 17 00:00:00 2001 From: bobbykolev Date: Tue, 11 Feb 2025 12:05:21 +0200 Subject: [PATCH 1/4] Revert back to no internal scroll. --- pages/_app.js | 11 +++++------ styles.css | 34 +--------------------------------- 2 files changed, 6 insertions(+), 39 deletions(-) diff --git a/pages/_app.js b/pages/_app.js index 99049f1..8a9ba4e 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -4,12 +4,11 @@ import IframeCommunication from '../components/iframeCommunication'; export default function MyApp({ Component, pageProps }) { useEffect(() => { - if (typeof window === 'undefined') return; - if (window.self !== window.top) { - document.body.classList.add("in-iframe"); - } else { - document.body.classList.remove("in-iframe"); - } + try { + if (window.self === window.top) { + document.body.classList.add("not-in-iframe"); + } + } catch (e) {} }, []); return ( diff --git a/styles.css b/styles.css index 3eae42b..15851b3 100644 --- a/styles.css +++ b/styles.css @@ -1,43 +1,11 @@ -html, body { - height: 100vh; - max-height: 100vh; - overflow: hidden; -} - body { font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; overflow-y: hidden; } -body:not(.in-iframe) { +body.not-in-iframe { overflow-y: auto; } -.main-content { - flex: 1; - height: 100%; - max-height: 100vh; - overflow-y: auto; /* Zorgt ervoor dat de inhoud in de iframe kan scrollen */ - padding: 20px; - background: white; -} - -iframe { - width: 100%; - height: 100vh !important; /* Zorgt dat de iframe altijd de volle hoogte krijgt */ - overflow-y: auto !important; /* Voorkomt dat de iframe-inhoud wordt afgesneden */ - border: none; -} - -body.in-iframe { - overflow-y: auto !important; - height: auto !important; - max-height: 100vh !important; -} -body.in-iframe .main-content { - overflow-y: auto !important; - height: auto !important; - max-height: 100vh !important; -} From 131c09b0a30120e283ac55916bd6cb87af5da998 Mon Sep 17 00:00:00 2001 From: bobbykolev Date: Tue, 11 Feb 2025 12:06:01 +0200 Subject: [PATCH 2/4] 0.1.1 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index b45f2f2..3eb45d2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@alkemio/documentation", - "version": "0.1.0", + "version": "0.1.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@alkemio/documentation", - "version": "0.1.0", + "version": "0.1.1", "license": "EUPL-1.2", "dependencies": { "next": "^14.2.5", diff --git a/package.json b/package.json index 463be9f..f01b079 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@alkemio/documentation", - "version": "0.1.0", + "version": "0.1.1", "description": "Alkemio platform documentation", "author": "Alkemio Foundation", "repository": { From a76c3cd6ab354cef63dfaf5348386d53a7e0448c Mon Sep 17 00:00:00 2001 From: bobbykolev Date: Tue, 11 Feb 2025 15:19:24 +0200 Subject: [PATCH 3/4] Bump the update height threshold --- components/iframeCommunication.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/components/iframeCommunication.js b/components/iframeCommunication.js index 4ce025f..6ada765 100644 --- a/components/iframeCommunication.js +++ b/components/iframeCommunication.js @@ -1,6 +1,8 @@ import { useEffect, useRef } from 'react'; import { useRouter } from 'next/router'; +const HEIGHT_DIFFERENCE_THRESHOLD = 60; + const allowedOrigins = ['https://alkem.io', 'https://dev-alkem.io', 'https://acc-alkem.io', 'https://sandbox-alkem.io', 'http://localhost:3000']; const isOriginValid = (origin) => allowedOrigins.includes(origin); @@ -40,14 +42,16 @@ const IframeCommunication = () => { const sendPageHeight = () => { const pageHeight = document.documentElement.scrollHeight || document.body.scrollHeight; + console.log('Scroll change new/old: ', pageHeight, lastHeight.current); // Only send if there's a meaningful difference in height - if (Math.abs(pageHeight - lastHeight.current) > 40) { + if (Math.abs(pageHeight - lastHeight.current) > HEIGHT_DIFFERENCE_THRESHOLD) { lastHeight.current = pageHeight; // Debounce the message to avoid excessive calls clearTimeout(debounceTimeout.current); debounceTimeout.current = setTimeout(() => { + console.log('Scroll change SENT: ', pageHeight, lastHeight.current); sendMessageToParent({ type: SupportedMessageTypes.PageHeight, height: pageHeight }); }, 50); } From e05556be2d84fa4d6b299b4fd5ed9feae5306784 Mon Sep 17 00:00:00 2001 From: bobbykolev Date: Tue, 11 Feb 2025 15:51:00 +0200 Subject: [PATCH 4/4] Bump the update height threshold --- components/iframeCommunication.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/components/iframeCommunication.js b/components/iframeCommunication.js index 6ada765..8db9c78 100644 --- a/components/iframeCommunication.js +++ b/components/iframeCommunication.js @@ -1,7 +1,7 @@ import { useEffect, useRef } from 'react'; import { useRouter } from 'next/router'; -const HEIGHT_DIFFERENCE_THRESHOLD = 60; +const HEIGHT_DIFFERENCE_THRESHOLD = 130; // ~30 locally and 122 on Sandbox (Donna PC) const allowedOrigins = ['https://alkem.io', 'https://dev-alkem.io', 'https://acc-alkem.io', 'https://sandbox-alkem.io', 'http://localhost:3000']; const isOriginValid = (origin) => allowedOrigins.includes(origin); @@ -59,9 +59,8 @@ const IframeCommunication = () => { useEffect(() => { - // Send initial page height and path + // Send path sendMessageToParent({ type: SupportedMessageTypes.PageChange, url: router.pathname }); - sendPageHeight(); // Observe changes to the body size const resizeObserver = new ResizeObserver(sendPageHeight);