add a theme selector

www/code/main.js

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

www/code/themes.js

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