Source: components/modals/settings.js

define('application/components/modals/settings', [
    'application/components/modals/abstract',
    'rofl/lib/l10n',
    'rofl/lib/utils',
    'rofl/widgets/image',
    'application/widgets/pointerfocusablebutton',
    'rofl/widgets/label',
    'antie/runtimecontext',
    'rofl/analytics/web/google',
    'antie/events/keyevent',
    'application/widgets/detail/iconbutton',
    'rofl/widgets/container',
    'antie/widgets/verticallist'
], function (
    ModalComponent,
    L10N,
    Utils,
    Image,
    Button,
    Label,
    RuntimeContext,
    GoogleAnalytics,
    KeyEvent,
    IconButton,
    Container,
    VerticalList
) {
    'use strict';

    var l10n = L10N.getInstance(),
        GA = GoogleAnalytics.getInstance(),
        EVENT = {
            parentalControl: 'ParentalControl'
        },
        GALabels = {
            on: 'On',
            off: 'Off'
        };

    return ModalComponent.extend({

        init: function init () {
            this._focusedWidget = null;
            init.base.call(this, 'settings-modal', ['settings-modal', 'fullscreen']);
        },

        /**
         * Before show event.
         *
         * @param {event} event - Config.
         */
        onBeforeShow: function (event) {
            var args = event.args;

            // Reset modal
            this._resetModal();

            this._buildSettings(args);
            this._buildOptionButton(this._settingValue);

            this._mainTitle.setText(args.title);
            this._callback = args.callback;
            this._settingValue = this._originalSettingValue = args.onOff;
            this._pinCallback = args.pinCallback;
            this._closeModalCallback = args.closeModalCallback;

            this._titleIcon.addClass(args.iconClass);

            this._updateOptionButton(this._settingValue);

            this._settings.focus();
        },

        /**
         * Creates modal component based on passed options with one button.
         */
        _createModal: function () {
            var view = this._view = new Container();

            view.addClass('modal-view');

            this._buildVerticalList();
            this._buildTitle();
            this._buildSettingsContainer();
            this._buildConfirmButton();
            this.appendChildWidget(view);
        },

        /**
         * Builds settings container.
         *
         * @private
         */
        _buildSettingsContainer: function () {
            var settings = this._settings = new Container('settings-section');

            this._verticalList.appendChildWidget(settings);
        },

        /**
         * Builds vertical list.
         *
         * @private
         */
        _buildVerticalList: function () {
            var settingsList = this._verticalList = new VerticalList('settings-list');

            this._view.appendChildWidget(settingsList);
        },

        /**
         * Builds settings.
         *
         * @param {Object} args - Args.
         * @private
         */
        _buildSettings: function (args) {
            var settings = this._settings,
                titleText = Utils.getNested(args, 'subtitle') || '',
                title = new Label({ text: titleText, classNames: ['settings-section-title'] }),
                descriptionText = Utils.getNested(args, 'description') || '',
                description = new Label({ text: descriptionText, classNames: ['settings-section-description'] });

            settings.appendChildWidget(title);
            settings.appendChildWidget(description);

            this._verticalList.appendChildWidget(settings);
        },

        /**
         * Reset modal window.
         */
        _resetModal: function () {
            this._settings.removeChildWidgets();
        },

        /**
         * Builds tip bar.
         */
        _buildConfirmButton: function () {
            var buttonLabel = new Label({ text: l10n.get('settings.modal.confirm') }),
                confirmButton = this._confirmButton = new Button('confirm-button');

            confirmButton.appendChildWidget(buttonLabel);
            confirmButton.addClass('kpn-button');
            this._verticalList.appendChildWidget(confirmButton);
        },

        /**
         * Builds onoff button.
         *
         * @param {boolean} onOff - Whether to show on or off on button.
         * @private
         */
        _buildOptionButton: function (onOff) {
            var button = this._optionButton = new Button('on-off-button'),
                buttonTitleText = onOff ? l10n.get('settings.modal.on_off_button.on') : l10n.get('settings.modal.on_off_button.off'),
                buttonTitle = this._optionButtonLabel = new Label({ text: buttonTitleText }),
                arrowLeft = new Container('arrow-left'),
                arrowRight = new Container('arrow-right');

            arrowLeft.addClass('icon-chevron-left');
            arrowRight.addClass('icon-chevron-right');

            button.appendChildWidget(arrowLeft);
            button.appendChildWidget(buttonTitle);
            button.appendChildWidget(arrowRight);


            this._settings.appendChildWidget(button);
        },

        /**
         * Updates option button.
         *
         * @param {boolean} onOff - On/off.
         * @private
         */
        _updateOptionButton: function (onOff) {
            var eventLabel = onOff ? GALabels.on : GALabels.off;

            GA.onEvent('Action', EVENT.parentalControl, {eventLabel: eventLabel});
            this._optionButtonLabel.setText(onOff ? l10n.get('settings.modal.on_off_button.on') : l10n.get('settings.modal.on_off_button.off'));
        },

        /**
         * Builds title.
         *
         * @private
         */
        _buildTitle: function () {
            var titleContainer = new Container('title-container'),
                titleElement = this._mainTitle = new Label({ text: '', classNames: ['title'] }),
                titleIcon = this._titleIcon = new Label({ text: '' });

            titleContainer.appendChildWidget(titleIcon);
            titleContainer.appendChildWidget(titleElement);

            this._view.appendChildWidget(titleContainer);
        },


        /**
         * KeyDown Event.
         *
         * @param {Object} e - The event.
         * @private
         */
        _onKeyDown: function (e) {

            switch (e.keyCode) {
                case KeyEvent.VK_BACK:

                    this._onClose();
                    break;

                case KeyEvent.VK_LEFT:
                case KeyEvent.VK_RIGHT:
                    if (!this._backButton.isFocussed()) {
                        this._optionButton.focus();
                        this._settingValue = !this._settingValue;
                        this._updateOptionButton(this._settingValue);
                    }

                    e.stopPropagation();
                    e.preventDefault();
                    break;
            }
        },

        /**
         * Select event handler.
         *,
         * @param {Event} e - Select event.
         */
        _onSelect: function (e) {
            switch (e.target.id) {
                case 'back-button':
                    this._onClose();
                    break;
                case 'on-off-button':
                    this._settingValue = !this._settingValue;
                    this._updateOptionButton(this._settingValue);
                    this._confirmButton.focus();

                    break;
                case 'confirm-button':

                    if (this._settingValue === this._originalSettingValue) {
                        this._onClose();
                        return;
                    }

                    if (!this._pinCallback || this._settingValue) {
                        this._callback(this._settingValue);
                        this.parentWidget.back();
                        return;
                    }

                    this._pinCallback(this._settingValue);
                    this.parentWidget.back();
            }
        }
    });
});