yyyc514/textual_bonfire_style — pull request #3 by int3h (2014-04-16 04:38:31+00:00)
Title: User highlight on mouseover

This commit adds a feature where, when you mouse over a user's name on the left-hand column, next to their messages in the message log, a highlighting effect is applied to the name column next to all of the messages the user sent.

This is accomplished by first changing the new message template so that the `div.nick' elements have a data attribute, `nick`, containing the sending user's nickname. We then add onmouseover and onmouseout event handlers to that same element. We also create a new CSS style for the `.nick-highlighted` class, which makes the element slightly darker than normal.

We then create a new object attached to the `window` object, called BonfireHelpers. It contains two functions: `highlight_nick` takes a username string, finds all the `.nick` elements with a `nick` data attribute matching the desired username and adds the `nick-highlighted` class to them; and `unhighlight_nick`, which finds the matching elements in the same way and removes the class from them.

In the future, we may want to implement this by giving each user a unique CSS class name which we apply to their messages, then adding or removing CSS rules to the page to change the highlighting. In this way, we can exploit WebKit's built-in selector and style engines, rather than doing a Zepto/jQuery search over the entire DOM. However, the trick will be in sanitizing IRC nicks so that they're safe to use as a CSS class names.