define('application/views/onboarding', [
'rofl/widgets/verticallist',
'rofl/widgets/horizontallist',
'rofl/widgets/container',
'rofl/widgets/image',
'rofl/lib/l10n',
'rofl/widgets/label',
'rofl/lib/utils',
'rofl/widgets/carousel/aligners/basic',
'rofl/widgets/carousel',
'antie/widgets/carousel/binder',
'antie/widgets/carousel/keyhandlers/alignfirsthandler',
'application/widgets/detail/iconbutton',
'application/widgets/pointerfocusablebutton',
'application/widgets/onboarding/carousel',
'application/formatters/label',
'application/formatters/image',
'application/widgets/onboarding/bullets'
], function (
VerticalList,
HorizontalList,
Container,
Image,
L10n,
Label,
Utils,
BasicAligner,
Carousel,
Binder,
AlignFirstHandler,
IconButton,
Button,
OnboardingCarousel,
LabelFormatter,
ImageFormatter,
Bullets
) {
'use strict';
var l10n = L10n.getInstance(),
OnboardingView;
OnboardingView = VerticalList.extend({
/**
* Initialises the view.
*/
init: function init () {
init.base.call(this);
this.addClass('onboarding-view');
this._createLogo();
this._createBackButton();
this._createDescriptionCarousel();
this._createButtons();
this._createImageCarousel();
},
/**
* Before render event.
*
* @param {Object} e - The event data.
*/
setDataItem: function (e) {
var dataSource = e;
this._description.setOnboardingDataItem({
carousel: this._description,
aligner: new BasicAligner(this._description.getMask()),
formatter: LabelFormatter,
data: dataSource
});
this._screenImage.setOnboardingDataItem({
carousel: this._screenImage,
aligner: new BasicAligner(this._screenImage.getMask()),
formatter: ImageFormatter,
data: dataSource
});
this._indicators = this.appendChildWidget(new Bullets({
isFocusable: false,
count: this._description.getChildWidgetCount()
}));
},
/**
* Creates the logo section.
*
* @private
*/
_createLogo: function () {
var logo = this._logo = new Image(null, 'src/assets/images/kpn-tv.png');
logo.addClass('logo');
this.appendChildWidget(logo);
},
/**
* Builds the back info widget.
*
* @private
*/
_createBackButton: function () {
var backinfo = this._backButton = new IconButton(
'back-button',
l10n.get('onboarding.skipIntro'),
['icon', 'icon-back-v2']
);
this.appendChildWidget(backinfo);
},
/**
* Creates the description text box.
*
* @private
*/
_createDescriptionCarousel: function () {
var descriptionContainer = new Container(),
description = this._description = new OnboardingCarousel('', Carousel.orientations.HORIZONTAL);
descriptionContainer.addClass('description-carousel');
descriptionContainer.appendChildWidget(description);
this.appendChildWidget(descriptionContainer);
},
/**
* Creates the screen's image.
*
* @private
*/
_createImageCarousel: function () {
var screenImageContainer = new Container(),
screenImage = this._screenImage = new OnboardingCarousel('', Carousel.orientations.HORIZONTAL);
screenImageContainer.addClass('screen-image-carousel');
screenImageContainer.appendChildWidget(screenImage);
this.appendChildWidget(screenImageContainer);
},
/**
* Creates the buttons list.
*
* @private
*/
_createButtons: function () {
var buttons = this._buttons = new HorizontalList();
this._nextButton = new IconButton('next-button', l10n.get('onboarding.next'));
this._prevButton = new IconButton('previous-button', l10n.get('onboarding.previous'));
this._startButton = new IconButton('start-button', l10n.get('onboarding.start'));
buttons.addClass('action-buttons');
buttons.appendChildWidget(this._nextButton);
this.appendChildWidget(buttons);
},
/**
* Go to previous onboarding screen.
*/
prev: function () {
var currentIndex;
this._description.alignPrevious({
skipAnim: true
});
this._screenImage.alignPrevious({
skipAnim: true
});
currentIndex = this._description.getActiveChildIndex();
if (currentIndex === 0) {
this._buttons.removeChildWidget(this._prevButton);
this._nextButton.focus();
} else {
if (currentIndex === 0) {
this._buttons.removeChildWidget(this._prevButton);
this._nextButton.focus();
} else {
this._buttons.removeChildWidget(this._startButton);
this._buttons.appendChildWidget(this._nextButton);
this._prevButton.focus();
}
}
this._indicators.setActiveChildIndex(currentIndex);
},
/**
* Go to next onboarding screen.
*/
next: function () {
var dataLength = this._description.getChildWidgetCount(),
currentIndex;
this._description.alignNext({
skipAnim: true
});
this._screenImage.alignNext({
skipAnim: true
});
currentIndex = this._description.getActiveChildIndex();
if (currentIndex === dataLength - 1) {
this._buttons.removeChildWidget(this._nextButton);
this._buttons.appendChildWidget(this._startButton);
this._startButton.focus();
} else if (currentIndex === 1) {
this._buttons.insertChildWidget(0, this._prevButton);
this._nextButton.focus();
}
this._indicators.setActiveChildIndex(currentIndex);
},
/**
* Updated the screen description.
*
* @param {string} description - The screen description.
* @private
*/
_updateDescription: function (description) {
this._description.setText(description);
},
/**
* Updated the screen image.
*
* @param {string} imageUrl - The screen image.
* @private
*/
_updateImage: function (imageUrl) {
this._screenImage.setSrc(imageUrl);
},
/**
* Sets focus to the view.
*/
focus: function focus () {
focus.base.call(this);
this._buttons.focus();
}
});
return OnboardingView;
});