AngularJS hotkeys

JavaScript AngularJS 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

Galerie

Program byl vytvořen v roce 2014.

 

Stáhnout

Staženo 210x (6.35 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

  Aktivity (1)

Program pro vás napsal Drahomír Hanák
Avatar
Autor v současné době studuje Informatiku. Zajímá se o programování, matematiku a grafiku.

Jak se ti líbí článek?
Celkem (8 hlasů) :
55555


 


Miniatura
Všechny články v sekci
AngularJS

 

 

Komentáře

Avatar
Ridge
Člen
Avatar
Ridge:

supr, presne neco podobneho jsem hledal, velmi dekuji :)

Odpovědět 13.2.2014 23:25
use brain.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 1 zpráv z 1.