Move the userlist code in a separate file

customize.dist/src/less/toolbar.less

@@ -440,11 +440,9 @@
 .cryptpad-toolbar-leftside {
     float: left;
     margin-bottom: -1px;
-    .cryptpad-user-list {
-        //float: right;
+    .cryptpad-dropdown-users {
         pre {
-            white-space: pre;
-            margin: 0;
+            margin: 5px 0px;
         }
     }
     button {

customize.dist/toolbar.css

@@ -517,9 +517,8 @@
   float: left;
   margin-bottom: -1px;
 }
-.cryptpad-toolbar-leftside .cryptpad-user-list pre {
-  white-space: pre;
-  margin: 0;
+.cryptpad-toolbar-leftside .cryptpad-dropdown-users pre {
+  margin: 5px 0px;
 }
 .cryptpad-toolbar-leftside button {
   margin: 2px 4px 2px 0px;

www/code/main.js

@@ -120,33 +120,7 @@ define([
                 editor.setOption('readOnly', !bool);
             };
 
-            var userData = module.userData = {}; // List of pretty name of all users (mapped with their server ID)
-            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 UserList;
 
             var config = {
                 initialState: '{}',
@@ -156,7 +130,6 @@ define([
                 validateKey: secret.keys.validateKey || undefined,
                 readOnly: readOnly,
                 crypto: Crypto.createEncryptor(secret.keys),
-                setMyID: setMyID,
                 network: Cryptpad.getNetwork(),
                 transformFunction: JsonOT.validate,
             };
@@ -182,7 +155,7 @@ define([
                 var obj = {
                     content: textValue,
                     metadata: {
-                        users: userData,
+                        users: UserList.userData,
                         defaultTitle: defaultName
                     }
                 };
@@ -213,28 +186,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/);
 
@@ -362,7 +313,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);
@@ -378,17 +329,11 @@ define([
             };
 
              config.onInit = function (info) {
-                userList = info.userList;
+                UserList = Cryptpad.createUserList(info, config.onLocal, Cryptpad);
 
                 var configTb = {
                     displayed: ['title', 'useradmin', 'spinner', 'lag', 'state', 'share', 'userlist', 'newpad', 'limit'],
-                    userList: {
-                        data: userData,
-                        list: userList,
-                        userNetfluxId: info.myID
-                    },
-                    readOnly: readOnly,
-                    ifrw: ifrw,
+                    userList: UserList.getToolbarConfig(),
                     share: {
                         secret: secret,
                         channel: info.channel
@@ -399,14 +344,15 @@ define([
                         suggestName: suggestName
                     },
                     common: Cryptpad,
+                    readOnly: readOnly,
+                    ifrw: ifrw,
                     realtime: info.realtime,
                     network: info.network,
                     $container: $bar
                 };
                 toolbar = module.toolbar = Toolbar.create(configTb);
 
-                var $rightside = $bar.find('.' + Toolbar.constants.rightside);
-                module.$userNameButton = $($bar.find('.' + Toolbar.constants.changeUsername));
+                var $rightside = toolbar.$rightside;
 
                 var editHash;
                 if (!readOnly) {
@@ -555,7 +501,6 @@ define([
                 // set the hash
                 if (!readOnly) { Cryptpad.replaceHash(editHash); }
 
-                Cryptpad.onDisplayNameChanged(setName);
             };
 
             var unnotify = module.unnotify = function () {
@@ -573,7 +518,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({
@@ -633,30 +577,9 @@ define([
                 //Cryptpad.log("Your document is ready");
 
                 onLocal(); // push local state to avoid parse errors later.
-                Cryptpad.getLastName(function (err, lastName) {
-                    if (err) {
-                        console.log("Could not get previous name");
-                        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('code', info.realtime, Cryptget);
-                    }
-                });
+
+                if (readOnly) { return; }
+                UserList.getLastName(toolbar.$userNameButton, isNew);
             };
 
             var cursorToPos = function(cursor, oldText) {

www/common/common-userlist.js

@@ -0,0 +1,97 @@
+define([
+    'jquery',
+    '/common/cryptget.js',
+], function ($, Cryptget) {
+    var module = {};
+
+    module.create = function (info, onLocal, Cryptpad) {
+        var exp = {};
+
+        var userData = exp.userData = {};
+        var userList = exp.userList = info.userList;
+        var myData = exp.myData = {};
+        var myUserName = exp.myUserName = info.myID;
+        var myNetfluxId = exp.myNetfluxId = info.myID;
+
+        var users = userList.users;
+        var addToUserData = exp.addToUserData = function(data) {
+            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);
+            }
+        };
+
+        exp.getToolbarConfig = function () {
+            return {
+                data: userData,
+                list: userList,
+                userNetfluxId: myNetfluxId
+            };
+        };
+
+        var setName = exp.setName = function (newName, cb) {
+            if (typeof(newName) !== 'string') { return; }
+            var myUserNameTemp = newName.trim();
+            if(newName.trim().length > 32) {
+              myUserNameTemp = myUserNameTemp.substr(0, 32);
+            }
+            myUserName = myUserNameTemp;
+            myData[myNetfluxId] = {
+               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;
+                }
+                if (typeof cb === "function") { onLocal(); }
+            });
+        };
+
+        exp.getLastName = function ($changeNameButton, isNew) {
+            Cryptpad.getLastName(function (err, lastName) {
+                if (err) {
+                    console.log("Could not get previous name");
+                    console.error(err);
+                    return;
+                }
+                // Update the toolbar list:
+                // Add the current user in the metadata
+                if (typeof(lastName) === 'string') {
+                    setName(lastName, onLocal);
+                } else {
+                    myData[myNetfluxId] = {
+                        name: "",
+                        uid: Cryptpad.getUid(),
+                    };
+                    addToUserData(myData);
+                    onLocal();
+                    $changeNameButton.click();
+                }
+                if (isNew) {
+                    Cryptpad.selectTemplate('code', info.realtime, Cryptget);
+                }
+            });
+        };
+
+        Cryptpad.onDisplayNameChanged(function (newName) {
+            setName(newName, onLocal);
+        });
+
+        return exp;
+    };
+
+    return module;
+});

www/common/cryptpad-common.js

@@ -7,11 +7,12 @@ define([
     '/common/common-hash.js',
     '/common/common-interface.js',
     '/common/common-history.js',
+    '/common/common-userlist.js',
 
     '/common/clipboard.js',
     '/common/pinpad.js',
     '/customize/application_config.js'
-], function ($, Config, Messages, Store, Util, Hash, UI, History, Clipboard, Pinpad, AppConfig) {
+], function ($, Config, Messages, Store, Util, Hash, UI, History, UserList, Clipboard, Pinpad, AppConfig) {
 
 /*  This file exposes functionality which is specific to Cryptpad, but not to
     any particular pad type. This includes functions for committing metadata
@@ -84,6 +85,9 @@ define([
     common.findStronger = Hash.findStronger;
     common.serializeHash = Hash.serializeHash;
 
+    // Userlist
+    common.createUserList = UserList.create;
+
     // History
     common.getHistory = function (config) { return History.create(common, config); };
 

www/common/toolbar2.js

@@ -121,16 +121,15 @@ define([
         // Display only one time each user (if he is connected in multiple tabs)
         var myUid = userData[userNetfluxId] ? userData[userNetfluxId].uid : undefined;
         var uids = [];
-
         userList.forEach(function(user) {
-            if(user !== userNetfluxId) {
+            if (user !== userNetfluxId) {
                 var data = userData[user] || {};
                 var userName = data.name;
                 var userId = data.uid;
                 if (userName && uids.indexOf(userId) === -1 && (!myUid || userId !== myUid)) {
                     uids.push(userId);
                     list.push(userName);
-                } else { i++; }
+                } else if (userName) { i++; }
             }
         });
         return {
@@ -674,7 +673,7 @@ define([
         }
         Cryptpad.createUserAdminMenu(userMenuCfg);
 
-        var $userButton = $userAdmin.find('a.' + USERBUTTON_CLS);
+        var $userButton = toolbar.$userNameButton = $userAdmin.find('a.' + USERBUTTON_CLS);
         $userButton.click(function (e) {
             e.preventDefault();
             e.stopPropagation();