Gesture Events
The Tizen Advanced UI (TAU) framework provides gesture events optimized for the Tizen Web application.
Table of Contents
Gesture Events
| Gesture | Description |
|---|---|
| Drag | Triggered when the user drags on a gesture-enabled element. |
| Swipe | Triggered when the user swipes on a gesture-enabled element. |
| Note |
|---|
The drag and swipe gestures differ in their speed. A swipe is quick drag, which animates, for example, a block translation. A drag, on the other hand, connects elements with a finger position, and waits for the end event to do something during or at the end of dragging. |
Methods
The following table describes custom gesture event-related methods.
| Method | Parameter | Description |
|---|---|---|
| enableGesture() | Element: element
Object: gesture object |
Creates a gesture event listener for the element. The first parameter must be an inserted element. |
| disableGesture() | Element: element
Object: gesture object |
Removes the gesture event listener from the element. The first parameter must be an inserted element. |
To use a custom event, use the following code:
/* element is your event target element */
tau.event.enableGesture(element, new tau.event.gesture.Drag(), new tau.event.gesture.Swipe());
element.addEventListener("drag", function(e) {
console.log("drag event fired");
});
element.addEventListener("swipe", function(e) {
console.log("swipe event fired");
});
Event Detail Data
TAU gesture events have "detail" object. The "detail" object contains information for the events.
| Property | Description |
|---|---|
| timeStamp | Time when the event occurs. |
| pointer | Position of the first touch. Contains pageX and pageY. |
| pointers | Touches (fingers or mouse) on the screen. |
| deltaTime | Total time of the touches on the screen. |
| deltaX | Delta of the touch move on the x axis. |
| deltaY | Delta of the touch move on the y axis. |
| velocityX | Velocity on the x axis. |
| velocityY | Velocity on the y axis. |
| angle | Angle at which the touch moves from the start point. |
| direction | Move direction from the start point. The value matches "UP"|"DOWN"|"LEFT"|"RIGHT". |
| distance | Moved distance. |
| scale | Scaling of the touches (requires 2 touches). |
| rotation | Rotation of the touches (requires 2 touches). |
| eventType | Event type. The value matches "START"|"MOVE"|"END"|"CANCEL". |
| srcEvent | Source event, such as TouchStart or MouseDown. |
| startEvent | Same properties as above, but calculated from the first touch. The value is used to calculate, for example, distances, deltaTime, and scaling. |