From 977f71e16937c14c6117dd00fd0c390987c0c0c5 Mon Sep 17 00:00:00 2001 From: Basit Ali Date: Sat, 12 Aug 2017 00:46:58 +0500 Subject: [PATCH 1/7] Ability to configure whether to preserve console logs on preview refresh or not. --- src/index.html | 3 +++ src/script.js | 9 ++++++++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/index.html b/src/index.html index f507c84..b5ecd6e 100644 --- a/src/index.html +++ b/src/index.html @@ -455,6 +455,9 @@ +

diff --git a/src/script.js b/src/script.js index 60ca0af..f9eaede 100644 --- a/src/script.js +++ b/src/script.js @@ -1042,6 +1042,10 @@ customEditorFontInput } scope.setPreviewContent = function(isForced) { + if( !prefs.preserveConsoleLogs ) { + scope.clearConsole(); + } + var currentCode = { html: scope.cm.html.getValue(), css: scope.cm.css.getValue(), @@ -1588,6 +1592,7 @@ customEditorFontInput $('[data-setting=editorCustomFont]').value = prefs.editorCustomFont; $('[data-setting=autoSave]').checked = prefs.autoSave; $('[data-setting=autoComplete]').checked = prefs.autoComplete; + $('[data-setting=preserveConsoleLogs]').checked = prefs.preserveConsoleLogs; } /** @@ -2154,7 +2159,8 @@ customEditorFontInput editorFont: 'FiraCode', editorCustomFont: '', autoSave: true, - autoComplete: true + autoComplete: true, + preserveConsoleLogs: true }, function syncGetCallback(result) { if (result.preserveLastCode && lastCode) { @@ -2190,6 +2196,7 @@ customEditorFontInput prefs.editorCustomFont = result.editorCustomFont; prefs.autoSave = result.autoSave; prefs.autoComplete = result.autoComplete; + prefs.preserveConsoleLogs = result.preserveConsoleLogs; updateSettingsInUi(); scope.updateSetting(); From 90f50f5502b28064843b14d4e111ed6a20f78daa Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Mon, 4 Sep 2017 03:17:26 +0530 Subject: [PATCH 2/7] add basic detached preview mode. fixes #92 --- src/detached-window.js | 3 +++ src/index.html | 6 ++++++ src/preview.html | 9 +++++++++ src/script.js | 22 ++++++++++++++++++++++ src/style.css | 19 +++++++++++++++++++ 5 files changed, 59 insertions(+) create mode 100644 src/detached-window.js create mode 100644 src/preview.html 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; } From fc343eb02488cd22ca8042f7da4c26ae79ed8175 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Fri, 8 Sep 2017 10:32:22 +0530 Subject: [PATCH 3/7] add find/replace functionality. fixes #20 --- src/index.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/index.html b/src/index.html index 8c38fed..3976560 100644 --- a/src/index.html +++ b/src/index.html @@ -8,6 +8,7 @@ + @@ -577,6 +578,9 @@ + + + From 813b30db59b9398b31a2342d07c20b76f22266e5 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Tue, 12 Sep 2017 21:37:02 +0530 Subject: [PATCH 4/7] Refactor settings layout and add help to all settings. fixes #165 --- src/index.html | 194 +++++++++++++++++++++++++------------------------ src/style.css | 7 +- 2 files changed, 103 insertions(+), 98 deletions(-) diff --git a/src/index.html b/src/index.html index e76b5ed..5cfa92f 100644 --- a/src/index.html +++ b/src/index.html @@ -364,113 +364,117 @@

Settings

Indentation

-

-

- - -
-