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.


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



Touch is composed with standard methods, such as


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


And also composed with behavioral objects.


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


To override the default configuration for touch, for instance drag

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


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


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