|
|
@@ -1,363 +1,363 @@
|
|
|
-(function(window, document, exportName, undefined) {
|
|
|
- "use strict";
|
|
|
-
|
|
|
- var isMultiTouch = false;
|
|
|
- var multiTouchStartPos;
|
|
|
- var eventTarget;
|
|
|
- var touchElements = {};
|
|
|
-
|
|
|
- // polyfills
|
|
|
- if(!document.createTouch) {
|
|
|
- document.createTouch = function(view, target, identifier, pageX, pageY, screenX, screenY, clientX, clientY) {
|
|
|
- // auto set
|
|
|
- if(clientX == undefined || clientY == undefined) {
|
|
|
- clientX = pageX - window.pageXOffset;
|
|
|
- clientY = pageY - window.pageYOffset;
|
|
|
- }
|
|
|
-
|
|
|
- return new Touch(target, identifier, {
|
|
|
- pageX: pageX,
|
|
|
- pageY: pageY,
|
|
|
- screenX: screenX,
|
|
|
- screenY: screenY,
|
|
|
- clientX: clientX,
|
|
|
- clientY: clientY
|
|
|
- });
|
|
|
- };
|
|
|
- }
|
|
|
-
|
|
|
- if(!document.createTouchList) {
|
|
|
- document.createTouchList = function() {
|
|
|
- var touchList = new TouchList();
|
|
|
- for (var i = 0; i < arguments.length; i++) {
|
|
|
- touchList[i] = arguments[i];
|
|
|
- }
|
|
|
- touchList.length = arguments.length;
|
|
|
- return touchList;
|
|
|
- };
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * create an touch point
|
|
|
- * @constructor
|
|
|
- * @param target
|
|
|
- * @param identifier
|
|
|
- * @param pos
|
|
|
- * @param deltaX
|
|
|
- * @param deltaY
|
|
|
- * @returns {Object} touchPoint
|
|
|
- */
|
|
|
- function Touch(target, identifier, pos, deltaX, deltaY) {
|
|
|
- deltaX = deltaX || 0;
|
|
|
- deltaY = deltaY || 0;
|
|
|
-
|
|
|
- this.identifier = identifier;
|
|
|
- this.target = target;
|
|
|
- this.clientX = pos.clientX + deltaX;
|
|
|
- this.clientY = pos.clientY + deltaY;
|
|
|
- this.screenX = pos.screenX + deltaX;
|
|
|
- this.screenY = pos.screenY + deltaY;
|
|
|
- this.pageX = pos.pageX + deltaX;
|
|
|
- this.pageY = pos.pageY + deltaY;
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * create empty touchlist with the methods
|
|
|
- * @constructor
|
|
|
- * @returns touchList
|
|
|
- */
|
|
|
- function TouchList() {
|
|
|
- var touchList = [];
|
|
|
-
|
|
|
- touchList.item = function(index) {
|
|
|
- return this[index] || null;
|
|
|
- };
|
|
|
-
|
|
|
- // specified by Mozilla
|
|
|
- touchList.identifiedTouch = function(id) {
|
|
|
- return this[id + 1] || null;
|
|
|
- };
|
|
|
-
|
|
|
- return touchList;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- /**
|
|
|
- * Simple trick to fake touch event support
|
|
|
- * this is enough for most libraries like Modernizr and Hammer
|
|
|
- */
|
|
|
- function fakeTouchSupport() {
|
|
|
- var objs = [window, document.documentElement];
|
|
|
- var props = ['ontouchstart', 'ontouchmove', 'ontouchcancel', 'ontouchend'];
|
|
|
-
|
|
|
- for(var o=0; o<objs.length; o++) {
|
|
|
- for(var p=0; p<props.length; p++) {
|
|
|
- if(objs[o] && objs[o][props[p]] == undefined) {
|
|
|
- objs[o][props[p]] = null;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * we don't have to emulate on a touch device
|
|
|
- * @returns {boolean}
|
|
|
- */
|
|
|
- function hasTouchSupport() {
|
|
|
- return ("ontouchstart" in window) || // touch events
|
|
|
- (window.Modernizr && window.Modernizr.touch) || // modernizr
|
|
|
- (navigator.msMaxTouchPoints || navigator.maxTouchPoints) > 2; // pointer events
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * disable mouseevents on the page
|
|
|
- * @param ev
|
|
|
- */
|
|
|
- function preventMouseEvents(ev) {
|
|
|
- // 注释启用默认事件
|
|
|
- // ev.preventDefault();
|
|
|
- // ev.stopPropagation();
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * only trigger touches when the left mousebutton has been pressed
|
|
|
- * @param touchType
|
|
|
- * @returns {Function}
|
|
|
- */
|
|
|
- function onMouse(touchType) {
|
|
|
- return function(ev) {
|
|
|
- // prevent mouse events
|
|
|
- preventMouseEvents(ev);
|
|
|
-
|
|
|
- if (ev.which !== 1) {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // The EventTarget on which the touch point started when it was first placed on the surface,
|
|
|
- // even if the touch point has since moved outside the interactive area of that element.
|
|
|
- // also, when the target doesnt exist anymore, we update it
|
|
|
- if (ev.type == 'mousedown' || !eventTarget || (eventTarget && !eventTarget.dispatchEvent)) {
|
|
|
- eventTarget = ev.target;
|
|
|
- }
|
|
|
-
|
|
|
- // shiftKey has been lost, so trigger a touchend
|
|
|
- if (isMultiTouch && !ev.shiftKey) {
|
|
|
- triggerTouch('touchend', ev);
|
|
|
- isMultiTouch = false;
|
|
|
- }
|
|
|
-
|
|
|
- triggerTouch(touchType, ev);
|
|
|
-
|
|
|
- // we're entering the multi-touch mode!
|
|
|
- if (!isMultiTouch && ev.shiftKey) {
|
|
|
- isMultiTouch = true;
|
|
|
- multiTouchStartPos = {
|
|
|
- pageX: ev.pageX,
|
|
|
- pageY: ev.pageY,
|
|
|
- clientX: ev.clientX,
|
|
|
- clientY: ev.clientY,
|
|
|
- screenX: ev.screenX,
|
|
|
- screenY: ev.screenY
|
|
|
- };
|
|
|
- triggerTouch('touchstart', ev);
|
|
|
- }
|
|
|
-
|
|
|
- // reset
|
|
|
- if (ev.type == 'mouseup') {
|
|
|
- multiTouchStartPos = null;
|
|
|
- isMultiTouch = false;
|
|
|
- eventTarget = null;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * trigger a touch event
|
|
|
- * @param eventName
|
|
|
- * @param mouseEv
|
|
|
- */
|
|
|
- function triggerTouch(eventName, mouseEv) {
|
|
|
- var touchEvent = document.createEvent('Event');
|
|
|
- touchEvent.initEvent(eventName, true, true);
|
|
|
-
|
|
|
- touchEvent.altKey = mouseEv.altKey;
|
|
|
- touchEvent.ctrlKey = mouseEv.ctrlKey;
|
|
|
- touchEvent.metaKey = mouseEv.metaKey;
|
|
|
- touchEvent.shiftKey = mouseEv.shiftKey;
|
|
|
-
|
|
|
- touchEvent.touches = getActiveTouches(mouseEv, eventName);
|
|
|
- touchEvent.targetTouches = getActiveTouches(mouseEv, eventName);
|
|
|
- touchEvent.changedTouches = getChangedTouches(mouseEv, eventName);
|
|
|
-
|
|
|
- eventTarget.dispatchEvent(touchEvent);
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * create a touchList based on the mouse event
|
|
|
- * @param mouseEv
|
|
|
- * @returns {TouchList}
|
|
|
- */
|
|
|
- function createTouchList(mouseEv) {
|
|
|
- var touchList = new TouchList();
|
|
|
-
|
|
|
- if (isMultiTouch) {
|
|
|
- var f = TouchEmulator.multiTouchOffset;
|
|
|
- var deltaX = multiTouchStartPos.pageX - mouseEv.pageX;
|
|
|
- var deltaY = multiTouchStartPos.pageY - mouseEv.pageY;
|
|
|
-
|
|
|
- touchList.push(new Touch(eventTarget, 1, multiTouchStartPos, (deltaX*-1) - f, (deltaY*-1) + f));
|
|
|
- touchList.push(new Touch(eventTarget, 2, multiTouchStartPos, deltaX+f, deltaY-f));
|
|
|
- } else {
|
|
|
- touchList.push(new Touch(eventTarget, 1, mouseEv, 0, 0));
|
|
|
- }
|
|
|
-
|
|
|
- return touchList;
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * receive all active touches
|
|
|
- * @param mouseEv
|
|
|
- * @returns {TouchList}
|
|
|
- */
|
|
|
- function getActiveTouches(mouseEv, eventName) {
|
|
|
- // empty list
|
|
|
- if (mouseEv.type == 'mouseup') {
|
|
|
- return new TouchList();
|
|
|
- }
|
|
|
-
|
|
|
- var touchList = createTouchList(mouseEv);
|
|
|
- if(isMultiTouch && mouseEv.type != 'mouseup' && eventName == 'touchend') {
|
|
|
- touchList.splice(1, 1);
|
|
|
- }
|
|
|
- return touchList;
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * receive a filtered set of touches with only the changed pointers
|
|
|
- * @param mouseEv
|
|
|
- * @param eventName
|
|
|
- * @returns {TouchList}
|
|
|
- */
|
|
|
- function getChangedTouches(mouseEv, eventName) {
|
|
|
- var touchList = createTouchList(mouseEv);
|
|
|
-
|
|
|
- // we only want to return the added/removed item on multitouch
|
|
|
- // which is the second pointer, so remove the first pointer from the touchList
|
|
|
- //
|
|
|
- // but when the mouseEv.type is mouseup, we want to send all touches because then
|
|
|
- // no new input will be possible
|
|
|
- if(isMultiTouch && mouseEv.type != 'mouseup' &&
|
|
|
- (eventName == 'touchstart' || eventName == 'touchend')) {
|
|
|
- touchList.splice(0, 1);
|
|
|
- }
|
|
|
-
|
|
|
- return touchList;
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * show the touchpoints on the screen
|
|
|
- */
|
|
|
- function showTouches(ev) {
|
|
|
- var touch, i, el, styles;
|
|
|
-
|
|
|
- // first all visible touches
|
|
|
- for(i = 0; i < ev.touches.length; i++) {
|
|
|
- touch = ev.touches[i];
|
|
|
- el = touchElements[touch.identifier];
|
|
|
- if(!el) {
|
|
|
- el = touchElements[touch.identifier] = document.createElement("div");
|
|
|
- document.body.appendChild(el);
|
|
|
- }
|
|
|
-
|
|
|
- styles = TouchEmulator.template(touch);
|
|
|
- for(var prop in styles) {
|
|
|
- el.style[prop] = styles[prop];
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // remove all ended touches
|
|
|
- if(ev.type == 'touchend' || ev.type == 'touchcancel') {
|
|
|
- for(i = 0; i < ev.changedTouches.length; i++) {
|
|
|
- touch = ev.changedTouches[i];
|
|
|
- el = touchElements[touch.identifier];
|
|
|
- if(el) {
|
|
|
- el.parentNode.removeChild(el);
|
|
|
- delete touchElements[touch.identifier];
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * TouchEmulator initializer
|
|
|
- */
|
|
|
- function TouchEmulator() {
|
|
|
- if (hasTouchSupport()) {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- fakeTouchSupport();
|
|
|
-
|
|
|
- window.addEventListener("mousedown", onMouse('touchstart'), true);
|
|
|
- window.addEventListener("mousemove", onMouse('touchmove'), true);
|
|
|
- window.addEventListener("mouseup", onMouse('touchend'), true);
|
|
|
-
|
|
|
- window.addEventListener("mouseenter", preventMouseEvents, true);
|
|
|
- window.addEventListener("mouseleave", preventMouseEvents, true);
|
|
|
- window.addEventListener("mouseout", preventMouseEvents, true);
|
|
|
- window.addEventListener("mouseover", preventMouseEvents, true);
|
|
|
-
|
|
|
- // it uses itself!
|
|
|
- window.addEventListener("touchstart", showTouches, true);
|
|
|
- window.addEventListener("touchmove", showTouches, true);
|
|
|
- window.addEventListener("touchend", showTouches, true);
|
|
|
- window.addEventListener("touchcancel", showTouches, true);
|
|
|
- }
|
|
|
-
|
|
|
- // start distance when entering the multitouch mode
|
|
|
- TouchEmulator.multiTouchOffset = 75;
|
|
|
-
|
|
|
- /**
|
|
|
- * css template for the touch rendering
|
|
|
- * @param touch
|
|
|
- * @returns object
|
|
|
- */
|
|
|
- TouchEmulator.template = function(touch) {
|
|
|
- var size = 0;
|
|
|
- var transform = 'translate('+ (touch.clientX-(size/2)) +'px, '+ (touch.clientY-(size/2)) +'px)';
|
|
|
- return {
|
|
|
- position: 'fixed',
|
|
|
- left: 0,
|
|
|
- top: 0,
|
|
|
- background: '#fff',
|
|
|
- border: 'solid 1px #999',
|
|
|
- opacity: .6,
|
|
|
- borderRadius: '100%',
|
|
|
- height: size + 'px',
|
|
|
- width: size + 'px',
|
|
|
- padding: 0,
|
|
|
- margin: 0,
|
|
|
- display: 'block',
|
|
|
- overflow: 'hidden',
|
|
|
- pointerEvents: 'none',
|
|
|
- webkitUserSelect: 'none',
|
|
|
- mozUserSelect: 'none',
|
|
|
- userSelect: 'none',
|
|
|
- webkitTransform: transform,
|
|
|
- mozTransform: transform,
|
|
|
- transform: transform,
|
|
|
- zIndex: 100
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- // export
|
|
|
- if (typeof define == "function" && define.amd) {
|
|
|
- define(function() {
|
|
|
- return TouchEmulator;
|
|
|
- });
|
|
|
- } else if (typeof module != "undefined" && module.exports) {
|
|
|
- module.exports = TouchEmulator;
|
|
|
- } else {
|
|
|
- window[exportName] = TouchEmulator;
|
|
|
- }
|
|
|
+(function(window, document, exportName, undefined) {
|
|
|
+ "use strict";
|
|
|
+
|
|
|
+ var isMultiTouch = false;
|
|
|
+ var multiTouchStartPos;
|
|
|
+ var eventTarget;
|
|
|
+ var touchElements = {};
|
|
|
+
|
|
|
+ // polyfills
|
|
|
+ if(!document.createTouch) {
|
|
|
+ document.createTouch = function(view, target, identifier, pageX, pageY, screenX, screenY, clientX, clientY) {
|
|
|
+ // auto set
|
|
|
+ if(clientX == undefined || clientY == undefined) {
|
|
|
+ clientX = pageX - window.pageXOffset;
|
|
|
+ clientY = pageY - window.pageYOffset;
|
|
|
+ }
|
|
|
+
|
|
|
+ return new Touch(target, identifier, {
|
|
|
+ pageX: pageX,
|
|
|
+ pageY: pageY,
|
|
|
+ screenX: screenX,
|
|
|
+ screenY: screenY,
|
|
|
+ clientX: clientX,
|
|
|
+ clientY: clientY
|
|
|
+ });
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ if(!document.createTouchList) {
|
|
|
+ document.createTouchList = function() {
|
|
|
+ var touchList = new TouchList();
|
|
|
+ for (var i = 0; i < arguments.length; i++) {
|
|
|
+ touchList[i] = arguments[i];
|
|
|
+ }
|
|
|
+ touchList.length = arguments.length;
|
|
|
+ return touchList;
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * create an touch point
|
|
|
+ * @constructor
|
|
|
+ * @param target
|
|
|
+ * @param identifier
|
|
|
+ * @param pos
|
|
|
+ * @param deltaX
|
|
|
+ * @param deltaY
|
|
|
+ * @returns {Object} touchPoint
|
|
|
+ */
|
|
|
+ function Touch(target, identifier, pos, deltaX, deltaY) {
|
|
|
+ deltaX = deltaX || 0;
|
|
|
+ deltaY = deltaY || 0;
|
|
|
+
|
|
|
+ this.identifier = identifier;
|
|
|
+ this.target = target;
|
|
|
+ this.clientX = pos.clientX + deltaX;
|
|
|
+ this.clientY = pos.clientY + deltaY;
|
|
|
+ this.screenX = pos.screenX + deltaX;
|
|
|
+ this.screenY = pos.screenY + deltaY;
|
|
|
+ this.pageX = pos.pageX + deltaX;
|
|
|
+ this.pageY = pos.pageY + deltaY;
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * create empty touchlist with the methods
|
|
|
+ * @constructor
|
|
|
+ * @returns touchList
|
|
|
+ */
|
|
|
+ function TouchList() {
|
|
|
+ var touchList = [];
|
|
|
+
|
|
|
+ touchList.item = function(index) {
|
|
|
+ return this[index] || null;
|
|
|
+ };
|
|
|
+
|
|
|
+ // specified by Mozilla
|
|
|
+ touchList.identifiedTouch = function(id) {
|
|
|
+ return this[id + 1] || null;
|
|
|
+ };
|
|
|
+
|
|
|
+ return touchList;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Simple trick to fake touch event support
|
|
|
+ * this is enough for most libraries like Modernizr and Hammer
|
|
|
+ */
|
|
|
+ function fakeTouchSupport() {
|
|
|
+ var objs = [window, document.documentElement];
|
|
|
+ var props = ['ontouchstart', 'ontouchmove', 'ontouchcancel', 'ontouchend'];
|
|
|
+
|
|
|
+ for(var o=0; o<objs.length; o++) {
|
|
|
+ for(var p=0; p<props.length; p++) {
|
|
|
+ if(objs[o] && objs[o][props[p]] == undefined) {
|
|
|
+ objs[o][props[p]] = null;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * we don't have to emulate on a touch device
|
|
|
+ * @returns {boolean}
|
|
|
+ */
|
|
|
+ function hasTouchSupport() {
|
|
|
+ return ("ontouchstart" in window) || // touch events
|
|
|
+ (window.Modernizr && window.Modernizr.touch) || // modernizr
|
|
|
+ (navigator.msMaxTouchPoints || navigator.maxTouchPoints) > 2; // pointer events
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * disable mouseevents on the page
|
|
|
+ * @param ev
|
|
|
+ */
|
|
|
+ function preventMouseEvents(ev) {
|
|
|
+ // 注释启用默认事件
|
|
|
+ // ev.preventDefault();
|
|
|
+ // ev.stopPropagation();
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * only trigger touches when the left mousebutton has been pressed
|
|
|
+ * @param touchType
|
|
|
+ * @returns {Function}
|
|
|
+ */
|
|
|
+ function onMouse(touchType) {
|
|
|
+ return function(ev) {
|
|
|
+ // prevent mouse events
|
|
|
+ preventMouseEvents(ev);
|
|
|
+
|
|
|
+ if (ev.which !== 1) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // The EventTarget on which the touch point started when it was first placed on the surface,
|
|
|
+ // even if the touch point has since moved outside the interactive area of that element.
|
|
|
+ // also, when the target doesnt exist anymore, we update it
|
|
|
+ if (ev.type == 'mousedown' || !eventTarget || (eventTarget && !eventTarget.dispatchEvent)) {
|
|
|
+ eventTarget = ev.target;
|
|
|
+ }
|
|
|
+
|
|
|
+ // shiftKey has been lost, so trigger a touchend
|
|
|
+ if (isMultiTouch && !ev.shiftKey) {
|
|
|
+ triggerTouch('touchend', ev);
|
|
|
+ isMultiTouch = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ triggerTouch(touchType, ev);
|
|
|
+
|
|
|
+ // we're entering the multi-touch mode!
|
|
|
+ if (!isMultiTouch && ev.shiftKey) {
|
|
|
+ isMultiTouch = true;
|
|
|
+ multiTouchStartPos = {
|
|
|
+ pageX: ev.pageX,
|
|
|
+ pageY: ev.pageY,
|
|
|
+ clientX: ev.clientX,
|
|
|
+ clientY: ev.clientY,
|
|
|
+ screenX: ev.screenX,
|
|
|
+ screenY: ev.screenY
|
|
|
+ };
|
|
|
+ triggerTouch('touchstart', ev);
|
|
|
+ }
|
|
|
+
|
|
|
+ // reset
|
|
|
+ if (ev.type == 'mouseup') {
|
|
|
+ multiTouchStartPos = null;
|
|
|
+ isMultiTouch = false;
|
|
|
+ eventTarget = null;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * trigger a touch event
|
|
|
+ * @param eventName
|
|
|
+ * @param mouseEv
|
|
|
+ */
|
|
|
+ function triggerTouch(eventName, mouseEv) {
|
|
|
+ var touchEvent = document.createEvent('Event');
|
|
|
+ touchEvent.initEvent(eventName, true, true);
|
|
|
+
|
|
|
+ touchEvent.altKey = mouseEv.altKey;
|
|
|
+ touchEvent.ctrlKey = mouseEv.ctrlKey;
|
|
|
+ touchEvent.metaKey = mouseEv.metaKey;
|
|
|
+ touchEvent.shiftKey = mouseEv.shiftKey;
|
|
|
+
|
|
|
+ touchEvent.touches = getActiveTouches(mouseEv, eventName);
|
|
|
+ touchEvent.targetTouches = getActiveTouches(mouseEv, eventName);
|
|
|
+ touchEvent.changedTouches = getChangedTouches(mouseEv, eventName);
|
|
|
+
|
|
|
+ eventTarget.dispatchEvent(touchEvent);
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * create a touchList based on the mouse event
|
|
|
+ * @param mouseEv
|
|
|
+ * @returns {TouchList}
|
|
|
+ */
|
|
|
+ function createTouchList(mouseEv) {
|
|
|
+ var touchList = new TouchList();
|
|
|
+
|
|
|
+ if (isMultiTouch) {
|
|
|
+ var f = TouchEmulator.multiTouchOffset;
|
|
|
+ var deltaX = multiTouchStartPos.pageX - mouseEv.pageX;
|
|
|
+ var deltaY = multiTouchStartPos.pageY - mouseEv.pageY;
|
|
|
+
|
|
|
+ touchList.push(new Touch(eventTarget, 1, multiTouchStartPos, (deltaX*-1) - f, (deltaY*-1) + f));
|
|
|
+ touchList.push(new Touch(eventTarget, 2, multiTouchStartPos, deltaX+f, deltaY-f));
|
|
|
+ } else {
|
|
|
+ touchList.push(new Touch(eventTarget, 1, mouseEv, 0, 0));
|
|
|
+ }
|
|
|
+
|
|
|
+ return touchList;
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * receive all active touches
|
|
|
+ * @param mouseEv
|
|
|
+ * @returns {TouchList}
|
|
|
+ */
|
|
|
+ function getActiveTouches(mouseEv, eventName) {
|
|
|
+ // empty list
|
|
|
+ if (mouseEv.type == 'mouseup') {
|
|
|
+ return new TouchList();
|
|
|
+ }
|
|
|
+
|
|
|
+ var touchList = createTouchList(mouseEv);
|
|
|
+ if(isMultiTouch && mouseEv.type != 'mouseup' && eventName == 'touchend') {
|
|
|
+ touchList.splice(1, 1);
|
|
|
+ }
|
|
|
+ return touchList;
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * receive a filtered set of touches with only the changed pointers
|
|
|
+ * @param mouseEv
|
|
|
+ * @param eventName
|
|
|
+ * @returns {TouchList}
|
|
|
+ */
|
|
|
+ function getChangedTouches(mouseEv, eventName) {
|
|
|
+ var touchList = createTouchList(mouseEv);
|
|
|
+
|
|
|
+ // we only want to return the added/removed item on multitouch
|
|
|
+ // which is the second pointer, so remove the first pointer from the touchList
|
|
|
+ //
|
|
|
+ // but when the mouseEv.type is mouseup, we want to send all touches because then
|
|
|
+ // no new input will be possible
|
|
|
+ if(isMultiTouch && mouseEv.type != 'mouseup' &&
|
|
|
+ (eventName == 'touchstart' || eventName == 'touchend')) {
|
|
|
+ touchList.splice(0, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ return touchList;
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * show the touchpoints on the screen
|
|
|
+ */
|
|
|
+ function showTouches(ev) {
|
|
|
+ var touch, i, el, styles;
|
|
|
+
|
|
|
+ // first all visible touches
|
|
|
+ for(i = 0; i < ev.touches.length; i++) {
|
|
|
+ touch = ev.touches[i];
|
|
|
+ el = touchElements[touch.identifier];
|
|
|
+ if(!el) {
|
|
|
+ el = touchElements[touch.identifier] = document.createElement("div");
|
|
|
+ document.body.appendChild(el);
|
|
|
+ }
|
|
|
+
|
|
|
+ styles = TouchEmulator.template(touch);
|
|
|
+ for(var prop in styles) {
|
|
|
+ el.style[prop] = styles[prop];
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // remove all ended touches
|
|
|
+ if(ev.type == 'touchend' || ev.type == 'touchcancel') {
|
|
|
+ for(i = 0; i < ev.changedTouches.length; i++) {
|
|
|
+ touch = ev.changedTouches[i];
|
|
|
+ el = touchElements[touch.identifier];
|
|
|
+ if(el) {
|
|
|
+ el.parentNode.removeChild(el);
|
|
|
+ delete touchElements[touch.identifier];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * TouchEmulator initializer
|
|
|
+ */
|
|
|
+ function TouchEmulator() {
|
|
|
+ if (hasTouchSupport()) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ fakeTouchSupport();
|
|
|
+
|
|
|
+ window.addEventListener("mousedown", onMouse('touchstart'), true);
|
|
|
+ window.addEventListener("mousemove", onMouse('touchmove'), true);
|
|
|
+ window.addEventListener("mouseup", onMouse('touchend'), true);
|
|
|
+
|
|
|
+ window.addEventListener("mouseenter", preventMouseEvents, true);
|
|
|
+ window.addEventListener("mouseleave", preventMouseEvents, true);
|
|
|
+ window.addEventListener("mouseout", preventMouseEvents, true);
|
|
|
+ window.addEventListener("mouseover", preventMouseEvents, true);
|
|
|
+
|
|
|
+ // it uses itself!
|
|
|
+ window.addEventListener("touchstart", showTouches, true);
|
|
|
+ window.addEventListener("touchmove", showTouches, true);
|
|
|
+ window.addEventListener("touchend", showTouches, true);
|
|
|
+ window.addEventListener("touchcancel", showTouches, true);
|
|
|
+ }
|
|
|
+
|
|
|
+ // start distance when entering the multitouch mode
|
|
|
+ TouchEmulator.multiTouchOffset = 75;
|
|
|
+
|
|
|
+ /**
|
|
|
+ * css template for the touch rendering
|
|
|
+ * @param touch
|
|
|
+ * @returns object
|
|
|
+ */
|
|
|
+ TouchEmulator.template = function(touch) {
|
|
|
+ var size = 0;
|
|
|
+ var transform = 'translate('+ (touch.clientX-(size/2)) +'px, '+ (touch.clientY-(size/2)) +'px)';
|
|
|
+ return {
|
|
|
+ position: 'fixed',
|
|
|
+ left: 0,
|
|
|
+ top: 0,
|
|
|
+ background: '#fff',
|
|
|
+ border: 'solid 1px #999',
|
|
|
+ opacity: .6,
|
|
|
+ borderRadius: '100%',
|
|
|
+ height: size + 'px',
|
|
|
+ width: size + 'px',
|
|
|
+ padding: 0,
|
|
|
+ margin: 0,
|
|
|
+ display: 'block',
|
|
|
+ overflow: 'hidden',
|
|
|
+ pointerEvents: 'none',
|
|
|
+ webkitUserSelect: 'none',
|
|
|
+ mozUserSelect: 'none',
|
|
|
+ userSelect: 'none',
|
|
|
+ webkitTransform: transform,
|
|
|
+ mozTransform: transform,
|
|
|
+ transform: transform,
|
|
|
+ zIndex: 100
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // export
|
|
|
+ if (typeof define == "function" && define.amd) {
|
|
|
+ define(function() {
|
|
|
+ return TouchEmulator;
|
|
|
+ });
|
|
|
+ } else if (typeof module != "undefined" && module.exports) {
|
|
|
+ module.exports = TouchEmulator;
|
|
|
+ } else {
|
|
|
+ window[exportName] = TouchEmulator;
|
|
|
+ }
|
|
|
})(window, document, "TouchEmulator");
|
