aloetouch

    1.0.1 • Public • Published

    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

    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


    AloeTouch.lock(id)

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

    Parametri

    • id - L'id dell'ATO.

    Esempio


    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


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

    Integrazione

    Install

    npm i aloetouch

    DownloadsWeekly Downloads

    1

    Version

    1.0.1

    License

    ISC

    Unpacked Size

    1.14 MB

    Total Files

    24

    Last publish

    Collaborators

    • genbs