diff --git a/webmaker/src/components/ContentWrap.jsx b/webmaker/src/components/ContentWrap.jsx index fc15dd1..a9c39c3 100644 --- a/webmaker/src/components/ContentWrap.jsx +++ b/webmaker/src/components/ContentWrap.jsx @@ -159,8 +159,8 @@ export default class ContentWrap extends Component { if (shouldInlineJs) { if (this.detachedWindow) { - utils.log('✉️ Sending message to detached window'); - scope.detachedWindow.postMessage({ contents }, '*'); + log('✉️ Sending message to detached window'); + this.detachedWindow.postMessage({ contents }, '*'); } else { this.frame.src = this.frame.src; setTimeout(() => { @@ -251,8 +251,7 @@ export default class ContentWrap extends Component { return !!item.title; } componentDidUpdate() { - log('🚀', 'didupdate', this.props.currentItem); - + // log('🚀', 'didupdate', this.props.currentItem); // if (this.isValidItem(this.props.currentItem)) { // this.refreshEditor(); // } @@ -535,6 +534,40 @@ export default class ContentWrap extends Component { trackEvent('ui', 'updateCodeMode', mode); } } + detachPreview() { + if (this.detachedWindow) { + this.detachedWindow.focus(); + return; + } + const iframeBounds = this.frame.getBoundingClientRect(); + const iframeWidth = iframeBounds.width; + const iframeHeight = iframeBounds.height; + document.body.classList.add('is-detached-mode'); + window.globalConsoleContainerEl.insertBefore(window.consoleEl, null); + + this.detachedWindow = window.open( + './preview.html', + 'Web Maker', + `width=${iframeWidth},height=${iframeHeight},resizable,scrollbars=yes,status=1` + ); + // Trigger initial render in detached window + setTimeout(() => { + this.setPreviewContent(true); + }, 1500); + function checkWindow() { + if (this.detachedWindow && this.detachedWindow.closed) { + clearInterval(intervalID); + document.body.classList.remove('is-detached-mode'); + $('#js-demo-side').insertBefore(window.consoleEl, null); + this.detachedWindow = null; + // Update main frame preview to get latest changes (which were not + // getting reflected while detached window was open) + this.setPreviewContent(true); + } + } + var intervalID = window.setInterval(checkWindow.bind(this), 500); + } + render() { return ( diff --git a/webmaker/src/components/app.jsx b/webmaker/src/components/app.jsx index f3820a1..05c2d51 100644 --- a/webmaker/src/components/app.jsx +++ b/webmaker/src/components/app.jsx @@ -144,7 +144,7 @@ export default class App extends Component { db.getSettings(this.defaultSettings).then(result => { if (result.preserveLastCode && lastCode) { this.setState({ unsavedEditCount: 0 }); - log('🚀', 'unsaededitcount setstate'); + // For web app environment we don't fetch item from localStorage, // because the item isn't stored in the localStorage. if (lastCode.id && window.IS_EXTENSION) { @@ -261,7 +261,6 @@ export default class App extends Component { item.jsMode = item.jsMode || this.state.prefs.jsMode || JsModes.JS; this.setState({ currentItem: item }, d.resolve); - log('🚀', 'currentItem setstate', item); // Reset auto-saving flag this.isAutoSavingEnabled = false; @@ -595,9 +594,9 @@ export default class App extends Component { } } onCodeModeChange(ofWhat, mode) { - const item = {...this.state.currentItem} + const item = { ...this.state.currentItem }; item[`${ofWhat}Mode`] = mode; - this.setState({currentItem: item}); + this.setState({ currentItem: item }); } onCodeChange(type, code, isUserChange) { this.state.currentItem[type] = code; @@ -742,6 +741,11 @@ export default class App extends Component { this.createNewItem(); } } + detachedPreviewBtnHandler() { + trackEvent('ui', 'detachPreviewBtnClick'); + + this.contentWrap.detachPreview() + } render() { return ( @@ -780,6 +784,9 @@ export default class App extends Component { notificationsBtnClickHandler={() => this.setState({ isNotificationsModalOpen: true }) } + detachedPreviewBtnHandler={this.detachedPreviewBtnHandler.bind( + this + )} /> diff --git a/webmaker/src/detached-window.js b/webmaker/src/detached-window.js new file mode 100644 index 0000000..e06aa27 --- /dev/null +++ b/webmaker/src/detached-window.js @@ -0,0 +1,13 @@ +window.addEventListener('message', e => { + if (e.data && e.data.contents) { + const frame = document.querySelector('iframe'); + frame.src = frame.src; + setTimeout(() => { + frame.contentDocument.open(); + frame.contentDocument.write(e.data.contents); + frame.contentDocument.close(); + }, 10); + } else { + document.querySelector('iframe').src = e.data; + } +}); diff --git a/webmaker/src/preview.html b/webmaker/src/preview.html new file mode 100644 index 0000000..777c33f --- /dev/null +++ b/webmaker/src/preview.html @@ -0,0 +1,8 @@ + + + + + + + +