define('application/widgets/uibuilder/herocarousel', [
'rofl/widgets/carousel',
'rofl/widgets/container',
'rofl/widgets/label',
'application/formatters/vodasset',
'antie/widgets/carousel/strips/cullingstrip',
'rofl/lib/utils',
'antie/runtimecontext',
'antie/widgets/carousel/keyhandlers/activatefirsthandler',
'rofl/widgets/carousel/aligners/basic',
'application/widgets/uibuilder/watchall',
'application/widgets/pointerselectablebutton',
'application/widgets/uibuilder/hero'
], function (
Carousel,
Container,
Label,
VodFormatter,
CullingStrip,
Utils,
RuntimeContext,
KeyHandler,
Aligner,
WatchAll,
SelectableButton,
HeroAbstract
) {
'use strict';
var layout = RuntimeContext.getCurrentApplication().getLayout();
return HeroAbstract.extend({
/**
* Initialises the widget.
*
* @param {Object} data - The Carousel model.
* @param {Object} [heroParams] - Specific params to use for the carousel.
* @param {Object} [heroParams.layout] - Asset layout.
* @param {Object} [heroParams.formatter] - Asset formatter.
* @param {Object} [heroParams.numberOfVisibleItemsOnScreen] - Max number of visible items.
*/
init: function init (data, heroParams) {
init.base.call(this, data, heroParams);
this._setListeners();
this.addClass('ui-hero-carousel');
},
/**
* Renders the widget.
*
* @param {Object} device - The device.
* @returns {Object} - The output element.
*/
render: function render (device) {
var outputElement = render.base.call(this, device);
this._carousel.alignToIndex(this._lastAlignedIndex);
return outputElement;
},
/**
* BeforeHide event.
*/
onBeforeHide: function () {
this._removeListeners();
},
/**
* Set the listeners for the carousel.
**/
_setListeners: function () {
this._onSelectedItemChangeBound = Utils.bind(this._onSelectedItemChange, this);
this.addEventListener('selecteditemchange', this._onSelectedItemChangeBound);
},
/**
* Set the listeners for the carousel.
**/
_removeListeners: function () {
this.removeEventListener('selecteditemchange', this._onSelectedItemChangeBound);
},
/**
* On selected item change event.
*
* @param {Object} e - Selected item change event.
*/
_onSelectedItemChange: function (e) {
this._lastAlignedIndex = e.index;
if (e.index === 0) {
this._leftPointer.hide({skipAnim: true});
} else {
this._leftPointer.show({skipAnim: true});
}
if (e.index === this._carousel.getChildWidgetCount() - 1) {
this._rightPointer.hide({skipAnim: true});
} else {
this._rightPointer.show({skipAnim: true});
}
},
/**
* Creates the carousel.
*
* @param {Object} data - The hero model.
* @param {Object} [heroParams] - Specific params to use for the hero carousel.
* @private
*/
_buildHero: function (data, heroParams) {
this._buildCarousel(data, heroParams);
this._createPointerContainers();
},
/**
* Builds the carousel styled hero.
*
* @param {Object} data - The hero model.
* @param {Object} heroParameters - Specific params to use for the hero carousel.
* @private
*/
_buildCarousel: function (data, heroParameters) {
var carousel = this._carousel = new Carousel('', Carousel.orientations.HORIZONTAL),
heroParams = this._heroParams = heroParameters || {},
keyHandler = new KeyHandler(),
aligner,
formatter = heroParams.formatter || VodFormatter,
assetLayout = heroParams.layout || layout.sports.editorialBlock,
assetWidth = assetLayout.width;
carousel.setWidgetStrip(CullingStrip);
carousel.setMaskLength(layout.requiredScreenSize.width);
aligner = new Aligner(carousel.getMask());
keyHandler.setAnimationOptions({
duration: 300,
easing: 'easeInOut',
fps: 60,
skipAnim: false
});
keyHandler.attach(carousel);
formatter = new formatter();
Utils.each(data, function (item) {
carousel.append(formatter.format(item), (assetWidth));
});
carousel.setAligner(aligner);
carousel.setContinuousListener(true);
carousel.setAlignPoint(assetLayout.alignPoint);
carousel.setNormalisedAlignPoint(0);
carousel.setNormalisedWidgetAlignPoint(0);
this._lastAlignedIndex = Math.floor(data.length / 2);
this.appendChildWidget(carousel);
},
/**
* Creates container containing pointer buttons.
*
* @private
*/
_createPointerContainers: function () {
var leftPointer = this._leftPointer = new SelectableButton(),
leftPointerImage = new Container(),
rightPointer = this._rightPointer = new SelectableButton(),
rightPointerImage = new Container();
leftPointerImage.addClass('arrow');
rightPointerImage.addClass('arrow');
leftPointer.addClass(['pointer-button-big', 'left-pointer']);
rightPointer.addClass(['pointer-button-big', 'right-pointer']);
leftPointer.appendChildWidget(leftPointerImage);
rightPointer.appendChildWidget(rightPointerImage);
this.appendChildWidget(leftPointer);
this.appendChildWidget(rightPointer);
},
/**
* Builds the background image. N/A for carousel hero.
*
* @override
* @private
*/
_buildImage: function () {},
/**
* Builds the gradients. N/A for carousel hero.
*
* @override
* @private
*/
_buildGradients: function () {},
/**
* Builds the titles. N/A for carousel hero.
*
* @override
* @private
*/
_buildTitles: function () {},
/**
* Builds the action list. N/A for carousel hero.
*
* @override
* @private
*/
_buildActionList: function () {},
/**
* Returns the carousel.
*
* @returns {Object} - The carousel.
*/
getCarousel: function () {
return this._carousel;
},
/**
* Sets carousel focus.
*/
setButtonActiveChildIndex: function () {
this._carousel.focus();
}
});
});