diff --git a/src/detached-window.js b/src/detached-window.js
new file mode 100644
index 0000000..42e3258
--- /dev/null
+++ b/src/detached-window.js
@@ -0,0 +1,3 @@
+window.addEventListener('message', e => {
+ document.querySelector('iframe').src = e.data;
+});
diff --git a/src/index.html b/src/index.html
index 87aa7d0..8c38fed 100644
--- a/src/index.html
+++ b/src/index.html
@@ -194,6 +194,12 @@
+
+
+
+
diff --git a/src/preview.html b/src/preview.html
new file mode 100644
index 0000000..32b727b
--- /dev/null
+++ b/src/preview.html
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/script.js b/src/script.js
index f3f0faf..8c38f49 100644
--- a/src/script.js
+++ b/src/script.js
@@ -1038,6 +1038,9 @@ customEditorFontInput
chrome.i18n.getMessage('@@extension_id') +
'/temporary/' +
'preview.html';
+ if (scope.detachedWindow) {
+ scope.detachedWindow.postMessage(frame.src, '*');
+ }
});
});
}
@@ -1805,6 +1808,25 @@ customEditorFontInput
});
}
+ scope.openDetachedPreview = function() {
+ document.body.classList.add('is-detached-mode');
+ scope.detachedWindow = window.open(
+ './preview.html',
+ 'Web Maker',
+ 'width=420,height=230,resizable,scrollbars=yes,status=1'
+ );
+ setTimeout(() => {
+ scope.detachedWindow.postMessage(frame.src, '*');
+ }, 1000);
+ function checkWindow() {
+ if (scope.detachedWindow && scope.detachedWindow.closed) {
+ clearInterval(intervalID);
+ document.body.classList.remove('is-detached-mode');
+ }
+ }
+ var intervalID = window.setInterval(checkWindow, 500);
+ };
+
function init() {
var lastCode;
diff --git a/src/style.css b/src/style.css
index 3dcd712..ddb877d 100644
--- a/src/style.css
+++ b/src/style.css
@@ -886,6 +886,25 @@ li.CodeMirror-hint-active {
cursor: ns-resize;
}
+.is-detached-mode .demo-side {
+ display: none;
+}
+
+.is-detached-mode .code-side {
+ width: 100% !important;
+}
+
+.layout-4 .code-side {
+ display: none;
+}
+.layout-4 .code-side + .gutter {
+ display: none;
+}
+.layout-4 .demo-side {
+ width: 100% !important;
+}
+
+
/* Codemirror themes basic bg styles. This is here so that there is no big FOUC
while the theme CSS file is loading */
.cm-s-paraiso-dark.CodeMirror { background: #2f1e2e; color: #b9b6b0; }