Skip to content

Commit a2dcaf1

Browse files
author
Adam Bradley
committed
feat(gestures): added gesture directives
Closes ionic-team#829
1 parent 90f531a commit a2dcaf1

File tree

3 files changed

+425
-17
lines changed

3 files changed

+425
-17
lines changed

‎config/docs/templates/api_menu_version.template.html‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -378,6 +378,81 @@
378378
</li>
379379

380380

381+
<!-- Events -->
382+
<li class="menu-section">
383+
<a href="#" class="api-section">
384+
Events
385+
</a>
386+
<ul>
387+
<li>
388+
<a href="{{ page.versionHref }}/api/directive/onHold/">
389+
on-hold
390+
</a>
391+
</li>
392+
<li>
393+
<a href="{{ page.versionHref }}/api/directive/onTap/">
394+
on-tap
395+
</a>
396+
</li>
397+
<li>
398+
<a href="{{ page.versionHref }}/api/directive/onTouch/">
399+
on-touch
400+
</a>
401+
</li>
402+
<li>
403+
<a href="{{ page.versionHref }}/api/directive/onRelease/">
404+
on-release
405+
</a>
406+
</li>
407+
<li>
408+
<a href="{{ page.versionHref }}/api/directive/onDrag/">
409+
on-drag
410+
</a>
411+
</li>
412+
<li>
413+
<a href="{{ page.versionHref }}/api/directive/onDragUp/">
414+
on-drag-up
415+
</a>
416+
</li>
417+
<li>
418+
<a href="{{ page.versionHref }}/api/directive/onDragRight/">
419+
on-drag-right
420+
</a>
421+
</li>
422+
<li>
423+
<a href="{{ page.versionHref }}/api/directive/onDragDown/">
424+
on-drag-down
425+
</a>
426+
</li>
427+
<li>
428+
<a href="{{ page.versionHref }}/api/directive/onDragLeft/">
429+
on-drag-left
430+
</a>
431+
</li>
432+
<li>
433+
<a href="{{ page.versionHref }}/api/directive/onSwipe/">
434+
on-swipe
435+
</a>
436+
</li>
437+
<li>
438+
<a href="{{ page.versionHref }}/api/directive/onSwipeUp/">
439+
on-swipe-up
440+
</a>
441+
</li>
442+
<li>
443+
<a href="{{ page.versionHref }}/api/directive/onSwipeRight/">
444+
on-swipe-right
445+
</a>
446+
</li>
447+
<li>
448+
<a href="{{ page.versionHref }}/api/directive/onSwipeDown/">
449+
on-swipe-down
450+
</a>
451+
</li>
452+
</ul>
453+
</li>
454+
455+
381456
<!-- Gesture -->
382457
<li class="menu-section">
383458
<a href="#" class="api-section">

‎js/angular/directive/gesture.js‎

Lines changed: 268 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,268 @@
1+
2+
3+
IonicModule
4+
5+
/**
6+
* @ngdoc directive
7+
* @name onHold
8+
* @module ionic
9+
* @restrict A
10+
*
11+
* @description
12+
* Touch stays at the same location for 500ms.
13+
*
14+
* @usage
15+
* ```html
16+
* <button on-hold="onHold()" class="button">Test</button>
17+
* ```
18+
*/
19+
.directive('onHold', gestureDirective('onHold'))
20+
21+
22+
/**
23+
* @ngdoc directive
24+
* @name onTap
25+
* @module ionic
26+
* @restrict A
27+
*
28+
* @description
29+
* Quick touch at a location. If the duration of the touch goes
30+
* longer than 250ms it is no longer a tap gesture.
31+
*
32+
* @usage
33+
* ```html
34+
* <button on-tap="onTap()" class="button">Test</button>
35+
* ```
36+
*/
37+
.directive('onTap', gestureDirective('onTap'))
38+
39+
40+
/**
41+
* @ngdoc directive
42+
* @name onTouch
43+
* @module ionic
44+
* @restrict A
45+
*
46+
* @description
47+
* Called immediately when the user first begins a touch. This
48+
* gesture does not wait for a touchend/mouseup.
49+
*
50+
* @usage
51+
* ```html
52+
* <button on-touch="onTouch()" class="button">Test</button>
53+
* ```
54+
*/
55+
.directive('onTouch', gestureDirective('onTouch'))
56+
57+
58+
/**
59+
* @ngdoc directive
60+
* @name onRelease
61+
* @module ionic
62+
* @restrict A
63+
*
64+
* @description
65+
* Called when the user ends a touch.
66+
*
67+
* @usage
68+
* ```html
69+
* <button on-release="onRelease()" class="button">Test</button>
70+
* ```
71+
*/
72+
.directive('onRelease', gestureDirective('onRelease'))
73+
74+
75+
/**
76+
* @ngdoc directive
77+
* @name onDrag
78+
* @module ionic
79+
* @restrict A
80+
*
81+
* @description
82+
* Move with one touch around on the page. Blocking the scrolling when
83+
* moving left and right is a good practice. When all the drag events are
84+
* blocking you disable scrolling on that area.
85+
*
86+
* @usage
87+
* ```html
88+
* <button on-drag="onDrag()" class="button">Test</button>
89+
* ```
90+
*/
91+
.directive('onDrag', gestureDirective('onDrag'))
92+
93+
94+
/**
95+
* @ngdoc directive
96+
* @name onDragUp
97+
* @module ionic
98+
* @restrict A
99+
*
100+
* @description
101+
* Called when the element is dragged up.
102+
*
103+
* @usage
104+
* ```html
105+
* <button on-drag-up="onDragUp()" class="button">Test</button>
106+
* ```
107+
*/
108+
.directive('onDragUp', gestureDirective('onDragUp'))
109+
110+
111+
/**
112+
* @ngdoc directive
113+
* @name onDragRight
114+
* @module ionic
115+
* @restrict A
116+
*
117+
* @description
118+
* Called when the element is dragged to the right.
119+
*
120+
* @usage
121+
* ```html
122+
* <button on-drag-right="onDragRight()" class="button">Test</button>
123+
* ```
124+
*/
125+
.directive('onDragRight', gestureDirective('onDragRight'))
126+
127+
128+
/**
129+
* @ngdoc directive
130+
* @name onDragDown
131+
* @module ionic
132+
* @restrict A
133+
*
134+
* @description
135+
* Called when the element is dragged down.
136+
*
137+
* @usage
138+
* ```html
139+
* <button on-drag-down="onDragDown()" class="button">Test</button>
140+
* ```
141+
*/
142+
.directive('onDragDown', gestureDirective('onDragDown'))
143+
144+
145+
/**
146+
* @ngdoc directive
147+
* @name onDragLeft
148+
* @module ionic
149+
* @restrict A
150+
*
151+
* @description
152+
* Called when the element is dragged to the left.
153+
*
154+
* @usage
155+
* ```html
156+
* <button on-drag-left="onDragLeft()" class="button">Test</button>
157+
* ```
158+
*/
159+
.directive('onDragLeft', gestureDirective('onDragLeft'))
160+
161+
162+
/**
163+
* @ngdoc directive
164+
* @name onSwipe
165+
* @module ionic
166+
* @restrict A
167+
*
168+
* @description
169+
* Called when a moving touch has a high velocity in any direction.
170+
*
171+
* @usage
172+
* ```html
173+
* <button on-swipe="onSwipe()" class="button">Test</button>
174+
* ```
175+
*/
176+
.directive('onSwipe', gestureDirective('onSwipe'))
177+
178+
179+
/**
180+
* @ngdoc directive
181+
* @name onSwipeUp
182+
* @module ionic
183+
* @restrict A
184+
*
185+
* @description
186+
* Called when a moving touch has a high velocity moving up.
187+
*
188+
* @usage
189+
* ```html
190+
* <button on-swipe-up="onSwipeUp()" class="button">Test</button>
191+
* ```
192+
*/
193+
.directive('onSwipeUp', gestureDirective('onSwipeUp'))
194+
195+
196+
/**
197+
* @ngdoc directive
198+
* @name onSwipeRight
199+
* @module ionic
200+
* @restrict A
201+
*
202+
* @description
203+
* Called when a moving touch has a high velocity moving to the right.
204+
*
205+
* @usage
206+
* ```html
207+
* <button on-swipe-right="onSwipeRight()" class="button">Test</button>
208+
* ```
209+
*/
210+
.directive('onSwipeRight', gestureDirective('onSwipeRight'))
211+
212+
213+
/**
214+
* @ngdoc directive
215+
* @name onSwipeDown
216+
* @module ionic
217+
* @restrict A
218+
*
219+
* @description
220+
* Called when a moving touch has a high velocity moving down.
221+
*
222+
* @usage
223+
* ```html
224+
* <button on-swipe-down="onSwipeDown()" class="button">Test</button>
225+
* ```
226+
*/
227+
.directive('onSwipeDown', gestureDirective('onSwipeDown'))
228+
229+
230+
/**
231+
* @ngdoc directive
232+
* @name onSwipeLeft
233+
* @module ionic
234+
* @restrict A
235+
*
236+
* @description
237+
* Called when a moving touch has a high velocity moving to the left.
238+
*
239+
* @usage
240+
* ```html
241+
* <button on-swipe-left="onSwipeLeft()" class="button">Test</button>
242+
* ```
243+
*/
244+
.directive('onSwipeLeft', gestureDirective('onSwipeLeft'));
245+
246+
247+
248+
function gestureDirective(attrName) {
249+
return ['$ionicGesture', function($ionicGesture) {
250+
return {
251+
restrict: 'A',
252+
link: function($scope, $element, $attr) {
253+
var eventType = attrName.substr(2).toLowerCase();
254+
255+
var listener = function(ev) {
256+
$scope.$apply( $attr[attrName] );
257+
};
258+
259+
var gesture = $ionicGesture.on(eventType, listener, $element);
260+
261+
$scope.$on('$destroy', function() {
262+
$ionicGesture.off(gesture, eventType, listener);
263+
});
264+
265+
}
266+
};
267+
}];
268+
}

0 commit comments

Comments
 (0)