add a theme selector
ansuz
parent
dc8e36bf20
commit
fb2ca04c34
|
|
@ -10,10 +10,11 @@ define([
|
|||
'/bower_components/chainpad-json-validator/json-ot.js',
|
||||
'/common/cryptpad-common.js',
|
||||
'/code/modes.js',
|
||||
'/code/themes.js',
|
||||
'/bower_components/file-saver/FileSaver.min.js',
|
||||
'/bower_components/jquery/dist/jquery.min.js',
|
||||
'/customize/pad.js'
|
||||
], function (Config, /*RTCode,*/ Messages, Crypto, Realtime, TextPatcher, Toolbar, JSONSortify, JsonOT, Cryptpad, Modes) {
|
||||
], function (Config, /*RTCode,*/ Messages, Crypto, Realtime, TextPatcher, Toolbar, JSONSortify, JsonOT, Cryptpad, Modes, Themes) {
|
||||
var $ = window.jQuery;
|
||||
var saveAs = window.saveAs;
|
||||
var module = window.APP = {};
|
||||
|
|
@ -51,15 +52,46 @@ define([
|
|||
readOnly: true
|
||||
});
|
||||
|
||||
var setMode = module.setMode = function (mode) {
|
||||
var setMode = module.setMode = function (mode, $select) {
|
||||
if (mode === 'text') {
|
||||
editor.setOption('mode', 'text');
|
||||
return;
|
||||
}
|
||||
CodeMirror.autoLoadMode(editor, mode);
|
||||
editor.setOption('mode', mode);
|
||||
if ($select && select.val) { $select.val(mode); }
|
||||
};
|
||||
|
||||
|
||||
var setTheme = module.setTheme = (function () {
|
||||
var path = './theme/';
|
||||
|
||||
var $head = $(ifrw.document.head);
|
||||
|
||||
var themeLoaded = module.themeLoaded = function (theme) {
|
||||
return $head.find('link[href*="'+theme+'"]').length;
|
||||
};
|
||||
|
||||
var loadTheme = module.loadTheme = function (theme) {
|
||||
$head.append($('<link />', {
|
||||
rel: 'stylesheet',
|
||||
href: path + theme + '.css',
|
||||
}));
|
||||
};
|
||||
|
||||
return function (theme, $select) {
|
||||
if (!theme) {
|
||||
editor.setOption('theme', 'default');
|
||||
} else {
|
||||
if (!themeLoaded(theme)) {
|
||||
loadTheme(theme);
|
||||
}
|
||||
editor.setOption('theme', theme);
|
||||
}
|
||||
if ($select && select.val) { $select.val(theme || 'default'); }
|
||||
};
|
||||
}());
|
||||
|
||||
var setEditable = module.setEditable = function (bool) {
|
||||
editor.setOption('readOnly', !bool);
|
||||
};
|
||||
|
|
@ -177,21 +209,40 @@ define([
|
|||
onLocal();
|
||||
}));
|
||||
|
||||
var dropdown = '<select id="language-mode">\n' +
|
||||
var syntaxDropdown = '<select id="language-mode">\n' +
|
||||
Modes.map(function (o) {
|
||||
var selected = o.mode === 'javascript'? ' selected="selected"' : '';
|
||||
return '<option value="' + o.mode + '"'+selected+'>' + o.language + '</option>';
|
||||
}).join('\n') +
|
||||
'</select>';
|
||||
|
||||
var themeDropdown = '<select id="display-theme">\n' +
|
||||
Themes.map(function (o) {
|
||||
var selected = o.name === 'default'? ' selected="selected"': '';
|
||||
return '<option value="' + o.name + '"'+selected+'>' + o.name + '</option>';
|
||||
}).join('\n') +
|
||||
'</select>';
|
||||
|
||||
$bar.find('.rtwysiwyg-toolbar-rightside').append(dropdown);
|
||||
$bar.find('.rtwysiwyg-toolbar-rightside')
|
||||
.append(syntaxDropdown);
|
||||
|
||||
var $language = $bar.find('#language-mode').on('change', function () {
|
||||
var $language = module.$language = $bar.find('#language-mode').on('change', function () {
|
||||
var mode = $language.val();
|
||||
setMode(mode);
|
||||
});
|
||||
|
||||
$bar.find('.rtwysiwyg-toolbar-rightside')
|
||||
.append(themeDropdown);
|
||||
|
||||
var $theme = $bar.find('select#display-theme');
|
||||
console.log($theme);
|
||||
|
||||
$theme.on('change', function () {
|
||||
var theme = $theme.val();
|
||||
console.log("Setting theme to %s", theme);
|
||||
setTheme(theme);
|
||||
});
|
||||
|
||||
window.location.hash = info.channel + secret.key;
|
||||
Cryptpad.rememberPad();
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,56 @@
|
|||
define(function () {
|
||||
return [
|
||||
"3024-day 3024-day.css",
|
||||
"3024-night 3024-night.css",
|
||||
"abcdef abcdef.css",
|
||||
"ambiance-mobile ambiance-mobile.css",
|
||||
"ambiance ambiance.css",
|
||||
"base16-dark base16-dark.css",
|
||||
"base16-light base16-light.css",
|
||||
"bespin bespin.css",
|
||||
"blackboard blackboard.css",
|
||||
"cobalt cobalt.css",
|
||||
"colorforth colorforth.css",
|
||||
"default default",
|
||||
"dracula dracula.css",
|
||||
"eclipse eclipse.css",
|
||||
"elegant elegant.css",
|
||||
"erlang-dark erlang-dark.css",
|
||||
"hopscotch hopscotch.css",
|
||||
"icecoder icecoder.css",
|
||||
"isotope isotope.css",
|
||||
"lesser-dark lesser-dark.css",
|
||||
"liquibyte liquibyte.css",
|
||||
"material material.css",
|
||||
"mbo mbo.css",
|
||||
"mdn-like mdn-like.css",
|
||||
"midnight midnight.css",
|
||||
"monokai monokai.css",
|
||||
"neat neat.css",
|
||||
"neo neo.css",
|
||||
"night night.css",
|
||||
"paraiso-dark paraiso-dark.css",
|
||||
"paraiso-light paraiso-light.css",
|
||||
"pastel-on-dark pastel-on-dark.css",
|
||||
"railscasts railscasts.css",
|
||||
"rubyblue rubyblue.css",
|
||||
"seti seti.css",
|
||||
"solarized solarized.css",
|
||||
"the-matrix the-matrix.css",
|
||||
"tomorrow-night-bright tomorrow-night-bright.css",
|
||||
"tomorrow-night-eighties tomorrow-night-eighties.css",
|
||||
"ttcn ttcn.css",
|
||||
"twilight twilight.css",
|
||||
"vibrant-ink vibrant-ink.css",
|
||||
"xq-dark xq-dark.css",
|
||||
"xq-light xq-light.css",
|
||||
"yeti yeti.css",
|
||||
"zenburn zenburn.css"
|
||||
].map(function (line) {
|
||||
var kv = line.split(/\s/);
|
||||
return {
|
||||
name: kv[0].replace(/_/g, ' '),
|
||||
theme: kv[1],
|
||||
};
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue