From 0bac70c32614f134cb4d97de1e5defe54bd46b5a Mon Sep 17 00:00:00 2001
From: Rishabh <zrishabhgarg@gmail.com>
Date: Thu, 27 May 2021 16:43:15 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=A1=20Added=20resize=20listener=20for?=
 =?UTF-8?q?=20portal=20container=20height=20change?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

no refs

We need the Portal preview container on Admin to re-adjust based on height of Portal container. This change adds a resizeObserver for portal container and fires a postMessage with height for Admin to listen and update the iframe height based on height of portal container

Updated resize observer to fire on update

Cleanup
---
 ghost/portal/src/App.js                   |  9 +++++---
 ghost/portal/src/components/PopupModal.js | 26 +++++++++++++++++++++--
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/ghost/portal/src/App.js b/ghost/portal/src/App.js
index 6826fd6f71..61eece18a5 100644
--- a/ghost/portal/src/App.js
+++ b/ghost/portal/src/App.js
@@ -57,7 +57,7 @@ export default class App extends React.Component {
         if (this.state.initStatus === 'success' && prevState.initStatus !== this.state.initStatus) {
             const {siteUrl} = this.props;
             const contextState = this.getContextFromState();
-            this.sendPortalReadyEvent(siteUrl);
+            this.sendPortalReadyEvent();
             handleDataAttributes({
                 siteUrl,
                 site: contextState.site,
@@ -74,9 +74,12 @@ export default class App extends React.Component {
         });
     }
 
-    sendPortalReadyEvent(siteUrl) {
+    sendPortalReadyEvent() {
         if (window.self !== window.parent) {
-            window.parent.postMessage('portal-ready', '*');
+            window.parent.postMessage({
+                type: 'portal-ready',
+                payload: {}
+            }, '*');
         }
     }
 
diff --git a/ghost/portal/src/components/PopupModal.js b/ghost/portal/src/components/PopupModal.js
index b86a7cd116..b1a5a40ca1 100644
--- a/ghost/portal/src/components/PopupModal.js
+++ b/ghost/portal/src/components/PopupModal.js
@@ -65,6 +65,27 @@ class PopupContent extends React.Component {
             this.node.ownerDocument.removeEventListener('keyup', this.keyUphandler);
             this.node.ownerDocument.addEventListener('keyup', this.keyUphandler);
         }
+        this.sendContainerHeightChangeEvent();
+    }
+
+    sendContainerHeightChangeEvent() {
+        if (this.node && hasMode(['preview'])) {
+            if (this.node?.clientHeight !== this.lastContainerHeight) {
+                this.lastContainerHeight = this.node?.clientHeight;
+                window.document.body.style.overflow = 'hidden';
+                window.document.body.style['scrollbar-width'] = 'none';
+                window.parent.postMessage({
+                    type: 'portal-preview-updated',
+                    payload: {
+                        height: this.lastContainerHeight
+                    }
+                }, '*');
+            }
+        }
+    }
+
+    componentDidUpdate() {
+        this.sendContainerHeightChangeEvent();
     }
 
     componentWillUnmount() {
@@ -110,7 +131,7 @@ class PopupContent extends React.Component {
             ...Styles.page[page]
         };
         let popupWidthStyle = '';
-        
+
         const portalPlans = getSitePrices({site, pageQuery});
 
         if (page === 'signup' || page === 'signin') {
@@ -145,9 +166,10 @@ class PopupContent extends React.Component {
             break;
         }
         const className = (hasMode(['preview', 'dev']) && !site.disableBackground) ? 'gh-portal-popup-container preview' : 'gh-portal-popup-container';
+        const containerClassName = `${className} ${popupWidthStyle} ${pageClass}`;
         return (
             <div className={'gh-portal-popup-wrapper ' + pageClass} onClick={e => this.handlePopupClose(e)}>
-                <div className={className + ' ' + popupWidthStyle + ' ' + pageClass} style={pageStyle} ref={node => (this.node = node)} tabIndex={-1}>
+                <div className={containerClassName} style={pageStyle} ref={node => (this.node = node)} tabIndex={-1}>
                     <CookieDisabledBanner message={cookieBannerText} />
                     {this.renderPopupNotification()}
                     {this.renderActivePage()}