open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

autoLoadMode -> loadScript; chain to avoid flicker on load

Browse Source
This commit is contained in:
tophf 2017-11-22 03:38:29 +03:00
parent 786cde781d
commit d767ad7a8c
5 changed files with 19 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
edit.html
View File

@ -57,8 +57,6 @@
<script src="vendor/codemirror/addon/hint/show-hint.js"></script> <script src="vendor/codemirror/addon/hint/show-hint.js"></script>
<script src="vendor/codemirror/addon/hint/css-hint.js"></script> <script src="vendor/codemirror/addon/hint/css-hint.js"></script>
<script src="vendor/codemirror/addon/mode/loadmode.js"></script>
<script src="vendor/codemirror/keymap/sublime.js"></script> <script src="vendor/codemirror/keymap/sublime.js"></script>
<script src="vendor/codemirror/keymap/emacs.js"></script> <script src="vendor/codemirror/keymap/emacs.js"></script>
<script src="vendor/codemirror/keymap/vim.js"></script> <script src="vendor/codemirror/keymap/vim.js"></script>

10
edit/codemirror-default.js
View File

@ -1,4 +1,4 @@
/* global CodeMirror prefs */ /* global CodeMirror prefs loadScript */
'use strict'; 'use strict';
@ -100,16 +100,16 @@
}); });
} }
CodeMirror.modeURL = '/vendor/codemirror/mode/%N/%N.js';
const MODE = { const MODE = {
stylus: 'stylus', stylus: 'stylus',
uso: 'css' uso: 'css'
}; };
CodeMirror.defineExtension('setPreprocessor', function (preprocessor) { CodeMirror.defineExtension('setPreprocessor', function (preprocessor) {
this.setOption('mode', MODE[preprocessor] || 'css'); const mode = MODE[preprocessor] || 'css';
CodeMirror.autoLoadMode(this, MODE[preprocessor] || 'css'); return loadScript(mode !== 'css' && `/vendor/codemirror/mode/${mode}/${mode}.js`).then(() => {
this.setOption('mode', mode);
});
}); });
CodeMirror.defineExtension('isBlank', function () { CodeMirror.defineExtension('isBlank', function () {

25
edit/source-editor.js
View File

@ -44,22 +44,23 @@ function createSourceEditor(style) {
const cm = CodeMirror.fromTextArea($('#sections textarea')); const cm = CodeMirror.fromTextArea($('#sections textarea'));
cm.startOperation(); cm.startOperation();
cm.setValue(style.sourceCode); updateMeta().then(() => {
cm.clearHistory(); cm.setValue(style.sourceCode);
cm.markClean(); cm.clearHistory();
editors.push(cm); cm.markClean();
updateMeta(); editors.push(cm);
cm.endOperation(); cm.endOperation();
initHooks(); initHooks();
initAppliesToLineWidget(); initAppliesToLineWidget();
// focus must be the last action, otherwise the style is duplicated on saving
cm.focus();
});
initLint(); initLint();
initLinterSwitch(); initLinterSwitch();
// focus must be the last action, otherwise the style is duplicated on saving
cm.focus();
function initAppliesToLineWidget() { function initAppliesToLineWidget() {
const PREF_NAME = 'editor.appliesToLineWidget'; const PREF_NAME = 'editor.appliesToLineWidget';
const widget = createAppliesToLineWidget(cm); const widget = createAppliesToLineWidget(cm);
@ -183,10 +184,10 @@ ${section}
$('#enabled').checked = style.enabled; $('#enabled').checked = style.enabled;
$('#url').href = style.url; $('#url').href = style.url;
const {usercssData: {preprocessor} = {}} = style; const {usercssData: {preprocessor} = {}} = style;
cm.setPreprocessor(preprocessor);
// beautify only works with regular CSS // beautify only works with regular CSS
$('#beautify').disabled = cm.getOption('mode') !== 'css'; $('#beautify').disabled = cm.getOption('mode') !== 'css';
updateTitle(); updateTitle();
return cm.setPreprocessor(preprocessor);
} }
function updateTitle() { function updateTitle() {

2
install-usercss.html
View File

@ -12,6 +12,7 @@
<script src="/js/localization.js"></script> <script src="/js/localization.js"></script>
<script src="/content/apply.js"></script> <script src="/content/apply.js"></script>
<script src="/vendor/node-semver/semver.js"></script> <script src="/vendor/node-semver/semver.js"></script>
<script src="js/script-loader.js"></script>
<script src="/msgbox/msgbox.js"></script> <script src="/msgbox/msgbox.js"></script>
<link rel="stylesheet" href="/msgbox/msgbox.css"></script> <link rel="stylesheet" href="/msgbox/msgbox.css"></script>
@ -47,7 +48,6 @@
<link rel="stylesheet" href="/vendor/codemirror/addon/hint/show-hint.css" /> <link rel="stylesheet" href="/vendor/codemirror/addon/hint/show-hint.css" />
<script src="/vendor/codemirror/addon/hint/show-hint.js"></script> <script src="/vendor/codemirror/addon/hint/show-hint.js"></script>
<script src="/vendor/codemirror/addon/hint/css-hint.js"></script> <script src="/vendor/codemirror/addon/hint/css-hint.js"></script>
<script src="/vendor/codemirror/addon/mode/loadmode.js"></script>
</head> </head>
<body> <body>
<div class="container"> <div class="container">

64
vendor/codemirror/addon/mode/loadmode.js vendored
View File

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