Comment créer des raccourcis claviers très simplement avec Vue.js ?

Mousetrap est une bibliothèque js permettant une gestion avancée des événements claviers en Javascript.

Le but de cette library est simple : lier un ou plusieurs raccourcis claviers (que ce soit des appuis simples, combinaisons ou séquences de touches) à une fonction. Une fois la liaison faite, la fonction sera appelée à chaque fois que le raccourci clavier est exécuté.

L'exemple suivant par exemple exécute quelque chose si vous appuyez sur ctrl+c, puis sur a et t.

  Mousetrap.bind("ctrl+c a t", function(e) { 
    makeSomething() 
  });

Vue.js

Je vais essayer de faire court sur ce sujet qui mériterait bien un article à lui tout seul, et qui en aura un très rapidement, excusez-moi donc pour le manque de précision.

Vue est un framework Javascript permettant de créer des applications web riches en nous donnant la possibilité de créer des liaisons entre notre affichage et nos données, ainsi qu'en nous permettant de créer des "composants" grâce aux HTML5 Customs Éléments. 

Si vous avez déjà entendu parler d'Angular ou de React, dites-vous que nous sommes ici sur un produit équivalent d'un point de vue fonctionnalités et fonctionnement global. En mieux.

Créer un component Mousetrap

Dans une application Web, les raccourcis claviers sont souvent dépendants des écrans affichés à un instant t. Comment faire pour pouvoir les gérer simplement ? Doit-on les déclarer à la création d'un élément et les retirer lors de sa destruction ? Et où doit-on les déclarer ? 

Pour résoudre toutes ces questions lors de mon projet actuel, j'ai décidé de faire un composant vue js permettant de déclarer extrêmement simplement mes raccourcis claviers. Notez que les raccourcis claviers sont appelés lors d'événements liés au cycle de vie de mon composant et que ces derniers sont appelés aussi avec l'utilisation de v if. Vous pouvez donc "afficher" ou masquer les raccourcis claviers exactement comme s'il s'agissait de simples éléments graphiques !

Avec ce composant, il vous est donc possible d'ajouter des raccourcis claviers à vos applications très simplement, sans à avoir à penser à nettoyer vos bindings derrière vous ! Les raccourcis claviers se créent et se détruisent seuls en fonction des états d'affichage de votre application.

See the Pen Mousetrap + Vue.js by Benjamin SANCHEZ (@B_Sanchez) on CodePen.