Personnalisons Wikipédia : raccourcis clavier en mode édition

Ce billet fait partie de la série « Personnalisons Wikipédia« .

La plupart des logiciels WYSIWYG permettent de modifier l’apparence d’un texte (mise en gras, italique, souligné, etc) à l’aide de raccourcis clavier (respectivement ctrl+b, ctrl+i, ctrl+u, …) La personnalisation d’aujourd’hui vous permettra de créer des raccourcis clavier en JavaScript afin d’avoir des facilités similaires lors de vos éditions sur Wikipédia

Introduction

(ceux qui ne s’intéressent pas aux explications peuvent passer directement au code complet, à la fin du billet)

Le code du jour fait appel à la notion d’évènement, pour lesquels vous trouverez plus d’informations sur Wikibooks. Les évènements qui nous intéressent ici sont ceux qui nous permettront de savoir quand l’utilisateur appuie sur une certaine combinaison de toucher sur le claviers, et sont au nombre de deux :

• « appui sur une touche du clavier » (onkeydown)

• « relachement d’une touche du clavier » (onkeyup).

Ces deux évènements permettent d’accéder en interne à un code correspondant à la touche qui viens d’être appuyée ou relachée.

—

Histoire de nous faciliter la vie, MediaWiki possède déjà une fonction JavaScript permettant de modifier un texte sélectionne comme l’on veux. Cette fonction est par exemple utilisée lorsque vous cliquez sur un des boutons au dessus (la barre de menu) ou en dessous (les listes de caractères spéciaux), en mode édition.

Cette fonction est insertTags(). Elle prend 3 paramètres, qui sont respectivement :

• les caractères à ajouter avant la sélection
• Les caractères  à ajouter après la sélection
• Le texte par défaut,  s’il n’y avait pas de texte séléctionné.

Exemple pour mettre un texte en souligné :

 insertTags('<u>', '</u>', 'souligné');

—

Note : Le code n’a été, pour l’instant, testé que sous Firefox 3.0 et 3.5.4. N’hésitez pas à me donner un feedback sur le bon fonctionnement (ou non) sur d’autres versions et navigateurs.

Note2 : il faut savoir que les raccourcis défini en javascripts seront prioritaires sur ceux du logiciel (du moins avec firefox)

Passons au code…

Conteneur

Histoire d’être un minimum propre, notre code sera, comme pour les autres de mes billets, encapsulé dans une fonction

function keyboardShortcuts() {
  // le code sera ici
}

 

Utilisation des évènements

La méthode pour définir une action (= l’appel à une fonction) sur les évènements qui nous intéresse est la suivante :

  document.onkeyup = function(e) { //l'user relâche une touche
    //code à executer
  }

  document.onkeydown = function(e){  //l'user appuie sur une touche
    //code à executer
  }

Problématique de la double touche

Problème : nous avons besoin de savoir lorsque l’utilisateur appuie à la fois sur « ctrl » et une lettre. Or, l’événement de base ne permet de le faire que pour une seule touche à la fois
Solution : créer une variable qui sait si ctrl est actuellement appuyé ou non

  var isCtrl = false; //la touche commence "non enfoncée"

  //l'evenement "onkeyup" est appelé à chaque fois qu'une touche est relachée.
  document.onkeyup=function(e) {
    if(e.which == 17) isCtrl=false;  //l'user relâche la touche ctrl (qui a le code 17). La variable passe a False
  }

  //l'evenement "onkeydown" est appelé à chaque fois qu'une touche est pressée.
  document.onkeydown=function(e){
    if(e.which == 17) { //l'user appuie sur la touche ctrl. La variable passe a True
      isCtrl=true;
    }
  }

Gestion des actions en elle-même

J’ai géré ci dessous 5 raccourcis :

• ctrl+b, pour mettre un texte en gras

• ctrl+i, pour mettre un texte en italique

• ctrl+l (L minuscule), pour faire un lien interne

• ctrl+m pour mettre le texte entre {{ }} et faire un modèle

• ctrl+u, pour souligner un texte

D’autres sont ajoutables à volonté, attention juste à ne pas utiliser des lettre dont vous vous servez souvent en édition pour vos raccourci (par exemple ctrl+x/c/V pour couper/copier/coller)

(sera mis dans la fonction d’onKeyDown)

    if( isCtrl == true ) {
       switch (e.which) { //quelle touche a été enfoncée ?
  	  case 66: //b
            insertTags("'''", "'''", 'gras');
            return false
	    break;
	  case 73: //i
            insertTags("''", "''", 'italique');
            return false
	    break;
          case 76: // l
            insertTags('[[', ']]', 'lien interne');
            return false
	    break;
          case 77: // m
            insertTags('{{', '}}', 'modèle');
            return false
	    break;
	  case 85: //u
            insertTags('<u>','</u>', 'souligné');
            return false
	    break
       }
     }

Résultat final

Pour les flemmards et ceux qui ont peur d’en oublier un morceau, le code complet ci dessous; recopiable tel quel :

function keyboardShortcuts() {

  var isCtrl = false;

  document.onkeyup=function(e) { //l'user relâche la touche ctrl. La variable passe a False
    if(e.which == 17) isCtrl=false;
  }

  document.onkeydown=function(e){
    if(e.which == 17) { //l'user appuie sur la touche ctrl. La variable passe a True
      isCtrl=true;
      return;
    }

    //gestion des ctrl+lettre que l'on veux ajouter.
    if( isCtrl == true ) {
       switch (e.which) { //quelle touche a été enfoncée ?
  	  case 66: //b
	    insertTags("'''", "'''", 'gras');
            return false
	    break;
	  case 73: //i
	    insertTags("''", "''", 'italique');
            return false
	    break;
          case 76: // l
	    insertTags('[[', ']]', 'lien interne');
            return false
	    break;
          case 77: // m
	    insertTags('{{', '}}', 'modèle');
            return false
	    break;
	  case 85: //u
	    insertTags('<u>', '</u>', 'souligné');
            return false
	    break
       }
     }
  }
  return true
}

//la fonction qui gère tous les appel de fonctions (du moins dans mes divers billets :)
//!\ CELA VEUX DIRE QU'IL FAUT FUSIONNER AVEC LA FONCTION main() EXISTANTE, SI VOUS EN AVEZ UNE /!\
function main() {
  // [...  autres fonctions  ... ]

   if (wgAction == "edit" || wgAction == "submit")  { //à n'appeller que si en mode edition, sinon c'est inutile
      keyboardShortcuts()
   }
}

addOnloadHook(main)

Et Voili ! Comme d’habitude, n’oubliez pas de forcer le rafraichissement du monobook (ou vector) après avoir sauvegardé.

Source : Ce billet sur Lixya.org ; et un merci à Phe pour le coup de main :)

Edit : retiré un « ] » qui trainait au milieu du code – forcement, ça marche mieux maintenant – désolé :(