event-flick.js revision 0e232b16e640a3801393ca223d42fd1e0e9e83c3
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsyncYUI.add('event-flick', function(Y) {
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync/**
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * The gestures module provides gesture events such as "flick", which normalize user interactions
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * across touch and mouse or pointer based input devices. This layer can be used by application developers
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * to build input device agnostic components which behave the same in response to either touch or mouse based
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * interaction.
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync *
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * <p>Documentation for events added by this module can be found in the event document for the <a href="YUI.html#events">YUI</event> global.</p>
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync *
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @module event-gestures
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync */
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync/**
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * Adds support for a "flick" event, which is fired at the end of a touch or mouse based flick gesture, and provides
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * velocity of the flick, along with distance and time information.
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync *
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @module event-gestures
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @submodule event-flick
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync */
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsyncvar EVENT = ("ontouchstart" in Y.config.win && !Y.UA.chrome) ? {
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync start: "touchstart",
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync end: "touchend"
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync } : {
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync start: "mousedown",
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync end: "mouseup"
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync },
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync START = "start",
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync END = "end",
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync OWNER_DOCUMENT = "ownerDocument",
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync MIN_VELOCITY = "minVelocity",
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync MIN_DISTANCE = "minDistance",
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync _FLICK_START = "_fs",
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync _FLICK_START_HANDLE = "_fsh",
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync _FLICK_END_HANDLE = "_feh",
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync NODE_TYPE = "nodeType";
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync/**
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * Sets up a "flick" event, that is fired whenever the user initiates a flick gesture on the node
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * where the listener is attached. The subscriber can specify a minimum distance or velocity for
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * which the event is to be fired. The subscriber can also specify if there is a particular axis which
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * they are interested in - "x" or "y". If no axis is specified, the axis along which there was most distance
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * covered is used.
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync *
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @event flick
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @for YUI
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @param type {string} "flick"
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @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.
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @param cfg {Object} Optional. An object which specifies the minimum distance and/or velocity (in px/ms)
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * 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" }.
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync *
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @return {EventHandle} the detach handle
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync */
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsyncY.Event.define('flick', {
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync on: function (node, subscriber, ce) {
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync var startHandle = node.on(EVENT[START],
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync this._onStart,
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync this,
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync node,
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync subscriber,
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync ce);
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync subscriber[_FLICK_START_HANDLE] = startHandle;
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync },
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync detach: function (node, subscriber, ce) {
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync var startHandle = subscriber[_FLICK_START_HANDLE],
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync endHandle = subscriber[_FLICK_END_HANDLE];
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync if (startHandle) {
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync startHandle.detach();
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync subscriber[_FLICK_START_HANDLE] = null;
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync }
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync if (endHandle) {
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync endHandle.detach();
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync subscriber[_FLICK_END_HANDLE] = null;
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync }
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync },
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync processArgs: function(args) {
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync var params = (args[3] !== undefined) ? Y.merge(args.splice(3, 1)[0]) : {};
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync if (!(MIN_VELOCITY in params)) {
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync params.minVelocity = this.MIN_VELOCITY;
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync }
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync if (!(MIN_DISTANCE in params)) {
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync params.minDistance = this.MIN_DISTANCE;
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync }
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync return params;
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync },
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync _onStart: function(e, node, subscriber, ce) {
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
64863d3a0ffadf1ac248b295b78be5d55db6ee13vboxsync var start = true, // always true for mouse
64863d3a0ffadf1ac248b295b78be5d55db6ee13vboxsync endHandle,
64863d3a0ffadf1ac248b295b78be5d55db6ee13vboxsync doc,
64863d3a0ffadf1ac248b295b78be5d55db6ee13vboxsync origE = e;
64863d3a0ffadf1ac248b295b78be5d55db6ee13vboxsync
e7c4c205cb0af88b5ef0786be46da94847a9a37bvboxsync if (e.touches) {
e7c4c205cb0af88b5ef0786be46da94847a9a37bvboxsync start = (e.touches.length === 1);
64863d3a0ffadf1ac248b295b78be5d55db6ee13vboxsync e = e.touches[0];
64863d3a0ffadf1ac248b295b78be5d55db6ee13vboxsync }
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync if (start) {
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync origE.preventDefault();
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync e.flick = {
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync time : new Date().getTime()
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync };
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync subscriber[_FLICK_START] = e;
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync endHandle = subscriber[_FLICK_END_HANDLE];
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync if (!endHandle) {
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync doc = (node.get(NODE_TYPE) === 9) ? node : node.get(OWNER_DOCUMENT);
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync endHandle = doc.on(EVENT[END], Y.bind(this._onEnd, this), null, node, subscriber, ce);
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync subscriber[_FLICK_END_HANDLE] = endHandle;
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync }
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync }
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync },
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync _onEnd: function(e, node, subscriber, ce) {
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync var endTime = new Date().getTime(),
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync start = subscriber[_FLICK_START],
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync valid = !!start,
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync endEvent = e,
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync startTime,
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync time,
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync params,
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync xyDistance,
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync distance,
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync velocity,
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync axis;
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync if (valid) {
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync if (e.changedTouches) {
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync if (e.changedTouches.length === 1 && e.touches.length === 0) {
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync endEvent = e.changedTouches[0];
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync } else {
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync valid = false;
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync }
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync }
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync if (valid) {
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync endEvent.preventDefault();
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync startTime = start.flick.time;
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync endTime = new Date().getTime();
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync time = endTime - startTime;
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync params = subscriber._extra;
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync xyDistance = [
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync endEvent.pageX - start.pageX,
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync endEvent.pageY - start.pageY
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync ];
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync axis = params.axis || (Math.abs(xyDistance[0]) >= Math.abs(xyDistance[1])) ? 'x' : 'y';
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync distance = xyDistance[(axis === 'x') ? 0 : 1];
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync velocity = (time !== 0) ? distance/time : 0;
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync if (isFinite(velocity) && (Math.abs(distance) >= params.minDistance) && (Math.abs(velocity) >= params.minVelocity)) {
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync e.type = "flick";
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync e.flick = {
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync time:time,
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync distance: distance,
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync velocity:velocity,
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync axis: axis,
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync start : start
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync };
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync ce.fire(e);
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync }
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync subscriber[_FLICK_START] = null;
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync }
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync }
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync },
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync MIN_VELOCITY : 0,
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync MIN_DISTANCE : 0
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync});
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync}, '@VERSION@' ,{requires:['node-base','event-touch','event-synthetic']});
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync