MAF.element.SlideCarousel
This component is intended for single use only. Please do not nest the component in itself or other complex components to create an two dimentional navigation. If this is the design you need, please contact us.
- Each cell is fixed in size.
- The SlideCarousel is a container recieving info from its cells to have a single entry point to listen on.
- All cells are based on descendants of MAF.element.SlideCarouselCell
- cellCreator() is a required method that returns a cell with no data.
- cellUpdater() is a required method that will update a cell with data.
new MAF.element.SlideCarousel()
Example
new MAF.element.SlideCarousel({
visibleCells: 5,
focusIndex: 3,
orientation: 'horizontal',
blockFocus: 'false',
slideDuration: 0.3,
cellCreator: function () {
var cell = new MAF.element.SlideCarouselCell({
events: {
onSelect: function (event) {
log('Selected', this.getDataItem());
}
}
});
cell.text = new MAF.element.Text({
styles: {
color: 'white'
}
}).appendTo(cell);
return cell;
},
cellUpdater: function (cell, data) {
cell.text.setText(data.label);
}
}).appendTo(this);Configs
animate : {Boolean}
Whether or not to animate when navigating.
blockFocus : {Boolean}
This determines whether the grid can have focus at all.
carousel : {Boolean}
Whether or not to behave as a carousel.
dynamicFocus : {Boolean}
This enables focusing cells without sliding.
dynamicFocusEnd : {Number}
The threshold from the right before sliding.
dynamicFocusStart : {Number}
The threshold from the left before sliding.
focusIndex : {Number}
indicates which position is always focused.
orientation : {String}
Or vertical.
slideDuration : {Number}
Duration of the sliding animation.
slideEase : {String}
Easing function to use when animating.
subCells : {Number}
Number of sub cells in each cell.
visibleCells : {Number}
Number of cells visible for the viewer.
Methods
ableToNavigate(pos) → {Boolean}
Check if able to navigate to position.
Parameters:
Name Type Description pos Number Position to check to navigate to.
Returns:
attachAccessories(arguments)
Attach multiple accessory components to this component.
Parameters:
Name Type Description arguments Array Contains muliple accessory components.
Returns:
This component.
attachAccessory(accessory)
Attach a accessory component to this component so it can update on grid events.
Parameters:
Name Type Description accessory Class The accessory component.
Returns:
This component.
changeDataset(data, reset, dataLength)
Parameters:
Name Type Argument Default Description data Array Data objects that will change the content of the carousel.
reset Boolean optional false This will reset the item the carousel will display to 0 when true.
dataLength Number optional When the dataset will be larger then the passed in array in length.
Fires:
collectPage(pagenum)
Sets the the page to pagenum.
Parameters:
Name Type Description pagenum Number Pagenumber to set the internal pager to.
focus()
Sets the focus to the carousel's current cell.
focusCell(target)
Method for focussing a specific cell or dataitem in your grid.
Parameters:
Name Type Description target integer index which as to be focused and aligned with the proper focusIndex cell.
freeze() → {Class} inherited
Freezes this component. Screen renders no longer trigger until thawed.
Returns:
This component.
getAbsolutePosition() → {Object} inherited
Give back the position relative to its first positioned ancestor element
Returns:
{hOffset:Number, vOffset: Number}
getCellByDataIndex(index) → {Object}
Parameters:
Name Type Description index Number Cell-index to retrieve the cell for.
Returns:
Returns the cell's or undefined when not found.
getCellDataIndex() → {Object}
Returns:
returns the dataIndex
getCellDataItem(c) → {Any}
Parameters:
Name Type Description c Object Cell to get the data item from.
Returns:
Returns the cell's data item.
getCellDimensions() → {Object}
Returns:
With the width and height of the cells for the grid.
getCurrentCell() → {Object}
Returns:
Returns the current cell.
getCurrentPage()
Returns:
The zero-based index of the current page of data.
getFocusIndex() → {Object}
Returns:
returns the focusIndex
getPageCount()
Returns:
this.mainCollection.length. The number of items in the dataset.
getView() → {Class} inherited
Returns:
Returns the view this class is appended on.
getVisibleCells() → {Object}
Returns:
returns the visibleCells
hide() → {Class} inherited
Hides this component.
Returns:
This component.
initialize() inherited
Initialize the class
setFocusIndex()
Sets the focusIndex property.
setVisibleCells()
Sets the visibleCells property.
shift(the)
Method for animating your SlideCarousel with a different component.
Parameters:
Name Type Description the String direction the carousel has to slide.
show() → {Class} inherited
Shows this component.
Returns:
This component.
thaw() → {Class} inherited
Thawes this component. Screen renders can trigger again.
Returns:
This component.
Events
onAnimationEnded
Fired when a animation on this component has ended.
onAppend
Fired when component has appended to a parent. Update visual appearances by applying a Theme style and rendering the skin.
onBlur
Fired when the component is blurred.
onDatasetChanged
Fired when the data set of the grid has changed.
onFocus
Fired when the component recieves focus.
onNavigate
Fired when a navigation happens when the component has focus.
onSelect
Fired when the component is selected.
onSlideDone
Fired when the slide navigation is complete.
onStateUpdated
Fired when state of the grid is updated/changed.