Atalhos de teclado (HotKeys)

Os atalhos de teclado são um facilitador muito importante na execução de tarefas repetitivas, libertando o utilizador de usar o rato para efetuar operações como "Gravar Documento" ou "Pesquisar".

Nesse sentido foi desenvolvido o serviço Hotkeys.service que torna a configuração de atalhos um processo simples e transparente.

Visão geral

class HotkeysService {
    addHotkeys(hotkeysDefinitions: { hotkey:HotkeysKeys[], action: () => void }[] ) : () =>  void
}

Descrição

O serviço de atalhos tem disponível o método addHotkeys que recebe uma lista com a configuração para os atalhos que se pretende adicionar uma ação e retorna uma função que, ao ser executada, remove os atalhos adicionados.

Nota: Caso sejam adicionadas duas configurações para o mesmo atalho, apenas a ação do último atalho configurado é executada.

HotkeysDefinitions

A HotkeysDefinitions é uma lista composta por objetos com o seguinte formato:

{ 
    hotkey:HotkeysKeys[], 
    action: () =>  void
}

Este objeto é composto pela propriedade hotkey, que contém uma lista de teclas (HotkeysKeys), e a propriedade action, que é a função a ser executada quando o atalho é pressionado.

HotkeysKeys

O hotkeysKeys é um enumerador com todas as teclas que podem ser usadas para definir um atalho de teclado. Este enumerador contem todas as teclas de A a Z, Ctrl, Alt, Del, Esc, Home, End, PgDown, PgUp e Insert.

Exemplo

O seguinte exemplo mostra como adicionar atalhos no contexto de um componente angular2+.

    export class UiComponent implements OnInit, OnDestroy{
        private removeHotkeys: () => void;

        // include the hotkeys service in this component
        contructor(private hotkeysService : HotkeysService) {
        }

        ngOnInit(): void {
            // create the hotkeys config array
            let hotkeysConfig = [
                {
                    // Ctrl + Alt + F
                    hotkey:[
                            HotkeysKeys.Ctrl, 
                            HotkeysKeys.Alt, 
                            HotkeysKeys.F
                    ],
                    action: () => {
                        // do action
                    }
                },
                {
                    // Ctrl + Del
                    hotkey:[
                            HotkeysKeys.Ctrl, 
                            HotkeysKeys.Del
                    ],
                    action: () => {
                        // do action
                    }
                }
            ]

            // Add the hotkeys to the hotkeys service
            // and store the returned function to later remove 
            // the hotkeys
            this.removeHotkeys  = this.hotkeysService
                                      .addHotkeys(hotkeysConfig);
        }

        ngOnDestroy(): void {

            // remove the hotkeys when the component is destroyed
            if( this.removeHotkeys ) {
                this.removeHotkeys();
                this.removeHotkeys = null;
            }
        }
    }