mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-08-02 11:30:22 +02:00
Code Issues Releases Wiki Activity

lazy load compiler scripts.

Browse Source
This commit is contained in:
Kushagra Gour
2016-07-15 00:52:04 +05:30
parent f9158b163b
commit e497223db5
3 changed files with 108 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/index.html
View File

@@ -506,6 +506,7 @@
<script src="lib/codemirror/addon/edit/matchbrackets.js"></script>
<script src="lib/codemirror/addon/edit/closebrackets.js"></script>
<script src="lib/codemirror/addon/edit/closetag.js"></script>
<script src="lib/codemirror/addon/comment/comment.js"></script>
<script src="lib/codemirror/addon/mode/loadmode.js"></script>
<script src="lib/codemirror/mode/xml/xml.js"></script>
@@ -515,14 +516,10 @@
<script src="lib/codemirror/keymap/sublime.js"></script>
<script src="lib/emmet.js"></script>
<script src="lib/sass.js"></script>
<script src="lib/less.min.js"></script>
<script src="lib/babel.min.js"></script>
<script src="lib/coffee-script.js"></script>
<script src="lib/split.js"></script>
<script src="deferred.js"></script>
<script src="loader.js"></script>
<script src="script.js"></script>
<script src="dropdown.js"></script>

146
src/loader.js
View File

@@ -1,81 +1,85 @@
// https://github.com/filamentgroup/loadCSS/blob/master/src/loadCSS.js
var loadCSS = function( href, before, media ){
// Arguments explained:
// `href` [REQUIRED] is the URL for your CSS file.
// `before` [OPTIONAL] is the element the script should use as a reference for injecting our stylesheet <link> before
// By default, loadCSS attempts to inject the link after the last stylesheet or script in the DOM. However, you might desire a more specific location in your document.
// `media` [OPTIONAL] is the media type or query of the stylesheet. By default it will be 'all'
var doc = w.document;
var ss = doc.createElement( "link" );
var ref;
if( before ){
ref = before;
}
else {
var refs = ( doc.body || doc.getElementsByTagName( "head" )[ 0 ] ).childNodes;
ref = refs[ refs.length - 1];
}
(function(w) {
var sheets = doc.styleSheets;
ss.rel = "stylesheet";
ss.href = href;
// temporarily set media to something inapplicable to ensure it'll fetch without blocking render
ss.media = "only x";
// wait until body is defined before injecting link. This ensures a non-blocking load in IE11.
function ready( cb ){
if( doc.body ){
return cb();
// https://github.com/filamentgroup/loadCSS/blob/master/src/loadCSS.js
window.loadCSS = function( href, before, media ){
// Arguments explained:
// `href` [REQUIRED] is the URL for your CSS file.
// `before` [OPTIONAL] is the element the script should use as a reference for injecting our stylesheet <link> before
// By default, loadCSS attempts to inject the link after the last stylesheet or script in the DOM. However, you might desire a more specific location in your document.
// `media` [OPTIONAL] is the media type or query of the stylesheet. By default it will be 'all'
var doc = w.document;
var ss = doc.createElement( "link" );
var ref;
if( before ){
ref = before;
}
setTimeout(function(){
ready( cb );
});
}
// Inject link
// Note: the ternary preserves the existing behavior of "before" argument, but we could choose to change the argument to "after" in a later release and standardize on ref.nextSibling for all refs
// Note: `insertBefore` is used instead of `appendChild`, for safety re: http://www.paulirish.com/2011/surefire-dom-element-insertion/
ready( function(){
ref.parentNode.insertBefore( ss, ( before ? ref : ref.nextSibling ) );
});
// A method (exposed on return object for external use) that mimics onload by polling document.styleSheets until it includes the new sheet.
var onloadcssdefined = function( cb ){
var resolvedHref = ss.href;
var i = sheets.length;
while( i-- ){
if( sheets[ i ].href === resolvedHref ){
else {
var refs = ( doc.body || doc.getElementsByTagName( "head" )[ 0 ] ).childNodes;
ref = refs[ refs.length - 1];
}
var sheets = doc.styleSheets;
ss.rel = "stylesheet";
ss.href = href;
// temporarily set media to something inapplicable to ensure it'll fetch without blocking render
ss.media = "only x";
// wait until body is defined before injecting link. This ensures a non-blocking load in IE11.
function ready( cb ){
if( doc.body ){
return cb();
}
setTimeout(function(){
ready( cb );
});
}
setTimeout(function() {
onloadcssdefined( cb );
// Inject link
// Note: the ternary preserves the existing behavior of "before" argument, but we could choose to change the argument to "after" in a later release and standardize on ref.nextSibling for all refs
// Note: `insertBefore` is used instead of `appendChild`, for safety re: http://www.paulirish.com/2011/surefire-dom-element-insertion/
ready( function(){
ref.parentNode.insertBefore( ss, ( before ? ref : ref.nextSibling ) );
});
};
// A method (exposed on return object for external use) that mimics onload by polling document.styleSheets until it includes the new sheet.
var onloadcssdefined = function( cb ){
var resolvedHref = ss.href;
var i = sheets.length;
while( i-- ){
if( sheets[ i ].href === resolvedHref ){
return cb();
}
}
setTimeout(function() {
onloadcssdefined( cb );
});
};
function loadCB(){
if( ss.addEventListener ){
ss.removeEventListener( "load", loadCB );
function loadCB(){
if( ss.addEventListener ){
ss.removeEventListener( "load", loadCB );
}
ss.media = media || "all";
}
ss.media = media || "all";
}
// once loaded, set link's media back to `all` so that the stylesheet applies once it loads
if( ss.addEventListener ){
ss.addEventListener( "load", loadCB);
}
ss.onloadcssdefined = onloadcssdefined;
onloadcssdefined( loadCB );
return true;
};
var loadJS = function( src, cb ) {
var d = deferred();
var ref = w.document.getElementsByTagName( "script" )[ 0 ];
var script = w.document.createElement( "script" );
script.src = src;
script.async = true;
ref.parentNode.insertBefore( script, ref );
script.onload = function () {
d.resolve();
// once loaded, set link's media back to `all` so that the stylesheet applies once it loads
if( ss.addEventListener ){
ss.addEventListener( "load", loadCB);
}
ss.onloadcssdefined = onloadcssdefined;
onloadcssdefined( loadCB );
return true;
};
return d.promise;
};
window.loadJS = function( src, cb ) {
var d = deferred();
var ref = w.document.getElementsByTagName( "script" )[ 0 ];
var script = w.document.createElement( "script" );
script.src = src;
script.async = true;
ref.parentNode.insertBefore( script, ref );
script.onload = function () {
d.resolve();
};
return d.promise;
};
})(window);

33
src/script.js
View File

@@ -14,7 +14,7 @@
COFFEESCRIPT: 'coffee'
};
var CssModes = {
CSS: 'js',
CSS: 'css',
SCSS: 'scss',
LESS: 'less'
};
@@ -122,9 +122,35 @@
saveSetting('code', code);
}
/**
* Loaded the code comiler based on the mode selected
*/
function handleModeRequirements(mode) {
// Exit if already loaded
if (modes[mode].hasLoaded) { return; }
function setLoadedFlag() {
modes[mode].hasLoaded = true;
}
if (mode === CssModes.LESS) {
loadJS('lib/less.min.js').then(setLoadedFlag);
} else if (mode === CssModes.SCSS) {
loadJS('lib/sass.js').then(function () {
window.sass = new Sass('lib/sass.worker.js');
setLoadedFlag();
});
} else if (mode === JsModes.COFFEESCRIPT) {
loadJS('lib/coffee-script.js').then(setLoadedFlag);
} else if (mode === JsModes.ES6) {
loadJS('lib/babel.min.js').then(setLoadedFlag);
}
}
function updateCssMode(value) {
cssMode = value;
cssModelLabel.textContent = modes[value].label;
handleModeRequirements(value);
CodeMirror.autoLoadMode(editur.cm.css, modes[value].cmMode);
chrome.storage.sync.set({
cssMode: value
@@ -133,11 +159,15 @@
function updateJsMode(value) {
jsMode = value;
jsModelLabel.textContent = modes[value].label;
handleModeRequirements(value);
CodeMirror.autoLoadMode(editur.cm.js, modes[value].cmMode);
chrome.storage.sync.set({
jsMode: value
}, function () {});
}
// computeHtml, computeCss & computeJs evaluate the final code according
// to whatever mode is selected and resolve the returned promise with the code.
function computeHtml() {
return editur.cm.html.getValue();
}
@@ -276,7 +306,6 @@
var lastCode;
CodeMirror.modeURL = "lib/codemirror/mode/%N/%N.js";
window.sass = new Sass('lib/sass.worker.js');
layoutBtn1.addEventListener('click', function () { saveSetting('layoutMode', 1); toggleLayout(1); return false; });
layoutBtn2.addEventListener('click', function () { saveSetting('layoutMode', 2); toggleLayout(2); return false; });