use ext/themelist.js in kitchen-sink demo
This commit is contained in:
nightwing
parent
4d88770435
commit
c563f15e93
5 changed files with 59 additions and 99 deletions
|
|
@ -65,6 +65,7 @@ var whitespace = require("ace/ext/whitespace");
|
|||
|
||||
var doclist = require("./doclist");
|
||||
var modelist = require("ace/ext/modelist");
|
||||
var themelist = require("ace/ext/themelist");
|
||||
var layout = require("./layout");
|
||||
var TokenTooltip = require("./token_tooltip").TokenTooltip;
|
||||
var util = require("./util");
|
||||
|
|
@ -370,6 +371,12 @@ function updateUIEditorOptions() {
|
|||
saveOption(behavioursEl, editor.getBehavioursEnabled());
|
||||
}
|
||||
|
||||
themelist.themes.forEach(function(x){ x.value = x.theme });
|
||||
fillDropdown(themeEl, {
|
||||
Bright: themelist.themes.filter(function(x){return !x.isDark}),
|
||||
Dark: themelist.themes.filter(function(x){return x.isDark}),
|
||||
});
|
||||
|
||||
event.addListener(themeEl, "mouseover", function(e){
|
||||
themeEl.desiredValue = e.target.value;
|
||||
if (!themeEl.$timer)
|
||||
|
|
@ -383,7 +390,7 @@ event.addListener(themeEl, "mouseout", function(e){
|
|||
});
|
||||
|
||||
themeEl.updateTheme = function(){
|
||||
env.split.setTheme(themeEl.desiredValue || themeEl.selectedValue);
|
||||
env.split.setTheme((themeEl.desiredValue || themeEl.selectedValue));
|
||||
themeEl.$timer = null;
|
||||
};
|
||||
|
||||
|
|
@ -588,4 +595,4 @@ env.editor.setOptions({
|
|||
enableSnippets: true
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -218,7 +218,7 @@ function optgroup(values) {
|
|||
return values.map(function(item) {
|
||||
if (typeof item == "string")
|
||||
item = {name: item, caption: item};
|
||||
return elt("option", {value: item.name}, item.caption || item.desc);
|
||||
return elt("option", {value: item.value || item.name}, item.caption || item.desc);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -63,40 +63,7 @@
|
|||
<label for="theme">Theme</label>
|
||||
</td><td>
|
||||
<select id="theme" size="1">
|
||||
<optgroup label="Bright">
|
||||
<option value="ace/theme/chrome">Chrome</option>
|
||||
<option value="ace/theme/clouds">Clouds</option>
|
||||
<option value="ace/theme/crimson_editor">Crimson Editor</option>
|
||||
<option value="ace/theme/dawn">Dawn</option>
|
||||
<option value="ace/theme/dreamweaver">Dreamweaver</option>
|
||||
<option value="ace/theme/eclipse">Eclipse</option>
|
||||
<option value="ace/theme/github">GitHub</option>
|
||||
<option value="ace/theme/solarized_light">Solarized Light</option>
|
||||
<option value="ace/theme/textmate" selected="selected">TextMate</option>
|
||||
<option value="ace/theme/tomorrow">Tomorrow</option>
|
||||
<option value="ace/theme/xcode">XCode</option>
|
||||
</optgroup>
|
||||
<optgroup label="Dark">
|
||||
<option value="ace/theme/ambiance">Ambiance</option>
|
||||
<option value="ace/theme/chaos">Chaos</option>
|
||||
<option value="ace/theme/clouds_midnight">Clouds Midnight</option>
|
||||
<option value="ace/theme/cobalt">Cobalt</option>
|
||||
<option value="ace/theme/idle_fingers">idleFingers</option>
|
||||
<option value="ace/theme/kr_theme">krTheme</option>
|
||||
<option value="ace/theme/merbivore">Merbivore</option>
|
||||
<option value="ace/theme/merbivore_soft">Merbivore Soft</option>
|
||||
<option value="ace/theme/mono_industrial">Mono Industrial</option>
|
||||
<option value="ace/theme/monokai">Monokai</option>
|
||||
<option value="ace/theme/pastel_on_dark">Pastel on dark</option>
|
||||
<option value="ace/theme/solarized_dark">Solarized Dark</option>
|
||||
<option value="ace/theme/terminal">Terminal</option>
|
||||
<option value="ace/theme/tomorrow_night">Tomorrow Night</option>
|
||||
<option value="ace/theme/tomorrow_night_blue">Tomorrow Night Blue</option>
|
||||
<option value="ace/theme/tomorrow_night_bright">Tomorrow Night Bright</option>
|
||||
<option value="ace/theme/tomorrow_night_eighties">Tomorrow Night 80s</option>
|
||||
<option value="ace/theme/twilight">Twilight</option>
|
||||
<option value="ace/theme/vibrant_ink">Vibrant Ink</option>
|
||||
</optgroup>
|
||||
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -44,35 +44,57 @@
|
|||
define(function(require, exports, module) {
|
||||
"use strict";
|
||||
|
||||
var themeData = [
|
||||
["Chrome" ],
|
||||
["Clouds" ],
|
||||
["Crimson Editor" ],
|
||||
["Dawn" ],
|
||||
["Dreamweaver" ],
|
||||
["Eclipse" ],
|
||||
["GitHub" ],
|
||||
["Solarized Light"],
|
||||
["TextMate" ],
|
||||
["Tomorrow" ],
|
||||
["XCode" ],
|
||||
["Kuroir"],
|
||||
["KatzenMilch"],
|
||||
["Ambiance" ,"ambiance" , "dark"],
|
||||
["Chaos" ,"chaos" , "dark"],
|
||||
["Clouds Midnight" ,"clouds_midnight" , "dark"],
|
||||
["Cobalt" ,"cobalt" , "dark"],
|
||||
["idle Fingers" ,"idle_fingers" , "dark"],
|
||||
["krTheme" ,"kr_theme" , "dark"],
|
||||
["Merbivore" ,"merbivore" , "dark"],
|
||||
["Merbivore Soft" ,"merbivore_soft" , "dark"],
|
||||
["Mono Industrial" ,"mono_industrial" , "dark"],
|
||||
["Monokai" ,"monokai" , "dark"],
|
||||
["Pastel on dark" ,"pastel_on_dark" , "dark"],
|
||||
["Solarized Dark" ,"solarized_dark" , "dark"],
|
||||
["Terminal" ,"terminal" , "dark"],
|
||||
["Tomorrow Night" ,"tomorrow_night" , "dark"],
|
||||
["Tomorrow Night Blue" ,"tomorrow_night_blue" , "dark"],
|
||||
["Tomorrow Night Bright","tomorrow_night_bright" , "dark"],
|
||||
["Tomorrow Night 80s" ,"tomorrow_night_eighties" , "dark"],
|
||||
["Twilight" ,"twilight" , "dark"],
|
||||
["Vibrant Ink" ,"vibrant_ink" , "dark"],
|
||||
]
|
||||
|
||||
|
||||
exports.themesByName = {};
|
||||
|
||||
/**
|
||||
* An array containing information about available themes.
|
||||
*/
|
||||
module.exports.themes = require('ace/ext/themelist_utils/themes').themes;
|
||||
|
||||
/**
|
||||
* Creates a theme description.
|
||||
* @param {string} name The file name of the theme.
|
||||
* @returns {ThemeDescription} Returns a theme description object which has
|
||||
* three properties: the name gives the filename, the desc gives a menu
|
||||
* friendly name, and the theme gives the string to set the theme with
|
||||
* `setTheme`
|
||||
*/
|
||||
module.exports.ThemeDescription = function(name) {
|
||||
this.name = name;
|
||||
this.desc = name.split('_'
|
||||
).map(
|
||||
function(namePart) {
|
||||
return namePart[0].toUpperCase() + namePart.slice(1);
|
||||
}
|
||||
).join(' ');
|
||||
this.theme = "ace/theme/" + name;
|
||||
};
|
||||
|
||||
module.exports.themesByName = {};
|
||||
|
||||
module.exports.themes = module.exports.themes.map(function(name) {
|
||||
module.exports.themesByName[name] = new module.exports.ThemeDescription(name);
|
||||
return module.exports.themesByName[name];
|
||||
exports.themes = themeData.map(function(data) {
|
||||
var name = data[1] || data[0].replace(/ /g, "_").toLowerCase();
|
||||
var theme = {
|
||||
caption: data[0],
|
||||
theme: "ace/theme/" + name,
|
||||
isDark: data[2] == "dark",
|
||||
name: name
|
||||
};
|
||||
exports.themesByName[name] = theme;
|
||||
return theme;
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,36 +0,0 @@
|
|||
define(function(require, exports, module) {
|
||||
|
||||
module.exports.themes = [
|
||||
"ambiance",
|
||||
"chaos",
|
||||
"chrome",
|
||||
"clouds",
|
||||
"clouds_midnight",
|
||||
"cobalt",
|
||||
"crimson_editor",
|
||||
"dawn",
|
||||
"dreamweaver",
|
||||
"eclipse",
|
||||
"github",
|
||||
"idle_fingers",
|
||||
"kr_theme",
|
||||
"merbivore",
|
||||
"merbivore_soft",
|
||||
"mono_industrial",
|
||||
"monokai",
|
||||
"pastel_on_dark",
|
||||
"solarized_dark",
|
||||
"solarized_light",
|
||||
"terminal",
|
||||
"textmate",
|
||||
"tomorrow",
|
||||
"tomorrow_night",
|
||||
"tomorrow_night_blue",
|
||||
"tomorrow_night_bright",
|
||||
"tomorrow_night_eighties",
|
||||
"twilight",
|
||||
"vibrant_ink",
|
||||
"xcode"
|
||||
];
|
||||
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue