diff --git a/src/deferred.js b/src/deferred.js
new file mode 100644
index 0000000..ca39ced
--- /dev/null
+++ b/src/deferred.js
@@ -0,0 +1,10 @@
+function deferred() {
+ var d = {};
+ var promise = new Promise(function (resolve, reject) {
+ d.resolve = resolve;
+ d.reject = reject;
+ });
+
+ d.promise = promise;
+ return Object.assign(d, promise);
+}
\ No newline at end of file
diff --git a/src/dropdown.js b/src/dropdown.js
new file mode 100644
index 0000000..39846d0
--- /dev/null
+++ b/src/dropdown.js
@@ -0,0 +1,30 @@
+// Dropdown.js
+
+(function($all) {
+ var openDropdown;
+
+ // Closes all dropdowns except the passed one.
+ function closeOpenDropdown(except) {
+ if (openDropdown && (!except || except !== openDropdown)) {
+ openDropdown.classList.remove('open');
+ openDropdown = null;
+ }
+ }
+ function init() {
+ var dropdowns = [].slice.call($all('[dropdown]'));
+ dropdowns.forEach(function (dropdown) {
+ dropdown.addEventListener('click', function (e) {
+ closeOpenDropdown(e.currentTarget);
+ e.currentTarget.classList.toggle('open');
+ openDropdown = e.currentTarget;
+ e.stopPropagation();
+ });
+ });
+
+ document.addEventListener('click', function () {
+ closeOpenDropdown();
+ });
+ }
+
+ init();
+})($all);
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 8a9a878..e08bfa2 100644
--- a/src/index.html
+++ b/src/index.html
@@ -496,6 +496,7 @@
+
@@ -511,6 +512,7 @@
+
diff --git a/src/loader.js b/src/loader.js
new file mode 100644
index 0000000..f527f8f
--- /dev/null
+++ b/src/loader.js
@@ -0,0 +1,81 @@
+// 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];
+ }
+
+ 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 );
+ });
+ }
+ // 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 );
+ }
+ 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();
+ };
+ return d.promise;
+};
\ No newline at end of file
diff --git a/src/script.js b/src/script.js
index b019aca..7876804 100644
--- a/src/script.js
+++ b/src/script.js
@@ -18,6 +18,14 @@
SCSS: 'scss',
LESS: 'less'
};
+ var modes = {};
+ modes[JsModes.JS] = { label: 'JS', cmMode: 'javascript' };
+ modes[JsModes.COFFEESCRIPT] = { label: 'CoffeeScript', cmMode: 'coffeescript' };
+ modes[JsModes.ES6] = { label: 'ES6 (Babel)', cmMode: 'javascript' };
+ modes[CssModes.CSS] = { label: 'CSS', cmMode: 'css' };
+ modes[CssModes.SCSS] = { label: 'SCSS', cmMode: 'sass' };
+ modes[CssModes.LESS] = { label: 'LESS', cmMode: 'css' };
+
var updateTimer
, updateDelay = 500
, currentLayoutMode
@@ -61,16 +69,6 @@
}
return 0;
}
- function deferred() {
- var d = {};
- var promise = new Promise(function (resolve, reject) {
- d.resolve = resolve;
- d.reject = reject;
- });
-
- d.promise = promise;
- return Object.assign(d, promise);
- }
function resetSplitting() {
var gutters = $all('.gutter');
@@ -126,16 +124,16 @@
function updateCssMode(value) {
cssMode = value;
- cssModelLabel.textContent = value;
- editur.cm.css.setOption('mode', value);
+ cssModelLabel.textContent = modes[value].label;
+ CodeMirror.autoLoadMode(editur.cm.css, modes[value].cmMode);
chrome.storage.sync.set({
cssMode: value
}, function () {});
}
function updateJsMode(value) {
jsMode = value;
- jsModelLabel.textContent = value;
- editur.cm.js.setOption('mode', value);
+ jsModelLabel.textContent = modes[value].label;
+ CodeMirror.autoLoadMode(editur.cm.js, modes[value].cmMode);
chrome.storage.sync.set({
jsMode: value
}, function () {});
@@ -277,6 +275,7 @@
function init () {
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; });