angularjsでショートカットキーを実現してくれるAngular Hotkeys
angularjsでショートカットキーを実現してくれるAngular Hotkeys。githubのショートカットキー諸々と"?"を押した時にでるアレ。
環境
- TypeScript 1.4
- AngularJS 1.4.1
- angular-hotkeys 1.4.5
Angular Hotkeys
モジュールを読み込んで、該当のスコープでキーを追加します。
angular.module("app", ["cfp.hotkeys"])
allowIn
は指定の要素でキーを有効にするかどうか。キーは既定ではINPUT要素で無効になっています。業務系でありがちなファンクションキーを指定する時にはallowIn
でINPUTを指定しました。
class MainController { constructor( $scope: ng.IScope, $http: ng.IHttpService, hotkeys: angular.hotkeys.HotkeysProvider) { hotkeys.bindTo($scope) .add( { combo: "s", allowIn: ["INPUT"], description: "API の呼び出し", callback: (event: Event) => { $http.get("api の url") .then( (response: ng.IHttpPromiseCallbackArg<{}>) => { alert(response.data); }); } }); } }
オプションでショートカットキーのチートシート("?"を押したときのヘルプ表示)のオンオフも。
angular.module("app", ["cfp.hotkeys"]) .config( ["hotkeysProvider", (hotkeysProvider: angular.hotkeys.HotkeysProvider) => { hotkeysProvider.includeCheatSheet = true; }])
オマケ
そのままだとせっかくのショートカットキーも隠し機能になっちゃったりするので、ディレクティブで画面表示できるようにして使ってました。
angular.module("app") .directive("appDisplayHotkey", ["hotkeys", "$timeout", (hotkeys: angular.hotkeys.HotkeysProvider, $timeout: ng.ITimeoutService) => { return { link: ( scope: ng.IScope, element: ng.IAugmentedJQuery, attributes: any, controller: any) => { var hotkey = hotkeys.get(attributes.appDisplayHotkey); if (!hotkey) { return; } element.text("[" + (<string>(<any>hotkey).format()[0]).toUpperCase() + "]: " + hotkey.description); element.on("click",(e: Event) => { // 画面遷移などを動作させるために UI スレッドで実行 $timeout(() => { hotkey.callback(e, hotkey); }); }); } }; }]);
<ul> <li class="btn btn-default" app-display-hotkey="a"></li> <li class="btn btn-default" app-display-hotkey="s"></li> </ul>