TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-01 13:54:35 +03:00
Code Issues Projects Releases Wiki Activity

💡 Added resize listener for portal container height change

Browse Source 
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
This commit is contained in:
Rishabh 2021-05-27 16:43:15 +05:30 committed by Rishabh Garg
parent 817d6650b2
commit 0bac70c326
2 changed files with 30 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ghost/portal/src/App.js
View File

@ -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: {}
}, '*');
}
}

26
ghost/portal/src/components/PopupModal.js
View File

@ -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()}