From 5cfea4d0ca4f6fc51ba1970113f3689ba46c7e46 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Thu, 14 Jul 2016 03:48:12 +0530 Subject: [PATCH] add on demand mode loading to cm. --- src/deferred.js | 10 ++++++ src/dropdown.js | 30 ++++++++++++++++++ src/index.html | 2 ++ src/loader.js | 81 +++++++++++++++++++++++++++++++++++++++++++++++++ src/script.js | 27 ++++++++--------- 5 files changed, 136 insertions(+), 14 deletions(-) create mode 100644 src/deferred.js create mode 100644 src/dropdown.js create mode 100644 src/loader.js 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; });