mirror of https://github.com/shadowfacts/type.git
Editor theme selector
This commit is contained in:
parent
cc579416aa
commit
0a72bab1d5
GPG Key ID:
94A5AB95422746E5
49
index.html
49
index.html
|
|
@ -11,6 +11,55 @@
|
|||
<select id="language">
|
||||
<option value="auto-detect">Auto-Detect</option>
|
||||
</select>
|
||||
<select id="theme">
|
||||
<option value="default">Default</option>
|
||||
<option value="3024-day">3024 Day</option>
|
||||
<option value="3024-night">3024 Night</option>
|
||||
<option value="abcdef">abcdef</option>
|
||||
<option value="ambiance-mobile">Ambiance Mobile</option>
|
||||
<option value="ambiance">Ambiance</option>
|
||||
<option value="base16-dark">Base16 Dark</option>
|
||||
<option value="base16-light">Base16 Light</option>
|
||||
<option value="bespin">Bespin</option>
|
||||
<option value="blackboard">Blackboard</option>
|
||||
<option value="cobalt">Cobalt</option>
|
||||
<option value="colorforth">Colorforth</option>
|
||||
<option value="dracula">Dracula</option>
|
||||
<option value="eclipse">Eclipse</option>
|
||||
<option value="elegant">Elegant</option>
|
||||
<option value="erlang-dark">Erlang Dark</option>
|
||||
<option value="hopscotch">Hopscotch</option>
|
||||
<option value="icecoder">Icecoder</option>
|
||||
<option value="isotope">Isotope</option>
|
||||
<option value="lesser-dark">Lesser Dark</option>
|
||||
<option value="liquibyte">Liquibyte</option>
|
||||
<option value="material">Material</option>
|
||||
<option value="mbo">mbo</option>
|
||||
<option value="mdn-like">MDN Like</option>
|
||||
<option value="midnight">Midnight</option>
|
||||
<option value="monokai">Monokai</option>
|
||||
<option value="neat">Neat</option>
|
||||
<option value="neo">Neo</option>
|
||||
<option value="night">Night</option>
|
||||
<option value="panda-syntax">Panda Syntax</option>
|
||||
<option value="paraiso-dark">Paraiso Dark</option>
|
||||
<option value="paraiso-light">Pairaiso Light</option>
|
||||
<option value="pastel-on-dark">Pastel on Dark</option>
|
||||
<option value="railscasts">Railscasts</option>
|
||||
<option value="rubyblue">Ruby Blue</option>
|
||||
<option value="seti">Seti</option>
|
||||
<option value="solarized">Solarized</option>
|
||||
<option value="the-matrix">The Matrix</option>
|
||||
<option value="tomorrow-night-bright">Tomorrow Night Bright</option>
|
||||
<option value="tomorrow-night-eighties">Tomorrow Night Eighties</option>
|
||||
<option value="ttcn">ttcn</option>
|
||||
<option value="twilight">Twilight</option>
|
||||
<option value="vibrant-ink">Vibrant Ink</option>
|
||||
<option value="xq-dark">XQ Dark</option>
|
||||
<option value="xq-light">XQ Light</option>
|
||||
<option value="yeti">Yeti</option>
|
||||
<option value="zenburn">Zenburn</option>
|
||||
</select>
|
||||
|
||||
<textarea id="editor"></textarea>
|
||||
|
||||
|
|
|
|||
34
main.js
34
main.js
|
|
@ -23,6 +23,7 @@ $.get({
|
|||
}
|
||||
});
|
||||
|
||||
// language selector
|
||||
let langaugeSelector = $("#language");
|
||||
langaugeSelector.change(() => {
|
||||
let selected = langaugeSelector.val();
|
||||
|
|
@ -38,6 +39,13 @@ for (key in languages) {
|
|||
langaugeSelector.append(`<option value="${key}">${key}</option>`);
|
||||
}
|
||||
|
||||
// theme selector
|
||||
let themeSelector = $("#theme");
|
||||
themeSelector.change(() => {
|
||||
setTheme(themeSelector.val());
|
||||
save();
|
||||
});
|
||||
|
||||
// setup
|
||||
function setup(data, mime) {
|
||||
let el = document.getElementById("editor");
|
||||
|
|
@ -259,6 +267,7 @@ function load() {
|
|||
.then((val) => {
|
||||
loadInvalids(val[filePath]);
|
||||
loadCursor(val[filePath]);
|
||||
loadTheme(val[filePath]);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -266,6 +275,7 @@ function save() {
|
|||
let obj = {};
|
||||
saveInvalids(obj);
|
||||
saveCursor(obj);
|
||||
saveTheme(obj);
|
||||
localforage.getItem(repo)
|
||||
.then((val) => {
|
||||
if (!val) val = {};
|
||||
|
|
@ -280,10 +290,10 @@ function save() {
|
|||
});
|
||||
}
|
||||
|
||||
function loadInvalids(val) {
|
||||
if (val && val.invalids) {
|
||||
function loadInvalids(obj) {
|
||||
if (obj && obj.invalids) {
|
||||
editor.operation(() => { // buffer all DOM changes together b/c performance
|
||||
val.invalids.forEach(markInvalid);
|
||||
obj.invalids.forEach(markInvalid);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -307,6 +317,17 @@ function saveInvalids(obj) {
|
|||
obj.invalids = serialized;
|
||||
}
|
||||
|
||||
function loadTheme(obj) {
|
||||
if (obj && obj.theme) {
|
||||
themeSelector.val(obj.theme);
|
||||
setTheme(obj.theme);
|
||||
}
|
||||
}
|
||||
|
||||
function saveTheme(obj) {
|
||||
obj.theme = themeSelector.val();
|
||||
}
|
||||
|
||||
function loadCursor(val) {
|
||||
editor.setCursor(val && val.cursor ? val.cursor : { line: 0, ch: 0 });
|
||||
}
|
||||
|
|
@ -315,6 +336,13 @@ function saveCursor(obj) {
|
|||
obj.cursor = editor.getCursor();
|
||||
}
|
||||
|
||||
function setTheme(theme) {
|
||||
if (theme != "default") {
|
||||
$("head").append(`<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.19.0/theme/${theme}.min.css">`);
|
||||
}
|
||||
editor.setOption("theme", theme);
|
||||
}
|
||||
|
||||
String.prototype.hasOnlyWhiteSpaceBeforeIndex = function(index) {
|
||||
return this.substring(index) == this.trim();
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue