iPhone/iPad, doubleTap & Javascript

Le « Double Tap » sur l’iPad, l’iPhone, ou même l’iPod touch, sert actuellement à zoomer lorsque vous êtes sur une page web.
Mais imaginons que vous vouliez lui faire faire autre chose en Javascript ? 

Après moult recherches sur le net, j’ai décider de faire moi-même ma propre classe.

Les bases

Pour commencer, on va se créer un objet ‘doubleTap’.

function doubleTap() {
  console.log('DoubleTap initialisé') ;
}

doubleTap.prototype = {

  doubleTapCount: 0,
  doubleTapDelta: 15,

  touchX: 0,
  touchY: 0,

  deltaX: 0,
  deltaY: 0,

} ;

Voici une petite explication des variables :

• doubleTapCount : Compteur de ‘tap’.
• doubleTapDelta : Distance max possible entre l’endroit où on tape la première fois et l’endroit où on tape la deuxième fois, pour éviter de lancer l’action si on fait un « faux double tap » (poser rapidement le doigt à 2 endroits differents de l’appareil.
• touchX : Coordonnées X de l’endroit où on tape.
• touchY : Coordonnées Y de l’endroit où on tape.
• deltaX : Distance horizontale entre l’endroit où on a tapé la première fois et la seconde fois.
• deltaY : Distance verticale entre l’endroit où on a tapé la première fois et la seconde fois.

Nous allons maintenant nous rajouter 2 fonctions.

La première sera celle qui va nous dire si oui ou non on a réellement fait un doubleTap.
La seconde servira à remettre à zéro toutes les 300ms (il me semble que c’est la norme) le compteur de tap.

doubleTest:function(e) {
  window.setTimeout(function(t) { t.resetDoubleTap() ; }, 300, this) ;
  return false ;
},

resetDoubleTap:function() {
  this.doubleTapCount = 0 ;
  return true ;
}

Ces deux fonctions se passent de commentaires … On lance un timer qui va remettre le compteur à zéro 300ms après le moment où on aura tapé l’écran la première fois.

Calcul des coordonnées

Rajoutons quelques lignes de code à la fonction doubleTest :

window.setTimeout(function(t) {
  t.doubleTapCount++ ;
  t.touchX = e.touches[0].pageX ;
  t.touchY = e.touches[0].pageY ;
}, 50, this) ;

Nous allons incrémenter le compteur de tap après 50ms, et lui positionner les coordonnées X et Y de l’endroit touché.

Pourquoi 50ms ?
C’est simple, notre doigt peut toucher « sans le vouloir » l’écran une première fois avant de se poser réellement dessus (c’est du vécu .. surtout sur le grand écran de l’iPad ..). De de fait, je laisse 50ms qui sont comme une « marge d’erreur » pour être sûr que l’on veut déclencher un double tap.

Et maintenant le plus important !

if ((this.doubleTapCount > 0) && (e.touches.length == 1)) {
  finger = e.touches[0] ;

  this.deltaX = finger.pageX - this.touchX ;
  this.deltaY = finger.pageY - this.touchY ;

  if (this.deltaX < this.doubleTapDelta && this.deltaY < this.doubleTapDelta) {
    return true ;
  }
  this.doubleTapCount = 0 ;
  return false ;
}

Toujours rien de compliqué.

Nous allons vérifier qu’on a déjà tapé une première fois, et que l’on ne lance pas une « gesture » (mouvement à 2 doigts, pour faire pivoter, zoomer, etc…).
Si nous rentrons dans cette condition, on récupère les coordonnées X et Y de la zone touchée, et on calcul les delta X et Y.

On vérifie ensuite que les 2 deltas sont inférieurs à la limite que nous avons fixé, et à ce moment on renvoi ‘true’ !

Et voila notre objet est prêt.

Intégration

Maintenant il ne reste plus qu’à l’intégrer à notre page Web.
Rien de plus simple, on crée l’objet, et on place un EventListener sur le ‘touchstart’.

Le ‘touchstart’ se déclenche au moment où l’on pose sur doigt sur l’écran, un peu comme lorsque l’on appui sur un bouton de la souris.

var double = new doubleTap() ;
document.addEventListener('touchstart', function(e) {
  if (double.doubleTest(e)) {
    alert('double tap done !') ;
  }
}, false) ;

Et c’est terminé !

Voici un lien pour télecharger le script complet : doubleTap.js

Bon courage !