Class: HorizontalCarousel

HorizontalCarousel

new HorizontalCarousel(idopt, itemFormatteropt, dataSourceopt)

The HorizontalCarousel widget extends the HorizontalList widget to modify the animation behaviour to render a carousel rather than a list.
Parameters:
Name Type Attributes Description
id String <optional>
 The unique ID of the widget. If excluded, a temporary internal ID will be used (but not included in any output).
itemFormatter antie.Formatter <optional>
 A formatter class used on each data item to generate the list item child widgets.
dataSource antie.DataSource | Array <optional>
 An array of data to be used to generate the list items, or an asynchronous data source.
Deprecated:
  • This class is deprecated in favour of of antie.widgets.carousel
Source:
Requires:
  • module:antie.widgets.List
  • module:antie.events.KeyEvent

Extends

Requires

  • module:antie.widgets.List
  • module:antie.events.KeyEvent

Methods

_moveChildWidgetSelection()

Finds a selectable widget in the specified direction and moves the focus to it.
Source:

addClass(className)

Adds a CSS class to the widget if not already present.
Parameters:
Name Type Description
className String The class name to add.
Inherited From:
Source:

addEventListener(ev, func)

Add an event listener function to this widget.
Parameters:
Name Type Description
ev String The event type to listen for (e.g. keydown)
func function The handler to be called when the event is fired.
Inherited From:
Source:
See:

appendChildWidget(widget)

Appends a child widget to this widget, creating a new list item.
Parameters:
Name Type Description
widget antie.widgets.Widget The child widget to add.
Inherited From:
Source:

bindProgressIndicator(widget, formatterCallbackopt)

Binds a progress indicator widget to this list.
Parameters:
Name Type Attributes Description
widget antie.Widgets.HorizontalProgress The progress indicator widget.
formatterCallback function <optional>
 A function that tkes the current item index and the total number of items and returns a string to popular the progress indicator's label.
Inherited From:
Source:

broadcastEvent()

Broadcasts an event from the application level to every single object it contains.
Inherited From:
Source:

bubbleEvent(ev)

Bubbles an event from object, triggering any event listeners bound to this widget and any parent widgets. To halt bubbling of the event, see antie.events.Event#stopPropagation.
Parameters:
Name Type Description
ev antie.events.Event The event to bubble.
Inherited From:
Source:
See:

fireEvent(ev)

Fires an event on this object, triggering any event listeners bound to this widget only. Note: this does not bubble or propagate the event to other widgets, for that functionality see #bubbleEvent.
Parameters:
Name Type Description
ev antie.events.Event The event to fire.
Inherited From:
Source:
See:

focus()

Moves focus to a button within this container. Focused button will be that which follows the current 'active' path.
Inherited From:
Source:
Returns:
Boolean true if focus has been moved to a button. Otherwise returns false.

getActiveChildWidget()

Get the current active widget.
Inherited From:
Source:
Returns:
The current active widget

getAlignment() → {Integer}

Get the current alignment of the active item.
Source:
Returns:
One of HorizontalCarousel.ALIGNMENT_CENTER, HorizontalCarousel.ALIGNMENT_LEFT or HorizontalCarousel.ALIGNMENT_RIGHT.
Type
Integer

getAlignmentOffset() → {Integer}

Get the current alignment offest of the active item.
Source:
Returns:
Type
Integer

getChildWidget(id)

Get a child widget from its unique ID.
Parameters:
Name Type Description
id String The id of the child widget to return.
Inherited From:
Source:
Returns:
antie.widgets.Widget of the widget with the given ID, otherwise undefined if the child does not exist.

getChildWidgetCount()

Gets the number of direct child widgets.
Inherited From:
Source:
Returns:
The number of direct child widgets.

getChildWidgets()

Get an array of all this widget's children.
Inherited From:
Source:
Returns:
An array of all this widget's children.

getClasses()

Get an array of class names that this widget has.
Inherited From:
Source:
Returns:
An array of class names (Strings)

getComponent()

Returns the component this widget is a descendant of
Inherited From:
Source:

getCurrentApplication()

Gets a reference to the application responsible for creating the widget.
Inherited From:
Source:
See:
  • antie.RuntimeContext

getDataItem()

Get any data item associated with this widget.
Inherited From:
Source:

getSelectedChildWidgetIndex()

Returns this index of the currently selected child widget.
Source:

getWidgetAnimationDuration() → {Integer}

Get the duration of the active widget selection animation.
Source:
Returns:
Type
Integer

getWidgetAnimationEasing() → {String}

Get the current alignment of the active item.
Source:
Returns:
Type
String

getWidgetAnimationFPS() → {Integer}

Get the frames per second of the active widget selection animation.
Source:
Returns:
Type
Integer

hasChildWidget(id)

Checks to see if a specific widget is a direct child of this widget.
Parameters:
Name Type Description
id String The widget id of the widget to check to see if it is a direct child of this widget.
Inherited From:
Source:

hasClass(className)

Checks to see if the widget has a given CSS class.
Parameters:
Name Type Description
className String The class name to check.
Inherited From:
Source:
Returns:
Boolean true if the device has the className. Otherwise boolean false.

hide(options)

Hides a widget. If animation is enabled the widget will be faded out of view.
Parameters:
Name Type Description
options Object Details of the element to be shown, with optional parameters.
Properties
Name Type Attributes Default Description
skipAnim Boolean <optional>
 By default the showing of the element will be animated (faded in). Pass true here to prevent animation.
onComplete function <optional>
 Callback function to be called when the element has been shown.
fps Number <optional>
 25 Frames per second for fade animation.
duration Number <optional>
 840 Duration of fade animation, in milliseconds (ms).
easing String <optional>
 linear Easing style for fade animation.
Inherited From:
Source:
Returns:
Boolean true if animation was called, otherwise false

insertChildWidget(index, widget)

Inserts a child widget at the specified index.
Parameters:
Name Type Description
index Integer The index where to insert the child widget.
widget antie.widgets.Widget The child widget to add.
Inherited From:
Source:

isComponent() → {Boolean}

Returns whether the widget is a Component.
Inherited From:
Source:
Returns:
True if the widget is a Component.
Type
Boolean

isFocusable()

Checks to see if a widget is focussable, i.e. contains an enabled button.
Inherited From:
Source:
See:

isFocussed()

Get if this widget is in the current focus path.
Inherited From:
Source:
Returns:
Boolean true if this widget is in the focus path, otherwise false.

moveTo(options)

Moves a widget so that its top-left corner is at the given position.
Parameters:
Name Type Description
options Object Details of the element to be shown, with optional parameters.
Properties
Name Type Attributes Default Description
skipAnim Boolean <optional>
 By default the showing of the element will be animated (faded in). Pass true here to prevent animation.
onComplete function <optional>
 Callback function to be called when the element has been shown.
fps Number <optional>
 25 Frames per second for fade animation.
duration Number <optional>
 840 Duration of fade animation, in milliseconds (ms).
easing String <optional>
 linear Easing style for fade animation.
Inherited From:
Source:
Returns:
Boolean true if animation was called, otherwise false

prependWidget(widget)

Inserts a widget before the current one.
Parameters:
Name Type Description
widget antie.widgets.Widget The child widget to add.
Inherited From:
Source:

rebindDataSource()

Re-iterates the data source, recreating list items.
Overrides:
Source:

removeChildWidget(widget, retainElementopt)

Removes a specific child widget from this widget.
Parameters:
Name Type Attributes Description
widget antie.widgets.Widget The child widget to remove.
retainElement Boolean <optional>
 Pass true to retain the child output element of the given widget
Inherited From:
Source:

removeChildWidgets()

Remove all child widgets from this widget.
Inherited From:
Source:

removeClass(className)

Removes a CSS class from the widget if present.
Parameters:
Name Type Description
className String The class name to remove.
Inherited From:
Source:

removeEventListener(ev, func)

Removes an event listener function to this widget.
Parameters:
Name Type Description
ev String The event type that the listener is to be removed from (e.g. keydown)
func function The handler to be removed.
Inherited From:
Source:
See:

removeFocus()

Remove focus state from this widget.
Inherited From:
Source:

render(device)

Renders the widget and any child widgets to device-specific output.
Parameters:
Name Type Description
device antie.devices.Device The device to render to.
Overrides:
Source:
Returns:
A device-specific object that represents the widget as displayed on the device (in a browser, a DOMElement);

resetDataBindings()

Invalidates the data-related bindings - causing items to be re-created on next render;
Inherited From:
Source:

selectNextChildWidget()

Selects the next widget in the carousel.
Source:

selectPreviousChildWidget()

Moves the selection to the previous focusable child widget.
Source:

setActivateThenScroll(wrap)

Set whether to activate the next item then scroll. By default, the carousel will be scrolled, then the new item activated once the scrolling has finished. Note: If set to true, you must make sure your styling of activated/focussed items do not behave strangely where the carousel wraps.
Parameters:
Name Type Description
wrap Boolean Pass true to activate then scroll. Pass false to scroll then activate (default).
Source:

setActiveChildIndex(index)

Attempts to set focus to the child widget at the given index.
Parameters:
Name Type Description
index Integer Index of the child widget to set focus to.
Overrides:
Source:
See:
Returns:
Boolean true if the child widget was focusable, otherwise boolean false.

setActiveChildWidget(widget, repositionopt)

Attempt to set focus to the given child widget.
Parameters:
Name Type Attributes Description
widget antie.widgets.Widget The child widget to set focus to.
reposition Boolean <optional>
 Set to true if you want to scroll the carousel to the new item.
Overrides:
Source:
Returns:
Boolean true if the child widget was focusable, otherwise boolean false.

setAlignment(align)

Set the alignment of the active item.
Parameters:
Name Type Description
align Integer One of HorizontalCarousel.ALIGNMENT_CENTER (default), HorizontalCarousel.ALIGNMENT_LEFT or HorizontalCarousel.ALIGNMENT_RIGHT.
Source:

setAlignmentOffset(offset)

Set the alignment offsetof the active item.
Parameters:
Name Type Description
offset Integer
Source:

setAnimationOverride(repositionopt)

turns animation on/off
Parameters:
Name Type Attributes Description
reposition Boolean <optional>
 Set to true if you want the carousel to animate
Source:

setDataItem(dataItem)

Associate a data item with this widget.
Parameters:
Name Type Description
dataItem object Object to associate with this widget.
Inherited From:
Source:

setDataSource(dataSource)

Binds the list to a different data source. If the list is already rendered, the output will be updated to reflect the new data.
Parameters:
Name Type Description
dataSource antie.DataSource The data source to bind to.
Overrides:
Source:

setHasMultiWidthItems(multiWidthItems)

Set whether the carousel contains items of differing widths. When all items are the same width, we can enabled additional optimisations
Parameters:
Name Type Description
multiWidthItems Boolean Pass true if the carousel contains items of differing widths.
Source:

setRenderMode(mode)

Sets the rendering mode to either List.RENDER_MODE_CONTAINER or List.RENDER_MODE_LIST. List.RENDER_MODE_CONTAINER causes the list to be rendered as a generic container (e.g. <div>), with a generic container for each list item. List.RENDER_MODE_LIST causes the list to be rendered as a list (e.g. <ul>), with list item elements (e.g. <li>) for each item.
Parameters:
Name Type Description
mode Integer The rendering mode to use.
Inherited From:
Source:

setViewportMode(viewportMode, size)

Set method used to control which carousel items are in this rendered DOM
Parameters:
Name Type Description
viewportMode Integer One of HorizontalCarousel.VIEWPORT_MODE_NONE, HorizontalCarousel.VIEWPORT_MODE_DOM or HorizontalCarousel.VIEWPORT_MODE_CLASSES.
size Integer Number of items in the viewport.
Source:

setWidgetAnimationDuration(duration)

Set the duration of the active widget selection animation.
Parameters:
Name Type Description
duration Integer
Source:

setWidgetAnimationEasing(easing)

Set the easing style of the active widget selection animation.
Parameters:
Name Type Description
easing String Acceptable values are: bounce bouncePast easeFrom easeTo easeFromTo easeInCirc easeOutCirc easeInOutCirc easeInCubic easeOutCubic easeInOutCubic easeInQuad easeOutQuad easeInOutQuad easeInQuart easeOutQuart easeInOutQuart easeInQuint easeOutQuint easeInOutQuint easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeOutBounce easeInBack easeOutBack easeInOutBack elastic swingFrom swingTo swingFromTo
Source:

setWidgetAnimationFPS(fps)

Set the frames per second of the active widget selection animation.
Parameters:
Name Type Description
fps Integer
Source:

setWrapMode(wrapMode)

Set whether to support wrapping within the carousel.
Parameters:
Name Type Description
wrapMode Integer Pass HorizontalCarousel.WRAP_MODE_NONE for no wrapping. Pass HorizontalCarousel.WRAP_MODE_NAVIGATION_ONLY to allow navigation to wrap. Pass HorizontalCarousel.WRAP_MODE_VISUAL to visually wrap the carousel (includes navigation).
Overrides:
Source:

show(options)

Shows the carousel.
Parameters:
Name Type Description
options Object Details of the element to be shown, with optional parameters.
Properties
Name Type Attributes Default Description
skipAnim Boolean <optional>
 By default the showing of the element will be animated (faded in). Pass true here to prevent animation.
onComplete function <optional>
 Callback function to be called when the element has been shown.
fps Number <optional>
 25 Frames per second for fade animation.
duration Number <optional>
 840 Duration of fade animation, in milliseconds (ms).
easing String <optional>
 linear Easing style for fade animation.
Overrides:
Source:
Returns:
Boolean true if animation was called, otherwise false

unbindProgressIndicator()

Unbinds a previously-bound progress indicator widget.
Inherited From:
Source: