Source: widgets/carousel/carousel.js

define('application/widgets/carousel/carousel', [
    'rofl/widgets/carousel',
    'rofl/lib/utils',
    'rofl/lib/l10n',
    'rofl/widgets/label',
    'rofl/widgets/container',
    'application/widgets/pointerselectablebutton',
    'antie/widgets/carousel/strips/cullingstrip',
    'antie/runtimecontext',
    'antie/widgets/carousel/keyhandlers/activatefirsthandler',
    'application/widgets/carousel/horizontalcarouselaligner',
    'application/widgets/carousel/pointerhorizontalcontainer'
], function (
    Carousel,
    Utils,
    L10N,
    Label,
    Container,
    SelectableButton,
    CullingStrip,
    RuntimeContext,
    KeyHandler,
    Aligner,
    HorizontalList
) {
    'use strict';

    var l10n = L10N.getInstance(),
        defaultVisibleItems = 3,
        defaultWidth = 1440,
        defaultAssetType = 'live';

    return HorizontalList.extend({

        /**
         * Initialises the widget.
         *
         * @param {Object} initParams - Contains the carousel configuration.
         */
        init: function init (initParams) {
            var carouselConfig = initParams || {},
                visibleItems = carouselConfig.visibleItems || defaultVisibleItems,
                title = carouselConfig.title || '',
                width = carouselConfig.width || defaultWidth,
                pointerEnabled = carouselConfig.pointerEnabled || false,
                assetType = carouselConfig.assetType || defaultAssetType,
                assetWidth = carouselConfig.assetWidth,
                assetHeight = carouselConfig.assetHeight,
                assetFormatter = carouselConfig.formatter;

            init.base.call(this);

            this._carouselConfig = {
                visibleItems: visibleItems,
                carouselTitle: title ? l10n.get(title) : '',
                carouselWidth: width,
                pointerEnabled: pointerEnabled,
                assetType: assetType,
                assetWidth: assetWidth,
                assetHeight: assetHeight,
                formatter: assetFormatter
            };

            this.addClass('ui-carousel');

            this._build();
            this._setListeners();
        },

        /**
         * Builds the widget.
         *
         * @private
         */
        _build: function () {
            var carousel = this._carousel = new Carousel('', Carousel.orientations.HORIZONTAL),
                aligner = new Aligner(carousel.getMask()),
                keyHandler = new KeyHandler();

            carousel.setMaskLength(this._carouselConfig.carouselWidth);
            carousel.setContinuousListener(true);
            carousel.setAlignPoint(0);
            carousel.setNormalisedWidgetAlignPoint(0);
            aligner.setNumberOfItemsVisibleOnScreen(this._carouselConfig.visibleItems);
            carousel.setAligner(aligner);
            carousel.setWidgetStrip(CullingStrip);

            keyHandler.setAnimationOptions({
                duration: 300,
                easing: 'easeInOut',
                fps: 60,
                skipAnim: false
            });

            keyHandler.attach(carousel);

            this.appendChildWidget(carousel);
        },

        /**
         * Set the listeners for the carousel.
         **/
        _setListeners: function () {

            this._onSelectBound = Utils.bind(this._onSelect, this);
            this.addEventListener('select', this._onSelectBound);

            this._onSelectedItemChangeBound = Utils.bind(this._onSelectedItemChange, this);
            this.addEventListener('selecteditemchange', this._onSelectedItemChangeBound);
        },

        /**
         * On select event.
         *
         * @param {Object} ev - Select event.
         */
        _onSelect: function _onSelect (ev) {
            if (this._carouselConfig.pointerEnabled) {

                // Execute the _onSelect method for the parent widget.
                _onSelect.base.call(this._carousel, ev);
            }
        },

        /**
         * On selected item change event.
         *
         * @param {Object} ev - Selected item change event.
         */
        _onSelectedItemChange: function _onSelectedItemChange (ev) {
            if (this._carouselConfig.pointerEnabled) {

                // Execute the _onSelectedItemChange method for the parent widget.
                _onSelectedItemChange.base.call(this, ev);
            }
        },

        /**
         * Sets the data item.
         *
         * @param {Object} items - The items.
         */
        setDataItem: function (items) {
            var titleParams = {
                text: this._carouselConfig.carouselTitle,
                classNames: ['title'],
                enableHTML: true
            };

            this._carousel.removeAll();

            if (this._carouselConfig.carouselTitle) {
                this.insertChildWidget(0, new Label(titleParams));
            }

            Utils.each(items, Utils.bind(this._createAsset, this));
        },

        /**
         * Creates and appends the given asset item to the carousel.
         *
         * @param {Object} item - The vod or program object to add to the carousel.
         */
        _createAsset: function (item) {
            var asset,
                formatter;

            formatter = new this._carouselConfig.formatter();
            asset = formatter.format(item);

            this._carousel.append(asset, this._carouselConfig.assetWidth);
        }
    });
});