Module: alfresco/lists/views/layouts/Carousel

alfresco/lists/views/layouts/Carousel

This module can be used to display multiple items in a horizontal strip that can be scrolled through use previous and next buttons. It was written to support the filmstrip view which uses both this module (and the extending module DocumentCarousel to show both the entire contents of a folder and a preview of the currently selected item.
Author:
  • Dave Draper
Copyright:
  • Copyright (C) 2005-2020 Alfresco Software Limited
License:
Source:

Extends

Mixes In

Members

cssRequirements :object[]

An array of the CSS files to use with this widget.
Type:
  • object[]
Default Value:
  • [{cssFile:"./css/Carousel.css"}]
Source:

currentLeftPosition :number

This keeps track of the current left position (e.g. the setting that controls what items you can see within the clipped frame). This value is updated by the onPrevClick and [onNextClick]{@link module:alfresco/lists/views/layouts/Carousel#onNextClick} functions.
Type:
  • number
Default Value:
  • 0
Source:

<readonly> defaultNextArrow :object

This is the default next arrow. It can be overridden using the nextArrow property. It should not be used directly.
Type:
  • object
Since:
  • 1.0.41
Source:

<readonly> defaultPrevArrow :object

This is the default previous arrow. It can be overridden using the prevArrow property. It should not be used directly.
Type:
  • object
Since:
  • 1.0.41
Source:

firstDisplayedIndex :number

This keeps track of the first displayed item in the currently visible frame.
Type:
  • number
Default Value:
  • 0
Source:

height :string

This can be set to a value (in pixels) to fix the height. If this is left as null then a suitable height will attempt to be calculated
Type:
  • string
Default Value:
  • null
Source:

i18nRequirements :object[]

An array of the i18n files to use with this widget.
Type:
  • object[]
Since:
  • 1.0.41
Default Value:
  • [{i18nFile: "./i18n/Carousel.properties"}]
Source:

itemWidth :number

Sets the width of each item (in pixels)
Type:
  • number
Default Value:
  • 100
Source:

lastDisplayedIndex :number

This keeps track of the lasts displayed item in the currently visible frame
Type:
  • number
Default Value:
  • null
Source:
Sets the width to allow for the next and previous buttons
Type:
  • number
Default Value:
  • 40
Source:

nextArrow :object

This property can be used to customise the arrow used in the carousel. The values within this object correspond to the properties of an Image widget, which should be used as a reference of available properties.

NOTE: All defaults are as they are in the Image widget, apart from srcType which instead defaults to FULL_PATH.

Type:
  • object
Since:
  • 1.0.41
Default Value:
  • null
Source:
See:

prevArrow :object

This property can be used to customise the arrow used in the carousel. The values within this object correspond to the properties of an Image widget, which should be used as a reference of available properties.

NOTE: All defaults are as they are in the Image widget, apart from srcType which instead defaults to FULL_PATH.

Type:
  • object
Since:
  • 1.0.41
Default Value:
  • null
Source:
See:

templateString :String

The HTML template to use for the widget.
Type:
  • String
Source:

useInfiniteScroll :boolean

Whether the list that's creating this view has infinite scroll turned on
Type:
  • boolean
Since:
  • 1.0.32
Default Value:
  • false
Source:

Methods

calculateSizes()

Gets the available dimensions of the DOM node in preparation for resizing the widget components. This also works out how many items should be shown within the current viewing frame.
Source:

onNextClick(evt)

Handles the user clicking on the previous items navigation control.
Parameters:
Name Type Description
evt object The click event
Source:

onPrevClick(evt)

Handles the user clicking on the previous items navigation control.
Parameters:
Name Type Description
evt object The click event
Source:

postCreate()

Calls processWidgets
Source:

processWidgets(widgets, rootNode)

Extends the inherited function to add an additional li element for each item.
Parameters:
Name Type Description
widgets array The widgets to create
rootNode element The DOM element to add them into.
Source:

renderDisplayedItem(widget, index)

Attempts to render a widget that is currently displayed in the viewing frame.
Parameters:
Name Type Description
widget object The widget to render
index number The index of the widget within the array
Source:

renderDisplayedItems()

Iterates over the processed widgets between the [first]{@link module:alfresco/lists/views/layouts/Carousel#firstDisplayedIndex} and last indices calling the render function on each to ensure they display themselves correctly
Source:
Fires:

resize()

This function is called once all widgets have been added onto the page. At this point it can be assumed that the widget has been placed into the DOM model and has some dimensions to work with
Source:

resizeContainer()

Resizes the container that holds all the items (some of which may be hidden from view). It sets the width by multiplying the number of items by the item width. This specific resizing has been abstracted to it's own function so that it can be easily re-used by extending widgets that may wish to call it (such as the DocumentCarousel)
Source:

selectItem(payload)

Handles requests to select an item
Parameters:
Name Type Description
payload object
Source:

setupNavigationArrows()

Configured and create the navigation arrows.
Since:
  • 1.0.41
Source: