add a theme selector

This commit is contained in:
ansuz 2016-06-29 11:51:53 +02:00
parent dc8e36bf20
commit fb2ca04c34
2 changed files with 112 additions and 5 deletions

View File

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

56
www/code/themes.js Normal file
View File

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