mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-14 18:46:19 +02:00
Code Issues Releases Wiki Activity

Avoid complete page refresh when just css changes. Lots faster now. fixes #22

Browse Source
This commit is contained in:
Kushagra Gour
2017-01-20 02:56:20 +05:30
parent 176970e1dc
commit aadb2c1835
1 changed files with 28 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/script.js
View File

@ -62,6 +62,7 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD
, codeSplitInstance , codeSplitInstance
// TODO: for legacy reasons when. Will be refactored as global preferences. // TODO: for legacy reasons when. Will be refactored as global preferences.
, prefs = {} , prefs = {}
, codeInPreview = { html: null, css: null, js: null }
// DOM nodes // DOM nodes
, frame = $('#demo-frame') , frame = $('#demo-frame')
@ -141,7 +142,7 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD
minSize: 34, minSize: 34,
gutterSize: 6, gutterSize: 6,
onDragEnd: function () { onDragEnd: function () {
scope.setPreviewContent(); scope.setPreviewContent(true);
} }
}); });
} }
@ -165,13 +166,13 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD
document.body.classList.add('layout-' + mode); document.body.classList.add('layout-' + mode);
resetSplitting(); resetSplitting();
scope.setPreviewContent(); scope.setPreviewContent(true);
} }
function onExternalLibChange() { function onExternalLibChange() {
utils.log('onExternalLibChange'); utils.log('onExternalLibChange');
updateExternalLibUi(); updateExternalLibUi();
scope.setPreviewContent(); scope.setPreviewContent(true);
} }
function updateExternalLibUi() { function updateExternalLibUi() {
@ -615,7 +616,7 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD
}, ''); }, '');
var contents = '<html>\n<head>\n' var contents = '<html>\n<head>\n'
+ externalCss + '\n' + externalCss + '\n'
+ '<style>\n' + css + '\n</style>\n' + '<style id="webmakerstyle">\n' + css + '\n</style>\n'
+ '</head>\n' + '</head>\n'
+ '<body>\n' + html + '\n' + '<body>\n' + html + '\n'
+ externalJs + '\n<script>\n' + js + '\n//# sourceURL=userscript.js</script></body>\n</html>'; + externalJs + '\n<script>\n' + js + '\n//# sourceURL=userscript.js</script></body>\n</html>';
@ -663,13 +664,29 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD
}, errorHandler); }, errorHandler);
} }
scope.setPreviewContent = function () { scope.setPreviewContent = function (isForced) {
var htmlPromise = computeHtml(); var currentCode = {
var cssPromise = computeCss(); html: scope.cm.html.getValue(),
var jsPromise = computeJs(); css: scope.cm.css.getValue(),
Promise.all([htmlPromise, cssPromise, jsPromise]).then(function (result) { js: scope.cm.js.getValue()
createPreviewFile(result[0], result[1], result[2]); };
}); // 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() { function saveFile() {