https://www.nzisd.org/js/jquery-ui/jquery.ui.touch-punch.js

1/*!
2 * jQuery UI Touch Punch 0.2.3
3 *
4 * Copyright 2011–2014, Dave Furfero
5 * Dual licensed under the MIT or GPL Version 2 licenses.
6 *
7 * Depends:
8 *  jquery.ui.widget.js
9 *  jquery.ui.mouse.js
10 */
11(function ($) {
12
13  // Detect touch support
14  $.support.touch = 'ontouchend' in document;
15
16  // Ignore browsers without touch support
17  if (!$.support.touch) {
18    return;
19  }
20
21  var mouseProto = $.ui.mouse.prototype,
22      _mouseInit = mouseProto._mouseInit,
23      _mouseDestroy = mouseProto._mouseDestroy,
24      touchHandled;
25  
26  /**
27   * Cancel the event passed in
28   * @param {Object} event A touch event
29   */
30  function cancelEvent(e) {
31    e.preventDefault();
32    e.stopPropagation();
33  }
34  
35  /**
36   * Simulate a mouse event based on a corresponding touch event
37   * @param {Object} event A touch event
38   * @param {String} simulatedType The corresponding mouse event
39   */
40  function simulateMouseEvent (event, simulatedType) {
41
42    // Ignore multi-touch events
43    if (event.originalEvent.touches.length > 1) {
44      return;
45    }
46
47    event.preventDefault();
48
49    var touch = event.originalEvent.changedTouches[0],
50        simulatedEvent = document.createEvent('MouseEvents');
51    
52    // Initialize the simulated mouse event using the touch event's coordinates
53    simulatedEvent.initMouseEvent(
54      simulatedType,    // type
55      true,             // bubbles                    
56      true,             // cancelable                 
57      window,           // view                       
58      1,                // detail                     
59      touch.screenX,    // screenX                    
60      touch.screenY,    // screenY                    
61      touch.clientX,    // clientX                    
62      touch.clientY,    // clientY                    
63      false,            // ctrlKey                    
64      false,            // altKey                     
65      false,            // shiftKey                   
66      false,            // metaKey                    
67      0,                // button                     
68      null              // relatedTarget              
69    );
70
71    // Dispatch the simulated event to the target element
72    event.target.dispatchEvent(simulatedEvent);
73  }
74
75  /**
76   * Handle the jQuery UI widget's touchstart events
77   * @param {Object} event The widget element's touchstart event
78   */
79  mouseProto._touchStart = function (event) {
80
81    var self = this;
82
83    // Ignore the event if another widget is already being handled
84    if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) {
85      return;
86    }
87
88    // Track movement to determine if interaction was a click
89    self._touchMoved = false;
90
91    //Prevent right click menu from showing up
92    window.addEventListener('contextmenu', cancelEvent);
93
94    //set timeout based on delay property
95    self._touchStartTimeout = setTimeout(function() {
96
97      // Set the flag to prevent other widgets from inheriting the touch event
98      touchHandled = true;
99
100      //unset timeout variable
101      self._touchStartTimeout = null;
102
103      //only simulate events if touch hasn't moved
104      if(!self._touchMoved) {
105        // Simulate the mouseover event
106        simulateMouseEvent(event, 'mouseover');
107
108        // Simulate the mousemove event
109        simulateMouseEvent(event, 'mousemove');
110
111        // Simulate the mousedown event
112        simulateMouseEvent(event, 'mousedown');
113      }
114    }, 750);
115  };
116
117  /**
118   * Handle the jQuery UI widget's touchmove events
119   * @param {Object} event The document's touchmove event
120   */
121  mouseProto._touchMove = function (event) {
122    
123    // Interaction was not a click
124    this._touchMoved = true;
125    
126    // Ignore event if not handled
127    if (!touchHandled) {
128      return;
129    }
130
131    // Simulate the mousemove event
132    simulateMouseEvent(event, 'mousemove');
133  };
134
135  /**
136   * Handle the jQuery UI widget's touchend events
137   * @param {Object} event The document's touchend event
138   */
139  mouseProto._touchEnd = function (event) {
140
141    //clear a pending touchStart timeout
142    if(this._touchStartTimeout) {
143      clearTimeout(this._touchStartTimeout);
144      this._touchStartTimeout = null;
145    }
146
147    //remove listener for right click menu
148    window.removeEventListener('contextmenu', cancelEvent);
149
150    // Ignore event if not handled
151    if (!touchHandled) {
152      return;
153    }
154
155    // Simulate the mouseup event
156    simulateMouseEvent(event, 'mouseup');
157
158    // Simulate the mouseout event
159    simulateMouseEvent(event, 'mouseout');
160
161    // If the touch interaction did not move, it should trigger a click
162    if (!this._touchMoved) {
163
164      // Simulate the click event
165      simulateMouseEvent(event, 'click');
166    }
167
168    // Unset the flag to allow other widgets to inherit the touch event
169    touchHandled = false;
170  };
171
172  /**
173   * A duck punch of the $.ui.mouse _mouseInit method to support touch events.
174   * This method extends the widget with bound touch event handlers that
175   * translate touch events to mouse events and pass them to the widget's
176   * original mouse event handling methods.
177   */
178  mouseProto._mouseInit = function () {
179    
180    var self = this;
181
182    // Delegate the touch handlers to the widget's element
183    self.element.bind({
184      touchstart: $.proxy(self, '_touchStart'),
185      touchmove: $.proxy(self, '_touchMove'),
186      touchend: $.proxy(self, '_touchEnd')
187    });

188
189    // Call the original $.ui.mouse init method
190    _mouseInit.call(self);
191  };
192
193  /**
194   * Remove the touch event handlers
195   */
196  mouseProto._mouseDestroy = function () {
197    
198    var self = this;
199
200    // Delegate the touch handlers to the widget's element
201    self.element.unbind({
202      touchstart: $.proxy(self, '_touchStart'),
203      touchmove: $.proxy(self, '_touchMove'),
204      touchend: $.proxy(self, '_touchEnd')
205    });
206
207    // Call the original $.ui.mouse destroy method
208    _mouseDestroy.call(self);
209  };
210
211})(jQuery);