1 | /*! |
---|
2 | * jQuery Mobile Events |
---|
3 | * by Ben Major |
---|
4 | * |
---|
5 | * Copyright 2011-2017, Ben Major |
---|
6 | * Licensed under the MIT License: |
---|
7 | * |
---|
8 | * Permission is hereby granted, free of charge, to any person obtaining a copy |
---|
9 | * of this software and associated documentation files (the "Software"), to deal |
---|
10 | * in the Software without restriction, including without limitation the rights |
---|
11 | * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
---|
12 | * copies of the Software, and to permit persons to whom the Software is |
---|
13 | * furnished to do so, subject to the following conditions: |
---|
14 | * |
---|
15 | * The above copyright notice and this permission notice shall be included in |
---|
16 | * all copies or substantial portions of the Software. |
---|
17 | * |
---|
18 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
---|
19 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
---|
20 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
---|
21 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
---|
22 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
---|
23 | * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN |
---|
24 | * THE SOFTWARE. |
---|
25 | * |
---|
26 | */ |
---|
27 | |
---|
28 | "use strict"; |
---|
29 | |
---|
30 | (function ($) { |
---|
31 | $.attrFn = $.attrFn || {}; |
---|
32 | |
---|
33 | // navigator.userAgent.toLowerCase() isn't reliable for Chrome installs |
---|
34 | // on mobile devices. As such, we will create a boolean isChromeDesktop |
---|
35 | // The reason that we need to do this is because Chrome annoyingly |
---|
36 | // purports support for touch events even if the underlying hardware |
---|
37 | // does not! |
---|
38 | var touchCapable = ('ontouchstart' in window), |
---|
39 | |
---|
40 | settings = { |
---|
41 | tap_pixel_range: 5, |
---|
42 | swipe_h_threshold: 50, |
---|
43 | swipe_v_threshold: 50, |
---|
44 | taphold_threshold: 750, |
---|
45 | doubletap_int: 500, |
---|
46 | |
---|
47 | touch_capable: touchCapable, |
---|
48 | orientation_support: ('orientation' in window && 'onorientationchange' in window), |
---|
49 | |
---|
50 | startevent: (touchCapable) ? 'touchstart' : 'mousedown', |
---|
51 | endevent: (touchCapable) ? 'touchend' : 'mouseup', |
---|
52 | moveevent: (touchCapable) ? 'touchmove' : 'mousemove', |
---|
53 | tapevent: (touchCapable) ? 'tap' : 'click', |
---|
54 | scrollevent: (touchCapable) ? 'touchmove' : 'scroll', |
---|
55 | |
---|
56 | hold_timer: null, |
---|
57 | tap_timer: null |
---|
58 | }; |
---|
59 | |
---|
60 | // Convenience functions: |
---|
61 | $.isTouchCapable = function() { return settings.touch_capable; }; |
---|
62 | $.getStartEvent = function() { return settings.startevent; }; |
---|
63 | $.getEndEvent = function() { return settings.endevent; }; |
---|
64 | $.getMoveEvent = function() { return settings.moveevent; }; |
---|
65 | $.getTapEvent = function() { return settings.tapevent; }; |
---|
66 | $.getScrollEvent = function() { return settings.scrollevent; }; |
---|
67 | |
---|
68 | // Add Event shortcuts: |
---|
69 | $.each(['tapstart', 'tapend', 'tapmove', 'tap', 'tap2', 'tap3', 'tap4', 'singletap', 'doubletap', 'taphold', 'swipe', 'swipeup', 'swiperight', 'swipedown', 'swipeleft', 'swipeend', 'scrollstart', 'scrollend', 'orientationchange'], function (i, name) { |
---|
70 | $.fn[name] = function (fn) { |
---|
71 | return fn ? this.on(name, fn) : this.trigger(name); |
---|
72 | }; |
---|
73 | |
---|
74 | $.attrFn[name] = true; |
---|
75 | }); |
---|
76 | |
---|
77 | // tapstart Event: |
---|
78 | $.event.special.tapstart = { |
---|
79 | setup: function () { |
---|
80 | |
---|
81 | var thisObject = this, |
---|
82 | $this = $(thisObject); |
---|
83 | |
---|
84 | $this.on(settings.startevent, function tapStartFunc(e) { |
---|
85 | |
---|
86 | $this.data('callee', tapStartFunc); |
---|
87 | if (e.which && e.which !== 1) { |
---|
88 | return false; |
---|
89 | } |
---|
90 | |
---|
91 | var origEvent = e.originalEvent, |
---|
92 | touchData = { |
---|
93 | 'position': { |
---|
94 | 'x': ((settings.touch_capable) ? origEvent.touches[0].pageX : e.pageX), |
---|
95 | 'y': (settings.touch_capable) ? origEvent.touches[0].pageY : e.pageY |
---|
96 | }, |
---|
97 | 'offset': { |
---|
98 | 'x': (settings.touch_capable) ? Math.round(origEvent.changedTouches[0].pageX - ($this.offset() ? $this.offset().left : 0)) : Math.round(e.pageX - ($this.offset() ? $this.offset().left : 0)), |
---|
99 | 'y': (settings.touch_capable) ? Math.round(origEvent.changedTouches[0].pageY - ($this.offset() ? $this.offset().top : 0)) : Math.round(e.pageY - ($this.offset() ? $this.offset().top : 0)) |
---|
100 | }, |
---|
101 | 'time': Date.now(), |
---|
102 | 'target': e.target |
---|
103 | }; |
---|
104 | |
---|
105 | triggerCustomEvent(thisObject, 'tapstart', e, touchData); |
---|
106 | return true; |
---|
107 | }); |
---|
108 | }, |
---|
109 | |
---|
110 | remove: function () { |
---|
111 | $(this).off(settings.startevent, $(this).data.callee); |
---|
112 | } |
---|
113 | }; |
---|
114 | |
---|
115 | // tapmove Event: |
---|
116 | $.event.special.tapmove = { |
---|
117 | setup: function() { |
---|
118 | var thisObject = this, |
---|
119 | $this = $(thisObject); |
---|
120 | |
---|
121 | $this.on(settings.moveevent, function tapMoveFunc(e) { |
---|
122 | $this.data('callee', tapMoveFunc); |
---|
123 | |
---|
124 | var origEvent = e.originalEvent, |
---|
125 | touchData = { |
---|
126 | 'position': { |
---|
127 | 'x': ((settings.touch_capable) ? origEvent.touches[0].pageX : e.pageX), |
---|
128 | 'y': (settings.touch_capable) ? origEvent.touches[0].pageY : e.pageY |
---|
129 | }, |
---|
130 | 'offset': { |
---|
131 | 'x': (settings.touch_capable) ? Math.round(origEvent.changedTouches[0].pageX - ($this.offset() ? $this.offset().left : 0)) : Math.round(e.pageX - ($this.offset() ? $this.offset().left : 0)), |
---|
132 | 'y': (settings.touch_capable) ? Math.round(origEvent.changedTouches[0].pageY - ($this.offset() ? $this.offset().top : 0)) : Math.round(e.pageY - ($this.offset() ? $this.offset().top : 0)) |
---|
133 | }, |
---|
134 | 'time': Date.now(), |
---|
135 | 'target': e.target |
---|
136 | }; |
---|
137 | |
---|
138 | triggerCustomEvent(thisObject, 'tapmove', e, touchData); |
---|
139 | return true; |
---|
140 | }); |
---|
141 | }, |
---|
142 | remove: function() { |
---|
143 | $(this).off(settings.moveevent, $(this).data.callee); |
---|
144 | } |
---|
145 | }; |
---|
146 | |
---|
147 | // tapend Event: |
---|
148 | $.event.special.tapend = { |
---|
149 | setup: function () { |
---|
150 | var thisObject = this, |
---|
151 | $this = $(thisObject); |
---|
152 | |
---|
153 | $this.on(settings.endevent, function tapEndFunc(e) { |
---|
154 | // Touch event data: |
---|
155 | $this.data('callee', tapEndFunc); |
---|
156 | |
---|
157 | var origEvent = e.originalEvent; |
---|
158 | var touchData = { |
---|
159 | 'position': { |
---|
160 | 'x': (settings.touch_capable) ? origEvent.changedTouches[0].pageX : e.pageX, |
---|
161 | 'y': (settings.touch_capable) ? origEvent.changedTouches[0].pageY : e.pageY |
---|
162 | }, |
---|
163 | 'offset': { |
---|
164 | 'x': (settings.touch_capable) ? Math.round(origEvent.changedTouches[0].pageX - ($this.offset() ? $this.offset().left : 0)) : Math.round(e.pageX - ($this.offset() ? $this.offset().left : 0)), |
---|
165 | 'y': (settings.touch_capable) ? Math.round(origEvent.changedTouches[0].pageY - ($this.offset() ? $this.offset().top : 0)) : Math.round(e.pageY - ($this.offset() ? $this.offset().top : 0)) |
---|
166 | }, |
---|
167 | 'time': Date.now(), |
---|
168 | 'target': e.target |
---|
169 | }; |
---|
170 | triggerCustomEvent(thisObject, 'tapend', e, touchData); |
---|
171 | return true; |
---|
172 | }); |
---|
173 | }, |
---|
174 | remove: function () { |
---|
175 | $(this).off(settings.endevent, $(this).data.callee); |
---|
176 | } |
---|
177 | }; |
---|
178 | |
---|
179 | // taphold Event: |
---|
180 | $.event.special.taphold = { |
---|
181 | setup: function () { |
---|
182 | var thisObject = this, |
---|
183 | $this = $(thisObject), |
---|
184 | origTarget, |
---|
185 | start_pos = { |
---|
186 | x: 0, |
---|
187 | y: 0 |
---|
188 | }, |
---|
189 | end_x = 0, |
---|
190 | end_y = 0; |
---|
191 | |
---|
192 | $this.on(settings.startevent, function tapHoldFunc1(e) { |
---|
193 | if (e.which && e.which !== 1) { |
---|
194 | return false; |
---|
195 | } else { |
---|
196 | $this.data('tapheld', false); |
---|
197 | origTarget = e.target; |
---|
198 | |
---|
199 | var origEvent = e.originalEvent; |
---|
200 | var start_time = Date.now(), |
---|
201 | startPosition = { |
---|
202 | 'x': (settings.touch_capable) ? origEvent.touches[0].pageX : e.pageX, |
---|
203 | 'y': (settings.touch_capable) ? origEvent.touches[0].pageY : e.pageY |
---|
204 | }, |
---|
205 | startOffset = { |
---|
206 | 'x': (settings.touch_capable) ? origEvent.touches[0].pageX - origEvent.touches[0].target.offsetLeft : e.offsetX, |
---|
207 | 'y': (settings.touch_capable) ? origEvent.touches[0].pageY - origEvent.touches[0].target.offsetTop : e.offsetY |
---|
208 | }; |
---|
209 | |
---|
210 | start_pos.x = (e.originalEvent.targetTouches) ? e.originalEvent.targetTouches[0].pageX : e.pageX; |
---|
211 | start_pos.y = (e.originalEvent.targetTouches) ? e.originalEvent.targetTouches[0].pageY : e.pageY; |
---|
212 | |
---|
213 | end_x = start_pos.x; |
---|
214 | end_y = start_pos.y; |
---|
215 | |
---|
216 | // Get the element's threshold: |
---|
217 | |
---|
218 | var ele_threshold = ($this.parent().data('threshold')) ? $this.parent().data('threshold') : $this.data('threshold'), |
---|
219 | threshold = (typeof ele_threshold !== 'undefined' && ele_threshold !== false && parseInt(ele_threshold)) ? parseInt(ele_threshold) : settings.taphold_threshold; |
---|
220 | |
---|
221 | settings.hold_timer = window.setTimeout(function () { |
---|
222 | |
---|
223 | var diff_x = (start_pos.x - end_x), |
---|
224 | diff_y = (start_pos.y - end_y); |
---|
225 | |
---|
226 | if (e.target == origTarget && ((start_pos.x == end_x && start_pos.y == end_y) || (diff_x >= -(settings.tap_pixel_range) && diff_x <= settings.tap_pixel_range && diff_y >= -(settings.tap_pixel_range) && diff_y <= settings.tap_pixel_range))) { |
---|
227 | $this.data('tapheld', true); |
---|
228 | |
---|
229 | var end_time = Date.now(), |
---|
230 | endPosition = { |
---|
231 | 'x': (settings.touch_capable) ? origEvent.touches[0].pageX : e.pageX, |
---|
232 | 'y': (settings.touch_capable) ? origEvent.touches[0].pageY : e.pageY |
---|
233 | }, |
---|
234 | endOffset = { |
---|
235 | 'x': (settings.touch_capable) ? Math.round(origEvent.changedTouches[0].pageX - ($this.offset() ? $this.offset().left : 0)) : Math.round(e.pageX - ($this.offset() ? $this.offset().left : 0)), |
---|
236 | 'y': (settings.touch_capable) ? Math.round(origEvent.changedTouches[0].pageY - ($this.offset() ? $this.offset().top : 0)) : Math.round(e.pageY - ($this.offset() ? $this.offset().top : 0)) |
---|
237 | }; |
---|
238 | var duration = end_time - start_time; |
---|
239 | |
---|
240 | // Build the touch data: |
---|
241 | var touchData = { |
---|
242 | 'startTime': start_time, |
---|
243 | 'endTime': end_time, |
---|
244 | 'startPosition': startPosition, |
---|
245 | 'startOffset': startOffset, |
---|
246 | 'endPosition': endPosition, |
---|
247 | 'endOffset': endOffset, |
---|
248 | 'duration': duration, |
---|
249 | 'target': e.target |
---|
250 | }; |
---|
251 | $this.data('callee1', tapHoldFunc1); |
---|
252 | triggerCustomEvent(thisObject, 'taphold', e, touchData); |
---|
253 | } |
---|
254 | }, threshold); |
---|
255 | |
---|
256 | return true; |
---|
257 | } |
---|
258 | }).on(settings.endevent, function tapHoldFunc2() { |
---|
259 | $this.data('callee2', tapHoldFunc2); |
---|
260 | $this.data('tapheld', false); |
---|
261 | window.clearTimeout(settings.hold_timer); |
---|
262 | }) |
---|
263 | .on(settings.moveevent, function tapHoldFunc3(e) { |
---|
264 | $this.data('callee3', tapHoldFunc3); |
---|
265 | |
---|
266 | end_x = (e.originalEvent.targetTouches) ? e.originalEvent.targetTouches[0].pageX : e.pageX; |
---|
267 | end_y = (e.originalEvent.targetTouches) ? e.originalEvent.targetTouches[0].pageY : e.pageY; |
---|
268 | }); |
---|
269 | }, |
---|
270 | |
---|
271 | remove: function () { |
---|
272 | $(this).off(settings.startevent, $(this).data.callee1).off(settings.endevent, $(this).data.callee2).off(settings.moveevent, $(this).data.callee3); |
---|
273 | } |
---|
274 | }; |
---|
275 | |
---|
276 | // doubletap Event: |
---|
277 | $.event.special.doubletap = { |
---|
278 | setup: function () { |
---|
279 | var thisObject = this, |
---|
280 | $this = $(thisObject), |
---|
281 | origTarget, |
---|
282 | action, |
---|
283 | firstTap = null, |
---|
284 | origEvent, |
---|
285 | cooloff, |
---|
286 | cooling = false; |
---|
287 | |
---|
288 | $this.on(settings.startevent, function doubleTapFunc1(e) { |
---|
289 | if (e.which && e.which !== 1) { |
---|
290 | return false; |
---|
291 | } |
---|
292 | $this.data('doubletapped', false); |
---|
293 | origTarget = e.target; |
---|
294 | $this.data('callee1', doubleTapFunc1); |
---|
295 | |
---|
296 | origEvent = e.originalEvent; |
---|
297 | if (!firstTap) { |
---|
298 | firstTap = { |
---|
299 | 'position': { |
---|
300 | 'x': (settings.touch_capable) ? origEvent.touches[0].pageX : e.pageX, |
---|
301 | 'y': (settings.touch_capable) ? origEvent.touches[0].pageY : e.pageY |
---|
302 | }, |
---|
303 | 'offset': { |
---|
304 | 'x': (settings.touch_capable) ? Math.round(origEvent.changedTouches[0].pageX - ($this.offset() ? $this.offset().left : 0)) : Math.round(e.pageX - ($this.offset() ? $this.offset().left : 0)), |
---|
305 | 'y': (settings.touch_capable) ? Math.round(origEvent.changedTouches[0].pageY - ($this.offset() ? $this.offset().top : 0)) : Math.round(e.pageY - ($this.offset() ? $this.offset().top : 0)) |
---|
306 | }, |
---|
307 | 'time': Date.now(), |
---|
308 | 'target': e.target |
---|
309 | }; |
---|
310 | } |
---|
311 | |
---|
312 | return true; |
---|
313 | }).on(settings.endevent, function doubleTapFunc2(e) { |
---|
314 | |
---|
315 | var now = Date.now(); |
---|
316 | var lastTouch = $this.data('lastTouch') || now + 1; |
---|
317 | var delta = now - lastTouch; |
---|
318 | window.clearTimeout(action); |
---|
319 | $this.data('callee2', doubleTapFunc2); |
---|
320 | |
---|
321 | if (delta < settings.doubletap_int && (e.target == origTarget) && delta > 100) { |
---|
322 | $this.data('doubletapped', true); |
---|
323 | window.clearTimeout(settings.tap_timer); |
---|
324 | |
---|
325 | // Now get the current event: |
---|
326 | var lastTap = { |
---|
327 | 'position': { |
---|
328 | 'x': (settings.touch_capable) ? e.originalEvent.changedTouches[0].pageX : e.pageX, |
---|
329 | 'y': (settings.touch_capable) ? e.originalEvent.changedTouches[0].pageY : e.pageY |
---|
330 | }, |
---|
331 | 'offset': { |
---|
332 | 'x': (settings.touch_capable) ? Math.round(origEvent.changedTouches[0].pageX - ($this.offset() ? $this.offset().left : 0)) : Math.round(e.pageX - ($this.offset() ? $this.offset().left : 0)), |
---|
333 | 'y': (settings.touch_capable) ? Math.round(origEvent.changedTouches[0].pageY - ($this.offset() ? $this.offset().top : 0)) : Math.round(e.pageY - ($this.offset() ? $this.offset().top : 0)) |
---|
334 | }, |
---|
335 | 'time': Date.now(), |
---|
336 | 'target': e.target |
---|
337 | }; |
---|
338 | |
---|
339 | var touchData = { |
---|
340 | 'firstTap': firstTap, |
---|
341 | 'secondTap': lastTap, |
---|
342 | 'interval': lastTap.time - firstTap.time |
---|
343 | }; |
---|
344 | |
---|
345 | if (!cooling) { |
---|
346 | triggerCustomEvent(thisObject, 'doubletap', e, touchData); |
---|
347 | firstTap = null; |
---|
348 | } |
---|
349 | |
---|
350 | cooling = true; |
---|
351 | |
---|
352 | cooloff = window.setTimeout(function () { |
---|
353 | cooling = false; |
---|
354 | }, settings.doubletap_int); |
---|
355 | |
---|
356 | } else { |
---|
357 | $this.data('lastTouch', now); |
---|
358 | action = window.setTimeout(function () { |
---|
359 | firstTap = null; |
---|
360 | window.clearTimeout(action); |
---|
361 | }, settings.doubletap_int, [e]); |
---|
362 | } |
---|
363 | $this.data('lastTouch', now); |
---|
364 | }); |
---|
365 | }, |
---|
366 | remove: function () { |
---|
367 | $(this).off(settings.startevent, $(this).data.callee1).off(settings.endevent, $(this).data.callee2); |
---|
368 | } |
---|
369 | }; |
---|
370 | |
---|
371 | // singletap Event: |
---|
372 | // This is used in conjuction with doubletap when both events are needed on the same element |
---|
373 | $.event.special.singletap = { |
---|
374 | setup: function () { |
---|
375 | var thisObject = this, |
---|
376 | $this = $(thisObject), |
---|
377 | origTarget = null, |
---|
378 | startTime = null, |
---|
379 | start_pos = { |
---|
380 | x: 0, |
---|
381 | y: 0 |
---|
382 | }; |
---|
383 | |
---|
384 | $this.on(settings.startevent, function singleTapFunc1(e) { |
---|
385 | if (e.which && e.which !== 1) { |
---|
386 | return false; |
---|
387 | } else { |
---|
388 | startTime = Date.now(); |
---|
389 | origTarget = e.target; |
---|
390 | $this.data('callee1', singleTapFunc1); |
---|
391 | |
---|
392 | // Get the start x and y position: |
---|
393 | start_pos.x = (e.originalEvent.targetTouches) ? e.originalEvent.targetTouches[0].pageX : e.pageX; |
---|
394 | start_pos.y = (e.originalEvent.targetTouches) ? e.originalEvent.targetTouches[0].pageY : e.pageY; |
---|
395 | |
---|
396 | return true; |
---|
397 | } |
---|
398 | }).on(settings.endevent, function singleTapFunc2(e) { |
---|
399 | $this.data('callee2', singleTapFunc2); |
---|
400 | if (e.target == origTarget) { |
---|
401 | |
---|
402 | // Get the end point: |
---|
403 | var end_pos_x = (e.originalEvent.changedTouches) ? e.originalEvent.changedTouches[0].pageX : e.pageX, |
---|
404 | end_pos_y = (e.originalEvent.changedTouches) ? e.originalEvent.changedTouches[0].pageY : e.pageY; |
---|
405 | |
---|
406 | // We need to check if it was a taphold: |
---|
407 | |
---|
408 | settings.tap_timer = window.setTimeout(function () { |
---|
409 | |
---|
410 | var diff_x = (start_pos.x - end_pos_x), diff_y = (start_pos.y - end_pos_y); |
---|
411 | |
---|
412 | if(!$this.data('doubletapped') && !$this.data('tapheld') && (((start_pos.x == end_pos_x) && (start_pos.y == end_pos_y)) || (diff_x >= -(settings.tap_pixel_range) && diff_x <= settings.tap_pixel_range && diff_y >= -(settings.tap_pixel_range) && diff_y <= settings.tap_pixel_range))) { |
---|
413 | |
---|
414 | var origEvent = e.originalEvent; |
---|
415 | var touchData = { |
---|
416 | 'position': { |
---|
417 | 'x': (settings.touch_capable) ? origEvent.changedTouches[0].pageX : e.pageX, |
---|
418 | 'y': (settings.touch_capable) ? origEvent.changedTouches[0].pageY : e.pageY |
---|
419 | }, |
---|
420 | 'offset': { |
---|
421 | 'x': (settings.touch_capable) ? Math.round(origEvent.changedTouches[0].pageX - ($this.offset() ? $this.offset().left : 0)) : Math.round(e.pageX - ($this.offset() ? $this.offset().left : 0)), |
---|
422 | 'y': (settings.touch_capable) ? Math.round(origEvent.changedTouches[0].pageY - ($this.offset() ? $this.offset().top : 0)) : Math.round(e.pageY - ($this.offset() ? $this.offset().top : 0)) |
---|
423 | }, |
---|
424 | 'time': Date.now(), |
---|
425 | 'target': e.target |
---|
426 | }; |
---|
427 | |
---|
428 | // Was it a taphold? |
---|
429 | if((touchData.time - startTime) < settings.taphold_threshold) |
---|
430 | { |
---|
431 | triggerCustomEvent(thisObject, 'singletap', e, touchData); |
---|
432 | } |
---|
433 | } |
---|
434 | }, settings.doubletap_int); |
---|
435 | } |
---|
436 | }); |
---|
437 | }, |
---|
438 | |
---|
439 | remove: function () { |
---|
440 | $(this).off(settings.startevent, $(this).data.callee1).off(settings.endevent, $(this).data.callee2); |
---|
441 | } |
---|
442 | }; |
---|
443 | |
---|
444 | // tap Event: |
---|
445 | $.event.special.tap = { |
---|
446 | setup: function () { |
---|
447 | var thisObject = this, |
---|
448 | $this = $(thisObject), |
---|
449 | started = false, |
---|
450 | origTarget = null, |
---|
451 | start_time, |
---|
452 | start_pos = { |
---|
453 | x: 0, |
---|
454 | y: 0 |
---|
455 | }, |
---|
456 | touches; |
---|
457 | |
---|
458 | $this.on(settings.startevent, function tapFunc1(e) { |
---|
459 | $this.data('callee1', tapFunc1); |
---|
460 | |
---|
461 | if( e.which && e.which !== 1 ) |
---|
462 | { |
---|
463 | return false; |
---|
464 | } |
---|
465 | else |
---|
466 | { |
---|
467 | started = true; |
---|
468 | start_pos.x = (e.originalEvent.targetTouches) ? e.originalEvent.targetTouches[0].pageX : e.pageX; |
---|
469 | start_pos.y = (e.originalEvent.targetTouches) ? e.originalEvent.targetTouches[0].pageY : e.pageY; |
---|
470 | start_time = Date.now(); |
---|
471 | origTarget = e.target; |
---|
472 | |
---|
473 | touches = (e.originalEvent.targetTouches) ? e.originalEvent.targetTouches : [ e ]; |
---|
474 | return true; |
---|
475 | } |
---|
476 | }).on(settings.endevent, function tapFunc2(e) { |
---|
477 | $this.data('callee2', tapFunc2); |
---|
478 | |
---|
479 | // Only trigger if they've started, and the target matches: |
---|
480 | var end_x = (e.originalEvent.targetTouches) ? e.originalEvent.changedTouches[0].pageX : e.pageX, |
---|
481 | end_y = (e.originalEvent.targetTouches) ? e.originalEvent.changedTouches[0].pageY : e.pageY, |
---|
482 | diff_x = (start_pos.x - end_x), |
---|
483 | diff_y = (start_pos.y - end_y), |
---|
484 | eventName; |
---|
485 | |
---|
486 | if (origTarget == e.target && started && ((Date.now() - start_time) < settings.taphold_threshold) && ((start_pos.x == end_x && start_pos.y == end_y) || (diff_x >= -(settings.tap_pixel_range) && diff_x <= settings.tap_pixel_range && diff_y >= -(settings.tap_pixel_range) && diff_y <= settings.tap_pixel_range))) { |
---|
487 | var origEvent = e.originalEvent; |
---|
488 | var touchData = [ ]; |
---|
489 | |
---|
490 | for( var i = 0; i < touches.length; i++) |
---|
491 | { |
---|
492 | var touch = { |
---|
493 | 'position': { |
---|
494 | 'x': (settings.touch_capable) ? origEvent.changedTouches[i].pageX : e.pageX, |
---|
495 | 'y': (settings.touch_capable) ? origEvent.changedTouches[i].pageY : e.pageY |
---|
496 | }, |
---|
497 | 'offset': { |
---|
498 | 'x': (settings.touch_capable) ? Math.round(origEvent.changedTouches[i].pageX - ($this.offset() ? $this.offset().left : 0)) : Math.round(e.pageX - ($this.offset() ? $this.offset().left : 0)), |
---|
499 | 'y': (settings.touch_capable) ? Math.round(origEvent.changedTouches[i].pageY - ($this.offset() ? $this.offset().top : 0)) : Math.round(e.pageY - ($this.offset() ? $this.offset().top : 0)) |
---|
500 | }, |
---|
501 | 'time': Date.now(), |
---|
502 | 'target': e.target |
---|
503 | }; |
---|
504 | |
---|
505 | touchData.push( touch ); |
---|
506 | } |
---|
507 | |
---|
508 | triggerCustomEvent(thisObject, 'tap', e, touchData); |
---|
509 | } |
---|
510 | }); |
---|
511 | }, |
---|
512 | |
---|
513 | remove: function () { |
---|
514 | $(this).off(settings.startevent, $(this).data.callee1).off(settings.endevent, $(this).data.callee2); |
---|
515 | } |
---|
516 | }; |
---|
517 | |
---|
518 | // swipe Event (also handles swipeup, swiperight, swipedown and swipeleft): |
---|
519 | $.event.special.swipe = { |
---|
520 | setup: function () { |
---|
521 | var thisObject = this, |
---|
522 | $this = $(thisObject), |
---|
523 | started = false, |
---|
524 | hasSwiped = false, |
---|
525 | originalCoord = { |
---|
526 | x: 0, |
---|
527 | y: 0 |
---|
528 | }, |
---|
529 | finalCoord = { |
---|
530 | x: 0, |
---|
531 | y: 0 |
---|
532 | }, |
---|
533 | startEvnt; |
---|
534 | |
---|
535 | // Screen touched, store the original coordinate |
---|
536 | |
---|
537 | function touchStart(e) { |
---|
538 | $this = $(e.currentTarget); |
---|
539 | $this.data('callee1', touchStart); |
---|
540 | originalCoord.x = (e.originalEvent.targetTouches) ? e.originalEvent.targetTouches[0].pageX : e.pageX; |
---|
541 | originalCoord.y = (e.originalEvent.targetTouches) ? e.originalEvent.targetTouches[0].pageY : e.pageY; |
---|
542 | finalCoord.x = originalCoord.x; |
---|
543 | finalCoord.y = originalCoord.y; |
---|
544 | started = true; |
---|
545 | var origEvent = e.originalEvent; |
---|
546 | // Read event data into our startEvt: |
---|
547 | startEvnt = { |
---|
548 | 'position': { |
---|
549 | 'x': (settings.touch_capable) ? origEvent.touches[0].pageX : e.pageX, |
---|
550 | 'y': (settings.touch_capable) ? origEvent.touches[0].pageY : e.pageY |
---|
551 | }, |
---|
552 | 'offset': { |
---|
553 | 'x': (settings.touch_capable) ? Math.round(origEvent.changedTouches[0].pageX - ($this.offset() ? $this.offset().left : 0)) : Math.round(e.pageX - ($this.offset() ? $this.offset().left : 0)), |
---|
554 | 'y': (settings.touch_capable) ? Math.round(origEvent.changedTouches[0].pageY - ($this.offset() ? $this.offset().top : 0)) : Math.round(e.pageY - ($this.offset() ? $this.offset().top : 0)) |
---|
555 | }, |
---|
556 | 'time': Date.now(), |
---|
557 | 'target': e.target |
---|
558 | }; |
---|
559 | } |
---|
560 | |
---|
561 | // Store coordinates as finger is swiping |
---|
562 | |
---|
563 | function touchMove(e) { |
---|
564 | $this = $(e.currentTarget); |
---|
565 | $this.data('callee2', touchMove); |
---|
566 | finalCoord.x = (e.originalEvent.targetTouches) ? e.originalEvent.targetTouches[0].pageX : e.pageX; |
---|
567 | finalCoord.y = (e.originalEvent.targetTouches) ? e.originalEvent.targetTouches[0].pageY : e.pageY; |
---|
568 | |
---|
569 | var swipedir; |
---|
570 | |
---|
571 | // We need to check if the element to which the event was bound contains a data-xthreshold | data-vthreshold: |
---|
572 | var ele_x_threshold = ($this.parent().data('xthreshold')) ? $this.parent().data('xthreshold') : $this.data('xthreshold'), |
---|
573 | ele_y_threshold = ($this.parent().data('ythreshold')) ? $this.parent().data('ythreshold') : $this.data('ythreshold'), |
---|
574 | h_threshold = (typeof ele_x_threshold !== 'undefined' && ele_x_threshold !== false && parseInt(ele_x_threshold)) ? parseInt(ele_x_threshold) : settings.swipe_h_threshold, |
---|
575 | v_threshold = (typeof ele_y_threshold !== 'undefined' && ele_y_threshold !== false && parseInt(ele_y_threshold)) ? parseInt(ele_y_threshold) : settings.swipe_v_threshold; |
---|
576 | |
---|
577 | if (originalCoord.y > finalCoord.y && (originalCoord.y - finalCoord.y > v_threshold)) { |
---|
578 | swipedir = 'swipeup'; |
---|
579 | } |
---|
580 | if (originalCoord.x < finalCoord.x && (finalCoord.x - originalCoord.x > h_threshold)) { |
---|
581 | swipedir = 'swiperight'; |
---|
582 | } |
---|
583 | if (originalCoord.y < finalCoord.y && (finalCoord.y - originalCoord.y > v_threshold)) { |
---|
584 | swipedir = 'swipedown'; |
---|
585 | } |
---|
586 | if (originalCoord.x > finalCoord.x && (originalCoord.x - finalCoord.x > h_threshold)) { |
---|
587 | swipedir = 'swipeleft'; |
---|
588 | } |
---|
589 | if (swipedir != undefined && started) { |
---|
590 | originalCoord.x = 0; |
---|
591 | originalCoord.y = 0; |
---|
592 | finalCoord.x = 0; |
---|
593 | finalCoord.y = 0; |
---|
594 | started = false; |
---|
595 | |
---|
596 | // Read event data into our endEvnt: |
---|
597 | var origEvent = e.originalEvent; |
---|
598 | var endEvnt = { |
---|
599 | 'position': { |
---|
600 | 'x': (settings.touch_capable) ? origEvent.touches[0].pageX : e.pageX, |
---|
601 | 'y': (settings.touch_capable) ? origEvent.touches[0].pageY : e.pageY |
---|
602 | }, |
---|
603 | 'offset': { |
---|
604 | 'x': (settings.touch_capable) ? Math.round(origEvent.changedTouches[0].pageX - ($this.offset() ? $this.offset().left : 0)) : Math.round(e.pageX - ($this.offset() ? $this.offset().left : 0)), |
---|
605 | 'y': (settings.touch_capable) ? Math.round(origEvent.changedTouches[0].pageY - ($this.offset() ? $this.offset().top : 0)) : Math.round(e.pageY - ($this.offset() ? $this.offset().top : 0)) |
---|
606 | }, |
---|
607 | 'time': Date.now(), |
---|
608 | 'target': e.target |
---|
609 | }; |
---|
610 | |
---|
611 | // Calculate the swipe amount (normalized): |
---|
612 | var xAmount = Math.abs(startEvnt.position.x - endEvnt.position.x), |
---|
613 | yAmount = Math.abs(startEvnt.position.y - endEvnt.position.y); |
---|
614 | |
---|
615 | var touchData = { |
---|
616 | 'startEvnt': startEvnt, |
---|
617 | 'endEvnt': endEvnt, |
---|
618 | 'direction': swipedir.replace('swipe', ''), |
---|
619 | 'xAmount': xAmount, |
---|
620 | 'yAmount': yAmount, |
---|
621 | 'duration': endEvnt.time - startEvnt.time |
---|
622 | }; |
---|
623 | hasSwiped = true; |
---|
624 | $this.trigger('swipe', touchData).trigger(swipedir, touchData); |
---|
625 | } |
---|
626 | } |
---|
627 | |
---|
628 | function touchEnd(e) { |
---|
629 | $this = $(e.currentTarget); |
---|
630 | var swipedir = ""; |
---|
631 | $this.data('callee3', touchEnd); |
---|
632 | if (hasSwiped) { |
---|
633 | // We need to check if the element to which the event was bound contains a data-xthreshold | data-vthreshold: |
---|
634 | var ele_x_threshold = $this.data('xthreshold'), |
---|
635 | ele_y_threshold = $this.data('ythreshold'), |
---|
636 | h_threshold = (typeof ele_x_threshold !== 'undefined' && ele_x_threshold !== false && parseInt(ele_x_threshold)) ? parseInt(ele_x_threshold) : settings.swipe_h_threshold, |
---|
637 | v_threshold = (typeof ele_y_threshold !== 'undefined' && ele_y_threshold !== false && parseInt(ele_y_threshold)) ? parseInt(ele_y_threshold) : settings.swipe_v_threshold; |
---|
638 | |
---|
639 | var origEvent = e.originalEvent; |
---|
640 | var endEvnt = { |
---|
641 | 'position': { |
---|
642 | 'x': (settings.touch_capable) ? origEvent.changedTouches[0].pageX : e.pageX, |
---|
643 | 'y': (settings.touch_capable) ? origEvent.changedTouches[0].pageY : e.pageY |
---|
644 | }, |
---|
645 | 'offset': { |
---|
646 | 'x': (settings.touch_capable) ? Math.round(origEvent.changedTouches[0].pageX - ($this.offset() ? $this.offset().left : 0)) : Math.round(e.pageX - ($this.offset() ? $this.offset().left : 0)), |
---|
647 | 'y': (settings.touch_capable) ? Math.round(origEvent.changedTouches[0].pageY - ($this.offset() ? $this.offset().top : 0)) : Math.round(e.pageY - ($this.offset() ? $this.offset().top : 0)) |
---|
648 | }, |
---|
649 | 'time': Date.now(), |
---|
650 | 'target': e.target |
---|
651 | }; |
---|
652 | |
---|
653 | // Read event data into our endEvnt: |
---|
654 | if (startEvnt.position.y > endEvnt.position.y && (startEvnt.position.y - endEvnt.position.y > v_threshold)) { |
---|
655 | swipedir = 'swipeup'; |
---|
656 | } |
---|
657 | if (startEvnt.position.x < endEvnt.position.x && (endEvnt.position.x - startEvnt.position.x > h_threshold)) { |
---|
658 | swipedir = 'swiperight'; |
---|
659 | } |
---|
660 | if (startEvnt.position.y < endEvnt.position.y && (endEvnt.position.y - startEvnt.position.y > v_threshold)) { |
---|
661 | swipedir = 'swipedown'; |
---|
662 | } |
---|
663 | if (startEvnt.position.x > endEvnt.position.x && (startEvnt.position.x - endEvnt.position.x > h_threshold)) { |
---|
664 | swipedir = 'swipeleft'; |
---|
665 | } |
---|
666 | |
---|
667 | // Calculate the swipe amount (normalized): |
---|
668 | var xAmount = Math.abs(startEvnt.position.x - endEvnt.position.x), |
---|
669 | yAmount = Math.abs(startEvnt.position.y - endEvnt.position.y); |
---|
670 | |
---|
671 | var touchData = { |
---|
672 | 'startEvnt': startEvnt, |
---|
673 | 'endEvnt': endEvnt, |
---|
674 | 'direction': swipedir.replace('swipe', ''), |
---|
675 | 'xAmount': xAmount, |
---|
676 | 'yAmount': yAmount, |
---|
677 | 'duration': endEvnt.time - startEvnt.time |
---|
678 | }; |
---|
679 | $this.trigger('swipeend', touchData); |
---|
680 | } |
---|
681 | |
---|
682 | started = false; |
---|
683 | hasSwiped = false; |
---|
684 | } |
---|
685 | |
---|
686 | $this.on(settings.startevent, touchStart); |
---|
687 | $this.on(settings.moveevent, touchMove); |
---|
688 | $this.on(settings.endevent, touchEnd); |
---|
689 | }, |
---|
690 | |
---|
691 | remove: function () { |
---|
692 | $(this).off(settings.startevent, $(this).data.callee1).off(settings.moveevent, $(this).data.callee2).off(settings.endevent, $(this).data.callee3); |
---|
693 | } |
---|
694 | }; |
---|
695 | |
---|
696 | // scrollstart Event (also handles scrollend): |
---|
697 | $.event.special.scrollstart = { |
---|
698 | setup: function () { |
---|
699 | var thisObject = this, |
---|
700 | $this = $(thisObject), |
---|
701 | scrolling, |
---|
702 | timer; |
---|
703 | |
---|
704 | function trigger(event, state) { |
---|
705 | scrolling = state; |
---|
706 | triggerCustomEvent(thisObject, scrolling ? 'scrollstart' : 'scrollend', event); |
---|
707 | } |
---|
708 | |
---|
709 | // iPhone triggers scroll after a small delay; use touchmove instead |
---|
710 | $this.on(settings.scrollevent, function scrollFunc(event) { |
---|
711 | $this.data('callee', scrollFunc); |
---|
712 | |
---|
713 | if (!scrolling) { |
---|
714 | trigger(event, true); |
---|
715 | } |
---|
716 | |
---|
717 | clearTimeout(timer); |
---|
718 | timer = setTimeout(function () { |
---|
719 | trigger(event, false); |
---|
720 | }, 50); |
---|
721 | }); |
---|
722 | }, |
---|
723 | |
---|
724 | remove: function () { |
---|
725 | $(this).off(settings.scrollevent, $(this).data.callee); |
---|
726 | } |
---|
727 | }; |
---|
728 | |
---|
729 | // This is the orientation change (largely borrowed from jQuery Mobile): |
---|
730 | var win = $(window), |
---|
731 | special_event, |
---|
732 | get_orientation, |
---|
733 | last_orientation, |
---|
734 | initial_orientation_is_landscape, |
---|
735 | initial_orientation_is_default, |
---|
736 | portrait_map = { |
---|
737 | '0': true, |
---|
738 | '180': true |
---|
739 | }; |
---|
740 | |
---|
741 | if (settings.orientation_support) { |
---|
742 | var ww = window.innerWidth || win.width(), |
---|
743 | wh = window.innerHeight || win.height(), |
---|
744 | landscape_threshold = 50; |
---|
745 | |
---|
746 | initial_orientation_is_landscape = ww > wh && (ww - wh) > landscape_threshold; |
---|
747 | initial_orientation_is_default = portrait_map[window.orientation]; |
---|
748 | |
---|
749 | if ((initial_orientation_is_landscape && initial_orientation_is_default) || (!initial_orientation_is_landscape && !initial_orientation_is_default)) { |
---|
750 | portrait_map = { |
---|
751 | '-90': true, |
---|
752 | '90': true |
---|
753 | }; |
---|
754 | } |
---|
755 | } |
---|
756 | |
---|
757 | $.event.special.orientationchange = special_event = { |
---|
758 | setup: function () { |
---|
759 | // If the event is supported natively, return false so that jQuery |
---|
760 | // will on to the event using DOM methods. |
---|
761 | if (settings.orientation_support) { |
---|
762 | return false; |
---|
763 | } |
---|
764 | |
---|
765 | // Get the current orientation to avoid initial double-triggering. |
---|
766 | last_orientation = get_orientation(); |
---|
767 | |
---|
768 | win.on('throttledresize', handler); |
---|
769 | return true; |
---|
770 | }, |
---|
771 | teardown: function () { |
---|
772 | if (settings.orientation_support) { |
---|
773 | return false; |
---|
774 | } |
---|
775 | |
---|
776 | win.off('throttledresize', handler); |
---|
777 | return true; |
---|
778 | }, |
---|
779 | add: function (handleObj) { |
---|
780 | // Save a reference to the bound event handler. |
---|
781 | var old_handler = handleObj.handler; |
---|
782 | |
---|
783 | handleObj.handler = function (event) { |
---|
784 | event.orientation = get_orientation(); |
---|
785 | return old_handler.apply(this, arguments); |
---|
786 | }; |
---|
787 | } |
---|
788 | }; |
---|
789 | |
---|
790 | // If the event is not supported natively, this handler will be bound to |
---|
791 | // the window resize event to simulate the orientationchange event. |
---|
792 | |
---|
793 | function handler() { |
---|
794 | // Get the current orientation. |
---|
795 | var orientation = get_orientation(); |
---|
796 | |
---|
797 | if (orientation !== last_orientation) { |
---|
798 | // The orientation has changed, so trigger the orientationchange event. |
---|
799 | last_orientation = orientation; |
---|
800 | win.trigger("orientationchange"); |
---|
801 | } |
---|
802 | } |
---|
803 | |
---|
804 | $.event.special.orientationchange.orientation = get_orientation = function () { |
---|
805 | var isPortrait = true, |
---|
806 | elem = document.documentElement; |
---|
807 | |
---|
808 | if (settings.orientation_support) { |
---|
809 | isPortrait = portrait_map[window.orientation]; |
---|
810 | } else { |
---|
811 | isPortrait = elem && elem.clientWidth / elem.clientHeight < 1.1; |
---|
812 | } |
---|
813 | |
---|
814 | return isPortrait ? 'portrait' : 'landscape'; |
---|
815 | }; |
---|
816 | |
---|
817 | // throttle Handler: |
---|
818 | $.event.special.throttledresize = { |
---|
819 | setup: function () { |
---|
820 | $(this).on('resize', throttle_handler); |
---|
821 | }, |
---|
822 | teardown: function () { |
---|
823 | $(this).off('resize', throttle_handler); |
---|
824 | } |
---|
825 | }; |
---|
826 | |
---|
827 | var throttle = 250, |
---|
828 | throttle_handler = function () { |
---|
829 | curr = Date.now(); |
---|
830 | diff = curr - lastCall; |
---|
831 | |
---|
832 | if (diff >= throttle) { |
---|
833 | lastCall = curr; |
---|
834 | $(this).trigger('throttledresize'); |
---|
835 | |
---|
836 | } else { |
---|
837 | if (heldCall) { |
---|
838 | window.clearTimeout(heldCall); |
---|
839 | } |
---|
840 | |
---|
841 | // Promise a held call will still execute |
---|
842 | heldCall = window.setTimeout(handler, throttle - diff); |
---|
843 | } |
---|
844 | }, |
---|
845 | lastCall = 0, |
---|
846 | heldCall, |
---|
847 | curr, |
---|
848 | diff; |
---|
849 | |
---|
850 | // Trigger a custom event: |
---|
851 | |
---|
852 | function triggerCustomEvent(obj, eventType, event, touchData) { |
---|
853 | var originalType = event.type; |
---|
854 | event.type = eventType; |
---|
855 | |
---|
856 | $.event.dispatch.call(obj, event, touchData); |
---|
857 | event.type = originalType; |
---|
858 | } |
---|
859 | |
---|
860 | // Correctly on anything we've overloaded: |
---|
861 | $.each({ |
---|
862 | scrollend: 'scrollstart', |
---|
863 | swipeup: 'swipe', |
---|
864 | swiperight: 'swipe', |
---|
865 | swipedown: 'swipe', |
---|
866 | swipeleft: 'swipe', |
---|
867 | swipeend: 'swipe', |
---|
868 | tap2: 'tap' |
---|
869 | }, function (e, srcE) { |
---|
870 | $.event.special[e] = { |
---|
871 | setup: function () { |
---|
872 | $(this).on(srcE, $.noop); |
---|
873 | } |
---|
874 | }; |
---|
875 | }); |
---|
876 | |
---|
877 | }(jQuery)); |
---|