A volte si ha bisogno di “usare” le gesture e fare delle azioni ad esempio, allo swipe dell’utente. Come fare? Scopriamolo insieme.
Principio di base con javascript vanilla
Usando un approccio senza librerie bisognerà adottare uno script di questo tipo:
//Gesture
document.addEventListener('touchstart', handleTouchStart, false); // event listeners
document.addEventListener('touchmove', handleTouchMove, false);
var xDown = null;
var yDown = null;
function handleTouchStart(evt) {
xDown = evt.touches[0].clientX;
yDown = evt.touches[0].clientY;
};
function handleTouchMove(evt) {
if ( ! xDown || ! yDown ) {
return;
}
var xUp = evt.touches[0].clientX;
var yUp = evt.touches[0].clientY;
var xDiff = xDown - xUp;
var yDiff = yDown - yUp;
if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {
if ( xDiff > 0 ) {
/* left swipe */
console.log("LEFT Swipe");
} else {
/* right swipe */
console.log("RIGHT Swipe");
}
} else {
if ( yDiff > 0 ) {
/* up swipe */
console.log("UP Swipe");
} else {
/* down swipe */
console.log("DOWN Swipe");
}
}
/* reset values */
xDown = null;
yDown = null;
};
//Gesture
Ovviamente per testare su pc desktop dovrete aprire la pagina con ispeziona elemento –> emulatore mobile al fine di simulare il touch. In console in questo caso molto embrionale apparirà semplicemente lo stamp della direzione dello swipe.
Ma come funziona nello specifico? Analizziamo lo script passo-passo.
document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);
Con questi due event listeners andiamo a intercettare quando l’utente inizia e fa il movimento (ipotesi swipe). E’ possibile tuttavia andare a intercettare altri tipi di eventi come ad esempio touchend (il cui fire avviene al fine del touch). Come vedete ho collegato ai listeners due funzioni.
handleTouchStart
function handleTouchStart(evt) {
xDown = evt.touches[0].clientX;
yDown = evt.touches[0].clientY;
};
handleTouchStart va a prelevare i parametri y e x di dove è iniziato l’evento. Le variabili x e y vengono pertanto popolate.
handleTouchMove
function handleTouchMove(evt) {
if ( ! xDown || ! yDown ) {
return;
}
var xUp = evt.touches[0].clientX;
var yUp = evt.touches[0].clientY;
var xDiff = xDown - xUp;
var yDiff = yDown - yUp;
if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {
if ( xDiff > 0 ) {
/* left swipe */
console.log("LEFT Swipe");
} else {
/* right swipe */
console.log("RIGHT Swipe");
}
} else {
if ( yDiff > 0 ) {
/* up swipe */
console.log("UP Swipe");
} else {
/* down swipe */
console.log("DOWN Swipe");
}
}
/* reset values */
xDown = null;
yDown = null;
};
handleTouchMove va invece a verificare che l’utente si sia mosso, ed estrapola in che direzione sul piano cartesiano. A seconda della differenza saremo capaci di intercettare da che parte l’utente ha fatto swipe.
- xDiff: swipe orizzontale
- yDiff: swipe verticale
Usiamo una libreria più avanzata chiamata hammerjs
Come avrete immaginato è facile trovare diversi limiti allo script sopra-indicato. Personalmente lo trovo utile nel caso non vi serva qualcosa di troppo complesso, implementabile con vanilla javascript senza librerie di sorta (che non fa mai male).
Nel caso dobbiate realizzare qualcosa di più complesso, vi consiglio la libreria hammerjs.
Questa libreria vi consente di intercettare meglio i vari eventi touch non solo relativi al movimento ma anche al tocco (tab, doppio o triplo tap e così via). Oltre a questo rimuove il “delay dei 300ms”. se non sapete di cosa si tratta a questo indirizzo troverete un articolo “milestone” sull’argomento.
Ma andiamo a vedere nel dettaglio come si usa hammerjs.
Implementare gesture mobile javascript con hammerjs: utilizzo
Il primo passo è quello di integrare le librerie js sul vostro sito. Sono disponibili al download sul sito ufficiale ma lo sono anche su diversi cdn online “plug and play”.
Una volta messo il file js andiamo a specificare su che area “restare in ascolto di touch” e inizializzamo la variabile “hammer”.
var touchArea = document.body; //in questo caso tutto il documento ma può essere benissimo anche solo un div var mc = new Hammer(touchArea);
A questo punto all’interno del DOM vi basterà andare a inizializzare le varie gesture, a seconda di quello che vi serve.
mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
mc.add(new Hammer.Swipe({ threshold: 25, velocity: 2 })).recognizeWith(mc.get('pan'));
mc.add(new Hammer.Rotate({ threshold: 0 })).recognizeWith(mc.get('pan'));
mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith([mc.get('pan'), mc.get('rotate')]);
mc.add(new Hammer.Tap({ event: 'doubletap', taps: 2 }));
mc.add(new Hammer.Tap());
Questo esempio è abbastanza completo e consente l’uso delle principali gesture.
Una volta comunicato ad hammer “cosa volete usare” andiamo a specificare “cosa fare quando si manifesta quell’evento”.
mc.on("pan", onPan); //evento base di tocco
mc.on("rotatestart rotatemove", onRotate);
mc.on("pinchstart pinchmove", onPinch);
mc.on("swipe", onSwipe); // basta anche solo questo nel caso vi serva solo vedere quando l'utente fa swipe
mc.on("swipeup", onSwipeUp);
mc.on("swipedown", onSwipeDown);
mc.on("swipeleft", onSwipeLeft);
mc.on("swiperight", onSwipeRight);
mc.on("tap", onTap);
mc.on("doubletap", onDoubleTap);
A questo punto vi basterà creare una funzione per ognuna di quelle assegnate nei vari mc.on come segue:
function onSwipeUp(ev) {
console.log(ev.type);
}
(ovviamente evito di scriverle tutte).
Nel caso voleste disattivare il listener touch di hammerjs potete farlo andando ad agire come segue:
mc.get('pan').set({ enable: false }); // true per riattivarlo
Problema hammerjs: scroll verticale non funziona
Di solito il problema si verifica se state usando la versione 2.x.
Se lo scroll verticale non funziona una volta attivato il tutto provate ad impostare la seguente opzione su Hammerjs:
var mc = new Hammer(touchArea,{ "touchAction": "pan-y" });
Questo articolo ti è stato utile? Condividilo sui tuoi socials preferiti!
Image credits “touch” disponibile su Shutterstock
