Touch - globules-io/OGX.JS GitHub 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
ormousedown
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
anddisable
methods of your main object. There methods require different configurations.
Creating
Create new instances of
OGX.Touches.Drag
andOGX.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
}
1.19.0+
State If you do not want to worry about enabling and disabling the touch listeners, leave the state to
auto
. Settingstate
tomanual
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 ofOGX.Touches.Move
. Other available objects areOGX.Touches.Hold
,OGX.Touches.Swipe
andOGX.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
totrue
when creating the app