AngularJS hotkeys

AngularJS hotkeys je veľmi jednoduchá komponenta, ktorá umožní jednoduché spracovanie klávesových skratiek. Tie totiž môžu byť dôležité pre jednoduché ovládanie a tak i prívetivosť aplikácie. Ich ručné spracovanie je však dosť zdĺhavé a náročné. Zvlášť ak je klávesových skratiek veľa alebo ak aplikácia ponúka možnosť prerobiť si tieto klávesové skratky podľa seba.

Inštalácia a nastavenie

Komponent možno ľahko nainštalovať pomocou bower alebo stiahnutím z repozitára

bower install angular-hotkeys

Samotná komponenta je jediný súbor, ktorý má (bez minimalizácia, so všetkými JSDoc komentármi) okolo 200 riadok. Stačí ho len pridať do stránky a modulu, kde chceme skratky používať, pridať závislosť drahak.hotkeys.

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

Použitia klávesových skratiek

Pre zaregistrovanie klávesové skratky môžeme použiť službu $hotkey. Tá zaregistruje udalosť na globálnom objektu window. Pokiaľ chcete použiť skratky len v kontexte ktoréhokoľvek iného HTML elementu, možno použiť továrenské funkcie HotkeysElement, ktorá ako jediný argument vyžaduje práve HTMLElement a vytvorí službu HotKey.

Udalosti sa pridávajú pomocou metódy bind. Ako prvý argument môžeme zadať textový reťazec vyjadrujúce klávesovú skratku, kde každá klávesa je oddelená znakom +. Môžeme použiť špeciálne výrazy ako napr. Esc, Ctrl, Control, Enter, left, up, down, right pod. Tento výraz je spracovaný službou ParseKey, ktorá z textového výrazu urobí poľa kódov jednotlivých kláves. Nezáleží na veľkých / malých písmenách. Druhý argument je funkcia pre spracovanie udalosti.

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

Pár ďalších príkladov platných výrazov:

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

Direktíva

Klávesové skratky môžeme vkladať aj pomocou direktívy hotkey, ktorú možno použiť ako element alebo atribút. Pokiaľ ju použijeme ako element, bude registrovať všetky udalosti na objekte window (budú globálne pre celú aplikáciu). Atribút hotkey zase zaregistruje udalosť len na danom elementu. Udalosť, ktorá sa má vykonať, potom dáme do atribútu invoke. Do neho môžeme vložiť normálne AngularJS výraz, ktorý sa vykoná s lokálnou premennou $event (rovnako ako všetky direktívy udalostí v AngularJS - ngChange, ngClick pod.)

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

Ak je potrebné zaregistrovať viac udalostí, môžeme uviesť objekt priamo v atribúte hotkey (alebo ho odovzdať zo scope z controllera), kde kľúč bude klávesová skratka a hodnota referencie na funkciu. V tomto prípade nejde uviesť AngularJS výraz a odovzdané funkcie budú zavolaný s parametrom Event.

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

Vývoj

Urobili by ste niečo lepšie? Nebojte sa poslať pull-request do GIT repozitára Testy sú napísané v knižnici JsamineBDD a možno ich spustiť pomocou test runner Karma.

karma start karma.conf.js

Galéria