Improvements to userlist dropdown

- Add a <select> menu to easily change rank
- Only have one leader button, change value between "Give Leader" and "Remove Leader"

www/assets/js/callbacks.js

@@ -485,6 +485,8 @@ Callbacks = {
 
     setChannelRank: function(data) {
         var ents = $("#channelranks").data("entries");
+        if(typeof ents === undefined)
+            return;
         for(var i = 0; i < ents.length; i++) {
             if(ents[i].name == data.user) {
                 ents[i].rank = data.rank;
@@ -618,11 +620,12 @@ Callbacks = {
     },
 
     addUser: function(data) {
-        var div = $("<div/>").attr("class", "userlist_item");
+        var div = $("<div/>")
+            .addClass("userlist_item userlist-" + data.name);
         var flair = $("<span/>").appendTo(div);
         var nametag = $("<span/>").text(data.name).appendTo(div);
         formatUserlistItem(div, data);
-        addUserDropdown(div, data.name);
+        addUserDropdown(div, data);
         var users = $("#userlist").children();
         for(var i = 0; i < users.length; i++) {
             var othername = users[i].children[1].innerHTML;
@@ -662,46 +665,24 @@ Callbacks = {
             }
 
         }
-        var users = $("#userlist").children();
+        var user = $(".userlist-" + data.name);
-        for(var i = 0; i < users.length; i++) {
+        formatUserlistItem(user, data);
-            var name = users[i].children[1].innerHTML;
+        addUserDropdown(user, data);
-            // Reformat user
-            if(name == data.name) {
-                formatUserlistItem($(users[i]), data);
-            }
-        }
-
     },
 
     setAFK: function (data) {
-        var users = $("#userlist").children();
+        var user = $(".userlist-" + data.name);
-        for(var i = 0; i < users.length; i++) {
+        user.find(".icon-time").remove();
-            var name = users[i].children[1].innerHTML;
+        $(user[0].children[1]).css("font-style", "");
-            // Reformat user
+        if(data.afk) {
-            if(name == data.name) {
+            $("<i/>").addClass("icon-time")
-                var u = $(users[i]);
+                .appendTo(user[0].children[0]);
-                u.find(".icon-time").remove();
+            $(user[0].children[1]).css("font-style", "italic");
-                $(users[i].children[1]).css("font-style", "");
-                if(data.afk) {
-                    $("<i/>").addClass("icon-time")
-                        .appendTo(users[i].children[0]);
-                    $(users[i].children[1]).css("font-style", "italic");
-                }
-            }
         }
     },
 
     userLeave: function(data) {
-        var users = $("#userlist").children();
+        $(".userlist-" + data.name).remove();
-        for(var i = 0; i < users.length; i++) {
-            var name = users[i].children[1].innerHTML;
-            if(name == data.name) {
-                $(users[i]).remove();
-                // Note: no break statement here because allowing
-                // the loop to continue means a free cleanup if something
-                // goes wrong and there's a duplicate name
-            }
-        }
     },
 
     drinkCount: function(count) {

www/assets/js/util.js

@@ -116,64 +116,107 @@ function getNameColor(rank) {
         return "";
 }
 
-function addUserDropdown(entry, name) {
+function addUserDropdown(entry, data) {
+    entry.data("dropdown-info", data);
+    var name = data.name,
+        rank = data.rank,
+        leader = data.leader;
     entry.find(".user-dropdown").remove();
-    var menu = $("<div/>").addClass("user-dropdown")
+    var menu = $("<div/>")
-        .appendTo(entry);
+        .addClass("user-dropdown")
-    menu.hide();
+        .appendTo(entry)
+        .hide();
 
     $("<strong/>").text(name).appendTo(menu);
     $("<br/>").appendTo(menu);
+
+    /* rank selector (admin+ only)
+       to prevent odd behaviour, this selector is only visible
+       when the selected user has a normal rank (e.g. not a guest
+       or a non-moderator leader
+    */
+    if(CLIENT.rank >= 3 && CLIENT.rank > rank && rank > 0 && rank != 1.5) {
+        var sel = $("<select/>")
+            .addClass("input-block-level")
+            .appendTo(menu);
+        $("<option/>").attr("value", "1").text("Regular User")
+            .appendTo(sel);
+        $("<option/>").attr("value", "2").text("Moderator")
+            .appendTo(sel);
+        if(CLIENT.rank > 3) {
+            $("<option/>").attr("value", "3").text("Channel Admin")
+                .appendTo(sel);
+            if(rank > 3) {
+                $("<option/>").attr("value", ""+rank)
+                    .text("Current Rank (" + rank + ")")
+                    .appendTo(sel);
+            }
+        }
+        sel.click(function () {
+            socket.emit("setChannelRank", {
+                user: name,
+                rank: parseInt(sel.val())
+            });
+        });
+        sel.val(""+rank);
+    }
+    
+    /* ignore button */
     var ignore = $("<button/>").addClass("btn btn-mini btn-block")
-        .appendTo(menu);
+        .appendTo(menu)
-    ignore.click(function() {
+        .click(function () {
-        if(IGNORED.indexOf(name) == -1) {
+            if(IGNORED.indexOf(name) == -1) {
-            ignore.text("Unignore User");
+                ignore.text("Unignore User");
-            IGNORED.push(name);
+                IGNORED.push(name);
-        }
+            } else {
-        else {
+                ignore.text("Ignore User");
-            ignore.text("Ignore User");
+                IGNORED.splice(IGNORED.indexOf(name), 1);
-            IGNORED.splice(IGNORED.indexOf(name), 1);
+            }
-        }
+        });
-    });
     if(IGNORED.indexOf(name) == -1) {
         ignore.text("Ignore User");
-    }
+    } else {
-    else {
         ignore.text("Unignore User");
     }
+
+    /* gib/remove leader (moderator+ only) */
+    if(CLIENT.rank >= 2) {
+        var ldr = $("<button/>").addClass("btn btn-mini btn-block")
+            .appendTo(menu);
+        if(leader) {
+            ldr.text("Remove Leader");
+            ldr.click(function () {
+                socket.emit("assignLeader", {
+                    name: ""
+                });
+            });
+        } else {
+            ldr.text("Give Leader");
+            ldr.click(function () {
+                socket.emit("assignLeader", {
+                    name: name
+                });
+            });
+        }
+    }
+
+    /* kick button */
     if(hasPermission("kick")) {
         $("<button/>").addClass("btn btn-mini btn-block")
             .text("Kick")
-            .click(function() {
+            .click(function () {
                 socket.emit("chatMsg", {
                     msg: "/kick " + name
                 });
             })
             .appendTo(menu);
     }
-    if(CLIENT.rank >= 2) {
+
-        $("<button/>").addClass("btn btn-mini btn-block")
+    /* ban buttons */
-            .text("Give Leader")
-            .click(function() {
-                socket.emit("assignLeader", {
-                    name: name
-                });
-            })
-            .appendTo(menu);
-        $("<button/>").addClass("btn btn-mini btn-block")
-            .text("Take Leader")
-            .click(function() {
-                socket.emit("assignLeader", {
-                    name: ""
-                });
-            })
-            .appendTo(menu);
-    }
     if(hasPermission("ban")) {
         $("<button/>").addClass("btn btn-mini btn-block")
             .text("Name Ban")
-            .click(function() {
+            .click(function () {
                 socket.emit("chatMsg", {
                     msg: "/ban " + name
                 });
@@ -181,7 +224,7 @@ function addUserDropdown(entry, name) {
             .appendTo(menu);
         $("<button/>").addClass("btn btn-mini btn-block")
             .text("IP Ban")
-            .click(function() {
+            .click(function () {
                 socket.emit("chatMsg", {
                     msg: "/ipban " + name
                 });
@@ -189,13 +232,11 @@ function addUserDropdown(entry, name) {
             .appendTo(menu);
     }
 
-
     entry.contextmenu(function(ev) {
         ev.preventDefault();
         if(menu.css("display") == "none") {
             menu.show();
-        }
+        } else {
-        else {
             menu.hide();
         }
         return false;
@@ -906,7 +947,7 @@ function handlePermissionChange() {
     }
     var users = $("#userlist").children();
     for(var i = 0; i < users.length; i++) {
-        addUserDropdown($(users[i]), users[i].children[1].innerHTML);
+        addUserDropdown($(users[i]), $(users[i]).data("dropdown-info"));
     }
 
     $("#chatline").attr("disabled", !hasPermission("chat"));