Hammer.js, une librairie permettant de capturer des gestes tactiles
Elliott Chiaradia | 13-01-2016
Hammer.js est une librairie javascript permettant de capturer des gestes tactiles. Ces mouvements peuvent être utiles aussi bien pour le mobile que pour une application web (pour une galerie de photos par exemple). Hammer.js peut gérer le swipe, le pan, le tap, le press, le rotate et le pinch, pour vous rendre compte plus facilement à quoi correspond ces gestes, vous pouvez vous référer à l’image suivante.
Dans cet article, nous allons utiliser cette librairie pour tester quelques-uns de ces mouvements qui vont nous servir à appeler des petites fonctions qui effectueront des petites choses, comme un changement de couleur d'une div ou encore un déplacement d'un élément.
L’appel de la librairie et le squelette html/css
Commencez par copier le code de la librairie disponible à cette adresse, puis coller-le dans un nouveau fichier que vous allez appeler "hammer.js". On va maintenant charger ce script ainsi que le fichier contenant la librairie Jquery (utilisée pour pouvoir sélectionner les éléments plus facilement, mais aussi pour rajouter des animations) et un fichier qui contiendra notre code javascript, que nous allons l'appeler "script.js".
<script src="scripts/jquery2.2.js"></script>
<script src="scripts/hammer.js"></script>
<script src="scripts/script.js"></script>
Si vous préférez utiliser des CDN, vous pouvez bien évidemment le faire.
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://hammerjs.github.io/dist/hammer.js"></script>
Passons au squelette HTML. Dans le body, nous allons créer deux menus, c'est sur ceux-ci que nous allons travailler. Notons via des listes, les actions que nous allons ajouter par la suite.
<div id="main" >
<div id="menu" >
<h2>MenuLeft</h2>
<ul>
<li>Press pour changer la couleur</li>
<li>Tap pour revenir à la couleur initiale</li>
<li>Swipe Right pour bouger le menu à droite</li>
<li>Swipe left pour bouger le menu à gauche</li>
</ul>
</div>
<div id="menuRight" >
<h2>MenuRight</h2>
<ul>
<li>Pan Right pour changer la couleur en jaune</li>
<li>Pan Left pour changer la couleur en orange</li>
</ul>
</div>
</div>
Nous allons mettre en forme ces deux menus via du CSS. À cet effet, nous allons devoir créer un fichier "styles.css" que nous placerons à la racine de notre projet. Dans le head, nous appellerons la feuille de style.
<link rel="stylesheet" href="styles.css" type="text/css" />
Voici le code CSS que je vous propose de placer dans "styles.css".
body{
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 1em;
}
#main{
position:absolute;
background-color:#81d4fa;
height: 300px;
width:100%;
top:0px;
}
#menu{
position:absolute;
background-color:#7986cb;
height: 300px;
width:45%;
text-align: center;
color:black;
top:0px;
left:-26%;
z-index:2;
}
#menuRight{
position:absolute;
background-color:#aed581;
height: 300px;
width:45%;
text-align: center;
color:black;
top:0px;
right:20%;
}
ul{
list-style-type: none;
padding: 0px;
text-align: center;
}
Le Swipe
Passons aux choses sérieuses et commençons par le geste du swipe.
$(document).ready(function(){
var menu = document.getElementById('menu');
var menuHammer = new Hammer(menu);
menuHammer.on("swiperight", function(ev) {
$("#menu").animate({left: '0px'});
});
menuHammer.on("swipeleft", function(ev) {
$("#menu").animate({left: '-26%'},200);
});
});
Décortiquons le code.
Nous allons entourer notre code javascript par le contrôle JQuery du chargement de la page, afin d'éviter d'éventuels problèmes.
$(document).ready(function(){
});
Avec le code suivant, nous allons récupérer l'élément "menu" et créer une nouvelle instance de hammer en y passant notre élément "menu".
var menu = document.getElementById('menu');
var menuHammer = new Hammer(menu);
Voici comment rajouter un évènement. Ici, nous allons rajouter un évènement sur l'action du swipe droit. L'action de l'évènement consiste à faire bouger le menu vers la droite à l'aide de JQuery.
menuHammer.on("swiperight", function(ev) {
$("#menu").animate({left: '0px'});
});
On fait la même chose pour la gauche mais cette fois-ci on va lui spécifier une vitesse d'animation de 0.2 seconde (200).
menuHammer.on("swipeleft", function(ev) {
$("#menu").animate({left: '-26%'},200);
});
Le Press et le Tap
Après avoir récupéré notre menu et l'avoir instancié avec hammer, vous pouvez rajouter le code suivant. Le code est très similaire au précédent, à la seule différence que nous choisissons un autre type de mouvement tactile et que nous changeons la couleur de notre menu à la place d'utiliser une animation de déplacement.
menuHammer.on("press", function(ev) {
$('#menu').css( "background-color", "#9575cd" );
});
menuHammer.on("tap", function(ev) {
$('#menu').css( "background-color", "#7986cb" );
});
Le Pan
Nous allons utiliser le pan sur notre menu de droite.
var menuRight = document.getElementById('menuRight');
var menuRightHammer = new Hammer(menuRight);
Après l'avoir récupéré, nous allons rajouter les deux évènements, celui du pan de droite et celui de gauche. Les deux s'occuperont de changer la couleur de la div.
menuRightHammer.on("panleft", function(ev) {
$('#menuRight').css( "background-color", "#ffcc80" );
});
menuRightHammer.on("panright", function(ev) {
$('#menuRight').css( "background-color", "#DCE775" );
});
Nous allons encore rajouter un dernier évènement, à savoir "panend" qui s'occupera de redonner la couleur d'origine à notre div "menuRight" quand l'utilisateur aura terminé de "panner".
menuRightHammer.on("panend", function(ev) {
$('#menuRight').css( "background-color", "#aed581" );
});
Conclusion
Nous avons fait le tour de la présentation, vous vous êtes peut-être rendu compte que nous n’avons pas abordé les mouvements de rotation ni de zoom, car effectivement, ceux-ci sont testables difficilement sur un PC sans écran tactile. Mais je vous laisse le soin d’aller les tester par vous-même. Par la même occasion, je vous vous invite à aller zyeuter la documentation officielle, celle-ci est plutôt bien fournie malgré le fait qu’elle ne contient pas beaucoup d’exemples.
Hammer.js est donc une librairie fort utile, bien qu’on peut apercevoir rapidement ses limites si elle est utilisée toute seule. Mais imaginez la couplée à d'autres frameworks et/ou librairies, c'est dans ces cas-là qu'elle pourra prouver son utilité et son efficacité.
