define('application/widgets/guide/pointerhorizontalcontainer', [
'application/widgets/guide/horizontalcarousel',
'rofl/widgets/container',
'rofl/lib/utils',
'application/widgets/pointerselectablebutton'
], function (
Carousel,
Container,
Utils,
SelectableButton
) {
'use strict';
return Container.extend({
/**
* Initialises the Container.
*
* @param {Object} items - Items.
* @param {number} day - Selected day filter index.
* @param {Date} filterData - Filter date object.
* @param {Array} daysArray - Days array..
*/
init: function init (items, day, filterData, daysArray) {
init.base.call(this);
this.addClass('pointerhorizontalcontainer');
this._createPointerContainers();
this._createCarousel(items, day, filterData, daysArray);
this._onSelectBound = Utils.bind(this._onSelect, this._carousel);
this.addEventListener('select', this._onSelectBound);
this._onSelectedItemChangeBound = Utils.bind(this._onSelectedItemChange, this);
this.addEventListener('selecteditemchange', this._onSelectedItemChangeBound);
this._channelId = items && items[0].getChannelId();
},
/**
* Returns left pointer button.
*
* @returns {Object} Left pointer button.
*/
getLeftPointerContainer: function () {
return this._leftPointer;
},
/**
* Returns right pointer button.
*
* @returns {Object} Right pointer button.
*/
getRightPointerContainer: function () {
return this._rightPointer;
},
/**
* Returns carousel widget.
*
* @returns {Object} Carousel widget.
*/
getCarousel: function () {
return this._carousel;
},
/**
* Aligns the carousel to a specific index.
*
* @param {number} index - The index.
* @param {Object} [options] - The alignment options.
*/
alignToIndex: function (index, options) {
this._carousel.alignToIndex(index, options);
},
/**
* Aligns the carousel to a specific time of day.
*
* @param {string|number} time - The time.
* @param {Object} [options] - The alignment options.
* @param {number} [position] - The carousel position.
*/
alignToTimeOfDay: function (time, options, position) {
this._carousel.alignToTimeOfDay(time, options, position);
},
/**
* Aligns the carousel to a position.
*
* @param {number} position - Position 0 for the start, 1 for the end.
* @param {Object} [options] - The alignment options.
*/
alignToPosition: function (position, options) {
this._carousel.alignToPosition(position, options);
},
/**
* Returns active asset in carousel.
*
* @returns {Object} - Carousel widget.
*/
getCarouselActiveAsset: function () {
return this._carousel.getCarouselActiveAsset();
},
/**
* Activates the last item in the row.
*
* @param {Object} animOptions - The animation options.
*/
activateLast: function (animOptions) {
this._carousel.activateLast(animOptions);
},
/**
* Returns the index from left.
*
* @returns {number} - The left index.
*/
getFromLeftIndex: function () {
return this._carousel.getFromLeftIndex();
},
/**
* Returns the index currently active widget.
*
* @returns {number} - Currently active widget index.
*/
getActiveIndex: function () {
return this._carousel.getActiveIndex();
},
/**
* Returns the mask of the carousel.
*
* @returns {Object} - Carousel mask widget.
*/
getMask: function () {
return this._carousel.getMask();
},
/**
* Instantly completes any in-flight alignment animations, firing any callbacks that were provided.
* If several alignments have been queued, all will complete in order.
*/
completeAlignment: function () {
this._carousel.completeAlignment();
},
/**
* 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);
},
/**
* Creates a carousel with parameters.
*
* @param {Object} items - Items.
* @param {number} day - Selected day filter index.
* @param {Date} filterData - Filter date object.
* @param {Array} daysArray - Days array..
* @private
*/
_createCarousel: function (items, day, filterData, daysArray) {
var carousel = this._carousel = new Carousel(items, day, filterData, daysArray);
this.appendChildWidget(carousel);
},
/**
* Select event.
*
* @param {event} e - Passed select event.
*/
_onSelect: function (e) {
var target = e.target,
options = {
duration: 300,
fps: 60,
easing: 'easeInOut',
skipAnim: false
};
if (this.isFocussed()) {
if (target.hasClass('left-pointer')) {
this.alignPrevious(options);
} else if (target.hasClass('right-pointer')) {
this.alignNext(options);
}
}
},
/**
* Selected item change event.
*
* @param {Object} e - The event data.
* @private
*/
_onSelectedItemChange: function (e) {
this.determinePointers(e.index);
},
/**
* Determines the pointers.
*
* @param {number} index - The new index.
*/
determinePointers: function (index) {
var left = this._leftPointer,
right = this._rightPointer;
if (index === 0) {
if (!left.hasClass('hidden')) {
left.addClass('hidden');
}
} else if (index === this._carousel.getChildWidgetCount() - 1) {
if (!right.hasClass('hidden')) {
right.addClass('hidden');
}
} else {
if (right.hasClass('hidden')) {
right.removeClass('hidden');
}
if (left.hasClass('hidden')) {
left.removeClass('hidden');
}
}
},
/**
* Disposes of the widget.
*/
dispose: function dispose () {
dispose.base.call(this);
Utils.each(this._carousel.getChildWidgets(), function (widget) {
widget.dispose();
});
},
/**
* Returns the channel id.
*
* @returns {number} - The channel id.
*/
getChannelId: function () {
return this._channelId;
}
});
});