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; });