Source: components/modals/qrmodal.js

define('application/components/modals/qrmodal', [
    'application/components/modals/abstract',
    'rofl/lib/l10n',
    'rofl/lib/utils',
    'rofl/widgets/image',
    'rofl/widgets/label'
], function (
    ModalComponent,
    L10N,
    Utils,
    Image,
    Label
) {
    'use strict';

    return ModalComponent.extend({

        /**
         * Initialises the component.
         */
        init: function init () {
            init.base.call(this, 'landing-page-popup', ['landing-page-popup']);
        },

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

            if (!e.args) {

                throw new Error('Args needs to be defined to use the QR modal component.');

                // Args should always be used, used this as a template.
                // args = {
                //     title: '',
                //     text: '',
                //     url: '',
                //     imgUrl: '',
                //     buttons: [
                //         {
                //             label: '',
                //             class: '',
                //             button: '',
                //             labelname: ''
                //         }
                //     ],
                //     footer: '',
                //     callback: ''
                // };
            }

            onBeforeShow.base.call(this, {
                args: args
            });

            this._image.setSrc(args.imgUrl);

            this._url.setText(args.url ? args.url : '');

            if (args.footer) {
                this._footer.setText(args.footer);
            }
        },


        /**
         * Reset the modal.
         */
        onBeforeHide: function onBeforeHide () {
            this._footer.setText('');
            this._url.setText('');
            this._image.setSrc('');

            onBeforeHide.base.call(this);
        },

        /**
         * Creates modal component based on passed options with one button.
         */
        _createModal: function _createModal () {
            _createModal.base.call(this);

            this._buildUrl();
            this._buildQRCode();
            this._buildFooter();
        },

        /**
         * Builds the QR code image.
         *
         * @private
         */
        _buildUrl: function () {
            var url = this._url = new Label({ classNames: ['kpn-url'] });

            this._view.insertChildWidget(2, url);
        },

        /**
         * Builds the QR code image.
         *
         * @private
         */
        _buildQRCode: function () {
            var image = this._image = new Image();

            image.setSrc('');
            image.addClass('kpn-qr-code');
            this._view.insertChildWidget(3, image);
        },

        /**
         * Builds the footer.
         *
         * @private
         */
        _buildFooter: function () {
            var footer = this._footer = new Label({ classNames: ['kpn-qr-footer', 'text'], text: '' });

            this._view.insertChildWidget(4, footer);
        }
    });
});