KatsuYuzuのブログ

.NET の開発をメインとした日記です。

angularjsでショートカットキーを実現してくれるAngular Hotkeys

angularjsでショートカットキーを実現してくれるAngular Hotkeys。githubのショートカットキー諸々と"?"を押した時にでるアレ。
f:id:KatsuYuzu:20150623010731p:plain

環境

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

f:id:KatsuYuzu:20150623012125p:plain

ソース

github.com

勉強会で紹介しました

clrh.connpass.com