Add keyboard navigation

This commit is contained in:
Alexey Kuleshov 2012-04-19 18:26:40 +03:00
parent 20b5635aff
commit 3b446217ad
5 changed files with 177 additions and 66 deletions

View File

@ -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

View File

@ -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

View File

@ -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($('<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.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);

4
public/javascripts/keymaster.min.js vendored Normal file
View File

@ -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;j<c[b].length;j++){g=c[b][j];if(g.scope==e||g.scope=="all"){k=g.mods.length>0;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;i<e.length;i++){h=[],a=e[i].split("+");if(a.length>1){h=a.slice(0,a.length-1);for(j=0;j<h.length;j++)h[j]=f[h[j]];a=[a[a.length-1]]}a=a[0],a=g[a]||a.toUpperCase().charCodeAt(0),a in c||(c[a]=[]),c[a].push({shortcut:e[i],scope:b,method:d,key:e[i],mods:h})}}function m(a){var b=(a.target||a.srcElement).tagName;return b!="INPUT"&&b!="SELECT"&&b!="TEXTAREA"}function n(a){e=a||"all"}function o(){return e||"all"}function p(a){var b,d,e;for(b in c){d=c[b];for(e=0;e<d.length;)d[e].scope===a?d.splice(e,1):e++}}function q(a,b,c){a.addEventListener?a.addEventListener(b,c,!1):a.attachEvent&&a.attachEvent("on"+b,function(){c(window.event)})}var b,c={},d={16:!1,18:!1,17:!1,91:!1},e="all",f={"⇧":16,shift:16,"⌥":18,alt:18,option:18,"⌃":17,ctrl:17,control:17,"⌘":91,command:91},g={backspace:8,tab:9,clear:12,enter:13,"return":13,esc:27,escape:27,space:32,left:37,up:38,right:39,down:40,del:46,"delete":46,home:36,end:35,pageup:33,pagedown:34,",":188,".":190,"/":191,"`":192,"-":189,"=":187,";":186,"'":222,"[":219,"]":221,"\\":220};for(b=1;b<20;b++)f["f"+b]=111+b;for(b in f)l[b]=!1;q(document,"keydown",i),q(document,"keyup",j),q(window,"focus",k),a.key=l,a.key.setScope=n,a.key.getScope=o,a.key.deleteScope=p,a.key.filter=m,typeof module!="undefined"&&(module.exports=key)})(this);

View File

@ -8,6 +8,7 @@
%script{:src => "/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