AloeTouch

Una modesta libreria per una modesta gestione degli eventi touch.

Esempi

• Sorgenti
• Codepen

Contenuti

• Sinossi
• Installazione
• Utilizzo
• Integrazione

Sinossi

Questa libreria è rivolta a chi vuol adattare la propria applicazione ad una user-experience moderna, che vede come protagonisti indiscussi i dispositivi mobili.

Gli eventi gestiti sono principalmente:

• Tap
• Press
• Swipe
• Pan
• Pinch
• Rotate

Gli eventi che definiscono il ciclo di vita implementato sono:

• start
• move
• end

Una particolarità è quella di non bloccare immediatamente lo scolling; l'utente potrà scrollare sugli elementi bindati e la libreria cercherà di interpretare se la gesture deve prevenire o meno lo scrolling naturale dell'app.

Installazione

È possibile installare la libreria tramite npm con il comando:

$ npm install aloetouch

Oppure scaricare la versione completa o minimizzata

Inclusione della libreria

Node

var AloeTouch = require('aloetouch');

HTML

<script src="./[path]/aloetouch[.min].js"></script>

ES6

import AloeTouch from 'aloetouch'

Utilizzo

• Bindare un elemento
• Metodi di AloeTouch
• L'oggetto AloeTouchObject
• Utilizzo degli State

Bindare un elemento

Aggiunge gli eventi tap e press all'elemento con id 'el'.

var ato = AloeTouch.bind('#el', {
  tap: function() {
    alert('tap!');
  },
  press: function() {
    alert('press!');
  }
});

Metodi di AloeTouch

• bind
• unbind
• get
• lock
• lockExcept
• lockOnly
• unlock
• unlockExcept
• unlockOnly

AloeTouch.bind(element, events, strict)

Binda un elemento.

Parametri

• element - Elemento (o stringa) a cui bindare gli eventi.
• events - Oggetto che contiene gli eventi da gestire e gli state personalizzati.
• strict - Booleano che, se settata a true, binderà gli eventi bindati solo se il target è l'element stesso.

Il parametro strict è di default impostato a false. Questo valore deve essere impostato a true nel caso in cui si vogliano gestire più elementi in modo simultaneo (ad esempio due eventi pan.

Valore di ritorno

• Un oggetto di tipo AloeTouchObject

Esempo

var ato = AloeTouch.bind('#el', {
  rotate: function(gradi) {
    ato.$ref.el.style.transform = 'rotate('+ gradi +'deg)'
  }
});

AloeTouch.unbind(aloetouchobject)

Rimuove il binding di un elemento.

Parametri

• aloetouchobject - L'ATO (oppure l'id) da rimuovere.

Valore di ritorno

• Boolean - true se l'oggetto è stato rimosso con successo, falso altrimenti.

Esempio

  var ato = AloeTouch.bind('#el', {
    pan: function(coords) {
      ato.$ref.el.style.transform = 'translate('+ coords.x +'px, '+ coords.y +'px)';
    }
  });

  ...

  window.setTimeout(function(){
    AloeTouch.unbind(ato)
  }, 3000);

AloeTouch.get(id)

Preleva un elemento dalla lista degli elementi bindati.

Parametri

• id - L'id dell'ATO.

Valore di ritorno

• AloeTouchObject

AloeTouch.lock(id)

Blocca lo stato di un elemento finché non verrà sbloccato.

Parametri

• id - L'id dell'ATO.

Esempio

• Lock/Unlock.

AloeTouch.lockExcept(aloetouchobjects)

Blocca tutti gli ATO e sblocca quelli presenti nell'array aloetouchobjects.

Parametri

• aloetouchobjects - Array di ATO o di id.

AloeTouch.lockOnly(aloetouchobjects)

Blocca solo gli ATO presenti nell'array aloetouchobjects e sblocca tutti gli altri.

Parametri

• aloetouchobjects - Array di ATO o di id.

AloeTouch.unlock(id)

Sblocca lo stato di un elemento.

Parametri

• id - L'id dell'ATO.

Esempio

• Lock/Unlock.

AloeTouch.unlockExcept(aloetouchobjects)

Sblocca tutti gli ATO e blocca quelli presenti nell'array aloetouchobjects.

Parametri

• aloetouchobjects - Array di ATO o di id.

AloeTouch.unlockOnly(aloetouchobjects)

Sblocca solo gli ATO presenti nell'array aloetouchobjects e blocca tutti gli altri.

Parametri

• aloetouchobjects - Array di ATO o di id.

L'oggetto AloeTouchObject

Il metodo bind di AloeTouch resituisce un elemento di tipo AloeTouchObject.

Le sue proprietà sono:

• $id Id del nuovo oggetto
• $ref Riferimento all'oggetto principale

Lista dei metodi:

• $id
• attach
• detach
• setState
• getState
• removeState
• clearState
• isLock
• lock
• unlock

AloeTouchObject.attach(events)

Aggiunge gli eventi.

Parametri

• events - Oggetto contentente i gestori

Esempio

  var ato = AloeTouch.bind('#el')

  ato.attach({
    start: function(){
      console.log('Inio movimento')
    },
    pan: function(coords){
      ato.$ref.el.style.transform = 'translate('+ coords.x +'px, '+ coords.y +'px)'
    }
  })

AloeTouchObject.detach(event)

Aggiunge gli eventi.

Parametri

• event - Stringa o Array contentente il nome dell'evento

Esempio

  var ato = AloeTouch.bind('#el');

  ato.attach({
    pan: function(coords){
      ato.$ref.el.style.transform = 'translate('+ coords.x +'px, '+ coords.y +'px)';
    },
    press: function(){
      ato.detach('pan');
    }
  })

Integrazione