Quelle que soit l’application mobile, une bonne gestion des événements tactiles est primordiale pour permettre une bonne expérience utilisateur. Quelques plug-ins jQuery permettent de répondre à ce besoin, dont un qui fait beaucoup parler de lui en ce moment grâce à sa simplicité d’utilisation : Hammer.js.
Grâce à lui, il est possible de gérer les événements suivants :
- le Tap et le Double Tap
- le Drag
- le Swipe (Drag rapide)
- le Hold
- le Transform (le zoom)
Pour le mettre en place, seuls 2 fichiers suffisent :
2 autres fichiers peuvent également être utiles lorsque l’on souhaite tester son code sur un ordinateur :
Une petite démonstration…
Voici une utilisation des fonctionnalités de ce plug-in avec un petit exemple :
Nous allons maintenant voir comment mettre en place cet exemple à travers le tutoriel suivant.
Le code HTML et CSS
On intègre d’abord toutes les librairies liées à jQuery et à Hammer.js.
<script type="text/javascript" src="js/lib/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/lib/hammer.min.js"></script>
<script type="text/javascript" src="js/lib/hammer.showtouches.js"></script>
<script type="text/javascript" src="js/lib/hammer.fakemultitouch.js"></script>
HTML - Intégration des plugins
On crée ensuite la balle avec laquelle on va interagir grâce à Hammer.js.
<body>
<div id="container">
<div id="ball"></div>
</div>
</body>
HTML - Création de la balle
On met maintenant en forme la balle que l’on vient de créer.
#container {
width: 200px;
height: 200px;
position: relative;
margin: 100px auto;
}
#ball {
width: 200px;
height: 200px;
position: absolute;
border-radius: 50%;
background: #1e5799;
}
CSS
Le code JavaScript
Pour commencer, si l’on veut tester son application sur un ordinateur, il faut avertir Hammer.js que l’on souhaite utiliser le fakeMultitouch et le showTouches.
// on affiche les zones touchées par le multitouch
if(!Hammer.HAS_TOUCHEVENTS && !Hammer.HAS_POINTEREVENTS) {
Hammer.plugins.showTouches();
}
// on simule le multitouch grâce à SHIFT + MOUSE
if(!Hammer.HAS_TOUCHEVENTS && !Hammer.HAS_POINTEREVENTS) {
Hammer.plugins.fakeMultitouch();
}
On déclare ensuite une variable qui va contenir un objet Hammer. Cet objet fait référence à l’élément HTML avec lequel on veut interagir. Dans notre exemple, ce sera la balle. Vous trouverez les différentes options d’instanciation d’un objet Hammer à cette adresse :
https://github.com/EightMedia/hammer.js/wiki/Getting-Started#gesture-options.
var hammer = Hammer($("#ball"), {
transform_always_block: true,
tap_always: false,
drag_min_distance: 0
});
JS - Création de l'objet Hammer
Pour utiliser l’objet créé, il suffit de lui ajouter un listener qui écoutera les événements que l’on aura choisis. Dans notre cas, la balle réagira au tap, doubletap, hold, drag et transform.
hammer.on("touch tap doubletap transformstart transform dragstart drag hold", function(event) {
ballAction(event);
});
JS - Ajout du listener sur l'objet Hammer
Une fois un événement déclenché, la fonction suivante est appelée. C’est dans cette dernière que les propriétés de la balle vont être modifiées grâce à la variable event qui contient le détail des actions de l’utilisateur.
var $ball = $("#ball");
var transform = "";
var boxShadow = "";
var scale = lastScale = 1,
positionX = positionY = lastPositionX = lastPositionY = 0,
pushed = false,
square = false;
function ballAction(event) {
switch(event.type) {
// au touch (quel que soit l'événement), on initialise les variables
case "touch" :
lastScale = scale;
lastPositionX = positionX;
lastPositionY = positionY;
break;
case "tap" :
txt = "Tap : changement de couleur";
// couleur au hasard
$ball.css("background", '#'+Math.floor(Math.random()*16777215).toString(16));
break;
case "doubletap" :
txt = "DoubleTap : changement de forme";
if(square)
$ball.css("border-radius", "50%");
else
$ball.css("border-radius", "10px");
square = !square;
break;
case "transformstart" :
txt = "Transform : zoom sur la forme";
break;
case "transform" :
scale = Math.min(2, Math.max(0.2, lastScale * event.gesture.scale));
break;
case "dragstart" :
txt = "Drag : déplacement de la forme";
break;
case "drag" :
positionX = lastPositionX + event.gesture.deltaX;
positionY = lastPositionY + event.gesture.deltaY;
break;
case "hold" :
txt = "Hold : on enfonce la forme";
if(pushed)
boxShadow = "";
else
boxShadow = "inset 0px 0px 53px 1px rgba(0,0,0,0.75)";
pushed = !pushed;
$ball.css("-webkit-box-shadow", boxShadow);
$ball.css("-moz-box-shadow", boxShadow);
$ball.css("box-shadow", boxShadow);
break;
}
transform = "translate3d(" + positionX + "px, " + positionY + "px, 0)" +
"scale(" + scale + ")";
$ball.css("transform", transform);
$ball.css("-ms-transform", transform);
$ball.css("-webkit-transform", transform);
}
JS - Fonction appelée lorsqu'un événement est déclenché
