detached mode

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');
+				log('✉️ Sending message to detached window');
-				scope.detachedWindow.postMessage({ contents }, '*');
+				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 (
 			<SplitPane

webmaker/src/components/Footer.jsx

@@ -112,7 +112,7 @@ export default class Footer extends Component {
 					<a
 						class="mode-btn hint--top-left hint--rounded hide-on-mobile"
 						aria-label="Detach Preview"
-						d-click="openDetachedPreview"
+						onClick={this.props.detachedPreviewBtnHandler}
 					>
 						<svg viewBox="0 0 24 24">
 							<path d="M22,17V7H6V17H22M22,5A2,2 0 0,1 24,7V17C24,18.11 23.1,19 22,19H16V21H18V23H10V21H12V19H6C4.89,19 4,18.11 4,17V7A2,2 0 0,1 6,5H22M2,3V15H0V3A2,2 0 0,1 2,1H20V3H2Z" />

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,7 +594,7 @@ 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 });
 	}
@@ -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
+						)}
 					/>
 				</div>
 

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;
+	}
+});

webmaker/src/preview.html

@@ -0,0 +1,8 @@
+<link rel="stylesheet" href="style.css">
+
+<body>
+
+	<iframe src="about://blank" frameborder="0" id="demo-frame" allowfullscreen></iframe>
+
+	<script src="detached-window.js"></script>
+</body>