add extjs 6.0.1 sources

[extjs.git] / extjs / packages / core / src / event / publisher / Dom.js

/**\r
 * @private\r
 */\r
Ext.define('Ext.event.publisher.Dom', {\r
    extend: 'Ext.event.publisher.Publisher',\r
    requires: [\r
        'Ext.event.Event'\r
    ],\r
\r
    type: 'dom',\r
\r
    /**\r
     * @property {Array} handledDomEvents\r
     * An array of DOM events that this publisher handles.  Events specified in this array\r
     * will be added as global listeners on the {@link #target}\r
     */\r
    handledDomEvents: [],\r
\r
    reEnterCount: 0,\r
\r
    // The following events do not bubble, but can still be "captured" at the top of\r
    // the DOM,  For these events, when the delegated event model is used, we attach a\r
    // single listener on the window object using the "useCapture" option.\r
    captureEvents: {\r
        animationstart: 1,\r
        animationend: 1,\r
        resize: 1,\r
        focus: 1,\r
        blur: 1,\r
        scroll: 1\r
    },\r
\r
    // The following events do not bubble, and cannot be "captured".  The only way to\r
    // listen for these events is via a listener attached directly to the target element\r
    directEvents: {\r
        mouseenter: 1,\r
        mouseleave: 1,\r
        pointerenter: 1,\r
        pointerleave: 1,\r
        MSPointerEnter: 1,\r
        MSPointerLeave: 1,\r
        load: 1,\r
        unload: 1,\r
        beforeunload: 1,\r
        error: 1,\r
        DOMContentLoaded: 1,\r
        DOMFrameContentLoaded: 1,\r
        hashchange: 1\r
    },\r
\r
    /**\r
     * In browsers that implement pointerevents when a pointerdown is triggered by touching\r
     * the screen, pointerover and pointerenter events will be fired immmediately before\r
     * the pointerdown. Also pointerout and pointerleave will be fired immediately after\r
     * pointerup when triggered using touch input.  For a consistent cross-browser\r
     * experience on touch-screens we block pointerover, pointerout, pointerenter, and\r
     * pointerleave when triggered by touch input, since in most cases pointerover/pointerenter\r
     * behavior is not desired when touching the screen.  Note: this should only affect\r
     * events with pointerType === 'touch' or pointerType === 'pen', we do NOT want to\r
     * block these events when triggered using a mouse.\r
     * See also:\r
     *     http://www.w3.org/TR/pointerevents/#the-pointerdown-event\r
     *     http://www.w3.org/TR/pointerevents/#the-pointerenter-event\r
     * @private\r
     */\r
    blockedPointerEvents: {\r
        pointerover: 1,\r
        pointerout: 1,\r
        pointerenter: 1,\r
        pointerleave: 1,\r
        MSPointerOver: 1,\r
        MSPointerOut: 1,\r
        MSPointerEnter: 1,\r
        MSPointerLeave: 1\r
    },\r
\r
    /**\r
     * Browsers with pointer events may implement "compatibility" mouse events:\r
     * http://www.w3.org/TR/pointerevents/#compatibility-mapping-with-mouse-events\r
     * The behavior implemented in handlers for mouse over/out/enter/leave is not typically\r
     * desired when touching the screen, so we map all of these events to their pointer\r
     * counterparts in Ext.Element event translation code, so that they can be blocked\r
     * via "blockedPointerEvents".  The only scenario where this breaks down is in IE10\r
     * with mouseenter/mouseleave, since MSPointerEnter/MSPointerLeave were not implemented\r
     * in IE10.  For these 2 events we have to resort to a different method - capturing\r
     * the timestamp of the last pointer event that has pointerType == 'touch', and if the\r
     * mouse event occurred within a certain threshold we can reasonably assume it occurred\r
     * because of a touch on the screen (see isEventBlocked)\r
     * @private\r
     */\r
    blockedCompatibilityMouseEvents: {\r
        mouseenter: 1,\r
        mouseleave: 1\r
    },\r
\r
    constructor: function() {\r
        var me = this;\r
\r
        me.bubbleSubscribers = {};\r
        me.captureSubscribers = {};\r
        me.directSubscribers = {};\r
        me.directCaptureSubscribers = {};\r
\r
        // this map tracks all the names of the events that currently have a delegated\r
        // event listener attached so that they can be removed from the dom when the\r
        // publisher is destroyed\r
        me.delegatedListeners = {};\r
\r
        me.initHandlers();\r
\r
        Ext.onInternalReady(me.onReady, me);\r
\r
        me.callParent();\r
    },\r
\r
    registerEvents: function() {\r
        var me = this,\r
            publishersByEvent = Ext.event.publisher.Publisher.publishersByEvent,\r
            domEvents = me.handledDomEvents,\r
            ln = domEvents.length,\r
            i = 0,\r
            eventName;\r
\r
        for (; i < ln; i++) {\r
            eventName = domEvents[i];\r
            me.handles[eventName] = 1;\r
            publishersByEvent[eventName] = me;\r
        }\r
\r
        this.callParent();\r
    },\r
\r
    onReady: function() {\r
        var me = this,\r
            domEvents = me.handledDomEvents,\r
            ln, i;\r
\r
        if (domEvents) {\r
            // If the publisher has handledDomEvents we attach delegated listeners up front\r
            // for those events. Dom publisher does not have a list of event names, but\r
            // attaches listeners dynamically as subscribers are subscribed.  This allows it\r
            // to handle all DOM events that are not explicitly handled by another publisher.\r
            // Subclasses such as Gesture must explicitly list their handledDomEvents.\r
            for (i = 0, ln = domEvents.length; i < ln; i++) {\r
                me.addDelegatedListener(domEvents[i]);\r
            }\r
        }\r
\r
        Ext.getWin().on('unload', me.destroy, me);\r
    },\r
\r
    initHandlers: function() {\r
        var me = this;\r
\r
        me.onDelegatedEvent = Ext.bind(me.onDelegatedEvent, me);\r
        me.onDirectEvent = Ext.bind(me.onDirectEvent, me);\r
        me.onDirectCaptureEvent = Ext.bind(me.onDirectCaptureEvent, me);\r
    },\r
\r
    addDelegatedListener: function(eventName) {\r
        this.delegatedListeners[eventName] = 1;\r
        this.target.addEventListener(\r
            eventName, this.onDelegatedEvent, !!this.captureEvents[eventName]\r
        );\r
    },\r
\r
    removeDelegatedListener: function(eventName) {\r
        delete this.delegatedListeners[eventName];\r
        this.target.removeEventListener(\r
            eventName, this.onDelegatedEvent, !!this.captureEvents[eventName]\r
        );\r
    },\r
\r
    addDirectListener: function(eventName, element, capture) {\r
        element.dom.addEventListener(\r
            eventName,\r
            capture ? this.onDirectCaptureEvent : this.onDirectEvent,\r
            capture\r
        );\r
    },\r
\r
    removeDirectListener: function(eventName, element, capture) {\r
        element.dom.removeEventListener(\r
            eventName,\r
            capture ? this.onDirectCaptureEvent : this.onDirectEvent,\r
            capture\r
        );\r
    },\r
\r
    subscribe: function(element, eventName, delegated, capture) {\r
        var me = this,\r
            subscribers, id;\r
\r
        if (delegated && !me.directEvents[eventName]) {\r
            // delegated listeners\r
            subscribers = capture ? me.captureSubscribers : me.bubbleSubscribers;\r
            if (!me.handles[eventName] && !me.delegatedListeners[eventName]) {\r
                // First time we've attached a listener for this eventName - need to begin\r
                // listening at the dom level\r
                me.addDelegatedListener(eventName);\r
            }\r
\r
            if (subscribers[eventName]) {\r
                ++subscribers[eventName];\r
            } else {\r
                subscribers[eventName] = 1;\r
            }\r
        } else {\r
            subscribers = capture ? me.directCaptureSubscribers : me.directSubscribers;\r
\r
            id = element.id;\r
            // Direct subscribers are tracked by eventName first and by element id second.\r
            // This allows the element id key to be deleted when there are no more subscribers\r
            // so that this map does not grow indefinitely (it can only grow to a finite\r
            // set of event names) - see unsubscribe\r
            subscribers = subscribers[eventName] || (subscribers[eventName] = {});\r
            if (subscribers[id]) {\r
                ++subscribers[id];\r
            } else {\r
                subscribers[id] = 1;\r
                me.addDirectListener(eventName, element, capture);\r
            }\r
        }\r
    },\r
\r
    unsubscribe: function(element, eventName, delegated, capture) {\r
        var me = this,\r
            captureSubscribers, bubbleSubscribers, subscribers, id;\r
\r
        if (delegated && !me.directEvents[eventName]) {\r
            captureSubscribers = me.captureSubscribers;\r
            bubbleSubscribers = me.bubbleSubscribers;\r
            subscribers = capture ? captureSubscribers : bubbleSubscribers;\r
\r
            if (subscribers[eventName]) {\r
                --subscribers[eventName];\r
            }\r
\r
            if (!me.handles[eventName] && !bubbleSubscribers[eventName] && !captureSubscribers[eventName]) {\r
                // decremented subscribers back to 0 - and the event is not in "handledEvents"\r
                // no longer need to listen at the dom level\r
                this.removeDelegatedListener(eventName);\r
            }\r
        } else {\r
            subscribers = capture ? me.directCaptureSubscribers : me.directSubscribers;\r
\r
            id = element.id;\r
            subscribers = subscribers[eventName];\r
            if (subscribers[id]) {\r
                --subscribers[id];\r
            }\r
\r
            if (!subscribers[id]) {\r
                // no more direct subscribers for this element/id/capture, so we can safely\r
                // remove the dom listener\r
                delete subscribers[id];\r
                me.removeDirectListener(eventName, element, capture);\r
            }\r
        }\r
    },\r
\r
    getPropagatingTargets: function(target) {\r
        var currentNode = target,\r
            targets = [],\r
            parentNode;\r
\r
        while (currentNode) {\r
            targets.push(currentNode);\r
            parentNode = currentNode.parentNode;\r
\r
            if (!parentNode) {\r
                // If the node has no parentNode it means one of two things - either it is\r
                // not in the dom, or we have looped all the way up to the document object.\r
                // If the latter is the case we need to add the window object to the targets\r
                // to ensure that our propagation mimics browser propagation where events\r
                // can bubble from the document to the window.\r
                parentNode = currentNode.defaultView;\r
            }\r
\r
            currentNode = parentNode;\r
        }\r
\r
        return targets;\r
    },\r
\r
    publish: function(eventName, target, e) {\r
        var me = this,\r
            targets, el, i, ln;\r
\r
        if (Ext.isArray(target)) {\r
            // Gesture publisher passes an already created array of propagating targets\r
            targets = target;\r
        } else if (me.captureEvents[eventName]) {\r
            el = Ext.cache[target.id];\r
            targets = el ? [el] : [];\r
        } else {\r
            targets = me.getPropagatingTargets(target);\r
        }\r
\r
        ln = targets.length;\r
\r
        // We will now proceed to fire events in both capture and bubble phases.  You\r
        // may notice that we are looping all potential targets both times, and only\r
        // firing on the target if there is an Ext.Element wrapper in the cache.  This is\r
        // done (vs. eliminating non-cached targets from the array up front) because\r
        // event handlers can add listeners to other elements during propagation.  Looping\r
        // all the potential targets ensures that these dynamically added listeners\r
        // are fired.  See https://sencha.jira.com/browse/EXTJS-15953\r
\r
        // capture phase (top-down event propagation).\r
        if (me.captureSubscribers[eventName]) {\r
            for (i = ln; i--;) {\r
                el = Ext.cache[targets[i].id];\r
                if (el) {\r
                    me.fire(el, eventName, e, false, true);\r
                    if (e.isStopped) {\r
                        break;\r
                    }\r
                }\r
            }\r
        }\r
\r
        // bubble phase (bottom-up event propagation).\r
        // stopPropagation during capture phase cancels entire bubble phase\r
        if (!e.isStopped && me.bubbleSubscribers[eventName]) {\r
            for (i = 0; i < ln; i++) {\r
                el = Ext.cache[targets[i].id];\r
                if (el) {\r
                    me.fire(el, eventName, e, false, false);\r
                    if (e.isStopped) {\r
                        break;\r
                    }\r
                }\r
            }\r
        }\r
    },\r
\r
    fire: function(element, eventName, e, direct, capture) {\r
        var event;\r
\r
        if (element.hasListeners[eventName]) {\r
            event = element.events[eventName];\r
\r
            if (event) {\r
                if (capture && direct) {\r
                    event = event.directCaptures;\r
                } else if (capture) {\r
                    event = event.captures;\r
                } else if (direct) {\r
                    event = event.directs;\r
                }\r
\r
                // yes, this second null check for event is necessary - one of the\r
                // above assignments might have resulted in undefined\r
                if (event) {\r
                    e.setCurrentTarget(element.dom);\r
                    event.fire(e, e.target);\r
                }\r
            }\r
        }\r
    },\r
\r
    onDelegatedEvent: function(e) {\r
        if (Ext.elevateFunction) {\r
            // using [e] is faster than using arguments in most browsers\r
            // http://jsperf.com/passing-arguments\r
            Ext.elevateFunction(this.doDelegatedEvent, this, [e]);\r
        } else {\r
            this.doDelegatedEvent(e);\r
        }\r
    },\r
\r
    doDelegatedEvent: function(e, invokeAfter) {\r
        var me = this,\r
            timeStamp = e.timeStamp;\r
\r
        e = new Ext.event.Event(e);\r
\r
        if (me.isEventBlocked(e)) {\r
            return false;\r
        }\r
\r
        me.beforeEvent(e);\r
\r
        Ext.frameStartTime = timeStamp;\r
\r
        me.reEnterCount++;\r
        me.publish(e.type, e.target, e);\r
        me.reEnterCount--;\r
\r
        if (invokeAfter !== false) {\r
            me.afterEvent(e);\r
        }\r
\r
        return e;\r
    },\r
\r
    /**\r
     * Handler for directly-attached (non-delegated) dom events\r
     * @param {Event} e\r
     * @private\r
     */\r
    onDirectEvent: function(e) {\r
        if (Ext.elevateFunction) {\r
            // using [e] is faster than using arguments in most browsers\r
            // http://jsperf.com/passing-arguments\r
            Ext.elevateFunction(this.doDirectEvent, this, [e, false]);\r
        } else {\r
            this.doDirectEvent(e, false);\r
        }\r
    },\r
\r
    // When eventPhase is AT_TARGET there's no way to know if we are handling a capture\r
    // or bubble listener, hence the need for this separate handler fn\r
    onDirectCaptureEvent: function(e) {\r
        if (Ext.elevateFunction) {\r
            // using [e] is faster than using arguments in most browsers\r
            // http://jsperf.com/passing-arguments\r
            Ext.elevateFunction(this.doDirectEvent, this, [e, true]);\r
        } else {\r
            this.doDirectEvent(e, true);\r
        }\r
    },\r
\r
    doDirectEvent: function(e, capture) {\r
        var me = this,\r
            currentTarget = e.currentTarget,\r
            timeStamp = e.timeStamp,\r
            el;\r
\r
        e = new Ext.event.Event(e);\r
\r
        if (me.isEventBlocked(e)) {\r
            return;\r
        }\r
\r
        me.beforeEvent(e);\r
\r
        Ext.frameStartTime = timeStamp;\r
        \r
        el = Ext.cache[currentTarget.id];\r
        \r
        // Element can be removed from the cache by this time, with the node\r
        // still lingering for some reason. This can happen for example when\r
        // load event is fired on an iframe that we constructed when submitting\r
        // a form for file uploads.\r
        if (el) {\r
            // Since natural DOM propagation has occurred, no emulated propagation is needed.\r
            // Simply dispatch the event on the currentTarget element\r
            me.reEnterCount++;\r
            me.fire(el, e.type, e, true, capture);\r
            me.reEnterCount--;\r
        }\r
\r
        me.afterEvent(e);\r
    },\r
\r
    beforeEvent: function(e) {\r
        var browserEvent = e.browserEvent,\r
            // use full class name, not me.self, so that Dom and Gesture publishers will\r
            // both place flags on the same object.\r
            self = Ext.event.publisher.Dom,\r
            touches, touch;\r
\r
        if (browserEvent.type === 'touchstart') {\r
            touches = browserEvent.touches;\r
\r
            if (touches.length === 1) {\r
                // capture the coordinates of the first touchstart event so we can use\r
                // them to eliminate duplicate mouse events if needed, (see isEventBlocked).\r
                touch = touches[0];\r
                self.lastTouchStartX = touch.pageX;\r
                self.lastTouchStartY = touch.pageY;\r
            }\r
        }\r
    },\r
\r
    afterEvent: function(e) {\r
        var browserEvent = e.browserEvent,\r
            type = browserEvent.type,\r
            // use full class name, not me.self, so that Dom and Gesture publishers will\r
            // both place flags on the same object.\r
            self = Ext.event.publisher.Dom,\r
            GlobalEvents = Ext.GlobalEvents;\r
\r
        // It is important that the following time stamps are captured after the handlers\r
        // have been invoked because they need to represent the "exit" time, so that they\r
        // can be compared against the next "entry" time into onDelegatedEvent or\r
        // onDirectEvent to detect the time lapse in between the firing of the 2 events.\r
        // We set these flags on "this.self" so that they can be shared between Dom\r
        // publisher and subclasses\r
\r
        if (e.self.pointerEvents[type] && e.pointerType !== 'mouse') {\r
            // track the last time a pointer event was fired as a result of interaction\r
            // with the screen, pointerType === 'touch' most likely but could also be\r
            // pointerType === 'pen' hence the reason we use !== 'mouse', This is used\r
            // to eliminate potential duplicate "compatibility" mouse events\r
            // (see isEventBlocked)\r
            self.lastScreenPointerEventTime = Ext.now();\r
        }\r
\r
        if (type === 'touchend') {\r
            // Capture a time stamp so we can use it to eliminate potential duplicate\r
            // emulated mouse events on multi-input devices that have touch events,\r
            // e.g. Chrome on Window8 with touch-screen (see isEventBlocked).\r
            self.lastTouchEndTime = Ext.now();\r
        }\r
\r
        if (!this.reEnterCount && GlobalEvents.hasListeners.idle && !GlobalEvents.idleEventMask[type]) {\r
            GlobalEvents.fireEvent('idle');\r
        }\r
    },\r
\r
    /**\r
     * Detects if the given event should be blocked from firing because it is an emulated\r
     * "compatibility" mouse event triggered by a touch on the screen.\r
     * @param {Ext.event.Event} e\r
     * @return {Boolean}\r
     * @private\r
     */\r
    isEventBlocked: function(e) {\r
        var me = this,\r
            type = e.type,\r
            // use full class name, not me.self, so that Dom and Gesture publishers will\r
            // both look for flags on the same object.\r
            self = Ext.event.publisher.Dom,\r
            now = Ext.now();\r
\r
        // Gecko has a bug where right clicking will trigger both a contextmenu\r
        // and click event. This only occurs when delegating the event onto the window\r
        // object like we do by default for delegated events.\r
        // This is not possible to feature detect using synthetic events.\r
        // Ticket logged: https://bugzilla.mozilla.org/show_bug.cgi?id=1156023\r
        if (Ext.isGecko && e.type === 'click' && e.button === 2) {\r
            return true;\r
        }\r
\r
        // prevent emulated pointerover, pointerout, pointerenter, and pointerleave\r
        // events from firing when triggered by touching the screen.\r
        return (me.blockedPointerEvents[type] && e.pointerType !== 'mouse') ||\r
            // prevent compatibility mouse events from firing on devices with pointer\r
            // events - see comment on blockedCompatibilityMouseEvents for more details\r
            // The time from when the last pointer event fired until when compatibility\r
            // events are received varies depending on the browser, device, and application\r
            // so we use 1 second to be safe\r
            (me.blockedCompatibilityMouseEvents[type] &&\r
                (now - self.lastScreenPointerEventTime < 1000)) ||\r
\r
            (Ext.supports.TouchEvents && e.self.mouseEvents[e.type] &&\r
            // some browsers (e.g. webkit on Windows 8 with touch screen) emulate mouse\r
            // events after touch events have fired.  This only seems to happen when there\r
            // is no movement present, so, for example, a touchstart followed immediately\r
            // by a touchend would result in the following sequence of events:\r
            // "touchstart, touchend, mousemove, mousedown, mouseup"\r
            // yes, you read that right, the emulated mousemove fires before mousedown.\r
            // However, touch events with movement (touchstart, touchmove, then touchend)\r
            // do not trigger the emulated mouse events.\r
            // The side effect of this behavior is that single-touch gestures that expect\r
            // no movement (e.g. tap) can double-fire - once when the touchstart/touchend\r
            // occurs, and then again when the emulated mousedown/up occurs.\r
            // We cannot solve the problem by only listening for touch events and ignoring\r
            // mouse events, since we may be on a multi-input device that supports both\r
            // touch and mouse events and we want gestures to respond to both kinds of\r
            // events.  Instead we have to detect if the mouse event is a "dupe" by\r
            // checking if its coordinates are near the last touchstart's coordinates,\r
            // and if it's timestamp is within a certain threshold of the last touchend\r
            // event's timestamp.  This is because when dealing with multi-touch events,\r
            // the emulated mousedown event (when it does fire) will fire with approximately\r
            // the same coordinates as the first touchstart, but within a short time after\r
            // the last touchend.  We use 15px as the distance threshold, to be on the safe\r
            // side because the difference in coordinates can sometimes be up to 6px.\r
            Math.abs(e.pageX - self.lastTouchStartX) < 15 &&\r
            Math.abs(e.pageY - self.lastTouchStartY) < 15 &&\r
\r
            // in the majority of cases, the emulated mousedown is observed within\r
            // 5ms of touchend, however, to be certain we avoid a situation where a\r
            // gesture handler gets executed twice we use a threshold of 1000ms.  The\r
            // side effect of this is that if a user touches the screen and then quickly\r
            // clicks screen in the same spot, the mousedown/mouseup sequence that\r
            // ensues will not trigger any gesture recognizers.\r
            (Ext.now() - self.lastTouchEndTime) < 1000);\r
    },\r
\r
    destroy: function() {\r
        var eventName;\r
\r
        for (eventName in this.delegatedListeners) {\r
            this.removeDelegatedListener(eventName);\r
        }\r
        this.callParent();\r
    },\r
\r
    /**\r
     * Resets the internal state of the Dom publisher.  Internally the Dom publisher\r
     * keeps track of timing and coordinates of events for eliminating browser duplicates\r
     * (e.g. emulated mousedown after pointerdown etc.).  This method resets all this\r
     * cached data to a state similar to when the publisher was first instantiated.\r
     *\r
     * Applications will not typically need to use this method, but it is useful for\r
     * Unit-testing situations where a clean slate is required for each test.\r
     */\r
    reset: function() {\r
        // use full class name, not me.self, so that Dom and Gesture publishers will\r
        // both reset flags on the same object.\r
        var self = Ext.event.publisher.Dom;\r
\r
        // set to undefined, not null, because that is the initial state of these vars and\r
        // undefined/null return different results when used in math operations\r
        // (see isEventBlocked)\r
        self.lastScreenPointerEventTime = self.lastTouchEndTime = self.lastTouchStartX =\r
            self.lastTouchStartY = undefined;\r
    }\r
}, function(Dom) {\r
    var doc = document,\r
        defaultView = doc.defaultView,\r
        prototype = Dom.prototype;\r
\r
    if ((Ext.os.is.iOS && Ext.os.version.getMajor() < 5) || Ext.browser.is.AndroidStock ||\r
        !(defaultView && defaultView.addEventListener)) {\r
        // Delegated listeners will get attached to the document object because\r
        // attaching to the window object will not work.  In IE8 this is needed because\r
        // events do not bubble up to the window - bubbling stops at the document\r
        // object.  The iOS < 5 check was carried forward from Sencha Touch 2.3 -\r
        // Not sure why it was needed.  The check for (defaultView && defaultView.addEventListener)\r
        // was carried forward as well - it may be required for older mobile browsers.\r
        // see also TOUCH-5408\r
        prototype.target = doc;\r
    } else {\r
        /**\r
         * @property {Object} target the DOM target to which listeners are attached for\r
         * delegated events.\r
         * @private\r
         */\r
        prototype.target = defaultView;\r
    }\r
\r
    Dom.instance = new Dom();\r
});\r