build/event-gestures/event-flick-debug.js

	event-flick-debug.js revision 509fd74c86202f1c7ff828e63745cdea8182609d
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. ZakasYUI.add('event-flick', function(Y) {
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas/**
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas * The gestures module provides gesture events such as "flick", which normalize user interactions
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas * across touch and mouse or pointer based input devices. This layer can be used by application developers
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas * to build input device agnostic components which behave the same in response to either touch or mouse based
9982ae2753aea312f8260f66903f5cfb1d202d22Adam Moore * interaction.
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas *
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas * @module event-gestures
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas */
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas/**
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas * Adds support for a "flick" event, which is fired at the end of a touch or mouse based flick gesture, and provides
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas * velocity of the flick, along with distance and time information.
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas *
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas * @module event-gestures
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas * @submodule event-flick
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas */
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakasvar EVENT = ("ontouchstart" in Y.config.win && !Y.UA.chrome) ? {
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas        start: "touchstart",
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas        end: "touchend"
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas    } : {
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas        start: "mousedown",
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas        end: "mouseup"
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas    },
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas    START = "start",
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas    END = "end",
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas    OWNER_DOCUMENT = "ownerDocument",
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas    MIN_VELOCITY = "minVelocity",
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas    MIN_DISTANCE = "minDistance",
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas    _FLICK_START = "_fs",
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas    _FLICK_START_HANDLE = "_fsh",
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas    _FLICK_END_HANDLE = "_feh",
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas    NODE_TYPE = "nodeType";
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas/**
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas * Sets up a "flick" event, that is fired whenever the user initiates a flick gesture on the node
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas * where the listener is attached. The subscriber can specify a minimum distance or velocity for
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas * which the event is to be fired. The subscriber can also specify if there is a particular axis which
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas * they are interested in - "x" or "y". If no axis is specified, the axis along which there was most distance
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas * covered is used.
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas *
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas * @event flick
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas * @param type {string} "flick"
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas * @param fn {function} The method the event invokes. It receives an event facade with an e.flick object containing the flick related properties: e.flick.time, e.flick.distance, e.flick.velocity and e.flick.axis, e.flick.start.
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas * @param cfg {Object} Optional. An object which specifies the minimum distance and/or velocity  (in px/ms)
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas * of the flick gesture for which the event is to be fired and an axis of interest. e.g. { minDistance:10, minVelocity:0.5, axis:"x" }.
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas *
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas * @return {EventHandle} the detach handle
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas */
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. ZakasY.Event.define('flick', {
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas    on: function (node, subscriber, ce) {
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas        var startHandle = node.on(EVENT[START],
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas            this._onStart,
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas            this,
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas            node,
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas            subscriber,
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas            ce);
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas        subscriber[_FLICK_START_HANDLE] = startHandle;
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas    },
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas    detach: function (node, subscriber, ce) {
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas        var startHandle = subscriber[_FLICK_START_HANDLE],
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas            endHandle = subscriber[_FLICK_END_HANDLE];
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas        if (startHandle) {
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas            startHandle.detach();
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas            subscriber[_FLICK_START_HANDLE] = null;
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas        }
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas        if (endHandle) {
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas            endHandle.detach();
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas            subscriber[_FLICK_END_HANDLE] = null;
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas        }
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas    },
1d4faea63148971515330703c6e02d3d13057408Nicholas
1d4faea63148971515330703c6e02d3d13057408Nicholas    processArgs: function(args) {
1d4faea63148971515330703c6e02d3d13057408Nicholas        var params = (args[3]) ? Y.merge(args.splice(3, 1)[0]) : {};
1d4faea63148971515330703c6e02d3d13057408Nicholas
1d4faea63148971515330703c6e02d3d13057408Nicholas        if (!(MIN_VELOCITY in params)) {
1d4faea63148971515330703c6e02d3d13057408Nicholas            params.minVelocity = this.MIN_VELOCITY;
1d4faea63148971515330703c6e02d3d13057408Nicholas        }
1d4faea63148971515330703c6e02d3d13057408Nicholas
1d4faea63148971515330703c6e02d3d13057408Nicholas        if (!(MIN_DISTANCE in params)) {
1d4faea63148971515330703c6e02d3d13057408Nicholas            params.minDistance = this.MIN_DISTANCE;
1d4faea63148971515330703c6e02d3d13057408Nicholas        }
1d4faea63148971515330703c6e02d3d13057408Nicholas
1d4faea63148971515330703c6e02d3d13057408Nicholas        Y.log("flick, processArgs : minDistance =" + params.minDistance + ", minVelocity =" + params.minVelocity);
1d4faea63148971515330703c6e02d3d13057408Nicholas
1d4faea63148971515330703c6e02d3d13057408Nicholas        return params;
1d4faea63148971515330703c6e02d3d13057408Nicholas    },
1d4faea63148971515330703c6e02d3d13057408Nicholas
1d4faea63148971515330703c6e02d3d13057408Nicholas    _onStart: function(e, node, subscriber, ce) {
1d4faea63148971515330703c6e02d3d13057408Nicholas
1d4faea63148971515330703c6e02d3d13057408Nicholas        var start = true, // always true for mouse
1d4faea63148971515330703c6e02d3d13057408Nicholas            endHandle,
1d4faea63148971515330703c6e02d3d13057408Nicholas            doc,
1d4faea63148971515330703c6e02d3d13057408Nicholas            origE = e;
1d4faea63148971515330703c6e02d3d13057408Nicholas
1d4faea63148971515330703c6e02d3d13057408Nicholas        if (e.touches) {
1d4faea63148971515330703c6e02d3d13057408Nicholas            start = (e.touches.length === 1);
1d4faea63148971515330703c6e02d3d13057408Nicholas            e = e.touches[0];
1d4faea63148971515330703c6e02d3d13057408Nicholas        }
1d4faea63148971515330703c6e02d3d13057408Nicholas
1d4faea63148971515330703c6e02d3d13057408Nicholas        if (start) {
1d4faea63148971515330703c6e02d3d13057408Nicholas            origE.preventDefault();
1d4faea63148971515330703c6e02d3d13057408Nicholas
1d4faea63148971515330703c6e02d3d13057408Nicholas            e.flick = {
1d4faea63148971515330703c6e02d3d13057408Nicholas                time : new Date().getTime()
1d4faea63148971515330703c6e02d3d13057408Nicholas            };
1d4faea63148971515330703c6e02d3d13057408Nicholas
1d4faea63148971515330703c6e02d3d13057408Nicholas            subscriber[_FLICK_START] = e;
1d4faea63148971515330703c6e02d3d13057408Nicholas
1d4faea63148971515330703c6e02d3d13057408Nicholas            endHandle = subscriber[_FLICK_END_HANDLE];
1d4faea63148971515330703c6e02d3d13057408Nicholas
1d4faea63148971515330703c6e02d3d13057408Nicholas            if (!endHandle) {
1d4faea63148971515330703c6e02d3d13057408Nicholas                doc = (node.get(NODE_TYPE) === 9) ? node : node.get(OWNER_DOCUMENT);
1d4faea63148971515330703c6e02d3d13057408Nicholas
1d4faea63148971515330703c6e02d3d13057408Nicholas                endHandle = doc.on(EVENT[END], Y.bind(this._onEnd, this), null, node, subscriber, ce);
1d4faea63148971515330703c6e02d3d13057408Nicholas                subscriber[_FLICK_END_HANDLE] = endHandle;
1d4faea63148971515330703c6e02d3d13057408Nicholas            }
1d4faea63148971515330703c6e02d3d13057408Nicholas        }
1d4faea63148971515330703c6e02d3d13057408Nicholas    },
1d4faea63148971515330703c6e02d3d13057408Nicholas
1d4faea63148971515330703c6e02d3d13057408Nicholas    _onEnd: function(e, node, subscriber, ce) {
1d4faea63148971515330703c6e02d3d13057408Nicholas
1d4faea63148971515330703c6e02d3d13057408Nicholas        var endTime = new Date().getTime(),
1d4faea63148971515330703c6e02d3d13057408Nicholas            start = subscriber[_FLICK_START],
1d4faea63148971515330703c6e02d3d13057408Nicholas            valid = !!start,
1d4faea63148971515330703c6e02d3d13057408Nicholas            endEvent = e,
1d4faea63148971515330703c6e02d3d13057408Nicholas            startTime,
1d4faea63148971515330703c6e02d3d13057408Nicholas            time,
1d4faea63148971515330703c6e02d3d13057408Nicholas            params,
1d4faea63148971515330703c6e02d3d13057408Nicholas            xyDistance,
1d4faea63148971515330703c6e02d3d13057408Nicholas            distance,
1d4faea63148971515330703c6e02d3d13057408Nicholas            velocity,
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas            axis;
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas        if (valid) {
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas            if (e.changedTouches) {
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas                if (e.changedTouches.length === 1 && e.touches.length === 0) {
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas                    endEvent = e.changedTouches[0];
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas                } else {
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas                    valid = false;
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas                }
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas            }
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas            if (valid) {
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas                endEvent.preventDefault();
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas                startTime = start.flick.time;
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas                endTime = new Date().getTime();
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas                time = endTime - startTime;
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas                params = subscriber._extra;
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas                xyDistance = [
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas                    endEvent.pageX - start.pageX,
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas                    endEvent.pageY - start.pageY
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas                ];
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas                axis = params.axis || (Math.abs(xyDistance[0]) >= Math.abs(xyDistance[1])) ? 'x' : 'y';
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas                distance = xyDistance[(axis === 'x') ? 0 : 1];
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas                velocity = (time !== 0) ? distance/time : 0;
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas                if (isFinite(velocity) && (Math.abs(distance) >= params.minDistance) && (Math.abs(velocity)  >= params.minVelocity)) {
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas                    e.type = "flick";
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas                    e.flick = {
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas                        time:time,
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas                        distance: distance,
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas                        velocity:velocity,
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas                        axis: axis,
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas                        start : start
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas                    };
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas                    ce.fire(e);
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas                }
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas                subscriber[_FLICK_START] = null;
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas            }
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas        }
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas    },
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas    MIN_VELOCITY : 0,
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas    MIN_DISTANCE : 0
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas});
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas}, '@VERSION@' ,{requires:['node-base','event-touch','event-synthetic']});
9f07526b4143bd56d662c42b82c38343f5217ff7Nicholas C. Zakas