Add a settings category about the cursor

www/common/outer/async-store.js

@@ -427,11 +427,11 @@ define([
                          getColor().toString(16);
         };
         var getUserColor = function () {
-            var color = Util.find(store.proxy, ['settings', 'general', 'color']);
+            var color = Util.find(store.proxy, ['settings', 'general', 'cursor', 'color']);
             if (!color) {
                 color = getRandomColor();
                 Store.setAttribute(null, {
-                    attr: ['general', 'color'],
+                    attr: ['general', 'cursor', 'color'],
                     value: color
                 }, function () {});
             }

www/common/outer/cursor.js

@@ -160,7 +160,7 @@ define([
     var updateCursor = function (ctx, data, client, cb) {
         var c = ctx.clients[client];
         if (!c) { return void cb({error: 'NO_CLIENT'}); }
-        data.color = Util.find(ctx.store.proxy, ['settings', 'general', 'color']);
+        data.color = Util.find(ctx.store.proxy, ['settings', 'general', 'cursor', 'color']);
         data.name = ctx.store.proxy[Constants.displayNameKey] || Messages.anonymous;
         data.avatar = Util.find(ctx.store.proxy, ['profile', 'avatar']);
         console.log(data.color);

www/common/sframe-common-cursor.js

@@ -1,10 +1,15 @@
 define([
-], function () {
+    '/common/common-util.js',
+], function (Util) {
     var module = {};
 
     module.create = function (Common) {
         var exp = {};
         var sframeChan = Common.getSframeChannel();
+        var metadataMgr = Common.getMetadataMgr();
+        var privateData = metadataMgr.getPrivateData();
+        var share = Util.find(privateData, ['settings', 'general', 'cursor', 'share']);
+        var show = Util.find(privateData, ['settings', 'general', 'cursor', 'show']);
 
         var execCommand = function (cmd, data, cb) {
             sframeChan.query('Q_CURSOR_COMMAND', {cmd: cmd, data: data}, function (err, obj) {
@@ -14,6 +19,7 @@ define([
         };
 
         exp.updateCursor = function (obj) {
+            if (share === false) { return; }
             execCommand('UPDATE', obj, function (err) {
                 if (err) { console.error(err); }
             });
@@ -24,6 +30,7 @@ define([
             messageHandlers.push(handler);
         };
         var onMessage = function (data) {
+            if (show === false) { return; }
             messageHandlers.forEach(function (h) {
                 try {
                     h(data);

www/common/translations/messages.js

@@ -552,6 +552,7 @@ define(function () {
     // Settings
     out.settings_cat_account = "Account";
     out.settings_cat_drive = "CryptDrive";
+    out.settings_cat_cursor = "Cursor";
     out.settings_cat_code = "Code";
     out.settings_cat_pad = "Rich text";
     out.settings_cat_creation = "New pad";
@@ -675,6 +676,16 @@ define(function () {
     out.settings_changePasswordPending = "Your password is being updated. Please do not close or reload this page until the process has completed.";
     out.settings_changePasswordNewPasswordSameAsOld = "Your new password must be different than your current password.";
 
+    // XXX
+    out.settings_cursorColorTitle = "Cursor color";
+    out.settings_cursorColorHint = "Change the color associated to your user in collaborative documents.";
+    out.settings_cursorShareTitle = "Share my cursor position";
+    out.settings_cursorShareHint = "You can decide if you want other users to see your cursor position in collaborative documents. If shared, your cursor will be displayed in the color picked above.";
+    out.settings_cursorShareLabel = "Share my cursor position";
+    out.settings_cursorShowTitle = "Show other users' cursor position";
+    out.settings_cursorShowHint = "You can choose if you want to see the other users' cursor in collaborative documents.";
+    out.settings_cursorShowLabel = "Show the cursors";
+
     out.upload_title = "File upload";
     out.upload_type = "Type";
     out.upload_modal_title = "File upload options";

www/settings/app-settings.less

@@ -111,6 +111,9 @@
                 vertical-align: middle;
                 margin-right: 5px;
             }
+            input[type="color"] {
+                width: 100px;
+            }
             .cp-settings-language-selector {
                 button.btn {
                     width: @sidebar_button-width;

www/settings/inner.js

@@ -68,6 +68,11 @@ define([
             'cp-settings-drive-import-local',
             'cp-settings-drive-reset'
         ],
+        'cursor': [
+            'cp-settings-cursor-color',
+            'cp-settings-cursor-share',
+            'cp-settings-cursor-show',
+        ],
         'pad': [
             'cp-settings-pad-width',
         ],
@@ -1103,6 +1108,118 @@ define([
         return $div;
     };
 
+    // Cursor settings
+
+    create['cursor-color'] = function () {
+        var $div = $('<div>', {
+            'class': 'cp-settings-cursor-color cp-sidebarlayout-element'
+        });
+        $('<label>').text(Messages.settings_cursorColorTitle).appendTo($div);
+        $('<span>', {'class': 'cp-sidebarlayout-description'})
+            .text(Messages.settings_cursorColorHint).appendTo($div);
+
+        var $inputBlock = $('<div>').appendTo($div);
+
+        var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
+        var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
+
+        var $input = $('<input>', {
+            type: 'color',
+        }).on('change', function () {
+            var val = $input.val();
+            if (!/^#[0-9a-fA-F]{6}$/.test(val)) { return; }
+            $spinner.show();
+            $ok.hide();
+            common.setAttribute(['general', 'cursor', 'color'], val, function () {
+                $spinner.hide();
+                $ok.show();
+            });
+        }).appendTo($inputBlock);
+
+        $ok.hide().appendTo($inputBlock);
+        $spinner.hide().appendTo($inputBlock);
+
+        common.getAttribute(['general', 'cursor', 'color'], function (e, val) {
+            if (e) { return void console.error(e); }
+            $input.val(val || '');
+        });
+        return $div;
+    };
+
+    create['cursor-share'] = function () {
+        var $div = $('<div>', {
+            'class': 'cp-settings-cursor-share cp-sidebarlayout-element'
+        });
+        $('<label>').text(Messages.settings_cursorShareTitle).appendTo($div);
+        $('<span>', {'class': 'cp-sidebarlayout-description'})
+            .text(Messages.settings_cursorShareHint).appendTo($div);
+
+        var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
+        var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
+
+        var $cbox = $(UI.createCheckbox('cp-settings-cursor-share',
+                                   Messages.settings_cursorShareLabel,
+                                   false, { label: {class: 'noTitle'} }));
+        var $checkbox = $cbox.find('input').on('change', function () {
+            $spinner.show();
+            $ok.hide();
+            var val = $checkbox.is(':checked');
+            common.setAttribute(['general', 'cursor', 'share'], val, function () {
+                $spinner.hide();
+                $ok.show();
+            });
+        });
+        $cbox.appendTo($div);
+
+        $ok.hide().appendTo($cbox);
+        $spinner.hide().appendTo($cbox);
+
+        common.getAttribute(['general', 'cursor', 'share'], function (e, val) {
+            if (e) { return void console.error(e); }
+            if (val !== false) {
+                $checkbox.attr('checked', 'checked');
+            }
+        });
+        return $div;
+    };
+
+    create['cursor-show'] = function () {
+        var $div = $('<div>', {
+            'class': 'cp-settings-cursor-show cp-sidebarlayout-element'
+        });
+        $('<label>').text(Messages.settings_cursorShowTitle).appendTo($div);
+        $('<span>', {'class': 'cp-sidebarlayout-description'})
+            .text(Messages.settings_cursorShowHint).appendTo($div);
+
+        var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
+        var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
+
+        var $cbox = $(UI.createCheckbox('cp-settings-cursor-show',
+                                   Messages.settings_cursorShowLabel,
+                                   false, { label: {class: 'noTitle'} }));
+        var $checkbox = $cbox.find('input').on('change', function () {
+            $spinner.show();
+            $ok.hide();
+            var val = $checkbox.is(':checked');
+            common.setAttribute(['general', 'cursor', 'show'], val, function () {
+                $spinner.hide();
+                $ok.show();
+            });
+        });
+        $cbox.appendTo($div);
+
+        $ok.hide().appendTo($cbox);
+        $spinner.hide().appendTo($cbox);
+
+        common.getAttribute(['general', 'cursor', 'show'], function (e, val) {
+            if (e) { return void console.error(e); }
+            if (val !== false) {
+                $checkbox.attr('checked', 'checked');
+            }
+        });
+        return $div;
+    };
+
     // Rich text pads settings
 
     create['pad-width'] = function () {
@@ -1271,6 +1388,7 @@ define([
             var $category = $('<div>', {'class': 'cp-sidebarlayout-category'}).appendTo($categories);
             if (key === 'account') { $category.append($('<span>', {'class': 'fa fa-user-o'})); }
             if (key === 'drive') { $category.append($('<span>', {'class': 'fa fa-hdd-o'})); }
+            if (key === 'cursor') { $category.append($('<span>', {'class': 'fa fa-i-cursor' })); }
             if (key === 'code') { $category.append($('<span>', {'class': 'fa fa-file-code-o' })); }
             if (key === 'pad') { $category.append($('<span>', {'class': 'fa fa-file-word-o' })); }
             if (key === 'creation') { $category.append($('<span>', {'class': 'fa fa-plus-circle' })); }