Add ability to highlight lines.

irclogger.rb

@@ -58,14 +58,6 @@ def calendar(channel, date)
 
     %Q{<a href="/#{channel}/#{prev_date}">&lt;</a>#{date.strftime("%B %Y").center(18)}<a href="/#{channel}/#{next_date}">&gt;</a>\n#{cal.split("\n")[1..-1].join("\n")}}
   end
-
-  def log_entry(message, &block)
-    if message.msg?
-      haml_tag(:span, :class => "msg", &block)
-    else
-      yield
-    end
-  end
 end
 
 ## Web ##########################

public/app.js

@@ -0,0 +1,86 @@
+var irclogger = {
+  shift: false
+}
+
+$(document).ready(function() {
+  var hash = window.location.hash.substring(1)
+
+  if (hash.length > 0) {
+    $(document.body).addClass("highlight")
+
+    if (hash.match(/^[0-9]/)) {
+      var anchors = hash.split("-")
+      highlightLines(anchors)
+    }
+    else {
+      var anchors = hash.split(",")
+      highlightNicknames(anchors)
+    }
+
+    if (anchors.length > 1) $("a[name='" + anchors[0] + "']")[0].scrollIntoView()
+  }
+
+  $("#log a[name]").click(function() {
+    if (irclogger.shift) {
+      var from = window.location.hash.substring(1).split("-")[0]
+      var to = this.name
+      highlightLines([from, to])
+      window.location.hash = "#" + from + "-" + to
+    }
+    else {
+      $("#log > div").removeClass("highlight")
+      $(this).parent().addClass("highlight")
+      window.location.hash = "#" + this.name
+    }
+
+    return false
+  })
+
+  $(document).keydown(function(e) {
+    if (e.keyCode == 16) irclogger.shift = true
+  })
+
+  $(document).keyup(function(e) {
+    if (e.keyCode == 16) irclogger.shift = false
+  })
+})
+
+function highlightLines(range) {
+  $(document.body).addClass("highlight")
+
+  range = range.sort()
+
+  var first = range[0]
+  var last  = range[1] || range[0]
+
+  $("#log a").each(function() {
+    var $entry = $(this).parent()
+
+    if (this.name >= first && this.name <= last) {
+      $entry.addClass("highlight")
+    }
+    else {
+      $entry.removeClass("highlight")
+    }
+  })
+}
+
+function highlightNicknames(nicknames) {
+  nicknames = $.map(nicknames, function(nickname) {
+    return "<" + nickname + ">"
+  })
+
+  $("#log .msg .nickname").each(function() {
+    var $entry = $(this)
+
+    $.each(nicknames, function() {
+      var nickname = this
+
+      if ($entry.text().indexOf(nickname) > 0) {
+        $entry.parent().addClass("highlight")
+
+        return
+      }
+    })
+  })
+}

views/channel.haml

@@ -1,6 +1,6 @@
 %section#log
   - @messages.each do |message|
-    - log_entry(message) do
+    %div(class="#{message.message_type}")
       %a(href="##{message.timestamp}" name="#{message.timestamp}")= Time.at(message.timestamp).strftime("%H:%M")
 
       - if message.msg?

views/layout.haml

@@ -3,7 +3,7 @@
 %html
   %title
     - if @channel
-      = "##{@channel} on #{@date} // "
+      = "##{@channel} on #{@date} – "
 
     irclogger – Freenode IRC logs
 
@@ -12,8 +12,7 @@
   %link(rel="stylesheet" href="/jquery-ui.1.7.custom")
 
   %script(src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js")
-  %script(src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/jquery-ui.min.js")
-  %script(src="/actions.js")
+  %script(src="/app.js")
   %script(src="http://www.google.com/jsapi?key=ABQIAAAAxIPe_Hqn9UpeceoqlzxTEhQXPjdTLTrPJWH-F2sc2QUCP_uGzBTD6d_hb1OQjUAGLiLr--aKo38HvA" type="text/javascript")
 
   %body

views/styles.sass

@@ -14,6 +14,9 @@ section, header, pre
   display: block
   margin: 0
 
+pre
+  font-family: "Menlo", "Monaco", monospace
+
 a
   color: #fff
 
@@ -52,13 +55,14 @@ a
 #log
   padding: 10px
   margin: #{!header_height} 0 0 #{!channels_width + 1px}
-  color: #777
+  color: #444
 
-  .msg
-    color: #fff
+  div
+    &.highlight
+      color: #fff
 
-  span.nickname
-    color: #FB1263
+      span.nickname
+        color: #FB1263
 
   a[name]
     color: #444
@@ -70,6 +74,13 @@ a
   a
     color: #f6f840
 
+body:not(.highlight)
+  .msg
+    color: #fff
+
+  span.nickname
+    color: #FB1263
+
 header
   background-color: #000
   height = !header_height