Quick buttons for modflair and adminflair

changelog

@@ -1,3 +1,8 @@
+Sat Sep 21 02:21 2013 CDT
+    * www/assets/js/ui.js, www/assets/js/ui.js, www/assets/js/util.js,
+      www/channel.html, www/assets/css/ytsync.css: Add quick buttons for
+      modflair and adminflair
+
 Sat Sep 21 00:29 2013 CDT
     * www/assets/js/util.js: support a "Nobody" permission level (set
       arbitrarily high)

www/assets/css/ytsync.css

@@ -360,3 +360,7 @@ body {
 #ytapiplayer, #ytapiplayer > iframe {
     border: none;
 }
+
+#adminflair {
+    margin-left: 3px;
+}

www/assets/js/ui.js

@@ -38,7 +38,8 @@ function generateToggle(chevron, div) {
 }
 
 /* setup show/hide toggles */
-generateToggle("#usercountwrap", "#userlist");
+generateToggle("#usercount", "#userlist");
+generateToggle("#userlisttoggle", "#userlist");
 $("#usercountwrap").click(scrollChat);
 generateToggle("#librarytoggle", "#librarywrap");
 generateToggle("#userpltoggle", "#userplaylistwrap");
@@ -69,14 +70,40 @@ $("#logout").click(function() {
 
 /* chatbox */
 
-$("#usercountwrap").mouseenter(function (ev) {
+$("#modflair").click(function () {
+    var m = $("#modflair");
+    if (m.hasClass("label-success")) {
+        USEROPTS.modhat = false;
+        m.removeClass("label-success")
+         .addClass("label-default");
+    } else {
+        USEROPTS.modhat = true;
+        m.removeClass("label-default")
+         .addClass("label-success");
+    }
+});
+
+$("#adminflair").click(function () {
+    var m = $("#adminflair");
+    if (m.hasClass("label-important")) {
+        USEROPTS.adminhat = false;
+        m.removeClass("label-important")
+         .addClass("label-default");
+    } else {
+        USEROPTS.adminhat = true;
+        m.removeClass("label-default")
+         .addClass("label-important");
+    }
+});
+
+$("#usercount").mouseenter(function (ev) {
     var breakdown = calcUserBreakdown();
     // re-using profile-box class for convenience
     var popup = $("<div/>")
         .addClass("profile-box")
         .css("top", (ev.pageY + 5) + "px")
         .css("left", (ev.pageX) + "px")
-        .appendTo($("#usercountwrap"));
+        .appendTo($("#usercount"));
 
     var contents = "";
     for(var key in breakdown) {
@@ -87,8 +114,8 @@ $("#usercountwrap").mouseenter(function (ev) {
     popup.html(contents);
 });
 
-$("#usercountwrap").mousemove(function (ev) {
+$("#usercount").mousemove(function (ev) {
-    var popup = $("#usercountwrap").find(".profile-box");
+    var popup = $("#usercount").find(".profile-box");
     if(popup.length == 0)
         return;
 
@@ -96,8 +123,8 @@ $("#usercountwrap").mousemove(function (ev) {
     popup.css("left", (ev.pageX) + "px");
 });
 
-$("#usercountwrap").mouseleave(function () {
+$("#usercount").mouseleave(function () {
-    $("#usercountwrap").find(".profile-box").remove();
+    $("#usercount").find(".profile-box").remove();
 });
 
 $("#messagebuffer").mouseenter(function() { SCROLLCHAT = false; });
@@ -107,7 +134,9 @@ $("#chatline").keydown(function(ev) {
     if(ev.keyCode == 13) {
         var msg = $("#chatline").val();
         if(msg.trim()) {
-            if(USEROPTS.modhat && CLIENT.rank >= Rank.Moderator) {
+            if (USEROPTS.adminhat && CLIENT.rank >= 255) {
+                msg = "/a " + msg;
+            } else if(USEROPTS.modhat && CLIENT.rank >= Rank.Moderator) {
                 msg = "/m " + msg;
             }
             socket.emit("chatMsg", {

www/assets/js/util.js

@@ -798,6 +798,14 @@ function applyOpts() {
             }
         });
     }
+
+    if (USEROPTS.modhat) {
+        $("#modflair").removeClass("label-default")
+            .addClass("label-success");
+    } else {
+        $("#modflair").removeClass("label-success")
+            .addClass("label-default");
+    }
 }
 
 applyOpts();
@@ -1039,6 +1047,9 @@ function handlePermissionChange() {
 
     setVisible("#userpltogglewrap", CLIENT.rank >= 1);
 
+    setVisible("#modflair", CLIENT.rank >= 2);
+    setVisible("#adminflair", CLIENT.rank >= 255);
+
     setVisible("#playlisttogglewrap", hasPermission("playlistadd"));
     $("#queue_next").attr("disabled", !hasPermission("playlistnext"));
     $("#qlockbtn").attr("disabled", CLIENT.rank < 2);

www/channel.html

@@ -64,9 +64,11 @@
               <!-- chat container -->
               <div class="span5" id="chatwrap">
                 <!-- user count -->
-                <div id="usercountwrap" class="pointer">
+                <div id="usercountwrap">
-                  <i class="icon-chevron-up pull-left" id="userlisttoggle" title="Show/Hide Userlist"></i>
+                  <i class="icon-chevron-up pull-left pointer" id="userlisttoggle" title="Show/Hide Userlist"></i>
-                  <p id="usercount">Not connected</p>
+                  <span id="usercount" class="pointer">Not connected</span>
+                  <span id="adminflair" class="pull-right label label-default pointer" style="display: none">A</span>
+                  <span id="modflair" class="pull-right label label-default pointer" style="display: none">M</span>
                 </div>
                 <!-- userlist -->
                 <div id="userlist">