event-gestures/js/Flick.js

	Flick.js revision 1ef3baa403986374362a3287c4aa7ddb032e1684
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync/**
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync * Adds support for a "flick" event, which is fired at the end of a touch or mouse based flick gesture, and provides
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync * velocity of the flick, along with distance and time information.
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync *
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync * @module event-gestures
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync * @submodule event-flick
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync */
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync// TODO: Better way to sniff 'n' switch touch support?
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsyncvar EVENT = ("ontouchstart" in Y.config.win) ? {
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync        start: "touchstart",
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync        end: "touchend"
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync    } : {
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync        start: "mousedown",
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync        end: "mouseup"
2e6dc32bcc9c3a3e70c957764c033b1f402bc617vboxsync    },
2e6dc32bcc9c3a3e70c957764c033b1f402bc617vboxsync
2e6dc32bcc9c3a3e70c957764c033b1f402bc617vboxsync    START = "start",
2e6dc32bcc9c3a3e70c957764c033b1f402bc617vboxsync    END = "end",
2e6dc32bcc9c3a3e70c957764c033b1f402bc617vboxsync
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync    OWNER_DOCUMENT = "ownerDocument",
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync    MIN_VELOCITY = "minVelocity",
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync    MIN_DISTANCE = "minDistance",
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync    _FLICK_START = "_fs",
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync    _FLICK_START_HANDLE = "_fsh",
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync    _FLICK_END_HANDLE = "_feh",
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync    NODE_TYPE = "nodeType";
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync/**
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync * Sets up a "flick" event, that is fired whenever the user initiates a flick gesture on the node
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync * where the listener is attached. The subscriber can specify a minimum distance or velocity for
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync * which the event is to be fired.
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync *
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync * @event flick
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync * @param type {string} "flick"
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync * @param fn {function} The method the event invokes.
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync * @param cfg {Object} Optional. An object which specifies the minimum distance and/or velocity
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync * of the flick gesture for which the event is to be fired.
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync *
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync * @return {EventHandle} the detach handle
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync */
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsyncY.Event.define('flick', {
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync    init: function (node, subscriber, ce) {
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync        var startHandle = node.on(EVENT[START],
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync            this._onStart,
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync            this,
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync            node,
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync            subscriber,
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync            ce);
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync        node.setData(_FLICK_START_HANDLE, startHandle);
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync    },
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync    destroy: function (node, subscriber, ce) {
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync        var startHandle = node.getData(_FLICK_START_HANDLE),
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync            endHandle = node.getData(_FLICK_END_HANDLE);
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync        if (startHandle) {
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync            startHandle.detach();
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync            node.clearData(_FLICK_START_HANDLE);
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync        }
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync        if (endHandle) {
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync            endHandle.detach();
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync            node.clearData(_FLICK_END_HANDLE);
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync        }
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync    },
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync    processArgs: function(args) {
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync        var params = (args[3]) ? args.splice(3, 1)[0] : {};
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync        if (!(MIN_VELOCITY in params)) {
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync            params.minVelocity = this.MIN_VELOCITY;
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync        }
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync        if (!(MIN_DISTANCE in params)) {
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync            params.minDistance = this.MIN_DISTANCE;
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync        }
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync        Y.log("flick, processArgs : minDistance =" + params.minDistance + ", minVelocity =" + params.minVelocity);
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync        return params;
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync    },
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync    _onStart: function(e, node, subscriber, ce) {
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync        var start = true, // always true for mouse
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync            endHandle,
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync            doc;
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync        if (e.touches) {
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync            start = (e.touches.length === 1);
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync            e = e.touches[0];
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync        }
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync        if (start) {
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync            e.preventDefault();
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync            node.setData(_FLICK_START, {
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync                time : new Date().getTime(),
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync                pageX: e.pageX,
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync                pageY: e.pageY,
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync                clientX: e.clientX,
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync                clientY: e.clientY,
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync                _e : e
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync            });
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync            endHandle = node.getData(_FLICK_END_HANDLE);
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync            if (!endHandle) {
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync                doc = (node.get(NODE_TYPE) === 9) ? node : node.get(OWNER_DOCUMENT);
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync                endHandle = doc.on(EVENT[END], Y.bind(this._onEnd, this), null, node, subscriber, ce);
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync                node.setData(_FLICK_END_HANDLE,endHandle);
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync            }
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync        }
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync    },
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync    _onEnd: function(e, node, subscriber, ce) {
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync        var endTime = new Date().getTime(),
e0e0c19eefceaf5d4ec40f9466b58a771f50e799vboxsync            valid = node.getData(_FLICK_START),
            start = valid,
            endEvent = e,

            startTime,
            time,
            params,
            xyDistance,
            distance,
            absDistance,
            velocity,
            axis;

        if (valid) {

            if (e.changedTouches) {
                if (e.changedTouches.length === 1 && e.touches.length === 0) {
                    endEvent = e.changedTouches[0];
                } else {
                    valid = false;
                }
            }

            if (valid) {

                startTime = start.time;
                endTime = new Date().getTime();
                time = endTime - startTime;

                params = subscriber._extra;

                xyDistance = [
                    endEvent.pageX - start.pageX,
                    endEvent.pageY - start.pageY
                ];

                axis = params.axis || (Math.abs(xyDistance[0]) >= Math.abs(xyDistance[1])) ? 'x' : 'y';

                distance = xyDistance[(axis === 'x') ? 0 : 1];
                absDistance = Math.abs(distance);
                velocity = absDistance/time;

                if (isFinite(velocity) && velocity >= params.minVelocity && absDistance >= params.minDistance) {
                    ce.fire({
                        distance: distance,
                        time: time,
                        velocity: velocity,
                        axis: axis,
                        button: e.button,
                        start: start,
                        end: {
                            time: endTime,
                            clientX: endEvent.clientX,
                            clientY: endEvent.clientY,
                            pageX: endEvent.pageX,
                            pageY: endEvent.pageY,
                            _e : e
                        }
                    });
                }

                node.clearData(_FLICK_START);
            }
        }
    },

    MIN_VELOCITY : 0,
    MIN_DISTANCE : 10
});