From 3b446217ad4792bc8e9a61e2cc22fac92f7cb525 Mon Sep 17 00:00:00 2001 From: Alexey Kuleshov Date: Thu, 19 Apr 2012 18:26:40 +0300 Subject: [PATCH] Add keyboard navigation --- README.md | 1 + public/javascripts/application.coffee | 53 ++++++++ public/javascripts/application.js | 184 +++++++++++++++++--------- public/javascripts/keymaster.min.js | 4 + views/index.haml | 1 + 5 files changed, 177 insertions(+), 66 deletions(-) create mode 100644 public/javascripts/keymaster.min.js diff --git a/README.md b/README.md index 3c19ea7..e61cd98 100644 --- a/README.md +++ b/README.md @@ -20,6 +20,7 @@ MailCatcher runs a super simple SMTP server which catches any message sent to it * Runs as a daemon run in the background. * Sendmail-analogue command, `catchmail`, makes [using mailcatcher from PHP][withphp] a lot easier. * Written super-simply in EventMachine, easy to dig in and change. +* Keyboard navigation between messages ## How diff --git a/public/javascripts/application.coffee b/public/javascripts/application.coffee index 88369d9..d2df383 100644 --- a/public/javascripts/application.coffee +++ b/public/javascripts/application.coffee @@ -58,6 +58,28 @@ class MailCatcher error: -> alert 'Error while quitting.' + key 'up', => + id = @selectedMessage() || 1 + id -= 1 if id > 1 + @loadMessage(id) + + key 'down', => + id = @selectedMessage() || @messagesCount() + id += 1 if id < @messagesCount() + @loadMessage(id) + + key '⌘+up, ctrl+up', => + @loadMessage(1) + + key '⌘+down, ctrl+down', => + @loadMessage @messagesCount() + + key 'left', => + @openTab @previousTab() + + key 'right', => + @openTab @nextTab() + @refresh() @subscribe() @@ -78,6 +100,37 @@ class MailCatcher date &&= @offsetTimeZone(date) date &&= date.toString("dddd, d MMM yyyy h:mm:ss tt") + messagesCount: -> + $('#messages tr').length - 1 + + tabs: -> + $('#message ul').children('.tab') + + getTab: (i) => + $(@tabs()[i]) + + selectedTab: => + @tabs().index($('#message li.tab.selected')) + + openTab: (i) => + @getTab(i).children('a').click() + + previousTab: (tab)=> + i = if tab || tab is 0 then tab else @selectedTab() - 1 + i = @tabs().length - 1 if i < 0 + if @getTab(i).is(":visible") + i + else + @previousTab(i-1) + + nextTab: (tab) => + i = if tab then tab else @selectedTab() + 1 + i = 0 if i > @tabs().length - 1 + if @getTab(i).is(":visible") + i + else + @nextTab(i+1) + haveMessage: (message) -> message = message.id if message.id? $("#messages tbody tr[data-message-id=\"#{message}\"]").length > 0 diff --git a/public/javascripts/application.js b/public/javascripts/application.js index 20905a5..67c6891 100644 --- a/public/javascripts/application.js +++ b/public/javascripts/application.js @@ -1,36 +1,37 @@ (function() { var MailCatcher; - + var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; jQuery.expr[':'].icontains = function(a, i, m) { var _ref, _ref2; return ((_ref = (_ref2 = a.textContent) != null ? _ref2 : a.innerText) != null ? _ref : "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0; }; - MailCatcher = (function() { - function MailCatcher() { - var _this = this; - $('#messages tr').live('click', function(e) { + this.nextTab = __bind(this.nextTab, this);; + this.previousTab = __bind(this.previousTab, this);; + this.openTab = __bind(this.openTab, this);; + this.selectedTab = __bind(this.selectedTab, this);; + this.getTab = __bind(this.getTab, this);; $('#messages tr').live('click', __bind(function(e) { e.preventDefault(); - return _this.loadMessage($(e.currentTarget).attr('data-message-id')); - }); - $('input[name=search]').keyup(function(e) { + return this.loadMessage($(e.currentTarget).attr('data-message-id')); + }, this)); + $('input[name=search]').keyup(__bind(function(e) { var query; query = $.trim($(e.currentTarget).val()); if (query) { - return _this.searchMessages(query); + return this.searchMessages(query); } else { - return _this.clearSearch(); + return this.clearSearch(); } - }); - $('#message .views .format.tab a').live('click', function(e) { + }, this)); + $('#message .views .format.tab a').live('click', __bind(function(e) { e.preventDefault(); - return _this.loadMessageBody(_this.selectedMessage(), $($(e.currentTarget).parent('li')).data('message-format')); - }); - $('#message .views .analysis.tab a').live('click', function(e) { + return this.loadMessageBody(this.selectedMessage(), $($(e.currentTarget).parent('li')).data('message-format')); + }, this)); + $('#message .views .analysis.tab a').live('click', __bind(function(e) { e.preventDefault(); - return _this.loadMessageAnalysis(_this.selectedMessage()); - }); + return this.loadMessageAnalysis(this.selectedMessage()); + }, this)); $('#resizer').live({ mousedown: function(e) { var events; @@ -49,7 +50,7 @@ }); } }); - $('nav.app .clear a').live('click', function(e) { + $('nav.app .clear a').live('click', __bind(function(e) { e.preventDefault(); if (confirm("You will lose all your received messages.\n\nAre you sure you want to clear all messages?")) { return $.ajax({ @@ -65,8 +66,8 @@ } }); } - }); - $('nav.app .quit a').live('click', function(e) { + }, this)); + $('nav.app .quit a').live('click', __bind(function(e) { e.preventDefault(); if (confirm("You will lose all your received messages.\n\nAre you sure you want to quit?")) { return $.ajax({ @@ -79,42 +80,106 @@ } }); } - }); + }, this)); + key('up', __bind(function() { + var id; + id = this.selectedMessage() || 1; + if (id > 1) { + id -= 1; + } + return this.loadMessage(id); + }, this)); + key('down', __bind(function() { + var id; + id = this.selectedMessage() || this.messagesCount(); + if (id < this.messagesCount()) { + id += 1; + } + return this.loadMessage(id); + }, this)); + key('⌘+up, ctrl+up', __bind(function() { + return this.loadMessage(1); + }, this)); + key('⌘+down, ctrl+down', __bind(function() { + return this.loadMessage(this.messagesCount()); + }, this)); + key('left', __bind(function() { + return this.openTab(this.previousTab()); + }, this)); + key('right', __bind(function() { + return this.openTab(this.nextTab()); + }, this)); this.refresh(); this.subscribe(); } - MailCatcher.prototype.parseDateRegexp = /^(\d{4})[-\/\\](\d{2})[-\/\\](\d{2})(?:\s+|T)(\d{2})[:-](\d{2})[:-](\d{2})(?:([ +-]\d{2}:\d{2}|\s*\S+|Z?))?$/; - MailCatcher.prototype.parseDate = function(date) { var match; if (match = this.parseDateRegexp.exec(date)) { return new Date(match[1], match[2] - 1, match[3], match[4], match[5], match[6], 0); } }; - MailCatcher.prototype.offsetTimeZone = function(date) { var offset; offset = Date.now().getTimezoneOffset() * 60000; date.setTime(date.getTime() - offset); return date; }; - MailCatcher.prototype.formatDate = function(date) { - if (typeof date === "string") date && (date = this.parseDate(date)); + if (typeof date === "string") { + date && (date = this.parseDate(date)); + } date && (date = this.offsetTimeZone(date)); return date && (date = date.toString("dddd, d MMM yyyy h:mm:ss tt")); }; - + MailCatcher.prototype.messagesCount = function() { + return $('#messages tr').length - 1; + }; + MailCatcher.prototype.tabs = function() { + return $('#message ul').children('.tab'); + }; + MailCatcher.prototype.getTab = function(i) { + return $(this.tabs()[i]); + }; + MailCatcher.prototype.selectedTab = function() { + return this.tabs().index($('#message li.tab.selected')); + }; + MailCatcher.prototype.openTab = function(i) { + return this.getTab(i).children('a').click(); + }; + MailCatcher.prototype.previousTab = function(tab) { + var i; + i = tab || tab === 0 ? tab : this.selectedTab() - 1; + if (i < 0) { + i = this.tabs().length - 1; + } + if (this.getTab(i).is(":visible")) { + return i; + } else { + return this.previousTab(i - 1); + } + }; + MailCatcher.prototype.nextTab = function(tab) { + var i; + i = tab ? tab : this.selectedTab() + 1; + if (i > this.tabs().length - 1) { + i = 0; + } + if (this.getTab(i).is(":visible")) { + return i; + } else { + return this.nextTab(i + 1); + } + }; MailCatcher.prototype.haveMessage = function(message) { - if (message.id != null) message = message.id; + if (message.id != null) { + message = message.id; + } return $("#messages tbody tr[data-message-id=\"" + message + "\"]").length > 0; }; - MailCatcher.prototype.selectedMessage = function() { return $('#messages tr.selected').data('message-id'); }; - MailCatcher.prototype.searchMessages = function(query) { var $rows, selector, token; selector = ((function() { @@ -131,25 +196,23 @@ $rows.not(selector).hide(); return $rows.filter(selector).show(); }; - MailCatcher.prototype.clearSearch = function() { return $('#messages tbody tr').show(); }; - MailCatcher.prototype.addMessage = function(message) { return $('#messages tbody').append($('').attr('data-message-id', message.id.toString()).append($('').text(message.sender || "No sender").toggleClass("blank", !message.sender)).append($('').text((message.recipients || []).join(', ') || "No receipients").toggleClass("blank", !message.recipients.length)).append($('').text(message.subject || "No subject").toggleClass("blank", !message.subject)).append($('').text(this.formatDate(message.created_at)))); }; - MailCatcher.prototype.loadMessage = function(id) { - var _this = this; - if ((id != null ? id.id : void 0) != null) id = id.id; + 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'); - return $.getJSON('/messages/' + id + '.json', function(message) { + return $.getJSON('/messages/' + id + '.json', __bind(function(message) { var $ul; - $('#message .metadata dd.created_at').text(_this.formatDate(message.created_at)); + $('#message .metadata dd.created_at').text(this.formatDate(message.created_at)); $('#message .metadata dd.from').text(message.sender); $('#message .metadata dd.to').text((message.recipients || []).join(', ')); $('#message .metadata dd.subject').text(message.subject); @@ -179,14 +242,13 @@ } $('#message .views .download a').attr('href', "/messages/" + id + ".eml"); if ($('#message .views .tab.analysis.selected').length) { - return _this.loadMessageAnalysis(); + return this.loadMessageAnalysis(); } else { - return _this.loadMessageBody(); + return this.loadMessageBody(); } - }); + }, this)); } }; - MailCatcher.prototype.loadMessageBody = function(id, format) { id || (id = this.selectedMessage()); format || (format = $('#message .views .tab.format.selected').attr('data-message-format')); @@ -197,7 +259,6 @@ return $('#message iframe').attr("src", "/messages/" + id + "." + format); } }; - MailCatcher.prototype.loadMessageAnalysis = function(id) { var $form, $iframe; id || (id = this.selectedMessage()); @@ -212,49 +273,40 @@ }); } }; - MailCatcher.prototype.refresh = function() { - var _this = this; - return $.getJSON('/messages', function(messages) { - return $.each(messages, function(i, message) { - if (!_this.haveMessage(message)) return _this.addMessage(message); - }); - }); + return $.getJSON('/messages', __bind(function(messages) { + return $.each(messages, __bind(function(i, message) { + if (!this.haveMessage(message)) { + return this.addMessage(message); + } + }, this)); + }, this)); }; - MailCatcher.prototype.subscribe = function() { - if (typeof WebSocket !== "undefined" && WebSocket !== null) { + if (typeof WebSocket != "undefined" && WebSocket !== null) { return this.subscribeWebSocket(); } else { return this.subscribePoll(); } }; - MailCatcher.prototype.subscribeWebSocket = function() { - var secure, - _this = this; + var secure; secure = window.location.scheme === 'https'; this.websocket = new WebSocket("" + (secure ? 'wss' : 'ws') + "://" + window.location.host + "/messages"); - return this.websocket.onmessage = function(event) { - return _this.addMessage($.parseJSON(event.data)); - }; + return this.websocket.onmessage = __bind(function(event) { + return this.addMessage($.parseJSON(event.data)); + }, this); }; - MailCatcher.prototype.subscribePoll = function() { - var _this = this; if (this.refreshInterval == null) { - return this.refreshInterval = setInterval((function() { - return _this.refresh(); - }), 1000); + return this.refreshInterval = setInterval((__bind(function() { + return this.refresh(); + }, this)), 1000); } }; - return MailCatcher; - })(); - $(function() { return window.MailCatcher = new MailCatcher; }); - }).call(this); diff --git a/public/javascripts/keymaster.min.js b/public/javascripts/keymaster.min.js new file mode 100644 index 0000000..c8751bc --- /dev/null +++ b/public/javascripts/keymaster.min.js @@ -0,0 +1,4 @@ +// keymaster.js +// (c) 2011 Thomas Fuchs +// keymaster.js may be freely distributed under the MIT license. +(function(a){function h(a,b){var c=a.length;while(c--)if(a[c]===b)return c;return-1}function i(a){var b,g,i,j,k;b=a.keyCode;if(b==93||b==224)b=91;if(b in d){d[b]=!0;for(i in f)f[i]==b&&(l[i]=!0);return}if(!l.filter.call(this,a))return;if(!(b in c))return;for(j=0;j0;for(i in d)if(!d[i]&&h(g.mods,+i)>-1||d[i]&&h(g.mods,+i)==-1)k=!1;(g.mods.length==0&&!d[16]&&!d[18]&&!d[17]&&!d[91]||k)&&g.method(a,g)===!1&&(a.preventDefault?a.preventDefault():a.returnValue=!1,a.stopPropagation&&a.stopPropagation(),a.cancelBubble&&(a.cancelBubble=!0))}}}function j(a){var b=a.keyCode,c;if(b==93||b==224)b=91;if(b in d){d[b]=!1;for(c in f)f[c]==b&&(l[c]=!1)}}function k(){for(b in d)d[b]=!1;for(b in f)l[b]=!1}function l(a,b,d){var e,h,i,j;d===undefined&&(d=b,b="all"),a=a.replace(/\s/g,""),e=a.split(","),e[e.length-1]==""&&(e[e.length-2]+=",");for(i=0;i1){h=a.slice(0,a.length-1);for(j=0;j "/javascripts/xslt-3.2.js"} %script{:src => "/javascripts/date.js"} %script{:src => "/javascripts/flexie.min.js"} + %script{:src => "/javascripts/keymaster.min.js"} %script{:src => "/javascripts/application.js"} %body %header