Yahoo! UI Library

node-flick  3.2.0

Yahoo! UI Library > node-flick > Plugin.Flick
Search:
 
Filters

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

Classes

Files

Copyright © 2010 Yahoo! Inc. All rights reserved.