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 (
this.handlePopupClose(e)}> -
(this.node = node)} tabIndex={-1}> +
(this.node = node)} tabIndex={-1}> {this.renderPopupNotification()} {this.renderActivePage()}