1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | import $ from 'jquery';
|
7 |
|
8 | var Touch = {};
|
9 |
|
10 | var startPosX,
|
11 | startPosY,
|
12 | startTime,
|
13 | elapsedTime,
|
14 | isMoving = false;
|
15 |
|
16 | function onTouchEnd() {
|
17 |
|
18 | this.removeEventListener('touchmove', onTouchMove);
|
19 | this.removeEventListener('touchend', onTouchEnd);
|
20 | isMoving = false;
|
21 | }
|
22 |
|
23 | function onTouchMove(e) {
|
24 | if ($.spotSwipe.preventDefault) { e.preventDefault(); }
|
25 | if(isMoving) {
|
26 | var x = e.touches[0].pageX;
|
27 | var y = e.touches[0].pageY;
|
28 | var dx = startPosX - x;
|
29 | var dy = startPosY - y;
|
30 | var dir;
|
31 | elapsedTime = new Date().getTime() - startTime;
|
32 | if(Math.abs(dx) >= $.spotSwipe.moveThreshold && elapsedTime <= $.spotSwipe.timeThreshold) {
|
33 | dir = dx > 0 ? 'left' : 'right';
|
34 | }
|
35 |
|
36 |
|
37 |
|
38 | if(dir) {
|
39 | e.preventDefault();
|
40 | onTouchEnd.call(this);
|
41 | $(this).trigger('swipe', dir).trigger(`swipe${dir}`);
|
42 | }
|
43 | }
|
44 | }
|
45 |
|
46 | function onTouchStart(e) {
|
47 | if (e.touches.length == 1) {
|
48 | startPosX = e.touches[0].pageX;
|
49 | startPosY = e.touches[0].pageY;
|
50 | isMoving = true;
|
51 | startTime = new Date().getTime();
|
52 | this.addEventListener('touchmove', onTouchMove, false);
|
53 | this.addEventListener('touchend', onTouchEnd, false);
|
54 | }
|
55 | }
|
56 |
|
57 | function init() {
|
58 | this.addEventListener && this.addEventListener('touchstart', onTouchStart, false);
|
59 | }
|
60 |
|
61 | function teardown() {
|
62 | this.removeEventListener('touchstart', onTouchStart);
|
63 | }
|
64 |
|
65 | class SpotSwipe {
|
66 | constructor($) {
|
67 | this.version = '1.0.0';
|
68 | this.enabled = 'ontouchstart' in document.documentElement;
|
69 | this.preventDefault = false;
|
70 | this.moveThreshold = 75;
|
71 | this.timeThreshold = 200;
|
72 | this.$ = $;
|
73 | this._init();
|
74 | }
|
75 |
|
76 | _init() {
|
77 | var $ = this.$;
|
78 | $.event.special.swipe = { setup: init };
|
79 |
|
80 | $.each(['left', 'up', 'down', 'right'], function () {
|
81 | $.event.special[`swipe${this}`] = { setup: function(){
|
82 | $(this).on('swipe', $.noop);
|
83 | } };
|
84 | });
|
85 | }
|
86 | }
|
87 |
|
88 |
|
89 |
|
90 |
|
91 |
|
92 |
|
93 |
|
94 |
|
95 | Touch.setupSpotSwipe = function($) {
|
96 | $.spotSwipe = new SpotSwipe($);
|
97 | };
|
98 |
|
99 |
|
100 |
|
101 |
|
102 | Touch.setupTouchHandler = function($) {
|
103 | $.fn.addTouch = function(){
|
104 | this.each(function(i,el){
|
105 | $(el).bind('touchstart touchmove touchend touchcancel',function(){
|
106 |
|
107 |
|
108 | handleTouch(event);
|
109 | });
|
110 | });
|
111 |
|
112 | var handleTouch = function(event){
|
113 | var touches = event.changedTouches,
|
114 | first = touches[0],
|
115 | eventTypes = {
|
116 | touchstart: 'mousedown',
|
117 | touchmove: 'mousemove',
|
118 | touchend: 'mouseup'
|
119 | },
|
120 | type = eventTypes[event.type],
|
121 | simulatedEvent
|
122 | ;
|
123 |
|
124 | if('MouseEvent' in window && typeof window.MouseEvent === 'function') {
|
125 | simulatedEvent = new window.MouseEvent(type, {
|
126 | 'bubbles': true,
|
127 | 'cancelable': true,
|
128 | 'screenX': first.screenX,
|
129 | 'screenY': first.screenY,
|
130 | 'clientX': first.clientX,
|
131 | 'clientY': first.clientY
|
132 | });
|
133 | } else {
|
134 | simulatedEvent = document.createEvent('MouseEvent');
|
135 | simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false, false, false, false, 0, null);
|
136 | }
|
137 | first.target.dispatchEvent(simulatedEvent);
|
138 | };
|
139 | };
|
140 | };
|
141 |
|
142 | Touch.init = function($) {
|
143 | if(typeof($.spotSwipe) === 'undefined') {
|
144 | Touch.setupSpotSwipe($);
|
145 | Touch.setupTouchHandler($);
|
146 | }
|
147 | };
|
148 |
|
149 | export {Touch};
|