Use the new toolbar and move the userlist code in a separate file

www/code/main.js

@@ -329,7 +329,7 @@ define([
             };
 
              config.onInit = function (info) {
-                UserList = Cryptpad.createUserList(info, config.onLocal, Cryptpad);
+                UserList = Cryptpad.createUserList(info, config.onLocal, Cryptget, Cryptpad);
 
                 var configTb = {
                     displayed: ['title', 'useradmin', 'spinner', 'lag', 'state', 'share', 'userlist', 'newpad', 'limit'],
@@ -500,7 +500,6 @@ define([
 
                 // set the hash
                 if (!readOnly) { Cryptpad.replaceHash(editHash); }
-
             };
 
             var unnotify = module.unnotify = function () {
@@ -574,7 +573,6 @@ define([
                 Cryptpad.removeLoadingScreen();
                 setEditable(true);
                 initializing = false;
-                //Cryptpad.log("Your document is ready");
 
                 onLocal(); // push local state to avoid parse errors later.
 

www/common/common-hash.js

@@ -41,6 +41,7 @@ define([
         var ret = {};
 
         if (!href) { return ret; }
+        if (href.slice(-1) !== '/') { href += '/'; }
 
         if (!/^https*:\/\//.test(href)) {
             var idx = href.indexOf('/#');

www/common/common-userlist.js

@@ -1,10 +1,9 @@
 define([
     'jquery',
-    '/common/cryptget.js',
+], function ($) {
-], function ($, Cryptget) {
     var module = {};
 
-    module.create = function (info, onLocal, Cryptpad) {
+    module.create = function (info, onLocal, Cryptget, Cryptpad) {
         var exp = {};
 
         var userData = exp.userData = {};
@@ -13,6 +12,9 @@ define([
         var myUserName = exp.myUserName = info.myID;
         var myNetfluxId = exp.myNetfluxId = info.myID;
 
+        var parsed = Cryptpad.parsePadUrl(window.location.href);
+        var appType = parsed ? parsed.type : undefined;
+
         var users = userList.users;
         var addToUserData = exp.addToUserData = function(data) {
             for (var attrname in data) { userData[attrname] = data[attrname]; }
@@ -41,7 +43,7 @@ define([
         var setName = exp.setName = function (newName, cb) {
             if (typeof(newName) !== 'string') { return; }
             var myUserNameTemp = newName.trim();
-            if(newName.trim().length > 32) {
+            if(myUserNameTemp.length > 32) {
               myUserNameTemp = myUserNameTemp.substr(0, 32);
             }
             myUserName = myUserNameTemp;
@@ -56,7 +58,7 @@ define([
                     console.error(err);
                     return;
                 }
-                if (typeof cb === "function") { onLocal(); }
+                if (typeof cb === "function") { cb(); }
             });
         };
 
@@ -80,8 +82,8 @@ define([
                     onLocal();
                     $changeNameButton.click();
                 }
-                if (isNew) {
+                if (isNew && appType) {
-                    Cryptpad.selectTemplate('code', info.realtime, Cryptget);
+                    Cryptpad.selectTemplate(appType, info.realtime, Cryptget);
                 }
             });
         };

www/common/toolbar.js

@@ -558,7 +558,8 @@ define([
             $userButton.click(function (e) {
                 e.preventDefault();
                 e.stopPropagation();
-                Cryptpad.getLastName(function (lastName) {
+                Cryptpad.getLastName(function (err, lastName) {
+                    if (err) { return void console.error("Cannot get last name", err); }
                     Cryptpad.prompt(Messages.changeNamePrompt, lastName || '', function (newName) {
                         if (newName === null && typeof(lastName) === "string") { return; }
                         if (newName === null) { newName = ''; }

www/common/toolbar2.js

@@ -102,7 +102,7 @@ define([
     var checkSynchronizing = function (toolbar, config) {
         if (!toolbar.state) { return; }
         var userList = config.userList.list.users;
-        var userNetfluxId = config.userList.userNetfluxId; // TODO
+        var userNetfluxId = config.userList.userNetfluxId;
         var meIdx = userList.indexOf(userNetfluxId);
         if (meIdx === -1) {
             toolbar.state.text(Messages.synchronizing);
@@ -113,7 +113,7 @@ define([
     var getOtherUsers = function(config) {
         var userList = config.userList.list.users;
         var userData = config.userList.data;
-        var userNetfluxId = config.userList.userNetfluxId; // TODO
+        var userNetfluxId = config.userList.userNetfluxId;
 
         var i = 0; // duplicates counter
         var list = [];
@@ -260,8 +260,6 @@ define([
         $block.attr('id', 'userButtons');
         toolbar.$leftside.prepend($block);
 
-        initUserList(toolbar, config);
-
         return $block;
     };
 
@@ -596,7 +594,7 @@ define([
             'class': 'synced fa fa-check',
             title: Messages.synced
         }).appendTo($spin);
-        toolbar.$userAdmin.prepend($spin); // TODO: put at the corretc position in userAdmin
+        toolbar.$userAdmin.prepend($spin);
         if (config.realtime) {
             config.realtime.onPatch(ks(toolbar, config));
             config.realtime.onMessage(ks(toolbar, config, true));
@@ -677,7 +675,8 @@ define([
         $userButton.click(function (e) {
             e.preventDefault();
             e.stopPropagation();
-            Cryptpad.getLastName(function (lastName) {
+            Cryptpad.getLastName(function (err, lastName) {
+                if (err) { return void console.error("Cannot get last name", err); }
                 Cryptpad.prompt(Messages.changeNamePrompt, lastName || '', function (newName) {
                     if (newName === null && typeof(lastName) === "string") { return; }
                     if (newName === null) { newName = ''; }
@@ -844,7 +843,7 @@ define([
         tb['userlist'] = createUserList;
         tb['share'] = createShare;
         tb['fileshare'] = createFileShare;
-        tb['title'] = createTitle; // TODO: New one, add it to the displayed in main.js ?
+        tb['title'] = createTitle;
         tb['lag'] = createLag;
         tb['spinner'] = createSpinner;
         tb['state'] = createState;
@@ -866,6 +865,7 @@ define([
         };
 
         addElement(config.displayed, {}, true);
+        initUserList(toolbar, config);
 
         toolbar['linkToMain'] = createLinkToMain(toolbar, config);
 

www/drive/main.js

@@ -6,7 +6,7 @@ define([
     'json.sortify',
     '/common/cryptpad-common.js',
     '/common/userObject.js',
-    '/common/toolbar.js',
+    '/common/toolbar2.js',
     '/customize/application_config.js',
     '/common/cryptget.js',
     '/common/mergeDrive.js'
@@ -2583,21 +2583,26 @@ define([
             var userList = APP.userList = info.userList;
             var config = {
                 displayed: ['useradmin', 'spinner', 'lag', 'state', 'limit'],
+                userList: {
+                    list: userList,
+                    userNetfluxId: info.myID
+                },
+                common: Cryptpad,
                 readOnly: readOnly,
                 ifrw: window,
-                common: Cryptpad,
+                realtime: info.realtime,
-                hideShare: true
+                network: info.network,
+                $container: APP.$bar
             };
-            APP.toolbar = info.realtime.toolbar = Toolbar.create(APP.$bar, info.myID, info.realtime, info.getLag, userList, config);
+            var toolbar = APP.toolbar = Toolbar.create(config);
 
-            var $bar = APP.$bar;
+            var $rightside = toolbar.$rightside;
-            var $rightside = $bar.find('.' + Toolbar.constants.rightside);
+            var $leftside = toolbar.$leftside;
-            var $leftside = $bar.find('.' + Toolbar.constants.leftside);
+            var $userBlock = toolbar.$userAdmin;
-            var $userBlock = $bar.find('.' + Toolbar.constants.userAdmin);
+            APP.$displayName = APP.$bar.find('.' + Toolbar.constants.username);
-            APP.$displayName = $bar.find('.' + Toolbar.constants.username);
 
             if (APP.homePageIframe) {
-                var $linkToMain = $bar.find('.cryptpad-link a');
+                var $linkToMain = toolbar.linkToMain;
                 $linkToMain.attr('href', '#');
                 $linkToMain.attr('title', '');
                 $linkToMain.css('cursor', 'default');
@@ -2669,7 +2674,7 @@ define([
                 // Called when the history is loaded and the UI displayed
                 setHistory(true);
             };
-            histConfig.$toolbar = $bar;
+            histConfig.$toolbar = APP.$bar;
             histConfig.href = window.location.origin + window.location.pathname + APP.hash;
             var $hist = Cryptpad.createButton('history', true, {histConfig: histConfig});
             $rightside.append($hist);

www/pad/main.js

@@ -3,7 +3,7 @@ define([
     '/bower_components/chainpad-crypto/crypto.js',
     '/bower_components/chainpad-netflux/chainpad-netflux.js',
     '/bower_components/hyperjson/hyperjson.js',
-    '/common/toolbar.js',
+    '/common/toolbar2.js',
     '/common/cursor.js',
     '/bower_components/chainpad-json-validator/json-ot.js',
     '/common/TypingTests.js',
@@ -277,51 +277,7 @@ define([
             };
 
             var initializing = true;
-            var userData = module.userData = {}; // List of pretty names for all users (mapped with their ID)
+            var UserList;
-            var userList; // List of users still connected to the channel (server IDs)
-            var addToUserData = function(data) {
-                var users = module.users;
-                for (var attrname in data) { userData[attrname] = data[attrname]; }
-
-                if (users && users.length) {
-                    for (var userKey in userData) {
-                        if (users.indexOf(userKey) === -1) { delete userData[userKey]; }
-                    }
-                }
-
-                if(userList && typeof userList.onChange === "function") {
-                    userList.onChange(userData);
-                }
-            };
-
-            var myData = {};
-            var myUserName = ''; // My "pretty name"
-            var myID; // My server ID
-
-            var setMyID = function(info) {
-                myID = info.myID || null;
-            };
-
-            var setName = module.setName = function (newName) {
-                if (typeof(newName) !== 'string') { return; }
-                var myUserNameTemp = newName.trim();
-                if(myUserNameTemp.length > 32) {
-                    myUserNameTemp = myUserNameTemp.substr(0, 32);
-                }
-                myUserName = myUserNameTemp;
-                myData[myID] = {
-                    name: myUserName,
-                    uid: Cryptpad.getUid(),
-                };
-                addToUserData(myData);
-                Cryptpad.setAttribute('username', newName, function (err) {
-                    if (err) {
-                        console.error("Couldn't set username");
-                        return;
-                    }
-                    editor.fire('change');
-                });
-            };
 
             var getHeadingText = function () {
                 var text;
@@ -359,7 +315,7 @@ define([
                 var hjson = Hyperjson.fromDOM(dom, isNotMagicLine, brFilter);
                 hjson[3] = {
                     metadata: {
-                        users: userData,
+                        users: UserList.userData,
                         defaultTitle: defaultName
                     }
                 };
@@ -385,9 +341,6 @@ define([
                 validateKey: secret.keys.validateKey || undefined,
                 readOnly: readOnly,
 
-                // method which allows us to get the id of the user
-                setMyID: setMyID,
-
                 // Pass in encrypt and decrypt methods
                 crypto: Crypto.createEncryptor(secret.keys),
 
@@ -449,7 +402,7 @@ define([
                     if (peerMetadata.metadata.users) {
                         var userData = peerMetadata.metadata.users;
                         // Update the local user data
-                        addToUserData(userData);
+                        UserList.addToUserData(userData);
                     }
                     if (peerMetadata.metadata.defaultTitle) {
                         updateDefaultTitle(peerMetadata.metadata.defaultTitle);
@@ -570,13 +523,11 @@ define([
             };
 
             realtimeOptions.onInit = function (info) {
-                userList = info.userList;
+                UserList = Cryptpad.createUserList(info, realtimeOptions.onLocal, Cryptget, Cryptpad);
 
                 var configTb = {
-                    displayed: ['useradmin', 'spinner', 'lag', 'state', 'share', 'userlist', 'newpad', 'limit'],
+                    displayed: ['title', 'useradmin', 'spinner', 'lag', 'state', 'share', 'userlist', 'newpad', 'limit'],
-                    userData: userData,
+                    userList: UserList.getToolbarConfig(),
-                    readOnly: readOnly,
-                    ifrw: ifrw,
                     share: {
                         secret: secret,
                         channel: info.channel
@@ -586,13 +537,16 @@ define([
                         defaultName: defaultName,
                         suggestName: suggestName
                     },
-                    common: Cryptpad
+                    common: Cryptpad,
+                    readOnly: readOnly,
+                    ifrw: ifrw,
+                    realtime: info.realtime,
+                    network: info.network,
+                    $container: $bar
                 };
-                toolbar = info.realtime.toolbar = Toolbar.create($bar, info.myID, info.realtime, info.getLag, userList, configTb);
+                toolbar = info.realtime.toolbar = Toolbar.create(configTb);
 
-                var $rightside = $bar.find('.' + Toolbar.constants.rightside);
+                var $rightside = toolbar.$rightside;
-                $bar.find('.' + Toolbar.constants.username);
-                module.$userNameButton = $($bar.find('.' + Toolbar.constants.changeUsername));
 
                 var editHash;
 
@@ -667,10 +621,6 @@ define([
                     /* add an import button */
                     var $import = Cryptpad.createButton('import', true, {}, importFile);
                     $rightside.append($import);
-
-                    /* add a rename button */
-                    //var $setTitle = Cryptpad.createButton('rename', true, {suggestName: suggestName}, renameCb);
-                    //$rightside.append($setTitle);
                 }
 
                 /* add a forget button */
@@ -683,8 +633,6 @@ define([
 
                 // set the hash
                 if (!readOnly) { Cryptpad.replaceHash(editHash); }
-
-                Cryptpad.onDisplayNameChanged(setName);
             };
 
             // this should only ever get called once, when the chain syncs
@@ -707,7 +655,6 @@ define([
                     });
                 }
 
-                module.users = info.userList.users;
                 module.realtime = info.realtime;
 
                 var shjson = module.realtime.getUserDoc();
@@ -743,35 +690,18 @@ define([
                     documentBody.innerHTML = Messages.initialState;
                 }
 
-                Cryptpad.getLastName(function (err, lastName) {
+                Cryptpad.removeLoadingScreen(emitResize);
-                    console.log("Unlocking editor");
+                setEditable(!readOnly);
-                    setEditable(!readOnly);
+                initializing = false;
-                    initializing = false;
-                    Cryptpad.removeLoadingScreen(emitResize);
 
-                    // Update the toolbar list:
+                if (readOnly) { return; }
-                    // Add the current user in the metadata if he has edit rights
+                UserList.getLastName(toolbar.$userNameButton, newPad);
-                    if (readOnly) { return; }
+                editor.focus();
-                    if (typeof(lastName) === 'string') {
+                if (newPad) {
-                        setName(lastName);
+                    cursor.setToEnd();
-                    } else {
+                } else {
-                        myData[myID] = {
+                    cursor.setToStart();
-                            name: "",
+                }
-                            uid: Cryptpad.getUid()
-                        };
-                        addToUserData(myData);
-                        realtimeOptions.onLocal();
-                        module.$userNameButton.click();
-                    }
-
-                    editor.focus();
-                    if (newPad) {
-                        Cryptpad.selectTemplate('pad', info.realtime, Cryptget);
-                        cursor.setToEnd();
-                    } else {
-                        cursor.setToStart();
-                    }
-                });
             };
 
             realtimeOptions.onAbort = function () {

www/poll/main.js

@@ -7,7 +7,7 @@ define([
     '/common/cryptget.js',
     '/bower_components/hyperjson/hyperjson.js',
     'render.js',
-    '/common/toolbar.js',
+    '/common/toolbar2.js',
     '/common/visible.js',
     '/common/notify.js',
     '/bower_components/file-saver/FileSaver.min.js'
@@ -442,47 +442,7 @@ define([
         });
     };
 
-    var userData = APP.userData = {}; // List of pretty names for all users (mapped with their ID)
+    var UserList;
-    var userList; // List of users still connected to the channel (server IDs)
-    var addToUserData = function(data) {
-        var users = userList ? userList.users : undefined;
-        //var userData = APP.proxy.info.userData;
-        for (var attrname in data) { userData[attrname] = data[attrname]; }
-
-        if (users && users.length) {
-            for (var userKey in userData) {
-                if (users.indexOf(userKey) === -1) { delete userData[userKey]; }
-            }
-        }
-
-        if(userList && typeof userList.onChange === "function") {
-            userList.onChange(userData);
-        }
-
-        APP.proxy.info.userData = userData;
-    };
-
-    var setName = APP.setName = function (newName) {
-        if (typeof(newName) !== 'string') { return; }
-        var myUserNameTemp = newName.trim();
-        if(myUserNameTemp.length > 32) {
-            myUserNameTemp = myUserNameTemp.substr(0, 32);
-        }
-        var myUserName = myUserNameTemp;
-        var myID = APP.myID;
-        var myData = {};
-        myData[myID] = {
-            name: myUserName,
-            uid: Cryptpad.getUid(),
-        };
-        addToUserData(myData);
-        Cryptpad.setAttribute('username', newName, function (err) {
-            if (err) {
-                console.error("Couldn't set username");
-                return;
-            }
-        });
-    };
 
     var updateTitle = function (newTitle) {
         if (newTitle === document.title) { return; }
@@ -526,248 +486,229 @@ define([
     // special UI elements
     var $description = $('#description').attr('placeholder', Messages.poll_descriptionHint || 'description');
 
-    var ready = function (info, userid, readOnly) {
+var ready = function (info, userid, readOnly) {
-        debug("READY");
+    debug("READY");
-        debug('userid: %s', userid);
+    debug('userid: %s', userid);
 
-        var proxy = APP.proxy;
+    var proxy = APP.proxy;
 
-        var isNew = false;
+    var isNew = false;
-        var userDoc = JSON.stringify(proxy);
+    var userDoc = JSON.stringify(proxy);
-        if (userDoc === "" || userDoc === "{}") { isNew = true; }
+    if (userDoc === "" || userDoc === "{}") { isNew = true; }
 
-        var uncommitted = APP.uncommitted = {};
+    var uncommitted = APP.uncommitted = {};
-        prepareProxy(proxy, copyObject(Render.Example));
+    prepareProxy(proxy, copyObject(Render.Example));
-        prepareProxy(uncommitted, copyObject(Render.Example));
+    prepareProxy(uncommitted, copyObject(Render.Example));
-        if (!readOnly && proxy.table.colsOrder.indexOf(userid) === -1 &&
+    if (!readOnly && proxy.table.colsOrder.indexOf(userid) === -1 &&
-            uncommitted.table.colsOrder.indexOf(userid) === -1) {
+        uncommitted.table.colsOrder.indexOf(userid) === -1) {
-            uncommitted.table.colsOrder.unshift(userid);
+        uncommitted.table.colsOrder.unshift(userid);
-        }
+    }
 
-        var displayedObj = mergeUncommitted(proxy, uncommitted, false);
+    var displayedObj = mergeUncommitted(proxy, uncommitted, false);
 
-        var colsOrder = sortColumns(displayedObj.table.colsOrder, userid);
+    var colsOrder = sortColumns(displayedObj.table.colsOrder, userid);
 
-        var $table = APP.$table = $(Render.asHTML(displayedObj, null, colsOrder, readOnly));
+    var $table = APP.$table = $(Render.asHTML(displayedObj, null, colsOrder, readOnly));
-        APP.$createRow = $('#create-option').click(function () {
+    APP.$createRow = $('#create-option').click(function () {
-            //console.error("BUTTON CLICKED! LOL");
+        //console.error("BUTTON CLICKED! LOL");
-            Render.createRow(proxy, function (empty, id) {
+        Render.createRow(proxy, function (empty, id) {
-                change(null, null, null, null, function() {
+            change(null, null, null, null, function() {
-                    $('.edit[data-rt-id="' + id + '"]').click();
+                $('.edit[data-rt-id="' + id + '"]').click();
-                });
             });
         });
+    });
 
-        APP.$createCol = $('#create-user').click(function () {
+    APP.$createCol = $('#create-user').click(function () {
-            Render.createColumn(proxy, function (empty, id) {
+        Render.createColumn(proxy, function (empty, id) {
-                change(null, null, null, null, function() {
+            change(null, null, null, null, function() {
-                    $('.edit[data-rt-id="' + id + '"]').click();
+                $('.edit[data-rt-id="' + id + '"]').click();
-                });
             });
         });
+    });
 
-        // Commit button
+    // Commit button
-        APP.$commit = $('#commit').click(function () {
+    APP.$commit = $('#commit').click(function () {
-            var uncommittedCopy = JSON.parse(JSON.stringify(APP.uncommitted));
+        var uncommittedCopy = JSON.parse(JSON.stringify(APP.uncommitted));
-            APP.uncommitted = {};
+        APP.uncommitted = {};
-            prepareProxy(APP.uncommitted, copyObject(Render.Example));
+        prepareProxy(APP.uncommitted, copyObject(Render.Example));
-            mergeUncommitted(proxy, uncommittedCopy, true);
+        mergeUncommitted(proxy, uncommittedCopy, true);
-            APP.$commit.hide();
+        APP.$commit.hide();
-            change();
+        change();
+    });
+
+    // #publish button is removed in readonly
+    APP.$publish = $('#publish')
+        .click(function () {
+            publish(true);
         });
 
-        // #publish button is removed in readonly
+    // #publish button is removed in readonly
-        APP.$publish = $('#publish')
+    APP.$admin = $('#admin')
-            .click(function () {
+        .click(function () {
-                publish(true);
+            publish(false);
-            });
-
-        // #publish button is removed in readonly
-        APP.$admin = $('#admin')
-            .click(function () {
-                publish(false);
-            });
-
-        // Title
-        if (APP.proxy.info.defaultTitle) {
-            updateDefaultTitle(APP.proxy.info.defaultTitle);
-        } else {
-            APP.proxy.info.defaultTitle = defaultName;
-        }
-        if (Cryptpad.initialName && !APP.proxy.info.title) {
-            APP.proxy.info.title = Cryptpad.initialName;
-            updateTitle(Cryptpad.initialName);
-        } else {
-            updateTitle(APP.proxy.info.title || defaultName);
-        }
-
-        // Description
-        var resize = function () {
-            var lineCount = $description.val().split('\n').length;
-            $description.css('height', lineCount + 'rem');
-        };
-        $description.on('change keyup', function () {
-            var val = $description.val();
-            proxy.info.description = val;
-            resize();
         });
+
+    // Title
+    if (APP.proxy.info.defaultTitle) {
+        updateDefaultTitle(APP.proxy.info.defaultTitle);
+    } else {
+        APP.proxy.info.defaultTitle = defaultName;
+    }
+    if (Cryptpad.initialName && !APP.proxy.info.title) {
+        APP.proxy.info.title = Cryptpad.initialName;
+        updateTitle(Cryptpad.initialName);
+    } else {
+        updateTitle(APP.proxy.info.title || defaultName);
+    }
+
+    // Description
+    var resize = function () {
+        var lineCount = $description.val().split('\n').length;
+        $description.css('height', lineCount + 'rem');
+    };
+    $description.on('change keyup', function () {
+        var val = $description.val();
+        proxy.info.description = val;
         resize();
-        if (typeof(proxy.info.description) !== 'undefined') {
+    });
-            $description.val(proxy.info.description);
+    resize();
-        }
+    if (typeof(proxy.info.description) !== 'undefined') {
+        $description.val(proxy.info.description);
+    }
 
-        $('#tableScroll').html('').prepend($table);
+    $('#tableScroll').html('').prepend($table);
-        updateDisplayedTable();
+    updateDisplayedTable();
 
-        $table
+    $table
-            .click(handleClick)
+        .click(handleClick)
-            .on('keyup', function (e) { handleClick(e, true); });
+        .on('keyup', function (e) { handleClick(e, true); });
 
-        proxy
+    proxy
-            .on('change', ['info'], function (o, n, p) {
+        .on('change', ['info'], function (o, n, p) {
-                if (p[1] === 'title') {
+            if (p[1] === 'title') {
-                    updateTitle(n);
+                updateTitle(n);
-                    notify();
+                notify();
-                } else if (p[1] === "userData") {
+            } else if (p[1] === "userData") {
-                    addToUserData(APP.proxy.info.userData);
+                UserList.addToUserData(APP.proxy.info.userData);
-                } else if (p[1] === 'description') {
+            } else if (p[1] === 'description') {
-                    var op = TextPatcher.diff(o, n);
+                var op = TextPatcher.diff(o, n);
-                    var el = $description[0];
+                var el = $description[0];
 
-                    var selects = ['selectionStart', 'selectionEnd'].map(function (attr) {
+                var selects = ['selectionStart', 'selectionEnd'].map(function (attr) {
-                        return TextPatcher.transformCursor(el[attr], op);
+                    return TextPatcher.transformCursor(el[attr], op);
-                    });
+                });
-                    $description.val(n);
+                $description.val(n);
-                    if (op) {
+                if (op) {
-                        el.selectionStart = selects[0];
+                    el.selectionStart = selects[0];
-                        el.selectionEnd = selects[1];
+                    el.selectionEnd = selects[1];
-                    }
-                    notify();
                 }
-
+                notify();
-                debug("change: (%s, %s, [%s])", o, n, p.join(', '));
-            })
-            .on('change', ['table'], change)
-            .on('remove', [], change);
-
-        addToUserData(APP.proxy.info.userData);
-
-        if (Visible.isSupported()) {
-            Visible.onChange(function (yes) {
-                if (yes) { unnotify(); }
-            });
-        }
-
-
-        Cryptpad.getLastName(function (err, lastName) {
-            APP.ready = true;
-
-            if (!proxy.published) {
-                publish(false);
-            } else {
-                publish(true);
             }
-            Cryptpad.removeLoadingScreen();
 
-            // Update the toolbar list:
+            debug("change: (%s, %s, [%s])", o, n, p.join(', '));
-            // Add the current user in the metadata if he has edit rights
+        })
-            if (readOnly) { return; }
+        .on('change', ['table'], change)
-            if (typeof(lastName) === 'string') {
+        .on('remove', [], change);
-                setName(lastName);
+
-            } else {
+    UserList.addToUserData(APP.proxy.info.userData);
-                var myData = {};
+
-                myData[info.myId] = {
+    if (Visible.isSupported()) {
-                    name: "",
+        Visible.onChange(function (yes) {
-                    uid: Cryptpad.getUid(),
+            if (yes) { unnotify(); }
-                };
-                addToUserData(myData);
-                APP.$userNameButton.click();
-            }
-            if (isNew) {
-                Cryptpad.selectTemplate('poll', info.realtime, Cryptget);
-            }
         });
+    }
+
+
+    APP.ready = true;
+    if (!proxy.published) {
+        publish(false);
+    } else {
+        publish(true);
+    }
+    Cryptpad.removeLoadingScreen();
+
+    if (readOnly) { return; }
+    UserList.getLastName(APP.toolbar.$userNameButton, isNew);
+};
+
+var disconnect = function () {
+    //setEditable(false); // TODO
+    APP.toolbar.failed();
+    Cryptpad.alert(Messages.common_connectionLost, undefined, true);
+};
+
+var reconnect = function (info) {
+    //setEditable(true); // TODO
+    APP.toolbar.reconnecting(info.myId);
+    Cryptpad.findOKButton().click();
+};
+
+var create = function (info) {
+    APP.myID = info.myID;
+
+    var editHash;
+    if (!readOnly) {
+        editHash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys);
+    }
+
+    if (APP.realtime !== info.realtime) {
+        APP.realtime = info.realtime;
+        APP.patchText = TextPatcher.create({
+            realtime: info.realtime,
+            logging: true,
+        });
+    }
+
+    var onLocal = function () {
+        APP.proxy.info.userData = UserList.userData;
     };
+    UserList = Cryptpad.createUserList(info, onLocal, Cryptget, Cryptpad);
 
-    var disconnect = function () {
+    var configTb = {
-        //setEditable(false); // TODO
+        displayed: ['title', 'useradmin', 'spinner', 'lag', 'state', 'share', 'userlist', 'newpad', 'limit'],
-        APP.realtime.toolbar.failed();
+        userList: UserList.getToolbarConfig(),
-        Cryptpad.alert(Messages.common_connectionLost, undefined, true);
+        share: {
+            secret: secret,
+            channel: info.channel
+        },
+        title: {
+            onRename: renameCb,
+            defaultName: defaultName,
+            suggestName: suggestName
+        },
+        common: Cryptpad,
+        readOnly: readOnly,
+        ifrw: window,
+        realtime: info.realtime,
+        network: info.network,
+        $container: APP.$bar
     };
+    APP.toolbar = Toolbar.create(configTb);
 
-    var reconnect = function (info) {
+    var $rightside = APP.toolbar.$rightside;
-        //setEditable(true); // TODO
+
-        APP.realtime.toolbar.reconnecting(info.myId);
+    /* add a forget button */
-        Cryptpad.findOKButton().click();
+    var forgetCb = function (err) {
+        if (err) { return; }
+        disconnect();
     };
+    var $forgetPad = Cryptpad.createButton('forget', true, {}, forgetCb);
+    $rightside.append($forgetPad);
 
-    var create = function (info) {
+    // set the hash
-        APP.myID = info.myID;
+    if (!readOnly) { Cryptpad.replaceHash(editHash); }
 
-        var editHash;
+    /* save as template */
-        if (!readOnly) {
+    if (!Cryptpad.isTemplate(window.location.href)) {
-            editHash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys);
+        var templateObj = {
-        }
+            rt: info.realtime,
-
+            Crypt: Cryptget,
-        if (APP.realtime !== info.realtime) {
+            getTitle: function () { return document.title; }
-            APP.realtime = info.realtime;
-            APP.patchText = TextPatcher.create({
-                realtime: info.realtime,
-                logging: true,
-            });
-        }
-
-        userList = APP.userList = info.userList;
-
-        var config = {
-            displayed: ['useradmin', 'spinner', 'lag', 'state', 'share', 'userlist', 'newpad', 'limit'],
-            userData: userData,
-            readOnly: readOnly,
-            share: {
-                secret: secret,
-                channel: info.channel
-            },
-            title: {
-                onRename: renameCb,
-                defaultName: defaultName,
-                suggestName: suggestName
-            },
-            ifrw: window,
-            common: Cryptpad,
         };
-        info.realtime.toolbar = Toolbar.create(APP.$bar, info.myID, info.realtime, info.getLag, userList, config);
+        var $templateButton = Cryptpad.createButton('template', true, templateObj);
-
+        $rightside.append($templateButton);
-        var $bar = APP.$bar;
+    }
-        var $rightside = $bar.find('.' + Toolbar.constants.rightside);
+};
-        $bar.find('.' + Toolbar.constants.username);
-        $bar.find('.' + Toolbar.constants.editShare);
-        $bar.find('.' + Toolbar.constants.viewShare);
-        APP.$userNameButton = $($bar.find('.' + Toolbar.constants.changeUsername));
-
-        /* add a forget button */
-        var forgetCb = function (err) {
-            if (err) { return; }
-            disconnect();
-        };
-        var $forgetPad = Cryptpad.createButton('forget', true, {}, forgetCb);
-        $rightside.append($forgetPad);
-
-        // set the hash
-        if (!readOnly) { Cryptpad.replaceHash(editHash); }
-
-        /* save as template */
-        if (!Cryptpad.isTemplate(window.location.href)) {
-            var templateObj = {
-                rt: info.realtime,
-                Crypt: Cryptget,
-                getTitle: function () { return document.title; }
-            };
-            var $templateButton = Cryptpad.createButton('template', true, templateObj);
-            $rightside.append($templateButton);
-        }
-
-        Cryptpad.onDisplayNameChanged(setName);
-    };
 
     // don't initialize until the store is ready.
     Cryptpad.ready(function () {

www/slide/main.js

@@ -3,7 +3,7 @@ define([
     '/bower_components/chainpad-crypto/crypto.js',
     '/bower_components/chainpad-netflux/chainpad-netflux.js',
     '/bower_components/textpatcher/TextPatcher.js',
-    '/common/toolbar.js',
+    '/common/toolbar2.js',
     'json.sortify',
     '/bower_components/chainpad-json-validator/json-ot.js',
     '/common/cryptpad-common.js',
@@ -167,37 +167,11 @@ define([
                 editor.setOption('readOnly', !bool);
             };
 
-            var userData = module.userData = {}; // List of pretty name of all users (mapped with their server ID)
+            var UserList;
-            var userList; // List of users still connected to the channel (server IDs)
-            var addToUserData = function(data) {
-                var users = module.users;
-                for (var attrname in data) { userData[attrname] = data[attrname]; }
-
-                if (users && users.length) {
-                    for (var userKey in userData) {
-                        if (users.indexOf(userKey) === -1) {
-                            delete userData[userKey];
-                        }
-                    }
-                }
-
-                if(userList && typeof userList.onChange === "function") {
-                    userList.onChange(userData);
-                }
-            };
 
             var textColor;
             var backColor;
 
-            var myData = {};
-            var myUserName = ''; // My "pretty name"
-            var myID; // My server ID
-
-            var setMyID = function(info) {
-              myID = info.myID || null;
-              myUserName = myID;
-            };
-
             var config = {
                 //initialState: Messages.codeInitialState,
                 initialState: '{}',
@@ -207,7 +181,6 @@ define([
                 validateKey: secret.keys.validateKey || undefined,
                 readOnly: readOnly,
                 crypto: Crypto.createEncryptor(secret.keys),
-                setMyID: setMyID,
                 transformFunction: JsonOT.validate,
                 network: Cryptpad.getNetwork()
             };
@@ -228,7 +201,7 @@ define([
                 var obj = {
                     content: textValue,
                     metadata: {
-                        users: userData,
+                        users: UserList.userData,
                         defaultTitle: defaultName,
                         slideOptions: slideOptions
                     }
@@ -264,28 +237,6 @@ define([
                 }
             };
 
-            var setName = module.setName = function (newName) {
-                if (typeof(newName) !== 'string') { return; }
-                var myUserNameTemp = newName.trim();
-                if(newName.trim().length > 32) {
-                  myUserNameTemp = myUserNameTemp.substr(0, 32);
-                }
-                myUserName = myUserNameTemp;
-                myData[myID] = {
-                   name: myUserName,
-                   uid: Cryptpad.getUid(),
-                };
-                addToUserData(myData);
-                Cryptpad.setAttribute('username', myUserName, function (err) {
-                    if (err) {
-                        console.log("Couldn't set username");
-                        console.error(err);
-                        return;
-                    }
-                    onLocal();
-                });
-            };
-
             var getHeadingText = function () {
                 var lines = editor.getValue().split(/\n/);
 
@@ -413,7 +364,7 @@ define([
                     if (json.metadata.users) {
                         var userData = json.metadata.users;
                         // Update the local user data
-                        addToUserData(userData);
+                        UserList.addToUserData(userData);
                     }
                     if (json.metadata.defaultTitle) {
                         updateDefaultTitle(json.metadata.defaultTitle);
@@ -508,13 +459,11 @@ define([
             };
 
             config.onInit = function (info) {
-                userList = info.userList;
+                UserList = Cryptpad.createUserList(info, config.onLocal, Cryptget, Cryptpad);
 
                 var configTb = {
-                    displayed: ['useradmin', 'spinner', 'lag', 'state', 'share', 'userlist', 'newpad', 'limit'],
+                    displayed: ['title', 'useradmin', 'spinner', 'lag', 'state', 'share', 'userlist', 'newpad', 'limit'],
-                    userData: userData,
+                    userList: UserList.getToolbarConfig(),
-                    readOnly: readOnly,
-                    ifrw: ifrw,
                     share: {
                         secret: secret,
                         channel: info.channel
@@ -524,13 +473,16 @@ define([
                         defaultName: defaultName,
                         suggestName: suggestName
                     },
-                    common: Cryptpad
+                    common: Cryptpad,
+                    readOnly: readOnly,
+                    ifrw: ifrw,
+                    realtime: info.realtime,
+                    network: info.network,
+                    $container: $bar
                 };
-                toolbar = module.toolbar = Toolbar.create($bar, info.myID, info.realtime, info.getLag, info.userList, configTb);
+                toolbar = module.toolbar = Toolbar.create(configTb);
 
-                var $rightside = $bar.find('.' + Toolbar.constants.rightside);
+                var $rightside = toolbar.$rightside;
-                $bar.find('.' + Toolbar.constants.username);
-                module.$userNameButton = $($bar.find('.' + Toolbar.constants.changeUsername));
 
                 var editHash;
 
@@ -733,8 +685,6 @@ define([
                 if (!window.location.hash || window.location.hash === '#') {
                     Cryptpad.replaceHash(editHash);
                 }
-
-                Cryptpad.onDisplayNameChanged(setName);
             };
 
             var unnotify = module.unnotify = function () {
@@ -752,8 +702,6 @@ define([
             };
 
             config.onReady = function (info) {
-                module.users = info.userList.users;
-
                 if (module.realtime !== info.realtime) {
                     var realtime = module.realtime = info.realtime;
                     module.patchText = TextPatcher.create({
@@ -816,33 +764,11 @@ define([
                 Cryptpad.removeLoadingScreen();
                 setEditable(true);
                 initializing = false;
-                //Cryptpad.log("Your document is ready");
 
                 onLocal(); // push local state to avoid parse errors later.
-                Cryptpad.getLastName(function (err, lastName) {
+
-                    if (err) {
+                if (readOnly) { return; }
-                        console.log("Could not get previous name");
+                UserList.getLastName(toolbar.$userNameButton, isNew);
-                        console.error(err);
-                        return;
-                    }
-                    // Update the toolbar list:
-                    // Add the current user in the metadata if he has edit rights
-                    if (readOnly) { return; }
-                    if (typeof(lastName) === 'string') {
-                        setName(lastName);
-                    } else {
-                        myData[myID] = {
-                            name: "",
-                            uid: Cryptpad.getUid(),
-                        };
-                        addToUserData(myData);
-                        onLocal();
-                        module.$userNameButton.click();
-                    }
-                    if (isNew) {
-                        Cryptpad.selectTemplate('slide', info.realtime, Cryptget);
-                    }
-                });
             };
 
             var cursorToPos = function(cursor, oldText) {

www/whiteboard/main.js

@@ -3,7 +3,7 @@ define([
     '/api/config',
     '/bower_components/chainpad-netflux/chainpad-netflux.js',
     '/bower_components/chainpad-crypto/crypto.js',
-    '/common/toolbar.js',
+    '/common/toolbar2.js',
     '/bower_components/textpatcher/TextPatcher.amd.js',
     'json.sortify',
     '/bower_components/chainpad-json-validator/json-ot.js',
@@ -214,33 +214,7 @@ window.canvas = canvas;
         var $bar = $('#toolbar');
         var parsedHash = Cryptpad.parsePadUrl(window.location.href);
         var defaultName = Cryptpad.getDefaultName(parsedHash);
-        var userData = module.userData = {}; // List of pretty name of all users (mapped with their server ID)
+        var UserList;
-        var userList; // List of users still connected to the channel (server IDs)
-        var addToUserData = function(data) {
-            var users = module.users;
-            for (var attrname in data) { userData[attrname] = data[attrname]; }
-
-            if (users && users.length) {
-                for (var userKey in userData) {
-                    if (users.indexOf(userKey) === -1) {
-                        delete userData[userKey];
-                    }
-                }
-            }
-
-            if(userList && typeof userList.onChange === "function") {
-                userList.onChange(userData);
-            }
-        };
-
-        var myData = {};
-        var myUserName = ''; // My "pretty name"
-        var myID; // My server ID
-
-        var setMyID = function(info) {
-          myID = info.myID || null;
-          myUserName = myID;
-        };
 
         var config = module.config = {
             initialState: '{}',
@@ -249,7 +223,6 @@ window.canvas = canvas;
             readOnly: readOnly,
             channel: secret.channel,
             crypto: Crypto.createEncryptor(secret.keys),
-            setMyID: setMyID,
             transformFunction: JsonOT.transform,
         };
 
@@ -331,29 +304,30 @@ window.canvas = canvas;
         };
 
         config.onInit = function (info) {
-            userList = info.userList;
+            UserList = Cryptpad.createUserList(info, config.onLocal, Cryptget, Cryptpad);
-            var config = {
+            var configTb = {
-                displayed: ['useradmin', 'spinner', 'lag', 'state', 'share', 'userlist', 'newpad', 'limit'],
+                displayed: ['title', 'useradmin', 'spinner', 'lag', 'state', 'share', 'userlist', 'newpad', 'limit'],
-                userData: userData,
+                userList: UserList.getToolbarConfig(),
-                readOnly: readOnly,
                 share: {
                     secret: secret,
                     channel: info.channel
                 },
-                ifrw: window,
                 title: {
                     onRename: renameCb,
                     defaultName: defaultName,
                     suggestName: suggestName
                 },
-                common: Cryptpad
+                common: Cryptpad,
+                readOnly: readOnly,
+                ifrw: window,
+                realtime: info.realtime,
+                network: info.network,
+                $container: $bar
             };
-            if (readOnly) {delete config.changeNameID; }
 
-            toolbar = module.toolbar = Toolbar.create($bar, info.myID, info.realtime, info.getLag, userList, config);
+            toolbar = module.toolbar = Toolbar.create(configTb);
 
-            var $rightside = $bar.find('.' + Toolbar.constants.rightside);
+            var $rightside = toolbar.$rightside;
-            module.$userNameButton = $($bar.find('.' + Toolbar.constants.changeUsername));
 
             /* save as template */
             if (!Cryptpad.isTemplate(window.location.href)) {
@@ -384,8 +358,6 @@ window.canvas = canvas;
                 editHash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys);
             }
             if (!readOnly) { Cryptpad.replaceHash(editHash); }
-
-            Cryptpad.onDisplayNameChanged(module.setName);
         };
 
         // used for debugging, feel free to remove
@@ -431,7 +403,7 @@ window.canvas = canvas;
                 if (json.metadata.users) {
                     var userData = json.metadata.users;
                     // Update the local user data
-                    addToUserData(userData);
+                    UserList.addToUserData(userData);
                 }
                 if (json.metadata.defaultTitle) {
                     updateDefaultTitle(json.metadata.defaultTitle);
@@ -486,7 +458,7 @@ window.canvas = canvas;
             var obj = {
                 content: textValue,
                 metadata: {
-                    users: userData,
+                    users: UserList.userData,
                     palette: palette,
                     defaultTitle: defaultName
                 }
@@ -508,28 +480,6 @@ window.canvas = canvas;
             module.patchText(content);
         });
 
-        var setName = module.setName = function (newName) {
-            if (typeof(newName) !== 'string') { return; }
-            var myUserNameTemp = newName.trim();
-            if(newName.trim().length > 32) {
-              myUserNameTemp = myUserNameTemp.substr(0, 32);
-            }
-            myUserName = myUserNameTemp;
-            myData[myID] = {
-               name: myUserName,
-               uid: Cryptpad.getUid(),
-            };
-            addToUserData(myData);
-            Cryptpad.setAttribute('username', myUserName, function (err) {
-                if (err) {
-                    console.log("Couldn't set username");
-                    console.error(err);
-                    return;
-                }
-                onLocal();
-            });
-        };
-
         config.onReady = function (info) {
             var realtime = module.realtime = info.realtime;
             module.patchText = TextPatcher.create({
@@ -550,30 +500,9 @@ window.canvas = canvas;
             }
 
             /*  TODO: restore palette from metadata.palette */
-            Cryptpad.getLastName(function (err, lastName) {
+
-                if (err) {
+            if (readOnly) { return; }
-                    console.log("Could not get previous name");
+            UserList.getLastName(toolbar.$userNameButton, isNew);
-                    console.error(err);
-                    return;
-                }
-                // Update the toolbar list:
-                // Add the current user in the metadata if he has edit rights
-                if (readOnly) { return; }
-                if (typeof(lastName) === 'string') {
-                    setName(lastName);
-                } else {
-                    myData[myID] = {
-                        name: "",
-                        uid: Cryptpad.getUid(),
-                    };
-                    addToUserData(myData);
-                    onLocal();
-                    module.$userNameButton.click();
-                }
-                if (isNew) {
-                    Cryptpad.selectTemplate('whiteboard', info.realtime, Cryptget);
-                }
-            });
         };
 
         config.onAbort = function () {