-
-
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
targetTouchesin 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