Use the HTML5 color picker to change the colors in slides

customize.dist/translations/messages.fr.js

@@ -70,6 +70,11 @@ define(function () {
     out.sourceButton = 'VOIR LA SOURCE';
     out.sourceButtonTitle = "Quitter le mode présentation";
 
+    out.backgroundButton = 'COULEUR DE FOND';
+    out.backgroundButtonTitle = 'Changer la couleur de fond de la présentation';
+    out.colorButton = 'COULEUR DU TEXTE';
+    out.colorButtonTitle = 'Changer la couleur du texte en mode présentation';
+
     out.commitButton = 'VALIDER';
 
     out.getViewButton = 'LECTURE SEULE';

customize.dist/translations/messages.js

@@ -71,6 +71,11 @@ define(function () {
     out.sourceButton = 'VIEW SOURCE';
     out.sourceButtonTitle = "Leave presentation mode";
 
+    out.backgroundButton = 'BACKGROUND COLOR';
+    out.backgroundButtonTitle = 'Change the background color in the presentation';
+    out.colorButton = 'TEXT COLOR';
+    out.colorButtonTitle = 'Change the text color in presentation mode';
+
     out.commitButton = 'COMMIT';
 
     out.getViewButton = 'READ-ONLY URL';

www/slide/main.js

@@ -15,7 +15,6 @@ define([
     '/slide/slide.js',
     '/bower_components/file-saver/FileSaver.min.js',
     '/bower_components/jquery/dist/jquery.min.js',
-    '/common/jscolor.js',
     '/customize/pad.js'
 ], function (Messages, Crypto, Realtime, TextPatcher, Toolbar, JSONSortify, JsonOT, Cryptpad, Modes, Themes, Visible, Notify, Slide) {
     var $ = window.jQuery;
@@ -29,6 +28,8 @@ define([
     };
     var APP = window.APP;
 
+    var SLIDE_BACKCOLOR_ID = "cryptpad-backcolor";
+    var SLIDE_COLOR_ID = "cryptpad-color";
     Cryptpad.styleAlerts();
 
     module.spinner.show();
@@ -157,6 +158,9 @@ define([
                 }
             };
 
+            var textColor;
+            var backColor;
+
             var myData = {};
             var myUserName = ''; // My "pretty name"
             var myID; // My server ID
@@ -188,23 +192,34 @@ define([
 
             var initializing = true;
 
+            var stringifyInner = function (textValue) {
+                var obj = {
+                    content: textValue,
+                    metadata: {
+                        users: userList
+                    }
+                };
+                if (!isDefaultTitle()) {
+                    obj.metadata.title = APP.title;
+                }
+                if (textColor) {
+                    obj.metadata.color = textColor;
+                }
+                if (backColor) {
+                    obj.metadata.backColor = backColor;
+                }
+                // stringify the json and send it into chainpad
+                return stringify(obj);
+            };
+
             var onLocal = config.onLocal = function () {
                 if (initializing) { return; }
                 if (readOnly) { return; }
 
                 editor.save();
-                var textValue = canonicalize($textarea.val());
-                var obj = {content: textValue};
 
-                // append the userlist to the hyperjson structure
+                var textValue = canonicalize($textarea.val());
-                obj.metadata = {
+                var shjson = stringifyInner(textValue);
-                    users: userList
-                };
-                if (!isDefaultTitle()) {
-                    obj.metadata.title = APP.title;
-                }
-                // stringify the json and send it into chainpad
-                var shjson = stringify(obj);
 
                 module.patchText(shjson);
                 Slide.update(textValue);
@@ -431,21 +446,36 @@ define([
                 };
 
                 var configureColors = function () {
-                    /*var $background = $('<input>', {
+                    $back = $('<button>', {
-                        id: "cryptpad-bg-color",
+                        id: SLIDE_BACKCOLOR_ID,
-                        value: "#5367ce"
+                        'class': 'fa fa-square',
-                    }).colorpicker();*/
+                        'style': 'font-family: FontAwesome; color: #000;',
-                    console.log(jscolor);
+                        title: Messages.backgroundButton + '\n' + Messages.backgroundButtonTitle
-                    var $background = $('<input>', {
+                    });
-                        value: 'BACKGROUND',
+                    $text = $('<button>', {
-                        style: "position:absolute; top:100px; left: 50px; z-index:1000"
+                        id: SLIDE_COLOR_ID,
+                        'class': 'fa fa-i-cursor',
+                        'style': 'font-family: FontAwesome; font-weight: bold; color: #fff; background: #000;',
+                        title: Messages.colorButton + '\n' + Messages.colorButtonTitle
+                    });
+                    $testColor = $('<input>', { type: 'color' });
+                    if ($testColor.attr('type') !== "color") {alert('not supported'); return;}
+                    $back.on('click', function() {
+                        $('<input>', { type: 'color', value: backColor })
+                            .on('change', function() {
+                                updateColors(undefined, this.value);
+                                onLocal();
+                            }).click();
+                    });
+                    $text.on('click', function() {
+                        $('<input>', { type: 'color', value: textColor })
+                            .on('change', function() {
+                                updateColors(this.value, undefined);
+                                onLocal();
+                            }).click();
                     });
-                    var picker = new jscolor($background[0]);
-                    $('body').append($background);
-                    console.log($background);
-//                    $rightside[0].appendChild($background[0]);
-                    //console.log($pad.contents().find('#cryptpad-bg-color'));
 
+                    $rightside.append($back).append($text);
                 };
 
                 configureTheme();
@@ -494,6 +524,20 @@ define([
                 });
             };
 
+            var updateColors = function (text, back) {
+                if (text) {
+                    textColor = text;
+                    $modal.css('color', text);
+                    $pad.contents().find('#' + SLIDE_COLOR_ID).css('color', text);
+                }
+                if (back) {
+                    backColor = back;
+                    $modal.css('background-color', back);
+                    $pad.contents().find('#' + SLIDE_COLOR_ID).css('background', back);
+                    $pad.contents().find('#' + SLIDE_BACKCOLOR_ID).css('color', back);
+                }
+            };
+
             var updateMetadata = function(shjson) {
                 // Extract the user list (metadata) from the hyperjson
                 var json = (shjson === "") ? "" : JSON.parse(shjson);
@@ -506,6 +550,7 @@ define([
                     if (json.metadata.title) {
                         updateTitle(json.metadata.title);
                     }
+                    updateColors(json.metadata.color, json.metadata.backColor);
                 }
             };
 
@@ -662,18 +707,8 @@ define([
                 editor.scrollTo(scroll.left, scroll.top);
 
                 if (!readOnly) {
-                    var localDoc = canonicalize($textarea.val());
+                    var textValue = canonicalize($textarea.val());
-                    var hjson2 = {
+                    var shjson2 = stringifyInner(textValue);
-                      content: localDoc,
-                      metadata: {
-                          users: userList
-                      },
-                      highlightMode: highlightMode,
-                    };
-                    if (!isDefaultTitle()) {
-                        hjson2.metadata.title = APP.title;
-                    }
-                    var shjson2 = stringify(hjson2);
                     if (shjson2 !== shjson) {
                         console.error("shjson2 !== shjson");
                         TextPatcher.log(shjson, TextPatcher.diff(shjson, shjson2));

www/slide/slide.js

@@ -23,6 +23,7 @@ define([
         $content = Slide.$content = $c;
         $pad = Slide.$pad = $p;
         ifrw = Slide.ifrw = iframe;
+        addEvent();
     };
 
     Slide.onChange = function (f) {
@@ -173,23 +174,51 @@ define([
         Slide.draw(i);
     };
 
-    $(ifrw).on('keyup', function (e) {
+    var first = Slide.first = function () {$
-        if (!Slide.shown) { return; }
+        console.log('first');
-        switch(e.which) {
+        Slide.lastIndex = Slide.index;
-            case 37:
+
-                Slide.left();
+        var i = Slide.index = 0;
-                break;
+        Slide.draw(i);
-            case 32:
+    };
-            case 39: // right
+
-                Slide.right();
+    var last = Slide.last = function () {
-                break;
+        console.log('end');
-            case 27: // esc
+        Slide.lastIndex = Slide.index;
-                show(false);
+
-                break;
+        var i = Slide.index = Slide.content.length - 1;
-            default:
+        Slide.draw(i);
-                console.log(e.which);
+    };
-        }
+
-    });
+    var addEvent = function () {
+        $(ifrw).on('keyup', function (e) {
+            if (!Slide.shown) { return; }
+            switch(e.which) {
+                case 33: // pageup
+                case 38: // up
+                case 37: // left
+                    Slide.left();
+                    break;
+                case 34: // pagedown
+                case 32: // space
+                case 40: // down
+                case 39: // right
+                    Slide.right();
+                    break;
+                case 36: // home
+                    Slide.first();
+                    break;
+                case 35: // end
+                    Slide.last();
+                    break
+                case 27: // esc
+                    show(false);
+                    break;
+                default:
+                    console.log(e.which);
+            }
+        });
+    };
 
     return Slide;
 });