Version 3.17.2
Show:

File: node/js/node-event-simulate.js

  1. /**
  2.  * Adds functionality to simulate events.
  3.  * @module node
  4.  * @submodule node-event-simulate
  5.  */
  6.  
  7. /**
  8.  * Simulates an event on the node.
  9.  * @param {String} type The type of event (i.e., "click").
  10.  * @param {Object} options (Optional) Extra options to copy onto the event object.
  11.  * @for Node
  12.  * @method simulate
  13.  */
  14. Y.Node.prototype.simulate = function (type, options) {
  15.  
  16.     Y.Event.simulate(Y.Node.getDOMNode(this), type, options);
  17. };
  18.  
  19. /**
  20.  * Simulates the higher user level gesture of the given name on this node.
  21.  * This method generates a set of low level touch events(Apple specific gesture
  22.  * events as well for the iOS platforms) asynchronously. Note that gesture
  23.  * simulation is relying on `Y.Event.simulate()` method to generate
  24.  * the touch events under the hood. The `Y.Event.simulate()` method
  25.  * itself is a synchronous method.
  26.  *
  27.  * Supported gestures are `tap`, `doubletap`, `press`, `move`, `flick`, `pinch`
  28.  * and `rotate`.
  29.  *
  30.  * The `pinch` gesture is used to simulate the pinching and spreading of two
  31.  * fingers. During a pinch simulation, rotation is also possible. Essentially
  32.  * `pinch` and `rotate` simulations share the same base implementation to allow
  33.  * both pinching and rotation at the same time. The only difference is `pinch`
  34.  * requires `start` and `end` option properties while `rotate` requires `rotation`
  35.  * option property.
  36.  *
  37.  * The `pinch` and `rotate` gestures can be described as placing 2 fingers along a
  38.  * circle. Pinching and spreading can be described by start and end circles while
  39.  * rotation occurs on a single circle. If the radius of the start circle is greater
  40.  * than the end circle, the gesture becomes a pinch, otherwise it is a spread spread.
  41.  *
  42.  * @example
  43.  *
  44.  *     var node = Y.one("#target");
  45.  *
  46.  *     // double tap example
  47.  *     node.simulateGesture("doubletap", function() {
  48.  *         // my callback function
  49.  *     });
  50.  *
  51.  *     // flick example from the center of the node, move 50 pixels down for 50ms)
  52.  *     node.simulateGesture("flick", {
  53.  *         axis: y,
  54.  *         distance: -100
  55.  *         duration: 50
  56.  *     }, function() {
  57.  *         // my callback function
  58.  *     });
  59.  *
  60.  *     // simulate rotating a node 75 degrees counter-clockwise
  61.  *     node.simulateGesture("rotate", {
  62.  *         rotation: -75
  63.  *     });
  64.  *
  65.  *     // simulate a pinch and a rotation at the same time.
  66.  *     // fingers start on a circle of radius 100 px, placed at top/bottom
  67.  *     // fingers end on a circle of radius 50px, placed at right/left
  68.  *     node.simulateGesture("pinch", {
  69.  *         r1: 100,
  70.  *         r2: 50,
  71.  *         start: 0
  72.  *         rotation: 90
  73.  *     });
  74.  *
  75.  * @method simulateGesture
  76.  * @param {String} name The name of the supported gesture to simulate. The
  77.  *      supported gesture name is one of "tap", "doubletap", "press", "move",
  78.  *      "flick", "pinch" and "rotate".
  79.  * @param {Object} [options] Extra options used to define the gesture behavior:
  80.  *
  81.  *      Valid options properties for the `tap` gesture:
  82.  *
  83.  *      @param {Array} [options.point] (Optional) Indicates the [x,y] coordinates
  84.  *        where the tap should be simulated. Default is the center of the node
  85.  *        element.
  86.  *      @param {Number} [options.hold=10] (Optional) The hold time in milliseconds.
  87.  *        This is the time between `touchstart` and `touchend` event generation.
  88.  *      @param {Number} [options.times=1] (Optional) Indicates the number of taps.
  89.  *      @param {Number} [options.delay=10] (Optional) The number of milliseconds
  90.  *        before the next tap simulation happens. This is valid only when `times`
  91.  *        is more than 1.
  92.  *
  93.  *      Valid options properties for the `doubletap` gesture:
  94.  *
  95.  *      @param {Array} [options.point] (Optional) Indicates the [x,y] coordinates
  96.  *        where the doubletap should be simulated. Default is the center of the
  97.  *        node element.
  98.  *
  99.  *      Valid options properties for the `press` gesture:
  100.  *
  101.  *      @param {Array} [options.point] (Optional) Indicates the [x,y] coordinates
  102.  *        where the press should be simulated. Default is the center of the node
  103.  *        element.
  104.  *      @param {Number} [options.hold=3000] (Optional) The hold time in milliseconds.
  105.  *        This is the time between `touchstart` and `touchend` event generation.
  106.  *        Default is 3000ms (3 seconds).
  107.  *
  108.  *      Valid options properties for the `move` gesture:
  109.  *
  110.  *      @param {Object} [options.path] (Optional) Indicates the path of the finger
  111.  *        movement. It's an object with three optional properties: `point`,
  112.  *        `xdist` and  `ydist`.
  113.  *        @param {Array} [options.path.point] A starting point of the gesture.
  114.  *          Default is the center of the node element.
  115.  *        @param {Number} [options.path.xdist=200] A distance to move in pixels
  116.  *          along the X axis. A negative distance value indicates moving left.
  117.  *        @param {Number} [options.path.ydist=0] A distance to move in pixels
  118.  *          along the Y axis. A negative distance value indicates moving up.
  119.  *      @param {Number} [options.duration=1000] (Optional) The duration of the
  120.  *        gesture in milliseconds.
  121.  *
  122.  *      Valid options properties for the `flick` gesture:
  123.  *
  124.  *      @param {Array} [options.point] (Optional) Indicates the [x, y] coordinates
  125.  *        where the flick should be simulated. Default is the center of the
  126.  *        node element.
  127.  *      @param {String} [options.axis='x'] (Optional) Valid values are either
  128.  *        "x" or "y". Indicates axis to move along. The flick can move to one of
  129.  *        4 directions(left, right, up and down).
  130.  *      @param {Number} [options.distance=200] (Optional) Distance to move in pixels
  131.  *      @param {Number} [options.duration=1000] (Optional) The duration of the
  132.  *        gesture in milliseconds. User given value could be automatically
  133.  *        adjusted by the framework if it is below the minimum velocity to be
  134.  *        a flick gesture.
  135.  *
  136.  *      Valid options properties for the `pinch` gesture:
  137.  *
  138.  *      @param {Array} [options.center] (Optional) The center of the circle where
  139.  *        two fingers are placed. Default is the center of the node element.
  140.  *      @param {Number} [options.r1] (Required) Pixel radius of the start circle
  141.  *        where 2 fingers will be on when the gesture starts. The circles are
  142.  *        centered at the center of the element.
  143.  *      @param {Number} [options.r2] (Required) Pixel radius of the end circle
  144.  *        when this gesture ends.
  145.  *      @param {Number} [options.duration=1000] (Optional) The duration of the
  146.  *        gesture in milliseconds.
  147.  *      @param {Number} [options.start=0] (Optional) Starting degree of the first
  148.  *        finger. The value is relative to the path of the north. Default is 0
  149.  *        (i.e., 12:00 on a clock).
  150.  *      @param {Number} [options.rotation=0] (Optional) Degrees to rotate from
  151.  *        the starting degree. A negative value means rotation to the
  152.  *        counter-clockwise direction.
  153.  *
  154.  *      Valid options properties for the `rotate` gesture:
  155.  *
  156.  *      @param {Array} [options.center] (Optional) The center of the circle where
  157.  *        two fingers are placed. Default is the center of the node element.
  158.  *      @param {Number} [options.r1] (Optional) Pixel radius of the start circle
  159.  *        where 2 fingers will be on when the gesture starts. The circles are
  160.  *        centered at the center of the element. Default is a fourth of the node
  161.  *        element width or height, whichever is smaller.
  162.  *      @param {Number} [options.r2] (Optional) Pixel radius of the end circle
  163.  *        when this gesture ends. Default is a fourth of the node element width or
  164.  *        height, whichever is smaller.
  165.  *      @param {Number} [options.duration=1000] (Optional) The duration of the
  166.  *        gesture in milliseconds.
  167.  *      @param {Number} [options.start=0] (Optional) Starting degree of the first
  168.  *        finger. The value is relative to the path of the north. Default is 0
  169.  *        (i.e., 12:00 on a clock).
  170.  *      @param {Number} [options.rotation] (Required) Degrees to rotate from
  171.  *        the starting degree. A negative value means rotation to the
  172.  *        counter-clockwise direction.
  173.  *
  174.  * @param {Function} [cb] The callback to execute when the asynchronouse gesture
  175.  *      simulation is completed.
  176.  *      @param {Error} cb.err An error object if the simulation is failed.
  177.  * @for Node
  178.  */
  179. Y.Node.prototype.simulateGesture = function (name, options, cb) {
  180.  
  181.     Y.Event.simulateGesture(this, name, options, cb);
  182. };
  183.  
  184.