AngularJS hotkeys

AngularJS hotkeys je velice jednoduchá komponenta, která umožní snadné zpracování klávesových zkratek. Ty totiž mohou být důležité pro snadné ovládání a tak i přívětivost aplikace. Jejich ruční zpracování je však dost zdlouhavé a náročné. Zvlášť pokud je klávesových zkratek hodně nebo pokud aplikace nabízí možnost předělat si tyto klávesové zkratky podle sebe.

Instalace a nastavení

Komponentu lze snadno nainstalovat pomocí bower nebo stažením z repositáře

bower install angular-hotkeys

Samotná komponenta je jediný soubor, který má (bez minimalizace, se všemi JSDoc komentáři) kolem 200 řádek. Stačí ho jen přidat do stránky a modulu, kde chceme zkratky používat, přidat závislost drahak.hotkeys.

angular.module('app', ['drahak.hotkeys']);

Použití klávesových zkratek

Pro zaregistrování klávesové zkratky můžeme použít službu $hotkey. Ta zaregistruje událost na globálním objektu window. Pokud chcete použít zkratky jen v kontextu kteréhokoli jiného HTML elementu, lze použít tovární funkce HotkeysElement, která jako jediný argument vyžaduje právě HTMLElement a vytvoří službu HotKey.

Události se přidávají pomocí metody bind. Jako první argument můžeme zadat textový řetězec vyjadřující klávesovou zkratku, kde každá klávesa je oddělena znakem +. Můžeme použít speciální výrazy jako např. Esc, Ctrl, Control, Enter, left, up, down, right apod. Tento výraz je zpracován službou ParseKey, která z textového výrazu udělá pole kódů jednotlivých kláves. Nezáleží na velkých/malých písmenech. Druhý argument je funkce pro zpracování události.

$hotkey.bind('Ctrl + B', function(event) {
    // zpracování zkratky Ctrl + B
});

Pár dalších příkladů platných výrazů:

Ctrl + Shift + E
ContRoL + escape + a
shift + A
A+B
E +r

Direktiva

Klávesové zkratky můžeme vkládat také pomocí direktivy hotkey, kterou lze použít jako element nebo atribut. Pokud ji použijeme jako element, bude registrovat všechny události na objektu window (budou globální pro celou aplikaci). Atribut hotkey zase zaregistruje událost jen na daném elementu. Událost, která se má provést, pak dáme do atributu invoke. Do něj můžeme vložit normální AngularJS výraz, který se provede s lokální proměnnou $event (stejně jako všechny direktivy událostí v AngularJS - ngChange, ngClick apod.)

<div hotkey="Esc" invoke="close($event)"></div>
<hotkey bind="Esc" invoke="close($event)"  />

Pokud je třeba zaregistrovat více událostí, můžeme uvést objekt přímo v atributu hotkey (nebo ho předat ze scope z controlleru), kde klíč bude klávesová zkratka a hodnota reference na funkci. V tomto případě nejde uvést AngularJS výraz a předané funkce budou zavolány s parametrem Event.

<div hotkey="{ 'Esc': close, 'Ctrl + C': close }"></div>
<hotkey bind="{ 'Esc': close, 'Ctrl + C': close }" />

Vývoj

Udělali byste něco lépe? Nebojte se poslat pull-request do GIT repositáře Testy jsou napsané v knihovně JsamineBDD a lze je spustit pomocí test runneru Karma.

karma start karma.conf.js

V další lekci, AngularJS filtry&moduly, si ukážeme, jak filtrovat výstup v AngluarJS pomocí vestavěných filtrů a taky si ukážeme, jak takový filtr vytvořit a používat i mimo šablonu.