Merge pull request #65 from toy/stop_key_events

Stop key events

public/javascripts/application.coffee

@@ -62,23 +62,29 @@ class MailCatcher
       id = @selectedMessage() || 1
       id -=  1  if id > 1
       @loadMessage(id)
+      false
 
     key 'down', =>
       id = @selectedMessage() || @messagesCount()
       id += 1 if id < @messagesCount()
       @loadMessage(id)
+      false
 
     key '⌘+up, ctrl+up', =>
       @loadMessage(1)
+      false
 
     key '⌘+down, ctrl+down', =>
       @loadMessage @messagesCount()
+      false
 
     key 'left', =>
       @openTab @previousTab()
+      false
 
     key 'right', =>
       @openTab @nextTab()
+      false
 
     @refresh()
     @subscribe()
@@ -155,13 +161,24 @@ class MailCatcher
         .append($('<td/>').text(message.subject or "No subject").toggleClass("blank", !message.subject))
         .append($('<td/>').text @formatDate message.created_at)
 
+  scrollToRow: (row) ->
+    relativePosition = row.offset().top - $('#messages').offset().top
+    if relativePosition < 0
+      $('#messages').scrollTop($('#messages').scrollTop() + relativePosition - 20)
+    else
+      overflow = relativePosition + row.height() - $('#messages').height()
+      if overflow > 0
+        $('#messages').scrollTop($('#messages').scrollTop() + overflow + 20)
+
   loadMessage: (id) ->
     id = id.id if id?.id?
     id ||= $('#messages tr.selected').attr 'data-message-id'
 
     if id?
       $('#messages tbody tr:not([data-message-id="'+id+'"])').removeClass 'selected'
-      $('#messages tbody tr[data-message-id="'+id+'"]').addClass 'selected'
+      messageRow = $('#messages tbody tr[data-message-id="'+id+'"]')
+      messageRow.addClass 'selected'
+      @scrollToRow(messageRow)
 
       $.getJSON '/messages/' + id + '.json', (message) =>
         $('#message .metadata dd.created_at').text @formatDate message.created_at

public/javascripts/application.js

@@ -90,25 +90,31 @@
         var id;
         id = _this.selectedMessage() || 1;
         if (id > 1) id -= 1;
-        return _this.loadMessage(id);
+        _this.loadMessage(id);
+        return false;
       });
       key('down', function() {
         var id;
         id = _this.selectedMessage() || _this.messagesCount();
         if (id < _this.messagesCount()) id += 1;
-        return _this.loadMessage(id);
+        _this.loadMessage(id);
+        return false;
       });
       key('⌘+up, ctrl+up', function() {
-        return _this.loadMessage(1);
+        _this.loadMessage(1);
+        return false;
       });
       key('⌘+down, ctrl+down', function() {
-        return _this.loadMessage(_this.messagesCount());
+        _this.loadMessage(_this.messagesCount());
+        return false;
       });
       key('left', function() {
-        return _this.openTab(_this.previousTab());
+        _this.openTab(_this.previousTab());
+        return false;
       });
       key('right', function() {
-        return _this.openTab(_this.nextTab());
+        _this.openTab(_this.nextTab());
+        return false;
       });
       this.refresh();
       this.subscribe();
@@ -212,13 +218,29 @@
       return $('#messages tbody').append($('<tr />').attr('data-message-id', message.id.toString()).append($('<td/>').text(message.sender || "No sender").toggleClass("blank", !message.sender)).append($('<td/>').text((message.recipients || []).join(', ') || "No receipients").toggleClass("blank", !message.recipients.length)).append($('<td/>').text(message.subject || "No subject").toggleClass("blank", !message.subject)).append($('<td/>').text(this.formatDate(message.created_at))));
     };
 
+    MailCatcher.prototype.scrollToRow = function(row) {
+      var overflow, relativePosition;
+      relativePosition = row.offset().top - $('#messages').offset().top;
+      if (relativePosition < 0) {
+        return $('#messages').scrollTop($('#messages').scrollTop() + relativePosition - 20);
+      } else {
+        overflow = relativePosition + row.height() - $('#messages').height();
+        if (overflow > 0) {
+          return $('#messages').scrollTop($('#messages').scrollTop() + overflow + 20);
+        }
+      }
+    };
+
     MailCatcher.prototype.loadMessage = function(id) {
-      var _this = this;
+      var messageRow,
+        _this = this;
       if ((id != null ? id.id : void 0) != null) id = id.id;
       id || (id = $('#messages tr.selected').attr('data-message-id'));
       if (id != null) {
         $('#messages tbody tr:not([data-message-id="' + id + '"])').removeClass('selected');
-        $('#messages tbody tr[data-message-id="' + id + '"]').addClass('selected');
+        messageRow = $('#messages tbody tr[data-message-id="' + id + '"]');
+        messageRow.addClass('selected');
+        this.scrollToRow(messageRow);
         return $.getJSON('/messages/' + id + '.json', function(message) {
           var $ul;
           $('#message .metadata dd.created_at').text(_this.formatDate(message.created_at));