From aadb2c1835c04ca8b970ac91bae67940249ad5de Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Fri, 20 Jan 2017 02:56:20 +0530 Subject: [PATCH] Avoid complete page refresh when just css changes. Lots faster now. fixes #22 --- src/script.js | 39 ++++++++++++++++++++++++++++----------- 1 file changed, 28 insertions(+), 11 deletions(-) diff --git a/src/script.js b/src/script.js index 64cd05e..f296b5e 100644 --- a/src/script.js +++ b/src/script.js @@ -62,6 +62,7 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD , codeSplitInstance // TODO: for legacy reasons when. Will be refactored as global preferences. , prefs = {} + , codeInPreview = { html: null, css: null, js: null } // DOM nodes , frame = $('#demo-frame') @@ -141,7 +142,7 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD minSize: 34, gutterSize: 6, onDragEnd: function () { - scope.setPreviewContent(); + scope.setPreviewContent(true); } }); } @@ -165,13 +166,13 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD document.body.classList.add('layout-' + mode); resetSplitting(); - scope.setPreviewContent(); + scope.setPreviewContent(true); } function onExternalLibChange() { utils.log('onExternalLibChange'); updateExternalLibUi(); - scope.setPreviewContent(); + scope.setPreviewContent(true); } function updateExternalLibUi() { @@ -615,7 +616,7 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD }, ''); var contents = '\n\n' + externalCss + '\n' - + '\n' + + '\n' + '\n' + '\n' + html + '\n' + externalJs + '\n\n'; @@ -663,13 +664,29 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD }, errorHandler); } - scope.setPreviewContent = function () { - var htmlPromise = computeHtml(); - var cssPromise = computeCss(); - var jsPromise = computeJs(); - Promise.all([htmlPromise, cssPromise, jsPromise]).then(function (result) { - createPreviewFile(result[0], result[1], result[2]); - }); + scope.setPreviewContent = function (isForced) { + var currentCode = { + html: scope.cm.html.getValue(), + css: scope.cm.css.getValue(), + js: scope.cm.js.getValue() + }; + // If just CSS was changed (and everything shudn't be empty), + // change the styles inside the iframe. + if (!isForced && currentCode.html === codeInPreview.html && currentCode.js === codeInPreview.js) { + computeCss().then(function (css) { + frame.contentDocument.querySelector('#webmakerstyle').textContent = css; + }); + } else { + var htmlPromise = computeHtml(); + var cssPromise = computeCss(); + var jsPromise = computeJs(); + Promise.all([htmlPromise, cssPromise, jsPromise]).then(function (result) { + createPreviewFile(result[0], result[1], result[2]); + }); + } + codeInPreview.html = scope.cm.html.getValue(); + codeInPreview.css = scope.cm.css.getValue(); + codeInPreview.js = scope.cm.js.getValue(); }; function saveFile() {