Gmail みたいな shortcut key を実現するための javascript ライブラリ

Gmailはショートカットキーが便利です。
何が便利って、複数キーの組み合わせによるショートカットがいいんです。

例えば、 Gmail 上で「?」キーを押すと表示されるショートカットヘルプから一部引用すると、

	Jumping
g then i :	Go to Inbox
g then s :	Go to Starred conversations
g then t :	Go to Sent messages
g then d :	Go to Drafts
g then a :	Go to All mail
g then c :	Go to Contacts

        Threadlist selection
* then a :	Select all conversations
* then n :	Deselect all conversations
* then r :	Select read conversations
* then u :	Select unread conversations
* then s :	Select starred conversations
* then t :	Select unstarred conversations

これがすごく便利なのでどうやってるのか知りたかったんだけど、
Gmail のソースコードは難読化してあって僕みたいなものには読むことができませんでした。

でも、僕たちには hotkey.js というすばらしいライブラリがあります。
LDR や Fastladderにも使われてるやつですね。
これを拡張して Gmail みたいに複数キーの組み合わせのショートカットを簡単に実現できるようにしました。

使い方

動作デモ を見てください。jqueryが必要です。

ダウンロード

hotkey.multi.js

• jquery が必須です。
• 本家は prototype.js 用なので、 jquery で動作するように少し変更している部分があります。
• 下記の差分を追加するなり、hotkey.js の後にベルファイルで読み込むなりすれば本家のものでも動作するんじゃないかと思います。

これつかって JSON Editor のショートカットをちゃんと vi ライクにするよー。

hotkey.js に追加したコード

HotKey.prototype._keyfunc = {};
HotKey.prototype._keylog = [];
HotKey.prototype._interval = 500;
HotKey.prototype._timerid = '';
HotKey.prototype._separater = '+';

HotKey.prototype.invoke = function(input){
	input = input || this.lastInput;
	var e = this.event;

	if (input != 'shift') this._keylog.push(input);
	
	clearTimeout(this._timerid);
	var keys = this._keylog.join(this._separater);
	if(this._keyfunc.hasOwnProperty(keys)){
	    this._keyfunc[keys].call(this,e);
	    this.abort && /*Event.stop(e);*/ e.preventDefault ? e.preventDefault() : e.stopPropagation();

	    this._keylog = [];
	    return true;
	} else {
	    var self = this;
	    this._timerid = setTimeout(function(){self._keylog=[];}, this._interval);
	    
	    this.abort && /*Event.stop(e);*/ e.preventDefault ? e.preventDefault() : e.stopPropagation();
	    return true;
	}
}