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

Aujourd'hui je vous propose de découvrir un petit composant faisant la liaison entre la bibliothèque de gestion de raccourcis-claviers mousetrap et Vue js

Mousetrap en quelques mots

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é à 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ériterais bien un article à lui tout seul, et qui en aura un très rapidement, excusez-moi donc pour le manque de precision.

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" grace 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 équivalant 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 dependant des écrans affiches à un instant t. Comment fait pour pouvoir les gérer simplement ? Doit-on les déclarer à la création d'un element 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 vu js permettant de déclarer extrêmement simplement mes raccourcis claviers. Notez que les raccourcis claviers sont appelles 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.