From d767ad7a8c577d657ff9a27eeefdd01cba99a543 Mon Sep 17 00:00:00 2001 From: tophf Date: Wed, 22 Nov 2017 03:38:29 +0300 Subject: [PATCH] autoLoadMode -> loadScript; chain to avoid flicker on load --- edit.html | 2 - edit/codemirror-default.js | 10 ++-- edit/source-editor.js | 25 ++++----- install-usercss.html | 2 +- vendor/codemirror/addon/mode/loadmode.js | 64 ------------------------ 5 files changed, 19 insertions(+), 84 deletions(-) delete mode 100644 vendor/codemirror/addon/mode/loadmode.js diff --git a/edit.html b/edit.html index c5462681..34b695de 100644 --- a/edit.html +++ b/edit.html @@ -57,8 +57,6 @@ - - diff --git a/edit/codemirror-default.js b/edit/codemirror-default.js index e642ca3e..a46dba00 100644 --- a/edit/codemirror-default.js +++ b/edit/codemirror-default.js @@ -1,4 +1,4 @@ -/* global CodeMirror prefs */ +/* global CodeMirror prefs loadScript */ 'use strict'; @@ -100,16 +100,16 @@ }); } - CodeMirror.modeURL = '/vendor/codemirror/mode/%N/%N.js'; - const MODE = { stylus: 'stylus', uso: 'css' }; CodeMirror.defineExtension('setPreprocessor', function (preprocessor) { - this.setOption('mode', MODE[preprocessor] || 'css'); - CodeMirror.autoLoadMode(this, MODE[preprocessor] || 'css'); + const mode = MODE[preprocessor] || 'css'; + return loadScript(mode !== 'css' && `/vendor/codemirror/mode/${mode}/${mode}.js`).then(() => { + this.setOption('mode', mode); + }); }); CodeMirror.defineExtension('isBlank', function () { diff --git a/edit/source-editor.js b/edit/source-editor.js index 7ad3d326..5cdd60d2 100644 --- a/edit/source-editor.js +++ b/edit/source-editor.js @@ -44,22 +44,23 @@ function createSourceEditor(style) { const cm = CodeMirror.fromTextArea($('#sections textarea')); cm.startOperation(); - cm.setValue(style.sourceCode); - cm.clearHistory(); - cm.markClean(); - editors.push(cm); - updateMeta(); - cm.endOperation(); + updateMeta().then(() => { + cm.setValue(style.sourceCode); + cm.clearHistory(); + cm.markClean(); + editors.push(cm); + cm.endOperation(); - initHooks(); - initAppliesToLineWidget(); + initHooks(); + initAppliesToLineWidget(); + + // focus must be the last action, otherwise the style is duplicated on saving + cm.focus(); + }); initLint(); initLinterSwitch(); - // focus must be the last action, otherwise the style is duplicated on saving - cm.focus(); - function initAppliesToLineWidget() { const PREF_NAME = 'editor.appliesToLineWidget'; const widget = createAppliesToLineWidget(cm); @@ -183,10 +184,10 @@ ${section} $('#enabled').checked = style.enabled; $('#url').href = style.url; const {usercssData: {preprocessor} = {}} = style; - cm.setPreprocessor(preprocessor); // beautify only works with regular CSS $('#beautify').disabled = cm.getOption('mode') !== 'css'; updateTitle(); + return cm.setPreprocessor(preprocessor); } function updateTitle() { diff --git a/install-usercss.html b/install-usercss.html index ca301b1d..b8b473d7 100644 --- a/install-usercss.html +++ b/install-usercss.html @@ -12,6 +12,7 @@ + @@ -47,7 +48,6 @@ -
diff --git a/vendor/codemirror/addon/mode/loadmode.js b/vendor/codemirror/addon/mode/loadmode.js deleted file mode 100644 index 10117ec2..00000000 --- a/vendor/codemirror/addon/mode/loadmode.js +++ /dev/null @@ -1,64 +0,0 @@ -// CodeMirror, copyright (c) by Marijn Haverbeke and others -// Distributed under an MIT license: http://codemirror.net/LICENSE - -(function(mod) { - if (typeof exports == "object" && typeof module == "object") // CommonJS - mod(require("../../lib/codemirror"), "cjs"); - else if (typeof define == "function" && define.amd) // AMD - define(["../../lib/codemirror"], function(CM) { mod(CM, "amd"); }); - else // Plain browser env - mod(CodeMirror, "plain"); -})(function(CodeMirror, env) { - if (!CodeMirror.modeURL) CodeMirror.modeURL = "../mode/%N/%N.js"; - - var loading = {}; - function splitCallback(cont, n) { - var countDown = n; - return function() { if (--countDown == 0) cont(); }; - } - function ensureDeps(mode, cont) { - var deps = CodeMirror.modes[mode].dependencies; - if (!deps) return cont(); - var missing = []; - for (var i = 0; i < deps.length; ++i) { - if (!CodeMirror.modes.hasOwnProperty(deps[i])) - missing.push(deps[i]); - } - if (!missing.length) return cont(); - var split = splitCallback(cont, missing.length); - for (var i = 0; i < missing.length; ++i) - CodeMirror.requireMode(missing[i], split); - } - - CodeMirror.requireMode = function(mode, cont) { - if (typeof mode != "string") mode = mode.name; - if (CodeMirror.modes.hasOwnProperty(mode)) return ensureDeps(mode, cont); - if (loading.hasOwnProperty(mode)) return loading[mode].push(cont); - - var file = CodeMirror.modeURL.replace(/%N/g, mode); - if (env == "plain") { - var script = document.createElement("script"); - script.src = file; - var others = document.getElementsByTagName("script")[0]; - var list = loading[mode] = [cont]; - CodeMirror.on(script, "load", function() { - ensureDeps(mode, function() { - for (var i = 0; i < list.length; ++i) list[i](); - }); - }); - others.parentNode.insertBefore(script, others); - } else if (env == "cjs") { - require(file); - cont(); - } else if (env == "amd") { - requirejs([file], cont); - } - }; - - CodeMirror.autoLoadMode = function(instance, mode) { - if (!CodeMirror.modes.hasOwnProperty(mode)) - CodeMirror.requireMode(mode, function() { - instance.setOption("mode", instance.getOption("mode")); - }); - }; -});