Client: Hovering over nicks highlights all users messages

diff --git a/client/assets/css/style.css b/client/assets/css/style.css
index 36684437c1c5d053ea2bb2310678f9ae513ada08..d675499e04df24d7b2b886497fd0069fe0d72a07 100644 (file)
--- a/client/assets/css/style.css
+++ b/client/assets/css/style.css
@@ -141,6 +141,8 @@ a img { border:none; }
     padding:0.5em; margin-top:1em; margin-bottom:1em; margin-right:2em;
 }
 
+.messages .msg.global_nick_highlight { background:#D9D9D9; }
+
 
 
 #memberlists ul { list-style: none; display:none; }

diff --git a/client/assets/dev/view.js b/client/assets/dev/view.js
index 81c92288f75caafe21973239df3dda74c28c479b..03ddd5176e88c9f09397b0452e13f28ba5fa5e0b 100644 (file)
--- a/client/assets/dev/view.js
+++ b/client/assets/dev/view.js
@@ -239,7 +239,9 @@ _kiwi.view.Panel = Backbone.View.extend({
     tagName: "div",\r
     className: "messages",\r
     events: {\r
-        "click .chan": "chanClick"\r
+        "click .chan": "chanClick",\r
+        'mouseenter .msg .nick': 'msgEnter',\r
+        'mouseleave .msg .nick': 'msgLeave'\r
     },\r
 \r
     initialize: function (options) {\r
@@ -274,7 +276,7 @@ _kiwi.view.Panel = Backbone.View.extend({
     newMsg: function (msg) {\r
         // TODO: make sure that the message pane is scrolled to the bottom (Or do we? ~Darren)\r
         var re, line_msg, $this = this.$el,\r
-            nick_colour_hex;\r
+            nick_colour_hex, nick_hex;\r
 \r
         // Escape any HTML that may be in here\r
         msg.msg =  $('<div />').text(msg.msg).html();\r
@@ -321,8 +323,17 @@ _kiwi.view.Panel = Backbone.View.extend({
 \r
         msg.nick_style = 'color:' + nick_colour_hex + ';';\r
 \r
+        // Generate a hex string from the nick to be used as a CSS class name\r
+        nick_hex = msg.nick_css_class = '';\r
+        if (msg.nick) {\r
+            _.map(msg.nick.split(''), function (char) {\r
+                nick_hex += char.charCodeAt(0).toString(16);\r
+            });\r
+            msg.nick_css_class = 'nick_' + nick_hex;\r
+        }\r
+\r
         // Build up and add the line\r
-        line_msg = '<div class="msg <%= type %>"><div class="time"><%- time %></div><div class="nick" style="<%= nick_style %>"><%- nick %></div><div class="text" style="<%= style %>"><%= msg %> </div></div>';\r
+        line_msg = '<div class="msg <%= type %> <%= nick_css_class %>"><div class="time"><%- time %></div><div class="nick" style="<%= nick_style %>"><%- nick %></div><div class="text" style="<%= style %>"><%= msg %> </div></div>';\r
         $this.append(_.template(line_msg, msg));\r
 \r
         // Activity/alerts based on the type of new message\r
@@ -356,6 +367,39 @@ _kiwi.view.Panel = Backbone.View.extend({
             _kiwi.gateway.join($(event.srcElement).text());\r
         }\r
     },\r
+\r
+    msgEnter: function (event) {\r
+        var nick_class;\r
+\r
+        // Find a valid class that this element has\r
+        _.each($(event.currentTarget).parent('.msg').attr('class').split(' '), function (css_class) {\r
+            if (css_class.match(/^nick_[a-z0-9]+/i)) {\r
+                nick_class = css_class;\r
+            }\r
+        });\r
+\r
+        // If no class was found..\r
+        if (!nick_class) return;\r
+\r
+        $('.'+nick_class).addClass('global_nick_highlight');\r
+    },\r
+\r
+    msgLeave: function (event) {\r
+        var nick_class;\r
+\r
+        // Find a valid class that this element has\r
+        _.each($(event.currentTarget).parent('.msg').attr('class').split(' '), function (css_class) {\r
+            if (css_class.match(/^nick_[a-z0-9]+/i)) {\r
+                nick_class = css_class;\r
+            }\r
+        });\r
+\r
+        // If no class was found..\r
+        if (!nick_class) return;\r
+\r
+        $('.'+nick_class).removeClass('global_nick_highlight');\r
+    },\r
+\r
     show: function () {\r
         var $this = this.$el;\r
 \r