documentation

Classes Files

Search

Classes

Documentation generator: JsDoc Toolkit 2.4.0
Template: Wink 1.0
Generated on:

Class wink.ui.xyz.CoverFlow

Implements a Cover Flow. The Cover Flow allows the user to browse a list of items ; each item consisting of an image, and perhaps a title, a rear face or an action to invoke when it is selected. It is developed to be as flexible and configurable as possible, so the user can enable or disable some graphical options to adapt visual rendering. The user must pay attention to the fact that the parameters significantly affect performance (number of covers, reflected and displayTitle especially). Developed to be as flexible and configurable as possible.

Class Summary
Constructor Attributes Constructor Name and Description
 
wink.ui.xyz.CoverFlow(properties)
Compatibility
Compatibility list Supported platforms / browsers
iOS2 (slow), iOS3, iOS4, iOS5, iOS6, Android 4.0, BlackBerry 7 (partial)

Method Summary

Class Detail

wink.ui.xyz.CoverFlow(properties) 
var properties = {
  covers: covers,
  size: 300,
  viewportWidth: 320,
  reflected: true,
  displayTitle: true,
  fadeEdges: true,
  handleOrientationChange: true,
  handleGesture: true,
  backgroundColor: { r: 25, g: 25, b: 25 },
  coverSpacing: 40,
  displayTitleDuration: 0,
  borderSize: 2
};
var coverflow = new wink.ui.xyz.CoverFlow(properties);
container.appendChild(coverflow.getDomNode());
Parameters:
{object} properties
The properties object
{array} properties.covers
An array of covers
{object} properties.covers.item
A cover
{string} properties.covers.item.image
URL of the cover image
{string} properties.covers.item.title Optional
The id of the title node that will appear below image (mandatory if "displayTitle" is set to true)
{string} properties.covers.item.backFaceId Optional
The id of the backface node that will appear when selecting a cover (if no action is specified)
{object|function} properties.covers.item.action Optional
The callback action that will be invoked when selecting a cover
{integer} properties.size
The component size
{integer} properties.position Optional, Default: middle
The initial selected cover
{integer} properties.viewportWidth
The width of the viewport (viewable area)
{boolean} properties.reflected
Indicates if reflection must be displayed
{boolean} properties.displayTitle
Indicates if title must be displayed
{boolean} properties.fadeEdges Optional, Default: false
Indicates if fade along the component edges must be displayed
{boolean} properties.handleOrientationChange
Indicates if the component must resized itself automatically if orientation has changed
{boolean} properties.handleGesture
Indicates if gestures must be handled to rotate the Cover Flow on x-axis
{object} properties.backgroundColor
The background color value
{object} properties.backgroundColor.r
Red value
{object} properties.backgroundColor.g
Green value
{object} properties.backgroundColor.b
Blue value
{integer} properties.coverSpacing Optional
The spacing between covers
{integer} properties.displayTitleDuration Optional, Default: 0
The duration in millisecond of the title display
{integer} properties.borderSize Optional, Default: 0
The cover shaded border size
Requires:
wink.math._geometric
wink.math._matrix
wink.fx._xyz
wink.ux.MovementTracker
wink.ux.gesture
wink.ux.window
See:
Test page
Test page (numerical)

Field Detail

{object} backgroundColor
The background color of the coverflow
{integer} borderSize
The covers border size
{array} covers
The list of covers
{integer} coverSpacing
Spacing between covers
{boolean} displayTitle
Whether a title is displayed for each cover
{integer} displayTitleDuration
How long it takes the title to be displayed
{boolean} fadeEdges
Whether the coverflow edges are faded
{boolean} handleGesture
Whether the coverflow can be rotated
{boolean} handleOrientationChange
Whether the coverflow is automatically resized on orientation changes
{boolean} reflected
Whether reflection is displayed
{integer} size
The coverflow size
{integer} uId
Unique identifier
{integer} viewportWidth
The width of the viewport

Method Detail

  • {HTMLElement} getDomNode()
    Returns:
    {HTMLElement} The Cover Flow dom node
  • {integer} getPosition()
    Get current position
    Returns:
    {integer} the current position
  • setBackgroundColor(color)
    Updates the background color
    Parameters:
    {object} color
    The background color value
    {integer} color.r
    red Value
    {integer} color.g
    green Value
    {integer} color.b
    blue Value
  • setPosition(pos)
    Set position
    Parameters:
    {integer} pos
    The position to set
  • updateSize(size, viewportWidth)
    Updates the component sizes
    Parameters:
    {integer} size
    The component size
    {integer} viewportWidth
    The width of the viewport (viewable area)