From 0197b21c9afb03cff919b918a42341bb8aa34b30 Mon Sep 17 00:00:00 2001
From: Darren <darren@darrenwhitlen.com>
Date: Tue, 6 Nov 2012 21:25:32 +0000
Subject: [PATCH] Client: Hovering over nicks highlights all users messages

---
 client/assets/css/style.css |  2 ++
 client/assets/dev/view.js   | 50 ++++++++++++++++++++++++++++++++++---
 2 files changed, 49 insertions(+), 3 deletions(-)

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