aloetouch

Una modesta libreria per una modesta gestione degli eventi touch.

Esempi

• Sorgenti
• Codepen

Contenuti

• Sinossi
• Installazione
• Utilizzo
• Integrazione

---

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.

---

È 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 ```js

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 ```js

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 ```js

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

```

---