Source: widgets/search/decorator.js

define('application/widgets/search/decorator', [
    'rofl/widgets/container',
    'rofl/widgets/label',
    'rofl/widgets/image',
    'rofl/lib/l10n'
], function (
    Container,
    Label,
    Image,
    L10N
) {
    'use strict';

    var l10n = L10N.getInstance(),
        decoratorInfo = {
            search: {
                title: l10n.get('search.decorator.search.title'),
                subtitle: 'search.decorator.search.subtitle',
                image: 'src/assets/images/graphic-search.png'
            },
            noResult: {
                title: l10n.get('search.decorator.noResults.title'),
                subtitle: 'search.decorator.noResults.subtitle',
                image: 'src/assets/images/graphic-unicorn-3-x@2x.png'
            }
        };

    return Container.extend({

        /**
         * Initialises the input widget.
         */
        init: function init () {
            init.base.call(this);

            this.addClass('decorator');

            // Decorator types.
            this.DECORATOR_NO_RESULT = 'noResult';
            this.DECORATOR_SEARCH = 'search';

            this._build();
        },

        /**
         * Builds the widget.
         */
        _build: function () {
            this._buildImage();
            this._buildTitle();
            this._buildSubtitle();
        },

        /**
         * Builds icon's container.
         */
        _buildImage: function () {
            var decoratorimg = this._decoratorimg = new Image();

            this.appendChildWidget(decoratorimg);
        },

        /**
         * Builds the title.
         */
        _buildTitle: function () {
            var title = this._title = new Label({ text: '', classNames: ['title'] });

            this.appendChildWidget(title);
        },

        /**
         * Builds the subtitle.
         */
        _buildSubtitle: function () {
            var subtitle = this._subtitle = new Label({
                text: '',
                classNames: ['subtitle'],
                enableHTML: true
            });

            this.appendChildWidget(subtitle);
        },

        /**
         * Set decorator image.
         *
         * @param {string} src - Image source.
         */
        setImage: function (src) {
            this._decoratorimg.setSrc(src);
        },

        /**
         * Set decorator title.
         *
         * @param {string} text - Decorator title.
         */
        setTitle: function (text) {
            this._title.setText(text);
        },

        /**
         * Set decorator subtitle.
         *
         * @param {string} text - Decorator subtitle.
         */
        setSubtitle: function (text) {
            this._subtitle.setText(text);
        },

        /**
         * Shows decorator with the given decorator type.
         *
         * @param {string} decoratorType - Decorator type.
         * @param {Object} opts - Show options.
         * @param {string} [opts.query] - Query text for displaying.
         */
        show: function show (decoratorType, opts) {
            var info = decoratorInfo[decoratorType];

            if (this._currentDecoratorType !== decoratorType) {
                this.hide(null);
                this._currentDecoratorType = decoratorType;

                this.setImage(info.image);
                this.setTitle(info.title);
                this.setSubtitle(l10n.get(info.subtitle, {query: opts && opts.query}));

                if (!this.isVisible()) {
                    show.base.call(this);
                }
            }
        },

        /**
         * Reset and hide decorator.
         *
         * @param {Object} opts - Hide options.
         **/
        hide: function hide (opts) {
            this._currentDecoratorType = null;

            if (this.isVisible()) {
                hide.base.call(this, opts);
            }
        }
    });
});