# Yahoo! UI Library

### node-flick 3.3.0

Yahoo! UI Library > node-flick > Plugin.Flick
Search:
Filters Show Private Show Protected Show Deprecated

## Class Plugin.Flick

A plugin class which can be used to animate the motion of a node, in response to a flick gesture.

### Properties

#### Flick.CLASS_NAMES - `static Object`

The default CSS class names used by the plugin

#### Flick.EASING - `static String`

The default easing to use for the main flick movement transition
Default Value: 'cubic-bezier(0, 0.1, 0, 1.0)'

#### Flick.NAME - `static String`

The NAME of the Flick class. Used to prefix events generated by the plugin.
Default Value: "pluginFlick"

#### Flick.NS - `static String`

The namespace for the plugin. This will be the property on the node, which will reference the plugin instance, when it's plugged in.
Default Value: "flick"

#### Flick.SNAP_DURATION - `static Number`

The duration to use for the bounce snap-back transition
Default Value: 400

#### Flick.SNAP_EASING - `static String`

The default easing to use for the bounce snap-back transition
Default Value: 'ease-out'

#### Flick.VELOCITY_THRESHOLD - `static Number`

The threshold used to determine when the decelerated velocity of the node is practically 0.
Default Value: 0.015

### Methods

#### _anim

`private void _anim ( x , y , duration , easing )`
Internal utility method to perform the transition step

Parameters:
  `x <Number>` The X offset position
  `y <Number>` The Y offset position
  `duration <Number>` The duration to use for the transition animation
  `easing <String>` The easing to use for the transition animation.

#### _bounce

`private void _bounce ( x , max )`
Internal utility method to constrain the offset value based on the bounce criteria.

Parameters:
  `x <Number>` The offset value to constrain.
  `max <Number>` The max offset value.

#### _flickFrame

`protected void _flickFrame ( )`
Executes a single frame in the flick animation

#### _killTimer

`private void _killTimer ( )`
Stop the animation timer

#### _move

`private void _move ( x , y , duration , easing )`
Internal utility method to move the node to a given XY position, using transitions, if specified.

Parameters:
  `x <Number>` The X offset position
  `y <Number>` The Y offset position
  `duration <Number>` The duration to use for the transition animation
  `easing <String>` The easing to use for the transition animation.

#### _onFlick

`protected void _onFlick ( e )`
The flick event listener. Kicks off the flick animation.

Parameters:
  `e <EventFacade>` The flick event facade, containing e.flick.distance, e.flick.velocity etc.

#### _renderClasses

`protected void _renderClasses ( )`
Adds the CSS classes, necessary to set up overflow/position properties on the node and boundingBox.

#### _setX

`private void _setX ( val )`
Internal utility method to set the X offset position

Parameters:
  `val <Number>`

#### _setY

`private void _setY ( val )`
Internal utility method to set the Y offset position

Parameters:
  `val <Number>`

#### initializer

`void initializer ( config )`
The initializer lifecycle implementation.

Parameters:
  `config <Object>` The user configuration for the plugin

#### setBounds

`void setBounds ( )`
Sets the min/max boundaries for the flick animation, based on the boundingBox dimensions.

### Events

#### bounceChange

`bounceChange ( event )`
Fires when the value for the configuration attribute 'bounce' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### bounceDistanceChange

`bounceDistanceChange ( event )`
Fires when the value for the configuration attribute 'bounceDistance' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### boundingBoxChange

`boundingBoxChange ( event )`
Fires when the value for the configuration attribute 'boundingBox' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### decelerationChange

`decelerationChange ( event )`
Fires when the value for the configuration attribute 'deceleration' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### durationChange

`durationChange ( event )`
Fires when the value for the configuration attribute 'duration' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### easingChange

`easingChange ( event )`
Fires when the value for the configuration attribute 'easing' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### minVelocityChange

`minVelocityChange ( event )`
Fires when the value for the configuration attribute 'minVelocity' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

### Configuration Attributes

#### bounce `- Number`

Drag coefficient for intertial scrolling at the upper and lower boundaries of the scrollview. Set to 0 to disable "rubber-banding".
Default Value: 0.7

#### bounceDistance `- Number`

The bounce distance in pixels
Default Value: 150

#### boundingBox `- Node`

The constraining box relative to which the flick animation and bounds should be calculated.
Default Value: parentNode

#### deceleration `- object`

Drag coefficent for inertial scrolling. The closer to 1 this value is, the less friction during scrolling.
Default Value: 0.98

#### duration `- Number`

The custom duration to apply to the flick animation. By default, the animation duration is controlled by the deceleration factor.
Default Value: null

#### easing `- String`

The custom transition easing to use for the flick animation. If not provided defaults to internally to Flick.EASING, or Flick.SNAP_EASING based on whether or not we're animating the flick or bounce step.
Default Value: null

#### minVelocity `- Number`

The minimum flick gesture velocity (px/ms) at which to trigger the flick response
Default Value: 0

Copyright © 2011 Yahoo! Inc. All rights reserved.