| 1 |
efrain |
1 |
YUI.add('node-event-simulate', function (Y, NAME) {
|
|
|
2 |
|
|
|
3 |
/**
|
|
|
4 |
* Adds functionality to simulate events.
|
|
|
5 |
* @module node
|
|
|
6 |
* @submodule node-event-simulate
|
|
|
7 |
*/
|
|
|
8 |
|
|
|
9 |
/**
|
|
|
10 |
* Simulates an event on the node.
|
|
|
11 |
* @param {String} type The type of event (i.e., "click").
|
|
|
12 |
* @param {Object} options (Optional) Extra options to copy onto the event object.
|
|
|
13 |
* @for Node
|
|
|
14 |
* @method simulate
|
|
|
15 |
*/
|
|
|
16 |
Y.Node.prototype.simulate = function (type, options) {
|
|
|
17 |
|
|
|
18 |
Y.Event.simulate(Y.Node.getDOMNode(this), type, options);
|
|
|
19 |
};
|
|
|
20 |
|
|
|
21 |
/**
|
|
|
22 |
* Simulates the higher user level gesture of the given name on this node.
|
|
|
23 |
* This method generates a set of low level touch events(Apple specific gesture
|
|
|
24 |
* events as well for the iOS platforms) asynchronously. Note that gesture
|
|
|
25 |
* simulation is relying on `Y.Event.simulate()` method to generate
|
|
|
26 |
* the touch events under the hood. The `Y.Event.simulate()` method
|
|
|
27 |
* itself is a synchronous method.
|
|
|
28 |
*
|
|
|
29 |
* Supported gestures are `tap`, `doubletap`, `press`, `move`, `flick`, `pinch`
|
|
|
30 |
* and `rotate`.
|
|
|
31 |
*
|
|
|
32 |
* The `pinch` gesture is used to simulate the pinching and spreading of two
|
|
|
33 |
* fingers. During a pinch simulation, rotation is also possible. Essentially
|
|
|
34 |
* `pinch` and `rotate` simulations share the same base implementation to allow
|
|
|
35 |
* both pinching and rotation at the same time. The only difference is `pinch`
|
|
|
36 |
* requires `start` and `end` option properties while `rotate` requires `rotation`
|
|
|
37 |
* option property.
|
|
|
38 |
*
|
|
|
39 |
* The `pinch` and `rotate` gestures can be described as placing 2 fingers along a
|
|
|
40 |
* circle. Pinching and spreading can be described by start and end circles while
|
|
|
41 |
* rotation occurs on a single circle. If the radius of the start circle is greater
|
|
|
42 |
* than the end circle, the gesture becomes a pinch, otherwise it is a spread spread.
|
|
|
43 |
*
|
|
|
44 |
* @example
|
|
|
45 |
*
|
|
|
46 |
* var node = Y.one("#target");
|
|
|
47 |
*
|
|
|
48 |
* // double tap example
|
|
|
49 |
* node.simulateGesture("doubletap", function() {
|
|
|
50 |
* // my callback function
|
|
|
51 |
* });
|
|
|
52 |
*
|
|
|
53 |
* // flick example from the center of the node, move 50 pixels down for 50ms)
|
|
|
54 |
* node.simulateGesture("flick", {
|
|
|
55 |
* axis: y,
|
|
|
56 |
* distance: -100
|
|
|
57 |
* duration: 50
|
|
|
58 |
* }, function() {
|
|
|
59 |
* // my callback function
|
|
|
60 |
* });
|
|
|
61 |
*
|
|
|
62 |
* // simulate rotating a node 75 degrees counter-clockwise
|
|
|
63 |
* node.simulateGesture("rotate", {
|
|
|
64 |
* rotation: -75
|
|
|
65 |
* });
|
|
|
66 |
*
|
|
|
67 |
* // simulate a pinch and a rotation at the same time.
|
|
|
68 |
* // fingers start on a circle of radius 100 px, placed at top/bottom
|
|
|
69 |
* // fingers end on a circle of radius 50px, placed at right/left
|
|
|
70 |
* node.simulateGesture("pinch", {
|
|
|
71 |
* r1: 100,
|
|
|
72 |
* r2: 50,
|
|
|
73 |
* start: 0
|
|
|
74 |
* rotation: 90
|
|
|
75 |
* });
|
|
|
76 |
*
|
|
|
77 |
* @method simulateGesture
|
|
|
78 |
* @param {String} name The name of the supported gesture to simulate. The
|
|
|
79 |
* supported gesture name is one of "tap", "doubletap", "press", "move",
|
|
|
80 |
* "flick", "pinch" and "rotate".
|
|
|
81 |
* @param {Object} [options] Extra options used to define the gesture behavior:
|
|
|
82 |
*
|
|
|
83 |
* Valid options properties for the `tap` gesture:
|
|
|
84 |
*
|
|
|
85 |
* @param {Array} [options.point] (Optional) Indicates the [x,y] coordinates
|
|
|
86 |
* where the tap should be simulated. Default is the center of the node
|
|
|
87 |
* element.
|
|
|
88 |
* @param {Number} [options.hold=10] (Optional) The hold time in milliseconds.
|
|
|
89 |
* This is the time between `touchstart` and `touchend` event generation.
|
|
|
90 |
* @param {Number} [options.times=1] (Optional) Indicates the number of taps.
|
|
|
91 |
* @param {Number} [options.delay=10] (Optional) The number of milliseconds
|
|
|
92 |
* before the next tap simulation happens. This is valid only when `times`
|
|
|
93 |
* is more than 1.
|
|
|
94 |
*
|
|
|
95 |
* Valid options properties for the `doubletap` gesture:
|
|
|
96 |
*
|
|
|
97 |
* @param {Array} [options.point] (Optional) Indicates the [x,y] coordinates
|
|
|
98 |
* where the doubletap should be simulated. Default is the center of the
|
|
|
99 |
* node element.
|
|
|
100 |
*
|
|
|
101 |
* Valid options properties for the `press` gesture:
|
|
|
102 |
*
|
|
|
103 |
* @param {Array} [options.point] (Optional) Indicates the [x,y] coordinates
|
|
|
104 |
* where the press should be simulated. Default is the center of the node
|
|
|
105 |
* element.
|
|
|
106 |
* @param {Number} [options.hold=3000] (Optional) The hold time in milliseconds.
|
|
|
107 |
* This is the time between `touchstart` and `touchend` event generation.
|
|
|
108 |
* Default is 3000ms (3 seconds).
|
|
|
109 |
*
|
|
|
110 |
* Valid options properties for the `move` gesture:
|
|
|
111 |
*
|
|
|
112 |
* @param {Object} [options.path] (Optional) Indicates the path of the finger
|
|
|
113 |
* movement. It's an object with three optional properties: `point`,
|
|
|
114 |
* `xdist` and `ydist`.
|
|
|
115 |
* @param {Array} [options.path.point] A starting point of the gesture.
|
|
|
116 |
* Default is the center of the node element.
|
|
|
117 |
* @param {Number} [options.path.xdist=200] A distance to move in pixels
|
|
|
118 |
* along the X axis. A negative distance value indicates moving left.
|
|
|
119 |
* @param {Number} [options.path.ydist=0] A distance to move in pixels
|
|
|
120 |
* along the Y axis. A negative distance value indicates moving up.
|
|
|
121 |
* @param {Number} [options.duration=1000] (Optional) The duration of the
|
|
|
122 |
* gesture in milliseconds.
|
|
|
123 |
*
|
|
|
124 |
* Valid options properties for the `flick` gesture:
|
|
|
125 |
*
|
|
|
126 |
* @param {Array} [options.point] (Optional) Indicates the [x, y] coordinates
|
|
|
127 |
* where the flick should be simulated. Default is the center of the
|
|
|
128 |
* node element.
|
|
|
129 |
* @param {String} [options.axis='x'] (Optional) Valid values are either
|
|
|
130 |
* "x" or "y". Indicates axis to move along. The flick can move to one of
|
|
|
131 |
* 4 directions(left, right, up and down).
|
|
|
132 |
* @param {Number} [options.distance=200] (Optional) Distance to move in pixels
|
|
|
133 |
* @param {Number} [options.duration=1000] (Optional) The duration of the
|
|
|
134 |
* gesture in milliseconds. User given value could be automatically
|
|
|
135 |
* adjusted by the framework if it is below the minimum velocity to be
|
|
|
136 |
* a flick gesture.
|
|
|
137 |
*
|
|
|
138 |
* Valid options properties for the `pinch` gesture:
|
|
|
139 |
*
|
|
|
140 |
* @param {Array} [options.center] (Optional) The center of the circle where
|
|
|
141 |
* two fingers are placed. Default is the center of the node element.
|
|
|
142 |
* @param {Number} [options.r1] (Required) Pixel radius of the start circle
|
|
|
143 |
* where 2 fingers will be on when the gesture starts. The circles are
|
|
|
144 |
* centered at the center of the element.
|
|
|
145 |
* @param {Number} [options.r2] (Required) Pixel radius of the end circle
|
|
|
146 |
* when this gesture ends.
|
|
|
147 |
* @param {Number} [options.duration=1000] (Optional) The duration of the
|
|
|
148 |
* gesture in milliseconds.
|
|
|
149 |
* @param {Number} [options.start=0] (Optional) Starting degree of the first
|
|
|
150 |
* finger. The value is relative to the path of the north. Default is 0
|
|
|
151 |
* (i.e., 12:00 on a clock).
|
|
|
152 |
* @param {Number} [options.rotation=0] (Optional) Degrees to rotate from
|
|
|
153 |
* the starting degree. A negative value means rotation to the
|
|
|
154 |
* counter-clockwise direction.
|
|
|
155 |
*
|
|
|
156 |
* Valid options properties for the `rotate` gesture:
|
|
|
157 |
*
|
|
|
158 |
* @param {Array} [options.center] (Optional) The center of the circle where
|
|
|
159 |
* two fingers are placed. Default is the center of the node element.
|
|
|
160 |
* @param {Number} [options.r1] (Optional) Pixel radius of the start circle
|
|
|
161 |
* where 2 fingers will be on when the gesture starts. The circles are
|
|
|
162 |
* centered at the center of the element. Default is a fourth of the node
|
|
|
163 |
* element width or height, whichever is smaller.
|
|
|
164 |
* @param {Number} [options.r2] (Optional) Pixel radius of the end circle
|
|
|
165 |
* when this gesture ends. Default is a fourth of the node element width or
|
|
|
166 |
* height, whichever is smaller.
|
|
|
167 |
* @param {Number} [options.duration=1000] (Optional) The duration of the
|
|
|
168 |
* gesture in milliseconds.
|
|
|
169 |
* @param {Number} [options.start=0] (Optional) Starting degree of the first
|
|
|
170 |
* finger. The value is relative to the path of the north. Default is 0
|
|
|
171 |
* (i.e., 12:00 on a clock).
|
|
|
172 |
* @param {Number} [options.rotation] (Required) Degrees to rotate from
|
|
|
173 |
* the starting degree. A negative value means rotation to the
|
|
|
174 |
* counter-clockwise direction.
|
|
|
175 |
*
|
|
|
176 |
* @param {Function} [cb] The callback to execute when the asynchronouse gesture
|
|
|
177 |
* simulation is completed.
|
|
|
178 |
* @param {Error} cb.err An error object if the simulation is failed.
|
|
|
179 |
* @for Node
|
|
|
180 |
*/
|
|
|
181 |
Y.Node.prototype.simulateGesture = function (name, options, cb) {
|
|
|
182 |
|
|
|
183 |
Y.Event.simulateGesture(this, name, options, cb);
|
|
|
184 |
};
|
|
|
185 |
|
|
|
186 |
|
|
|
187 |
}, '3.18.1', {"requires": ["node-base", "event-simulate", "gesture-simulate"]});
|