Touch

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.

Creating

Create new instances of OGX.Touches.Drag and OGX.Touches.Move

 let mytouch = this.touch.add('Drag', {limit_x:50, ...});
 let othertouch = this.touch.add('Move', {x: true, y: false, ...});

Note that you can assign an id to your touch if you want to get it from the touch list later on

 this.touch.add('Drag', {id: 'myDrag'});

 let touch = this.touch.get('myDrag');

Removing

To remove a touch behavior

 this.touch.remove(touch_instance or touch_id);

To remove all behaviors

 this.touch.wipe();

Behaviors

And also composed with behavioral objects.

 OGX.Touches.Swipe
 OGX.Touches.Drag
 OGX.Touches.Hold
 OGX.Touches.Move

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

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
    state: 'auto'   //If set to manual, you have to enable/disable in your code, otherwise falls back onto the view functions
};

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
    state: 'auto'  //If set to manual, you have to enable/disable in your code, otherwise falls back onto the view functions
};

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. Hold can act as a drag and drop, as well.

 {
     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
     target: false     //target element,
     capture: false    //Boolean, if true, event is trapped and doesn't bubble up
 };

Move

Default configuration for Move

 {
     x: true,  //X axis
     y: true, //Y axis  
     cb_down: false,   //callback on hold
     cb_up: false,     //callback on release
     cb_move: false,   //callback on move      
     cb_click: false,  //callback after touch down + up and no move  
     target: false     //target element,
     capture: false    //Boolean, if true, event is trapped and doesn't bubble up
     state: 'auto'     //If set to manual, you have to enable/disable in your code, otherwise falls back onto the view functions
 };

Callback object

 {
    x: Point, //x coord 
    y: Point, //y coord
    distX: Int, //distance on X 
    distY: Int, //distance on Y
    dirX: 1|0|-1, //direction X
    dirY: 1|0|-1 //direction Y
}

State 1.19.0+

If you do not want to worry about enabling and disabling the touch listeners, leave the state to auto. Setting state to manual will have you control when to enable and disable them, using the following code

 mytouch.enable();
 mytouch.disable();

Using multiple Touch objects

You can also declare more than one Touch objects depending on your needs.

 let myothertouch = new OGX.Touches.Move(this);
 myothertouch .set({...});

Note that this.touch.dist is an instance of OGX.Touches.Move. Other available objects are OGX.Touches.Hold, OGX.Touches.Swipe and OGX.Touches.Drag

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