From 486c7872c0c44eda724836fb21121b5a7ab067ea Mon Sep 17 00:00:00 2001 From: Marius Stefan Bethge Date: Thu, 26 Mar 2015 01:16:55 +0100 Subject: [PATCH 1/3] Pointerevents: Add PEP --- external/pep/PEP.js | 1318 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 1318 insertions(+) create mode 100644 external/pep/PEP.js diff --git a/external/pep/PEP.js b/external/pep/PEP.js new file mode 100644 index 00000000000..e876d97ddb8 --- /dev/null +++ b/external/pep/PEP.js @@ -0,0 +1,1318 @@ +/*! + * PEP v0.0.0 | https://github.com/jquery/PEP + * Copyright jQuery Foundation and other contributors | http://jquery.org/license + */ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : + typeof define === 'function' && define.amd ? define(factory) : + global.PointerEventsPolyfill = factory() +}(this, function () { 'use strict'; + + /** + * This module implements an map of pointer states + */ + var USE_MAP = window.Map && window.Map.prototype.forEach; + var POINTERS_FN = function(){ return this.size; }; + function PointerMap() { + if (USE_MAP) { + var m = new Map(); + m.pointers = POINTERS_FN; + return m; + } else { + this.keys = []; + this.values = []; + } + } + + PointerMap.prototype = { + set: function(inId, inEvent) { + var i = this.keys.indexOf(inId); + if (i > -1) { + this.values[i] = inEvent; + } else { + this.keys.push(inId); + this.values.push(inEvent); + } + }, + has: function(inId) { + return this.keys.indexOf(inId) > -1; + }, + 'delete': function(inId) { + var i = this.keys.indexOf(inId); + if (i > -1) { + this.keys.splice(i, 1); + this.values.splice(i, 1); + } + }, + get: function(inId) { + var i = this.keys.indexOf(inId); + return this.values[i]; + }, + clear: function() { + this.keys.length = 0; + this.values.length = 0; + }, + // return value, key, map + forEach: function(callback, thisArg) { + this.values.forEach(function(v, i) { + callback.call(thisArg, v, this.keys[i], this); + }, this); + }, + pointers: function() { + return this.keys.length; + } + }; + + var CLONE_PROPS = [ + // MouseEvent + 'bubbles', + 'cancelable', + 'view', + 'detail', + 'screenX', + 'screenY', + 'clientX', + 'clientY', + 'ctrlKey', + 'altKey', + 'shiftKey', + 'metaKey', + 'button', + 'relatedTarget', + // DOM Level 3 + 'buttons', + // PointerEvent + 'pointerId', + 'width', + 'height', + 'pressure', + 'tiltX', + 'tiltY', + 'pointerType', + 'hwTimestamp', + 'isPrimary', + // event instance + 'type', + 'target', + 'currentTarget', + 'which', + 'pageX', + 'pageY', + 'timeStamp' + ]; + + var CLONE_DEFAULTS = [ + // MouseEvent + false, + false, + null, + null, + 0, + 0, + 0, + 0, + false, + false, + false, + false, + 0, + null, + // DOM Level 3 + 0, + // PointerEvent + 0, + 0, + 0, + 0, + 0, + 0, + '', + 0, + false, + // event instance + '', + null, + null, + 0, + 0, + 0, + 0 + ]; + + var HAS_SVG_INSTANCE = (typeof SVGElementInstance !== 'undefined'); + + /** + * This module is for normalizing events. Mouse and Touch events will be + * collected here, and fire PointerEvents that have the same semantics, no + * matter the source. + * Events fired: + * - pointerdown: a pointing is added + * - pointerup: a pointer is removed + * - pointermove: a pointer is moved + * - pointerover: a pointer crosses into an element + * - pointerout: a pointer leaves an element + * - pointercancel: a pointer will no longer generate events + */ + var dispatcher = { + pointermap: new PointerMap(), + eventMap: Object.create(null), + captureInfo: Object.create(null), + // Scope objects for native events. + // This exists for ease of testing. + eventSources: Object.create(null), + eventSourceList: [], + /** + * Add a new event source that will generate pointer events. + * + * `inSource` must contain an array of event names named `events`, and + * functions with the names specified in the `events` array. + * @param {string} name A name for the event source + * @param {Object} source A new source of platform events. + */ + registerSource: function(name, source) { + var s = source; + var newEvents = s.events; + if (newEvents) { + newEvents.forEach(function(e) { + if (s[e]) { + this.eventMap[e] = s[e].bind(s); + } + }, this); + this.eventSources[name] = s; + this.eventSourceList.push(s); + } + }, + register: function(element) { + var l = this.eventSourceList.length; + for (var i = 0, es; (i < l) && (es = this.eventSourceList[i]); i++) { + // call eventsource register + es.register.call(es, element); + } + }, + unregister: function(element) { + var l = this.eventSourceList.length; + for (var i = 0, es; (i < l) && (es = this.eventSourceList[i]); i++) { + // call eventsource register + es.unregister.call(es, element); + } + }, + contains: /*scope.external.contains || */function(container, contained) { + return container.contains(contained); + }, + // EVENTS + down: function(inEvent) { + inEvent.bubbles = true; + this.fireEvent('pointerdown', inEvent); + }, + move: function(inEvent) { + inEvent.bubbles = true; + this.fireEvent('pointermove', inEvent); + }, + up: function(inEvent) { + inEvent.bubbles = true; + this.fireEvent('pointerup', inEvent); + }, + enter: function(inEvent) { + inEvent.bubbles = false; + this.fireEvent('pointerenter', inEvent); + }, + leave: function(inEvent) { + inEvent.bubbles = false; + this.fireEvent('pointerleave', inEvent); + }, + over: function(inEvent) { + inEvent.bubbles = true; + this.fireEvent('pointerover', inEvent); + }, + out: function(inEvent) { + inEvent.bubbles = true; + this.fireEvent('pointerout', inEvent); + }, + cancel: function(inEvent) { + inEvent.bubbles = true; + this.fireEvent('pointercancel', inEvent); + }, + leaveOut: function(event) { + this.out(event); + if (!this.contains(event.target, event.relatedTarget)) { + this.leave(event); + } + }, + enterOver: function(event) { + this.over(event); + if (!this.contains(event.target, event.relatedTarget)) { + this.enter(event); + } + }, + // LISTENER LOGIC + eventHandler: function(inEvent) { + // This is used to prevent multiple dispatch of pointerevents from + // platform events. This can happen when two elements in different scopes + // are set up to create pointer events, which is relevant to Shadow DOM. + if (inEvent._handledByPE) { + return; + } + var type = inEvent.type; + var fn = this.eventMap && this.eventMap[type]; + if (fn) { + fn(inEvent); + } + inEvent._handledByPE = true; + }, + // set up event listeners + listen: function(target, events) { + events.forEach(function(e) { + this.addEvent(target, e); + }, this); + }, + // remove event listeners + unlisten: function(target, events) { + events.forEach(function(e) { + this.removeEvent(target, e); + }, this); + }, + addEvent: /*scope.external.addEvent || */function(target, eventName) { + target.addEventListener(eventName, this.boundHandler); + }, + removeEvent: /*scope.external.removeEvent || */function(target, eventName) { + target.removeEventListener(eventName, this.boundHandler); + }, + // EVENT CREATION AND TRACKING + /** + * Creates a new Event of type `inType`, based on the information in + * `inEvent`. + * + * @param {string} inType A string representing the type of event to create + * @param {Event} inEvent A platform event with a target + * @return {Event} A PointerEvent of type `inType` + */ + makeEvent: function(inType, inEvent) { + // relatedTarget must be null if pointer is captured + if (this.captureInfo[inEvent.pointerId]) { + inEvent.relatedTarget = null; + } + var e = new PointerEvent(inType, inEvent); + if (inEvent.preventDefault) { + e.preventDefault = inEvent.preventDefault; + } + e._target = e._target || inEvent.target; + return e; + }, + // make and dispatch an event in one call + fireEvent: function(inType, inEvent) { + var e = this.makeEvent(inType, inEvent); + return this.dispatchEvent(e); + }, + /** + * Returns a snapshot of inEvent, with writable properties. + * + * @param {Event} inEvent An event that contains properties to copy. + * @return {Object} An object containing shallow copies of `inEvent`'s + * properties. + */ + cloneEvent: function(inEvent) { + var eventCopy = Object.create(null), p; + for (var i = 0; i < CLONE_PROPS.length; i++) { + p = CLONE_PROPS[i]; + eventCopy[p] = inEvent[p] || CLONE_DEFAULTS[i]; + // Work around SVGInstanceElement shadow tree + // Return the element that is represented by the instance for Safari, Chrome, IE. + // This is the behavior implemented by Firefox. + if (HAS_SVG_INSTANCE && (p === 'target' || p === 'relatedTarget')) { + if (eventCopy[p] instanceof SVGElementInstance) { + eventCopy[p] = eventCopy[p].correspondingUseElement; + } + } + } + // keep the semantics of preventDefault + if (inEvent.preventDefault) { + eventCopy.preventDefault = function() { + inEvent.preventDefault(); + }; + } + return eventCopy; + }, + getTarget: function(inEvent) { + // if pointer capture is set, route all events for the specified pointerId + // to the capture target + return this.captureInfo[inEvent.pointerId] || inEvent._target; + }, + setCapture: function(inPointerId, inTarget) { + if (this.captureInfo[inPointerId]) { + this.releaseCapture(inPointerId); + } + this.captureInfo[inPointerId] = inTarget; + var e = document.createEvent('Event'); + e.initEvent('gotpointercapture', true, false); + e.pointerId = inPointerId; + this.implicitRelease = this.releaseCapture.bind(this, inPointerId); + document.addEventListener('pointerup', this.implicitRelease); + document.addEventListener('pointercancel', this.implicitRelease); + e._target = inTarget; + this.asyncDispatchEvent(e); + }, + releaseCapture: function(inPointerId) { + var t = this.captureInfo[inPointerId]; + if (t) { + var e = document.createEvent('Event'); + e.initEvent('lostpointercapture', true, false); + e.pointerId = inPointerId; + this.captureInfo[inPointerId] = undefined; + document.removeEventListener('pointerup', this.implicitRelease); + document.removeEventListener('pointercancel', this.implicitRelease); + e._target = t; + this.asyncDispatchEvent(e); + } + }, + /** + * Dispatches the event to its target. + * + * @param {Event} inEvent The event to be dispatched. + * @return {Boolean} True if an event handler returns true, false otherwise. + */ + dispatchEvent: /*scope.external.dispatchEvent || */function(inEvent) { + var t = this.getTarget(inEvent); + if (t) { + return t.dispatchEvent(inEvent); + } + }, + asyncDispatchEvent: function(inEvent) { + requestAnimationFrame(this.dispatchEvent.bind(this, inEvent)); + } + }; + dispatcher.boundHandler = dispatcher.eventHandler.bind(dispatcher); + + var targeting = { + shadow: function(inEl) { + if (inEl) { + return inEl.shadowRoot || inEl.webkitShadowRoot; + } + }, + canTarget: function(shadow) { + return shadow && Boolean(shadow.elementFromPoint); + }, + targetingShadow: function(inEl) { + var s = this.shadow(inEl); + if (this.canTarget(s)) { + return s; + } + }, + olderShadow: function(shadow) { + var os = shadow.olderShadowRoot; + if (!os) { + var se = shadow.querySelector('shadow'); + if (se) { + os = se.olderShadowRoot; + } + } + return os; + }, + allShadows: function(element) { + var shadows = [], s = this.shadow(element); + while(s) { + shadows.push(s); + s = this.olderShadow(s); + } + return shadows; + }, + searchRoot: function(inRoot, x, y) { + if (inRoot) { + var t = inRoot.elementFromPoint(x, y); + var st, sr, os; + // is element a shadow host? + sr = this.targetingShadow(t); + while (sr) { + // find the the element inside the shadow root + st = sr.elementFromPoint(x, y); + if (!st) { + // check for older shadows + sr = this.olderShadow(sr); + } else { + // shadowed element may contain a shadow root + var ssr = this.targetingShadow(st); + return this.searchRoot(ssr, x, y) || st; + } + } + // light dom element is the target + return t; + } + }, + owner: function(element) { + var s = element; + // walk up until you hit the shadow root or document + while (s.parentNode) { + s = s.parentNode; + } + // the owner element is expected to be a Document or ShadowRoot + if (s.nodeType != Node.DOCUMENT_NODE && s.nodeType != Node.DOCUMENT_FRAGMENT_NODE) { + s = document; + } + return s; + }, + findTarget: function(inEvent) { + var x = inEvent.clientX, y = inEvent.clientY; + // if the listener is in the shadow root, it is much faster to start there + var s = this.owner(inEvent.target); + // if x, y is not in this root, fall back to document search + if (!s.elementFromPoint(x, y)) { + s = document; + } + return this.searchRoot(s, x, y); + } + }; + + /** + * This module uses Mutation Observers to dynamically adjust which nodes will + * generate Pointer Events. + * + * All nodes that wish to generate Pointer Events must have the attribute + * `touch-action` set to `none`. + */ + var forEach = Array.prototype.forEach.call.bind(Array.prototype.forEach); + var map = Array.prototype.map.call.bind(Array.prototype.map); + var toArray = Array.prototype.slice.call.bind(Array.prototype.slice); + var filter = Array.prototype.filter.call.bind(Array.prototype.filter); + var MO = window.MutationObserver || window.WebKitMutationObserver; + var SELECTOR = '[touch-action]'; + var OBSERVER_INIT = { + subtree: true, + childList: true, + attributes: true, + attributeOldValue: true, + attributeFilter: ['touch-action'] + }; + + function Installer(add, remove, changed, binder) { + this.addCallback = add.bind(binder); + this.removeCallback = remove.bind(binder); + this.changedCallback = changed.bind(binder); + if (MO) { + this.observer = new MO(this.mutationWatcher.bind(this)); + } + } + + Installer.prototype = { + watchSubtree: function(target) { + // Only watch scopes that can target find, as these are top-level. + // Otherwise we can see duplicate additions and removals that add noise. + // + // TODO(dfreedman): For some instances with ShadowDOMPolyfill, we can see + // a removal without an insertion when a node is redistributed among + // shadows. Since it all ends up correct in the document, watching only + // the document will yield the correct mutations to watch. + if (targeting.canTarget(target)) { + this.observer.observe(target, OBSERVER_INIT); + } + }, + enableOnSubtree: function(target) { + this.watchSubtree(target); + if (target === document && document.readyState !== 'complete') { + this.installOnLoad(); + } else { + this.installNewSubtree(target); + } + }, + installNewSubtree: function(target) { + forEach(this.findElements(target), this.addElement, this); + }, + findElements: function(target) { + if (target.querySelectorAll) { + return target.querySelectorAll(SELECTOR); + } + return []; + }, + removeElement: function(el) { + this.removeCallback(el); + }, + addElement: function(el) { + this.addCallback(el); + }, + elementChanged: function(el, oldValue) { + this.changedCallback(el, oldValue); + }, + concatLists: function(accum, list) { + return accum.concat(toArray(list)); + }, + // register all touch-action = none nodes on document load + installOnLoad: function() { + document.addEventListener('readystatechange', function() { + if (document.readyState === 'complete') { + this.installNewSubtree(document); + } + }.bind(this)); + }, + isElement: function(n) { + return n.nodeType === Node.ELEMENT_NODE; + }, + flattenMutationTree: function(inNodes) { + // find children with touch-action + var tree = map(inNodes, this.findElements, this); + // make sure the added nodes are accounted for + tree.push(filter(inNodes, this.isElement)); + // flatten the list + return tree.reduce(this.concatLists, []); + }, + mutationWatcher: function(mutations) { + mutations.forEach(this.mutationHandler, this); + }, + mutationHandler: function(m) { + if (m.type === 'childList') { + var added = this.flattenMutationTree(m.addedNodes); + added.forEach(this.addElement, this); + var removed = this.flattenMutationTree(m.removedNodes); + removed.forEach(this.removeElement, this); + } else if (m.type === 'attributes') { + this.elementChanged(m.target, m.oldValue); + } + } + }; + + if (!MO) { + Installer.prototype.watchSubtree = function(){ + console.warn('PointerEventsPolyfill: MutationObservers not found, touch-action will not be dynamically detected'); + }; + } + + /** + * This is the constructor for new PointerEvents. + * + * New Pointer Events must be given a type, and an optional dictionary of + * initialization properties. + * + * Due to certain platform requirements, events returned from the constructor + * identify as MouseEvents. + * + * @constructor + * @param {String} inType The type of the event to create. + * @param {Object} [inDict] An optional dictionary of initial event properties. + * @return {Event} A new PointerEvent of type `inType` and initialized with properties from `inDict`. + */ + var MOUSE_PROPS = [ + 'bubbles', + 'cancelable', + 'view', + 'detail', + 'screenX', + 'screenY', + 'clientX', + 'clientY', + 'ctrlKey', + 'altKey', + 'shiftKey', + 'metaKey', + 'button', + 'relatedTarget', + 'pageX', + 'pageY' + ]; + + var MOUSE_DEFAULTS = [ + false, + false, + null, + null, + 0, + 0, + 0, + 0, + false, + false, + false, + false, + 0, + null, + 0, + 0 + ]; + + function PointerEvent__PointerEvent(inType, inDict) { + inDict = inDict || Object.create(null); + + var e = document.createEvent('Event'); + e.initEvent(inType, inDict.bubbles || false, inDict.cancelable || false); + + // define inherited MouseEvent properties + // skip bubbles and cancelable since they're set above in initEvent() + for(var i = 2, p; i < MOUSE_PROPS.length; i++) { + p = MOUSE_PROPS[i]; + e[p] = inDict[p] || MOUSE_DEFAULTS[i]; + } + e.buttons = inDict.buttons || 0; + + // Spec requires that pointers without pressure specified use 0.5 for down + // state and 0 for up state. + var pressure = 0; + if (inDict.pressure) { + pressure = inDict.pressure; + } else { + pressure = e.buttons ? 0.5 : 0; + } + + // add x/y properties aliased to clientX/Y + e.x = e.clientX; + e.y = e.clientY; + + // define the properties of the PointerEvent interface + e.pointerId = inDict.pointerId || 0; + e.width = inDict.width || 0; + e.height = inDict.height || 0; + e.pressure = pressure; + e.tiltX = inDict.tiltX || 0; + e.tiltY = inDict.tiltY || 0; + e.pointerType = inDict.pointerType || ''; + e.hwTimestamp = inDict.hwTimestamp || 0; + e.isPrimary = inDict.isPrimary || false; + return e; + } + + var PointerEvent__default = PointerEvent__PointerEvent; + + function shadowSelector(v) { + return 'body /shadow-deep/ ' + selector(v); + } + function selector(v) { + return '[touch-action="' + v + '"]'; + } + function rule(v) { + return '{ -ms-touch-action: ' + v + '; touch-action: ' + v + '; touch-action-delay: none; }'; + } + var attrib2css = [ + 'none', + 'auto', + 'pan-x', + 'pan-y', + { + rule: 'pan-x pan-y', + selectors: [ + 'pan-x pan-y', + 'pan-y pan-x' + ] + } + ]; + var styles = ''; + // only install stylesheet if the browser has touch action support + var head = document.head; + var hasNativePE = window.PointerEvent || window.MSPointerEvent; + // only add shadow selectors if shadowdom is supported + var hasShadowRoot = !window.ShadowDOMPolyfill && document.head.createShadowRoot; + + function applyAttributeStyles() { + if (hasNativePE) { + attrib2css.forEach(function(r) { + if (String(r) === r) { + styles += selector(r) + rule(r) + '\n'; + if (hasShadowRoot) { + styles += shadowSelector(r) + rule(r) + '\n'; + } + } else { + styles += r.selectors.map(selector) + rule(r.rule) + '\n'; + if (hasShadowRoot) { + styles += r.selectors.map(shadowSelector) + rule(r.rule) + '\n'; + } + } + }); + + var el = document.createElement('style'); + el.textContent = styles; + document.head.appendChild(el); + } + } + + var mouseEvents__pointermap = dispatcher.pointermap; + // radius around touchend that swallows mouse events + var DEDUP_DIST = 25; + + var WHICH_TO_BUTTONS = [0, 1, 4, 2]; + + var HAS_BUTTONS = false; + try { + HAS_BUTTONS = new MouseEvent('test', {buttons: 1}).buttons === 1; + } catch (e) {} + + // handler block for native mouse events + var mouseEvents = { + POINTER_ID: 1, + POINTER_TYPE: 'mouse', + events: [ + 'mousedown', + 'mousemove', + 'mouseup', + 'mouseover', + 'mouseout' + ], + register: function(target) { + dispatcher.listen(target, this.events); + }, + unregister: function(target) { + dispatcher.unlisten(target, this.events); + }, + lastTouches: [], + // collide with the global mouse listener + isEventSimulatedFromTouch: function(inEvent) { + var lts = this.lastTouches; + var x = inEvent.clientX, y = inEvent.clientY; + for (var i = 0, l = lts.length, t; i < l && (t = lts[i]); i++) { + // simulated mouse events will be swallowed near a primary touchend + var dx = Math.abs(x - t.x), dy = Math.abs(y - t.y); + if (dx <= DEDUP_DIST && dy <= DEDUP_DIST) { + return true; + } + } + }, + prepareEvent: function(inEvent) { + var e = dispatcher.cloneEvent(inEvent); + // forward mouse preventDefault + var pd = e.preventDefault; + e.preventDefault = function() { + inEvent.preventDefault(); + pd(); + }; + e.pointerId = this.POINTER_ID; + e.isPrimary = true; + e.pointerType = this.POINTER_TYPE; + if (!HAS_BUTTONS) { + e.buttons = WHICH_TO_BUTTONS[e.which] || 0; + } + return e; + }, + mousedown: function(inEvent) { + if (!this.isEventSimulatedFromTouch(inEvent)) { + var p = mouseEvents__pointermap.has(this.POINTER_ID); + // TODO(dfreedman) workaround for some elements not sending mouseup + // http://crbug/149091 + if (p) { + this.cancel(inEvent); + } + var e = this.prepareEvent(inEvent); + mouseEvents__pointermap.set(this.POINTER_ID, inEvent); + dispatcher.down(e); + } + }, + mousemove: function(inEvent) { + if (!this.isEventSimulatedFromTouch(inEvent)) { + var e = this.prepareEvent(inEvent); + dispatcher.move(e); + } + }, + mouseup: function(inEvent) { + if (!this.isEventSimulatedFromTouch(inEvent)) { + var p = mouseEvents__pointermap.get(this.POINTER_ID); + if (p && p.button === inEvent.button) { + var e = this.prepareEvent(inEvent); + dispatcher.up(e); + this.cleanupMouse(); + } + } + }, + mouseover: function(inEvent) { + if (!this.isEventSimulatedFromTouch(inEvent)) { + var e = this.prepareEvent(inEvent); + dispatcher.enterOver(e); + } + }, + mouseout: function(inEvent) { + if (!this.isEventSimulatedFromTouch(inEvent)) { + var e = this.prepareEvent(inEvent); + dispatcher.leaveOut(e); + } + }, + cancel: function(inEvent) { + var e = this.prepareEvent(inEvent); + dispatcher.cancel(e); + this.cleanupMouse(); + }, + cleanupMouse: function() { + mouseEvents__pointermap['delete'](this.POINTER_ID); + } + }; + + var captureInfo = dispatcher.captureInfo; + var findTarget = targeting.findTarget.bind(targeting); + var allShadows = targeting.allShadows.bind(targeting); + var touchEvents__pointermap = dispatcher.pointermap; + var touchMap = Array.prototype.map.call.bind(Array.prototype.map); + // This should be long enough to ignore compat mouse events made by touch + var DEDUP_TIMEOUT = 2500; + var CLICK_COUNT_TIMEOUT = 200; + var ATTRIB = 'touch-action'; + var INSTALLER; + // The presence of touch event handlers blocks scrolling, and so we must be careful to + // avoid adding handlers unnecessarily. Chrome plans to add a touch-action-delay property + // (crbug.com/329559) to address this, and once we have that we can opt-in to a simpler + // handler registration mechanism. Rather than try to predict how exactly to opt-in to + // that we'll just leave this disabled until there is a build of Chrome to test. + var HAS_TOUCH_ACTION_DELAY = false; + + // handler block for native touch events + var touchEvents = { + events: [ + 'touchstart', + 'touchmove', + 'touchend', + 'touchcancel' + ], + register: function(target) { + if (HAS_TOUCH_ACTION_DELAY) { + dispatcher.listen(target, this.events); + } else { + INSTALLER.enableOnSubtree(target); + } + }, + unregister: function(target) { + if (HAS_TOUCH_ACTION_DELAY) { + dispatcher.unlisten(target, this.events); + } else { + // TODO(dfreedman): is it worth it to disconnect the MO? + } + }, + elementAdded: function(el) { + var a = el.getAttribute(ATTRIB); + var st = this.touchActionToScrollType(a); + if (st) { + el._scrollType = st; + dispatcher.listen(el, this.events); + // set touch-action on shadows as well + allShadows(el).forEach(function(s) { + s._scrollType = st; + dispatcher.listen(s, this.events); + }, this); + } + }, + elementRemoved: function(el) { + el._scrollType = undefined; + dispatcher.unlisten(el, this.events); + // remove touch-action from shadow + allShadows(el).forEach(function(s) { + s._scrollType = undefined; + dispatcher.unlisten(s, this.events); + }, this); + }, + elementChanged: function(el, oldValue) { + var a = el.getAttribute(ATTRIB); + var st = this.touchActionToScrollType(a); + var oldSt = this.touchActionToScrollType(oldValue); + // simply update scrollType if listeners are already established + if (st && oldSt) { + el._scrollType = st; + allShadows(el).forEach(function(s) { + s._scrollType = st; + }, this); + } else if (oldSt) { + this.elementRemoved(el); + } else if (st) { + this.elementAdded(el); + } + }, + scrollTypes: { + EMITTER: 'none', + XSCROLLER: 'pan-x', + YSCROLLER: 'pan-y', + SCROLLER: /^(?:pan-x pan-y)|(?:pan-y pan-x)|auto$/ + }, + touchActionToScrollType: function(touchAction) { + var t = touchAction; + var st = this.scrollTypes; + if (t === 'none') { + return 'none'; + } else if (t === st.XSCROLLER) { + return 'X'; + } else if (t === st.YSCROLLER) { + return 'Y'; + } else if (st.SCROLLER.exec(t)) { + return 'XY'; + } + }, + POINTER_TYPE: 'touch', + firstTouch: null, + isPrimaryTouch: function(inTouch) { + return this.firstTouch === inTouch.identifier; + }, + setPrimaryTouch: function(inTouch) { + // set primary touch if there no pointers, or the only pointer is the mouse + if (touchEvents__pointermap.pointers() === 0 || (touchEvents__pointermap.pointers() === 1 && touchEvents__pointermap.has(1))) { + this.firstTouch = inTouch.identifier; + this.firstXY = {X: inTouch.clientX, Y: inTouch.clientY}; + this.scrolling = false; + this.cancelResetClickCount(); + } + }, + removePrimaryPointer: function(inPointer) { + if (inPointer.isPrimary) { + this.firstTouch = null; + this.firstXY = null; + this.resetClickCount(); + } + }, + clickCount: 0, + resetId: null, + resetClickCount: function() { + var fn = function() { + this.clickCount = 0; + this.resetId = null; + }.bind(this); + this.resetId = setTimeout(fn, CLICK_COUNT_TIMEOUT); + }, + cancelResetClickCount: function() { + if (this.resetId) { + clearTimeout(this.resetId); + } + }, + typeToButtons: function(type) { + var ret = 0; + if (type === 'touchstart' || type === 'touchmove') { + ret = 1; + } + return ret; + }, + touchToPointer: function(inTouch) { + var cte = this.currentTouchEvent; + var e = dispatcher.cloneEvent(inTouch); + // Spec specifies that pointerId 1 is reserved for Mouse. + // Touch identifiers can start at 0. + // Add 2 to the touch identifier for compatibility. + var id = e.pointerId = inTouch.identifier + 2; + e.target = captureInfo[id] || findTarget(e); + e.bubbles = true; + e.cancelable = true; + e.detail = this.clickCount; + e.button = 0; + e.buttons = this.typeToButtons(cte.type); + e.width = inTouch.webkitRadiusX || inTouch.radiusX || 0; + e.height = inTouch.webkitRadiusY || inTouch.radiusY || 0; + e.pressure = inTouch.webkitForce || inTouch.force || 0.5; + e.isPrimary = this.isPrimaryTouch(inTouch); + e.pointerType = this.POINTER_TYPE; + // forward touch preventDefaults + var self = this; + e.preventDefault = function() { + self.scrolling = false; + self.firstXY = null; + cte.preventDefault(); + }; + return e; + }, + processTouches: function(inEvent, inFunction) { + var tl = inEvent.changedTouches; + this.currentTouchEvent = inEvent; + for (var i = 0, t; i < tl.length; i++) { + t = tl[i]; + inFunction.call(this, this.touchToPointer(t)); + } + }, + // For single axis scrollers, determines whether the element should emit + // pointer events or behave as a scroller + shouldScroll: function(inEvent) { + if (this.firstXY) { + var ret; + var scrollAxis = inEvent.currentTarget._scrollType; + if (scrollAxis === 'none') { + // this element is a touch-action: none, should never scroll + ret = false; + } else if (scrollAxis === 'XY') { + // this element should always scroll + ret = true; + } else { + var t = inEvent.changedTouches[0]; + // check the intended scroll axis, and other axis + var a = scrollAxis; + var oa = scrollAxis === 'Y' ? 'X' : 'Y'; + var da = Math.abs(t['client' + a] - this.firstXY[a]); + var doa = Math.abs(t['client' + oa] - this.firstXY[oa]); + // if delta in the scroll axis > delta other axis, scroll instead of + // making events + ret = da >= doa; + } + this.firstXY = null; + return ret; + } + }, + findTouch: function(inTL, inId) { + for (var i = 0, l = inTL.length, t; i < l && (t = inTL[i]); i++) { + if (t.identifier === inId) { + return true; + } + } + }, + // In some instances, a touchstart can happen without a touchend. This + // leaves the pointermap in a broken state. + // Therefore, on every touchstart, we remove the touches that did not fire a + // touchend event. + // To keep state globally consistent, we fire a + // pointercancel for this "abandoned" touch + vacuumTouches: function(inEvent) { + var tl = inEvent.touches; + // pointermap.pointers() should be < tl.length here, as the touchstart has not + // been processed yet. + if (touchEvents__pointermap.pointers() >= tl.length) { + var d = []; + touchEvents__pointermap.forEach(function(value, key) { + // Never remove pointerId == 1, which is mouse. + // Touch identifiers are 2 smaller than their pointerId, which is the + // index in pointermap. + if (key !== 1 && !this.findTouch(tl, key - 2)) { + var p = value.out; + d.push(p); + } + }, this); + d.forEach(this.cancelOut, this); + } + }, + touchstart: function(inEvent) { + this.vacuumTouches(inEvent); + this.setPrimaryTouch(inEvent.changedTouches[0]); + this.dedupSynthMouse(inEvent); + if (!this.scrolling) { + this.clickCount++; + this.processTouches(inEvent, this.overDown); + } + }, + overDown: function(inPointer) { + var p = touchEvents__pointermap.set(inPointer.pointerId, { + target: inPointer.target, + out: inPointer, + outTarget: inPointer.target + }); + dispatcher.over(inPointer); + dispatcher.enter(inPointer); + dispatcher.down(inPointer); + }, + touchmove: function(inEvent) { + if (!this.scrolling) { + if (this.shouldScroll(inEvent)) { + this.scrolling = true; + this.touchcancel(inEvent); + } else { + inEvent.preventDefault(); + this.processTouches(inEvent, this.moveOverOut); + } + } + }, + moveOverOut: function(inPointer) { + var event = inPointer; + var pointer = touchEvents__pointermap.get(event.pointerId); + // a finger drifted off the screen, ignore it + if (!pointer) { + return; + } + var outEvent = pointer.out; + var outTarget = pointer.outTarget; + dispatcher.move(event); + if (outEvent && outTarget !== event.target) { + outEvent.relatedTarget = event.target; + event.relatedTarget = outTarget; + // recover from retargeting by shadow + outEvent.target = outTarget; + if (event.target) { + dispatcher.leaveOut(outEvent); + dispatcher.enterOver(event); + } else { + // clean up case when finger leaves the screen + event.target = outTarget; + event.relatedTarget = null; + this.cancelOut(event); + } + } + pointer.out = event; + pointer.outTarget = event.target; + }, + touchend: function(inEvent) { + this.dedupSynthMouse(inEvent); + this.processTouches(inEvent, this.upOut); + }, + upOut: function(inPointer) { + if (!this.scrolling) { + dispatcher.up(inPointer); + dispatcher.out(inPointer); + dispatcher.leave(inPointer); + } + this.cleanUpPointer(inPointer); + }, + touchcancel: function(inEvent) { + this.processTouches(inEvent, this.cancelOut); + }, + cancelOut: function(inPointer) { + dispatcher.cancel(inPointer); + dispatcher.out(inPointer); + dispatcher.leave(inPointer); + this.cleanUpPointer(inPointer); + }, + cleanUpPointer: function(inPointer) { + touchEvents__pointermap['delete'](inPointer.pointerId); + this.removePrimaryPointer(inPointer); + }, + // prevent synth mouse events from creating pointer events + dedupSynthMouse: function(inEvent) { + var lts = mouseEvents.lastTouches; + var t = inEvent.changedTouches[0]; + // only the primary finger will synth mouse events + if (this.isPrimaryTouch(t)) { + // remember x/y of last touch + var lt = {x: t.clientX, y: t.clientY}; + lts.push(lt); + var fn = (function(lts, lt){ + var i = lts.indexOf(lt); + if (i > -1) { + lts.splice(i, 1); + } + }).bind(null, lts, lt); + setTimeout(fn, DEDUP_TIMEOUT); + } + } + }; + + if (!HAS_TOUCH_ACTION_DELAY) { + INSTALLER = new Installer(touchEvents.elementAdded, touchEvents.elementRemoved, touchEvents.elementChanged, touchEvents); + } + + var msEvents__pointermap = dispatcher.pointermap; + var HAS_BITMAP_TYPE = window.MSPointerEvent && typeof window.MSPointerEvent.MSPOINTER_TYPE_MOUSE === 'number'; + var msEvents = { + events: [ + 'MSPointerDown', + 'MSPointerMove', + 'MSPointerUp', + 'MSPointerOut', + 'MSPointerOver', + 'MSPointerCancel', + 'MSGotPointerCapture', + 'MSLostPointerCapture' + ], + register: function(target) { + dispatcher.listen(target, this.events); + }, + unregister: function(target) { + dispatcher.unlisten(target, this.events); + }, + POINTER_TYPES: [ + '', + 'unavailable', + 'touch', + 'pen', + 'mouse' + ], + prepareEvent: function(inEvent) { + var e = inEvent; + if (HAS_BITMAP_TYPE) { + e = dispatcher.cloneEvent(inEvent); + e.pointerType = this.POINTER_TYPES[inEvent.pointerType]; + } + return e; + }, + cleanup: function(id) { + msEvents__pointermap['delete'](id); + }, + MSPointerDown: function(inEvent) { + msEvents__pointermap.set(inEvent.pointerId, inEvent); + var e = this.prepareEvent(inEvent); + dispatcher.down(e); + }, + MSPointerMove: function(inEvent) { + var e = this.prepareEvent(inEvent); + dispatcher.move(e); + }, + MSPointerUp: function(inEvent) { + var e = this.prepareEvent(inEvent); + dispatcher.up(e); + this.cleanup(inEvent.pointerId); + }, + MSPointerOut: function(inEvent) { + var e = this.prepareEvent(inEvent); + dispatcher.leaveOut(e); + }, + MSPointerOver: function(inEvent) { + var e = this.prepareEvent(inEvent); + dispatcher.enterOver(e); + }, + MSPointerCancel: function(inEvent) { + var e = this.prepareEvent(inEvent); + dispatcher.cancel(e); + this.cleanup(inEvent.pointerId); + }, + MSLostPointerCapture: function(inEvent) { + var e = dispatcher.makeEvent('lostpointercapture', inEvent); + dispatcher.dispatchEvent(e); + }, + MSGotPointerCapture: function(inEvent) { + var e = dispatcher.makeEvent('gotpointercapture', inEvent); + dispatcher.dispatchEvent(e); + } + }; + + function platform_events__applyPolyfill() { + // only activate if this platform does not have pointer events + if (!window.PointerEvent) { + window.PointerEvent = PointerEvent__default; + + if (window.navigator.msPointerEnabled) { + var tp = window.navigator.msMaxTouchPoints; + Object.defineProperty(window.navigator, 'maxTouchPoints', { + value: tp, + enumerable: true + }); + dispatcher.registerSource('ms', msEvents); + } else { + dispatcher.registerSource('mouse', mouseEvents); + if (window.ontouchstart !== undefined) { + dispatcher.registerSource('touch', touchEvents); + } + } + + dispatcher.register(document); + } + } + + var n = window.navigator; + var s, r; + function assertDown(id) { + if (!dispatcher.pointermap.has(id)) { + throw new Error('InvalidPointerId'); + } + } + if (n.msPointerEnabled) { + s = function(pointerId) { + assertDown(pointerId); + this.msSetPointerCapture(pointerId); + }; + r = function(pointerId) { + assertDown(pointerId); + this.msReleasePointerCapture(pointerId); + }; + } else { + s = function setPointerCapture(pointerId) { + assertDown(pointerId); + dispatcher.setCapture(pointerId, this); + }; + r = function releasePointerCapture(pointerId) { + assertDown(pointerId); + dispatcher.releaseCapture(pointerId, this); + }; + } + + function capture__applyPolyfill() { + if (window.Element && !Element.prototype.setPointerCapture) { + Object.defineProperties(Element.prototype, { + 'setPointerCapture': { + value: s + }, + 'releasePointerCapture': { + value: r + } + }); + } + } + + applyAttributeStyles(); + platform_events__applyPolyfill(); + capture__applyPolyfill(); + + var pointerevents = { + dispatcher: dispatcher, + Installer: Installer, + PointerEvent: PointerEvent__default, + PointerMap: PointerMap, + targetFinding: targeting + }; + + return pointerevents; + +})); From e83352bdf76c6408525f2a955ad3931900584bef Mon Sep 17 00:00:00 2001 From: Marius Stefan Bethge Date: Thu, 26 Mar 2015 01:20:28 +0100 Subject: [PATCH 2/3] Pointerevents: Proof of Concept --- demos/draggable/constrain-movement.html | 1 + demos/draggable/cursor-style.html | 1 + demos/draggable/default.html | 1 + demos/draggable/events.html | 1 + demos/draggable/handle.html | 1 + demos/draggable/revert.html | 1 + demos/draggable/scroll.html | 1 + demos/draggable/snap-to.html | 1 + demos/draggable/sortable.html | 1 + demos/draggable/visual-feedback.html | 1 + demos/droppable/accepted-elements.html | 1 + demos/droppable/default.html | 1 + demos/droppable/photo-manager.html | 1 + demos/droppable/propagation.html | 1 + demos/droppable/revert.html | 1 + demos/droppable/visual-feedback.html | 1 + demos/slider/colorpicker.html | 1 + demos/slider/default.html | 1 + demos/slider/hotelrooms.html | 1 + demos/slider/multiple-vertical.html | 1 + demos/slider/range-vertical.html | 1 + demos/slider/range.html | 1 + demos/slider/rangemax.html | 1 + demos/slider/rangemin.html | 1 + demos/slider/side-scroll.html | 1 + demos/slider/slider-vertical.html | 1 + tests/unit/draggable/draggable.html | 1 + tests/unit/droppable/all.html | 1 + tests/unit/droppable/droppable.html | 1 + tests/unit/slider/slider.html | 1 + tests/unit/slider/slider_events.js | 8 +++--- tests/visual/slider/range_slider.html | 1 + ui/droppable.js | 2 +- ui/mouse.js | 37 +++++++++++++++++-------- 34 files changed, 61 insertions(+), 17 deletions(-) diff --git a/demos/draggable/constrain-movement.html b/demos/draggable/constrain-movement.html index cca74be210e..ec7fa3ad205 100644 --- a/demos/draggable/constrain-movement.html +++ b/demos/draggable/constrain-movement.html @@ -4,6 +4,7 @@ + diff --git a/demos/draggable/cursor-style.html b/demos/draggable/cursor-style.html index 7f3b0fda447..56e09867dba 100644 --- a/demos/draggable/cursor-style.html +++ b/demos/draggable/cursor-style.html @@ -4,6 +4,7 @@ + diff --git a/demos/draggable/default.html b/demos/draggable/default.html index df6bf9da9d9..17400fc5694 100644 --- a/demos/draggable/default.html +++ b/demos/draggable/default.html @@ -4,6 +4,7 @@ + diff --git a/demos/draggable/events.html b/demos/draggable/events.html index ad8a98aafa8..38058ec95b0 100644 --- a/demos/draggable/events.html +++ b/demos/draggable/events.html @@ -4,6 +4,7 @@ + diff --git a/demos/draggable/handle.html b/demos/draggable/handle.html index 2e7fd229534..4d6e57ce4ee 100644 --- a/demos/draggable/handle.html +++ b/demos/draggable/handle.html @@ -4,6 +4,7 @@ + diff --git a/demos/draggable/revert.html b/demos/draggable/revert.html index 4371b7f2be2..1f50c5e0560 100644 --- a/demos/draggable/revert.html +++ b/demos/draggable/revert.html @@ -4,6 +4,7 @@ + diff --git a/demos/draggable/scroll.html b/demos/draggable/scroll.html index d3e97f3267d..6fbe1a099e0 100644 --- a/demos/draggable/scroll.html +++ b/demos/draggable/scroll.html @@ -4,6 +4,7 @@ + diff --git a/demos/draggable/snap-to.html b/demos/draggable/snap-to.html index 726a513843e..5c09c32c364 100644 --- a/demos/draggable/snap-to.html +++ b/demos/draggable/snap-to.html @@ -4,6 +4,7 @@ + diff --git a/demos/draggable/sortable.html b/demos/draggable/sortable.html index 1251f0e29e0..fc15e4c11cc 100644 --- a/demos/draggable/sortable.html +++ b/demos/draggable/sortable.html @@ -4,6 +4,7 @@ + diff --git a/demos/draggable/visual-feedback.html b/demos/draggable/visual-feedback.html index 135d86c2aaa..4d2e9130ef7 100644 --- a/demos/draggable/visual-feedback.html +++ b/demos/draggable/visual-feedback.html @@ -4,6 +4,7 @@ + diff --git a/demos/droppable/accepted-elements.html b/demos/droppable/accepted-elements.html index 2a50295260d..419aa2f6c06 100644 --- a/demos/droppable/accepted-elements.html +++ b/demos/droppable/accepted-elements.html @@ -4,6 +4,7 @@ + diff --git a/demos/droppable/default.html b/demos/droppable/default.html index a097e718374..912d3ccf735 100644 --- a/demos/droppable/default.html +++ b/demos/droppable/default.html @@ -4,6 +4,7 @@ + diff --git a/demos/droppable/photo-manager.html b/demos/droppable/photo-manager.html index 6a8cf33d18b..4bfaf767591 100644 --- a/demos/droppable/photo-manager.html +++ b/demos/droppable/photo-manager.html @@ -4,6 +4,7 @@ + diff --git a/demos/droppable/propagation.html b/demos/droppable/propagation.html index 99fb2171187..47948a59ecb 100644 --- a/demos/droppable/propagation.html +++ b/demos/droppable/propagation.html @@ -4,6 +4,7 @@ + diff --git a/demos/droppable/revert.html b/demos/droppable/revert.html index f34801e90a6..91bd61cbb9c 100644 --- a/demos/droppable/revert.html +++ b/demos/droppable/revert.html @@ -4,6 +4,7 @@ + diff --git a/demos/droppable/visual-feedback.html b/demos/droppable/visual-feedback.html index 9852f371b05..cb294569cf9 100644 --- a/demos/droppable/visual-feedback.html +++ b/demos/droppable/visual-feedback.html @@ -4,6 +4,7 @@ + diff --git a/demos/slider/colorpicker.html b/demos/slider/colorpicker.html index 6f438a2e5f9..f98f02db8fb 100644 --- a/demos/slider/colorpicker.html +++ b/demos/slider/colorpicker.html @@ -4,6 +4,7 @@ + diff --git a/demos/slider/default.html b/demos/slider/default.html index 141fec23dfb..eff398b054f 100644 --- a/demos/slider/default.html +++ b/demos/slider/default.html @@ -4,6 +4,7 @@ + diff --git a/demos/slider/hotelrooms.html b/demos/slider/hotelrooms.html index e5ee79c55a0..b0181e9a8d5 100644 --- a/demos/slider/hotelrooms.html +++ b/demos/slider/hotelrooms.html @@ -4,6 +4,7 @@ + diff --git a/demos/slider/multiple-vertical.html b/demos/slider/multiple-vertical.html index 5f23a2dd241..b6651808037 100644 --- a/demos/slider/multiple-vertical.html +++ b/demos/slider/multiple-vertical.html @@ -4,6 +4,7 @@ + diff --git a/demos/slider/range-vertical.html b/demos/slider/range-vertical.html index a29737b9003..d5f0eb61855 100644 --- a/demos/slider/range-vertical.html +++ b/demos/slider/range-vertical.html @@ -4,6 +4,7 @@ + diff --git a/demos/slider/range.html b/demos/slider/range.html index a923a6d1593..238366a2e8d 100644 --- a/demos/slider/range.html +++ b/demos/slider/range.html @@ -4,6 +4,7 @@ + diff --git a/demos/slider/rangemax.html b/demos/slider/rangemax.html index b96346b6fc7..83d39ca406b 100644 --- a/demos/slider/rangemax.html +++ b/demos/slider/rangemax.html @@ -4,6 +4,7 @@ + diff --git a/demos/slider/rangemin.html b/demos/slider/rangemin.html index a3d1b0628e7..6c1677cb7a7 100644 --- a/demos/slider/rangemin.html +++ b/demos/slider/rangemin.html @@ -4,6 +4,7 @@ + diff --git a/demos/slider/side-scroll.html b/demos/slider/side-scroll.html index 1e6df620de1..0047addd7b2 100644 --- a/demos/slider/side-scroll.html +++ b/demos/slider/side-scroll.html @@ -4,6 +4,7 @@ + diff --git a/demos/slider/slider-vertical.html b/demos/slider/slider-vertical.html index 0a5ecd97d6e..b9119ae5b4d 100644 --- a/demos/slider/slider-vertical.html +++ b/demos/slider/slider-vertical.html @@ -4,6 +4,7 @@ + diff --git a/tests/unit/draggable/draggable.html b/tests/unit/draggable/draggable.html index a8fdf91ca5b..a94a1f51679 100644 --- a/tests/unit/draggable/draggable.html +++ b/tests/unit/draggable/draggable.html @@ -4,6 +4,7 @@ + diff --git a/tests/unit/droppable/all.html b/tests/unit/droppable/all.html index b8be47d0d22..6e97602f168 100644 --- a/tests/unit/droppable/all.html +++ b/tests/unit/droppable/all.html @@ -4,6 +4,7 @@ + diff --git a/tests/unit/droppable/droppable.html b/tests/unit/droppable/droppable.html index 4fc712a009a..735e0a52d72 100644 --- a/tests/unit/droppable/droppable.html +++ b/tests/unit/droppable/droppable.html @@ -4,6 +4,7 @@ + diff --git a/tests/unit/slider/slider_events.js b/tests/unit/slider/slider_events.js index cc5546a9f6f..b4b0fefa8e7 100644 --- a/tests/unit/slider/slider_events.js +++ b/tests/unit/slider/slider_events.js @@ -12,16 +12,16 @@ test( "mouse based interaction", function() { var element = $( "#slider1" ) .slider({ start: function( event ) { - equal( event.originalEvent.type, "mousedown", "start triggered by mousedown" ); + equal( event.originalEvent.type, "pointerdown", "start triggered by pointerdown" ); }, slide: function( event) { - equal( event.originalEvent.type, "mousemove", "slider triggered by mousemove" ); + equal( event.originalEvent.type, "pointermove", "slider triggered by pointermove" ); }, stop: function( event ) { - equal( event.originalEvent.type, "mouseup", "stop triggered by mouseup" ); + equal( event.originalEvent.type, "pointerup", "stop triggered by pointerup" ); }, change: function( event ) { - equal( event.originalEvent.type, "mouseup", "change triggered by mouseup" ); + equal( event.originalEvent.type, "pointerup", "change triggered by pointerup" ); } }); diff --git a/tests/visual/slider/range_slider.html b/tests/visual/slider/range_slider.html index 2b041f37740..9494b899627 100644 --- a/tests/visual/slider/range_slider.html +++ b/tests/visual/slider/range_slider.html @@ -11,6 +11,7 @@ margin: 20px auto; } + diff --git a/ui/droppable.js b/ui/droppable.js index 98be34bab28..d6ad3325241 100644 --- a/ui/droppable.js +++ b/ui/droppable.js @@ -313,7 +313,7 @@ $.ui.ddmanager = { } // Activate the droppable if used directly from draggables - if ( type === "mousedown" ) { + if ( type === "pointerdown" ) { m[ i ]._activate.call( m[ i ], event ); } diff --git a/ui/mouse.js b/ui/mouse.js index ed898f2a90d..b6e4705a73a 100644 --- a/ui/mouse.js +++ b/ui/mouse.js @@ -28,7 +28,7 @@ }(function( $ ) { var mouseHandled = false; -$( document ).mouseup( function() { +$( document ).on( "pointerup", function() { mouseHandled = false; }); @@ -43,7 +43,7 @@ return $.widget("ui.mouse", { var that = this; this.element - .bind("mousedown." + this.widgetName, function(event) { + .bind( "pointerdown." + this.widgetName, function( event ) { return that._mouseDown(event); }) .bind("click." + this.widgetName, function(event) { @@ -54,6 +54,9 @@ return $.widget("ui.mouse", { } }); + // Add touch-based dragging + this.element.attr( "touch-action", "none" ); + this.started = false; }, @@ -63,9 +66,12 @@ return $.widget("ui.mouse", { this.element.unbind("." + this.widgetName); if ( this._mouseMoveDelegate ) { this.document - .unbind("mousemove." + this.widgetName, this._mouseMoveDelegate) - .unbind("mouseup." + this.widgetName, this._mouseUpDelegate); + .unbind( "pointermove." + this.widgetName, this._mouseMoveDelegate ) + .unbind( "pointerup." + this.widgetName, this._mouseUpDelegate ); } + + // Remove touch-based dragging + this.element.removeAttr( "touch-action" ); }, _mouseDown: function(event) { @@ -82,11 +88,13 @@ return $.widget("ui.mouse", { this._mouseDownEvent = event; var that = this, - btnIsLeft = (event.which === 1), + isPrimary = event.originalEvent.isPrimary, + // PEP does not support event.which + btnIsLeft = ( event.button === 0 ), // event.target.nodeName works around a bug in IE 8 with // disabled inputs (#7620) elIsCancel = (typeof this.options.cancel === "string" && event.target.nodeName ? $(event.target).closest(this.options.cancel).length : false); - if (!btnIsLeft || elIsCancel || !this._mouseCapture(event)) { + if ( !btnIsLeft || !isPrimary || elIsCancel || !this._mouseCapture( event ) ) { return true; } @@ -119,8 +127,8 @@ return $.widget("ui.mouse", { }; this.document - .bind( "mousemove." + this.widgetName, this._mouseMoveDelegate ) - .bind( "mouseup." + this.widgetName, this._mouseUpDelegate ); + .bind( "pointermove." + this.widgetName, this._mouseMoveDelegate ) + .bind( "pointerup." + this.widgetName, this._mouseUpDelegate ); event.preventDefault(); @@ -129,6 +137,11 @@ return $.widget("ui.mouse", { }, _mouseMove: function(event) { + // Ignore multi-touch events + if ( !event.originalEvent.isPrimary ) { + return true; + } + // Only check for mouseups outside the document if you've moved inside the document // at least once. This prevents the firing of mouseup in the case of IE<9, which will // fire a mousemove event if content is placed under the cursor. See #7778 @@ -139,12 +152,12 @@ return $.widget("ui.mouse", { return this._mouseUp(event); // Iframe mouseup check - mouseup occurred in another document - } else if ( !event.which ) { + } else if ( !event.buttons ) { return this._mouseUp( event ); } } - if ( event.which || event.button ) { + if ( event.buttons || event.button ) { this._mouseMoved = true; } @@ -164,8 +177,8 @@ return $.widget("ui.mouse", { _mouseUp: function(event) { this.document - .unbind( "mousemove." + this.widgetName, this._mouseMoveDelegate ) - .unbind( "mouseup." + this.widgetName, this._mouseUpDelegate ); + .unbind( "pointermove." + this.widgetName, this._mouseMoveDelegate ) + .unbind( "pointerup." + this.widgetName, this._mouseUpDelegate ); if (this._mouseStarted) { this._mouseStarted = false; From ef3e649cdcbfeed561d8821cbf5a72c866fd7966 Mon Sep 17 00:00:00 2001 From: Marius Stefan Bethge Date: Fri, 27 Mar 2015 16:11:50 +0100 Subject: [PATCH 3/3] Pointerevents: Monkey patch bind polyfill --- external/pep/PEP.js | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/external/pep/PEP.js b/external/pep/PEP.js index e876d97ddb8..1cf2e21ad00 100644 --- a/external/pep/PEP.js +++ b/external/pep/PEP.js @@ -1,3 +1,32 @@ +/** + * Monkey patched Function.prototype.bind polyfill for phantomjs. + * Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind + */ +if (!Function.prototype.bind) { + Function.prototype.bind = function(oThis) { + if (typeof this !== 'function') { + // closest thing possible to the ECMAScript 5 + // internal IsCallable function + throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable'); + } + + var aArgs = Array.prototype.slice.call(arguments, 1), + fToBind = this, + fNOP = function() {}, + fBound = function() { + return fToBind.apply(this instanceof fNOP + ? this + : oThis, + aArgs.concat(Array.prototype.slice.call(arguments))); + }; + + fNOP.prototype = this.prototype; + fBound.prototype = new fNOP(); + + return fBound; + }; +} + /*! * PEP v0.0.0 | https://github.com/jquery/PEP * Copyright jQuery Foundation and other contributors | http://jquery.org/license