diff --git a/src/index.html b/src/index.html index 8634359..c9888da 100644 --- a/src/index.html +++ b/src/index.html @@ -506,6 +506,7 @@ + @@ -515,14 +516,10 @@ - - - - - + diff --git a/src/loader.js b/src/loader.js index f527f8f..c113ac7 100644 --- a/src/loader.js +++ b/src/loader.js @@ -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 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 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; -}; \ No newline at end of file + + 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); \ No newline at end of file diff --git a/src/script.js b/src/script.js index 7876804..8131166 100644 --- a/src/script.js +++ b/src/script.js @@ -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; });