キーボードショートカットの実装
Mousetrapを使ってGitLabにキーボードショートカットを実装しています。
Mousetrapは、キーボードショートカット文字列（mod+shift+p やp b など）をJavaScriptハンドラにバインドできるAPIを提供しています：
// Don't do this; see note below
Mousetrap.bind('p b', togglePerformanceBar)
しかし、ハードコードされたキー・シーケンスをハンドラに関連付けること(上記のように)は、これらのキーボード・ショートカットがユーザーによってカスタマイズされたり無効にされたりすることを防ぎます。
キーボードショートカットをカスタマイズできるようにするために、コマンドは~/behaviors/shortcuts/keybindings.js で定義されています。keysFor メソッドは、指定されたコマンドの正しいキーシーケンスを返す責任を負います：
import { keysFor, TOGGLE_PERFORMANCE_BAR } from '~/behaviors/shortcuts/keybindings'
Mousetrap.bind(keysFor(TOGGLE_PERFORMANCE_BAR), togglePerformanceBar);
ショートカットのカスタマイズ
keybindings.js は、キーボードショートカットのカスタマイズを JSON 文字列としてlocalStorage に保存します。keysFor が呼び出されると、提供されたコマンドオブジェクトのid を使用してlocalStorage で見つかったカスタマイズを検索し、カスタマイズされたキーバインド、またはコマンドがカスタマイズされていない場合はデフォルトのキーバインドを返します。これらのカスタマイズを編集するUIはありません。
新しいショートカットの追加
キーボードショートカットはエンドユーザーによってカスタマイズしたり無効にしたりできるので、開発者はGitLabに_たくさんの_キーボードショートカットを組み込むことを推奨します。使う可能性の低いショートカットは、デフォルトでは無効にしておきましょう。
新しいショートカットを追加するには、keybindings.js で新しいコマンドオブジェクトを定義してエクスポートします：
export const MAKE_COFFEE = {
id: 'foodAndBeverage.makeCoffee',
description: s__('KeyboardShortcuts|Make coffee'),
defaultKeys: ['mod+shift+c'],
};
次に、適切なキーバインドグループオブジェクトに新しいコマンドを追加します：
const COFFEE_GROUP = {
id: 'foodAndBeverage',
name: s__('KeyboardShortcuts|Food and Beverage'),
keybindings: [
MAKE_ESPRESSO,
MAKE_LATTE,
MAKE_COFFEE
];
}
最後に、アプリケーション・コードの中で、keysFor 関数と新しいコマンド・オブジェクトをインポートし、 Mousetrap を使ってショートカットをハンドラにバインドします：
import { keysFor, MAKE_COFFEE } from '~/behaviors/shortcuts/keybindings'
Mousetrap.bind(keysFor(MAKE_COFFEE), makeCoffee);
より多くの例については、keybindings.js のコマンド定義を参照してください。
ショートカットの無効化
空の配列[] にショートカットを_割り当てる_ことで、ショートカットを無効にすることができます。例えば、デフォルトで無効になっている新しいショートカットを導入するには、次のようにコマンドを定義します：
export const MAKE_MOCHA = {
id: 'foodAndBeverage.makeMocha',
description: s__('KeyboardShortcuts|Make a mocha'),
defaultKeys: [],
};
カスタマイズできないショートカットの作成
時には、キーボードショートカットをカスタマイズ_できない_ようにすることが重要な場合があります（これはまれなケースですが）。
このような場合、customizable: false でショートカットを定義し、キーバインドのカスタマイズを無効にすることができます：
export const MAKE_AMERICANO = {
id: 'foodAndBeverage.makeAmericano',
description: s__('KeyboardShortcuts|Make an Americano'),
defaultKeys: ['mod+shift+a'],
// this disables customization of this shortcut
customizable: false
};
このショートカットは常にdefaultKeys にバインドされます。
クロスプラットフォームのショートカットの作成
すべてのプラットフォームやブラウザでうまく機能するショートカットを作るのは難しいものです。これが、ショートカットをカスタマイズしたり無効にしたりできることがとても重要である理由のひとつです。
キーボードショートカットをよりポータブルにする重要な方法の1つは、mod ショートカット文字列を使用することです。これはMacではcommand 、それ以外ではctrl に解決されます。
詳しくはMousetrapのドキュメントを参照してください。