-
-
Save mwbrooks/850593 to your computer and use it in GitHub Desktop.
(function(window, document) { | |
/** | |
* Do not use thumbs.js on touch-enabled devices | |
*/ | |
if (document.ontouchstart) return; | |
/** | |
* Map touch events to mouse events | |
*/ | |
var eventMap = { | |
'mousedown': 'touchstart', | |
'mouseup': 'touchend', | |
'mousemove': 'touchmove' | |
}, key, eventObject; | |
/** | |
* Fire touch events | |
* | |
* Monitor mouse events and fire a touch event on the | |
* object broadcasting the mouse event. This approach | |
* likely has poorer performance than hijacking addEventListener | |
* but it is a little more browser friendly. | |
*/ | |
for (key in eventMap) { | |
document.addEventListener(key, function(e) { | |
e.target.dispatchEvent(createTouchEvent(e)); | |
}, 0); | |
} | |
/** | |
* Utility function to create a touch event. | |
* | |
* @param name {String} of the event | |
* @return event {Object} | |
*/ | |
function createTouchEvent(e) { | |
eventObject = document.createEvent('MouseEvents'); | |
eventObject.initMouseEvent( | |
eventMap[e.type], | |
e.cancelBubble, | |
e.cancelable, | |
e.view, | |
e.detail, | |
e.screenX, | |
e.screenY, | |
e.clientX, | |
e.clientY, | |
e.ctrlKey, | |
e.altKey, | |
e.shiftKey, | |
e.metaKey, | |
e.button, | |
e.relatedTarget | |
); | |
return eventObject; | |
}; | |
})(window, document); |
Yea, they don't exist yet. Two reasons:
- I have no need for
targetTouches
in my current projects - There is no standard... so I guess I would use the iOS implementation.
Do you think thumbs.js can play nice with GloveBox? I assumed GloveBox needed some extra mouse work. I can add the touch properties if you have a use for them.
Yeah, it could be made to work with glovebox.
GloveBox simply depends on the mouse events that come in being duck typed to touch events.
That said, I have some concerns about things like this: if (typeof document.ontouchstart != 'undefined') return;
Is an event handler guaranteed to be undefined if never set?
This test works in all current browsers that support touch events.
try { document.createEvent("TouchEvent"); } catch(e){return;}
Well, if you want, lets try to get thumbs.js working with GloveBox. Would be a good reason to get touch properties in thumbs.js. There is also an issue around touchmove. At the moment it's mapped to mousemove, but a touch move is really a mousedown + mousemove.
Being concerned about if (typeof document.ontouchstart != 'undefined') return;
is fair. It works in the few browsers that I have tested on. I like try { document.createEvent("TouchEvent"); } catch(e){return;}
. It feels more concrete.
I'm not understanding some simple things here. The touchEvent you are dispatching is not formatted in a way that can be handled by a typical touch handler. Where is the targetTouches[] ? I think you should look at this: https://github.com/purplecabbage/GloveBox/blob/master/GloveBox.js#L364