define('application/widgets/warmwelcome/overlay', [
'rofl/widgets/container',
'application/widgets/warmwelcome/content',
'application/widgets/detail/iconbutton',
'application/managers/session',
'rofl/lib/l10n',
'rofl/events/keyevent',
'antie/runtimecontext',
'rofl/lib/utils',
'rofl/widgets/image',
'application/managers/feature',
'rofl/analytics/web/google'
], function (
Container,
Content,
IconButton,
SessionManager,
L10N,
KeyEvent,
RuntimeContext,
Utils,
Image,
FeatureManager,
GoogleAnalytics
) {
'use strict';
var application = RuntimeContext.getCurrentApplication(),
featureManager = FeatureManager.getInstance(),
l10n = L10N.getInstance(),
backInfoConfig = {
id: 'infoblock',
text: l10n.get('warmwelcome.skipIntro'),
classname: ['icon', 'icon-back-v2']
},
GA = GoogleAnalytics.getInstance();
return Container.extend({
/**
* Initialises the replay component.
*/
init: function init () {
init.base.call(this, 'warm-welcome');
this._activeIndex = 1;
this._isActive = false;
this._build();
this._onSelectBound = Utils.bind(this._onSelect, this);
},
/**
* Builds the component.
*
* @private
*/
_build: function () {
if (featureManager.isBrandingEnabled()) {
this._buildLogo();
}
this._buildBackInfo();
this._buildContentContainer();
this._buildContentOne();
this._buildContentTwo();
this._buildContentThree();
this._buildContentFour();
this._buildContentFive();
this._buildContentSix();
// this._buildContentSeven();
// this._buildContentEight();
},
/**
* Builds the container for content.
*
* @private
*/
_buildContentContainer: function () {
var contentContainer = this._contentContainer = new Container('content');
this.appendChildWidget(contentContainer);
},
/**
* Builds the first content view.
*
* @private
*/
_buildContentOne: function () {
this._content1 = new Content({
id: 'page-1',
text: l10n.get('warmwelcome.one.title'),
subtext: l10n.get('warmwelcome.one.subtext'),
button: {
text: l10n.get('warmwelcome.one.button.text')
}
});
},
/**
* Builds the second content view.
*
* @private
*/
_buildContentTwo: function () {
this._content2 = new Content({
id: 'page-2',
text: l10n.get('warmwelcome.two.title'),
image: 'src/assets/images/instruction-down.png'
});
},
/**
* Builds the third content view.
*
* @private
*/
_buildContentThree: function () {
this._content3 = new Content({
id: 'page-3',
text: l10n.get('warmwelcome.three.title'),
subtext: l10n.get('warmwelcome.three.subtext'),
button: {
text: l10n.get('warmwelcome.three.button.text')
}
});
},
/**
* Builds the fourth content view.
*
* @private
*/
_buildContentFour: function () {
this._content4 = new Content({
id: 'page-4',
text: l10n.get('warmwelcome.four.title'),
image: 'src/assets/images/instruction-left.png'
});
},
/**
* Builds the fifth content view.
*
* @private
*/
_buildContentFive: function () {
this._content5 = new Content({
id: 'page-5',
text: l10n.get('warmwelcome.five.title'),
subtext: l10n.get('warmwelcome.five.subtext'),
button: {
text: l10n.get('warmwelcome.five.button.text')
}
});
},
/**
* Builds the sixth content view.
*
* @private
*/
/*
_buildContentSix: function () {
this._content6 = new Content({
id: 'page-6',
text: l10n.get('warmwelcome.six.title'),
subtext: l10n.get('warmwelcome.six.subtext'),
button: {
text: l10n.get('warmwelcome.six.button.text')
}
});
},
*/
/**
* Builds the seventh content view.
*
* @private
*/
/*
_buildContentSeven: function () {
this._content7 = new Content({
id: 'page-7',
text: l10n.get('warmwelcome.seven.title'),
subtext: l10n.get('warmwelcome.seven.subtext'),
secondImage: 'src/assets/images/onboarding-terug-1.png',
button: {
text: l10n.get('warmwelcome.seven.button.text')
}
});
},
*/
/**
* Builds the eighth content view.
*
* @private
*/
/*
_buildContentEight: function () {
this._content8 = new Content({
id: 'page-8',
text: l10n.get('warmwelcome.eight.title'),
subtext: l10n.get('warmwelcome.eight.subtext'),
secondImage: 'src/assets/images/onboarding-terug-2.png',
button: {
text: l10n.get('warmwelcome.eight.button.text')
}
});
},
*/
/**
* Builds the sixth content view.
*
* @private
*/
_buildContentSix: function () {
this._content6 = new Content({
id: 'page-6',
text: l10n.get('warmwelcome.nine.title'),
button: {
text: l10n.get('warmwelcome.nine.button.text'),
icon: 'icon-back-v2'
}
});
},
/**
* Builds the back info widget.
*
* @private
*/
_buildBackInfo: function () {
var buttonId = backInfoConfig.id,
buttonText = backInfoConfig.text,
buttonClassnames = backInfoConfig.classname,
backinfo = this._backinfo = new IconButton(buttonId, buttonText, buttonClassnames);
backinfo.setDisabled(false);
this.appendChildWidget(backinfo);
},
/**
* Builds the logo.
*
* @private
*/
_buildLogo: function () {
var logo = this._logo = new Image(null, 'src/assets/images/kpn-tv.png');
logo.addClass('logo');
this.appendChildWidget(logo);
},
/**
* Makes component visible.
*
* @param {boolean} isActive - True or false.
*/
activate: function (isActive) {
var playerView,
playerComponent,
player;
if (this.parentWidget.id === 'player') {
playerComponent = application.getComponent('player');
player = playerComponent.getChildWidget('player');
playerView = playerComponent.getActiveChildWidget().getView();
playerView.addClass('warm-welcome');
}
if (isActive) {
this.addEventListener('select', this._onSelectBound);
this._activeIndex = 1;
this.changeContent(this._content1);
this.focus();
this.addClass('visible');
this._isActive = true;
if (playerView) {
player.setStyleTo('display', 'block');
playerView.disablePointerSupport();
playerView.getBackButton().hide();
}
} else {
this._activeIndex = 1;
this.removeEventListener('select', this._onSelectBound);
this.removeClass('visible');
this._isActive = false;
player.reactivate();
}
},
/**
* Change content function.
*
* @param {Object} content - Content to append.
*/
changeContent: function (content) {
var container = this._contentContainer;
container.unsetActiveChildWidget();
container.removeChildWidgets();
container.appendChildWidget(content);
content.focus();
},
/**
* OnKeyDown event for first vie.
*
* @param {Object} e - Event.
*/
onKeyDown: function (e) {
switch (e.keyCode) {
case KeyEvent.VK_BACK:
this.activate(false);
break;
default:
e.preventDefault();
e.stopPropagation();
}
},
/**
* Returns true if the warm welcome is active.
*
* @returns {boolean} - True if the warm welcome is active.
*/
isActive: function () {
return this._isActive || false;
},
/**
* Select event.
*
* @param {Object} e - The event data.
* @private
*/
_onSelect: function (e) {
var parentWidget = e.target.parentWidget.parentWidget;
if (e.target.id !== 'infoblock') {
if (parentWidget !== this._content6) {
if (!e.target.hasClass('hidden')) {
this.next();
}
if (parentWidget !== this._content4) {
application.hideMenu();
}
} else {
application.hideMenu();
this.activate(false);
}
} else {
GA.onEvent('Action', 'SkipIntro');
application.hideMenu();
this.activate(false);
}
},
/**
* Goes to the next screen.
*/
next: function () {
this._activeIndex++;
this.changeContent(this['_content' + this._activeIndex]);
},
/**
* Returns the active page id.
*
* @returns {string} - The page id.
*/
getActivePageId: function () {
return 'page-' + this._activeIndex;
}
});
});