Touch - globules-io/OGX.JS Wiki

Touch is a helper object that brings some prefabricated touch behaviors. Every object extending the Touch class will receive a touch object, composed of the following properties and methods.

Events

Touch automatically computes the appropriate touch mode. It is recommended to use these events when listening for user interaction, instead of use touchstart or mousedown

 this.touch.down;
 this.touch.up;
 this.touch.move;

Methods

Touch is composed with standard methods, such as

 this.touch.enable();
 this.touch.disable();

You must enable or disable these methods from the enable and disable methods of your main object. There methods require different configurations.

Behaviors

And also composed with behavioral objects.

 this.touch.swipe
 this.touch.drag
 this.touch.hold

To enable those behaviors, you have to set their configuration.

Configuration

To override the default configuration for touch, for instance drag

 this.touch.drag.set({limit_x:50, ...});

Swipe

Swipe returns a set of points and directions to help creating swipe effects. Default configuration for swipe

 {
    speed:10, //interval speed
    x:true, //X axis
    y:false, //Y axis
    cb_down:false,  //Function, callback
    cb_swipe:false, //Function, callback
    cb_up:false,    //Function, callback,
    capture:false   //Boolean, if true, event is trapped and doesn't bubble up
};

Object returned on the cb_swipe callback

{
    pt0:Point, //start point 
    pt1:Point, //end point
    distX:Int, //distance on X 
    distY:Int, //distance on Y
    dist:dist, //distance
    dirX:1|0|-1, //direction X
    dirY:1|0|-1 //direction Y
}

Drag

Drag will actually produce a drag, unlike Swipe which only returns calculated information. Default configuration for drag

 {
    x:true,  //X axis
    y:true, //Y axis      
    limit_x:null,  //distance on X after which the drag stops
    limit_y:null,  //distance on Y after which the drag stops
    target:false,  //target if not main object
    cb_down:false, //Function, callback
    cb_drag:false, //Function, callback
    cb_up:false    //Function, callback,
    capture:false  //Boolean, if true, event is trapped and doesn't bubble up
};

Object returned in the cb_drag callback

 {
     distX:Int, //Distance of the drag on X
     distY:Int  //Distance of the drag on Y
 }

Hold

Default configuration for hold

 {
     cb_hold:false,   //callback on hold
     cb_up:false,     //callback on release
     cb_move:false,   //callback on move
     time:1000,       //min time in ms before is a hold
     el:this.el,      //listening element
     target:false     //target element,
     capture:false    //Boolean, if true, event is trapped and doesn't bubble up
 };

Right Click / Context Menu

Test if an event if a right click, in this example, we test over a Calendar from inside a view

 myCalendar.el.on(myCalendar.touch.right, function(__e){
      myCalendar.touch.isRightClick(__e); //returns true or false
 });

To disable the context menu, set disable_context to true when creating the app