Aloetouch NPM | npm.io

AloeTouch

Una modesta libreria per una modesta gestione degli eventi touch.

Esempi

Contenuti

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

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

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:

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');
    }
  })