web-apps/vendor/touch/src/Toast.js

/**
 * A 'Toast' is a simple modal message that is displayed on the screen and then automatically closed by a timeout or by a user tapping
 * outside of the toast itself. Think about it like a text only alert box that will self destruct. **A Toast should not be instantiated manually**
 * but creating by calling 'Ext.toast(message, timeout)'. This will create one reusable toast container and content will be swapped out as
 * toast messages are queued or displayed.
 *
 *  # Simple Toast
 *
 *      @example miniphone
 *      Ext.toast('Hello Sencha!'); // Toast will close in 1000 milliseconds (default)
 *
 *  # Toast with Timeout
 *
 *      @example miniphone
 *      Ext.toast('Hello Sencha!', 5000); // Toast will close in 5000 milliseconds
 *
 *  # Toast with config
 *
 *      @example miniphone
 *      Ext.toast({message: 'Hello Sencha!', timeout: 2000}); // Toast will close in 2000 milliseconds
 *
 * # Multiple Toasts queued
 *
 *      @example miniphone
 *      Ext.toast('Hello Sencha!');
 *      Ext.toast('Hello Sencha Again!');
 *      Ext.toast('Hello Sencha One More Time!');
 */
Ext.define('Ext.Toast', {
    extend: 'Ext.Sheet',
    requires: [
        'Ext.util.InputBlocker'
    ],

    config: {
        /**
         * @cfg
         * @inheritdoc
         */
        ui: 'dark',

        /**
         * @cfg
         * @inheritdoc
         */
        baseCls: Ext.baseCSSPrefix + 'toast',

        /**
         * @cfg
         * @inheritdoc
         */
        showAnimation: {
            type: 'popIn',
            duration: 250,
            easing: 'ease-out'
        },

        /**
         * @cfg
         * @inheritdoc
         */
        hideAnimation: {
            type: 'popOut',
            duration: 250,
            easing: 'ease-out'
        },

        /**
         * Override the default `zIndex` so it is normally always above floating components.
         */
        zIndex: 999,

        /**
         * @cfg {String} message
         * The message to be displayed in the {@link Ext.Toast}.
         * @accessor
         */
        message: null,

        /**
         * @cfg {Number} timeout
         * The amount of time in milliseconds to wait before destroying the toast automatically
         */
        timeout: 1000,

        /**
         * @cfg{Boolean/Object} animation
         * The animation that should be used between toast messages when they are queued up
         */
        messageAnimation: true,

        /**
         * @cfg
         * @inheritdoc
         */
        hideOnMaskTap: true,

        /**
         * @private
         */
        modal: true,

        /**
         * @cfg
         * @inheritdoc
         */
        layout: {
            type: 'vbox',
            pack: 'center'
        }
    },

    /**
     * @private
     */
    applyMessage: function(config) {
        config = {
            html: config,
            cls: this.getBaseCls() + '-text'
        };

        return Ext.factory(config, Ext.Component, this._message);
    },

    /**
     * @private
     */
    updateMessage: function(newMessage) {
        if (newMessage) {
            this.add(newMessage);
        }
    },

    /**
     * @private
     */
    applyTimeout: function(timeout) {
        if (this._timeoutID) {
            clearTimeout(this._timeoutID);
            if (!Ext.isEmpty(timeout)) {
                this._timeoutID = setTimeout(Ext.bind(this.onTimeout, this), timeout);
            }
        }
        return timeout;
    },

    /**
     * @internal
     */
    next: Ext.emptyFn,

    /**
     * @private
     */
    show: function(config) {
        var me = this,
            timeout = config.timeout,
            msgAnimation = me.getMessageAnimation(),
            message = me.getMessage();

        if (me.isRendered() && me.isHidden() === false) {
            config.timeout = null;
            message.onAfter({
                hiddenchange: function() {
                    me.setMessage(config.message);
                    message = me.getMessage();
                    message.onAfter({
                        hiddenchange: function() {

                            // Forces applyTimeout to create a timer
                            this._timeoutID = true;
                            me.setTimeout(timeout);
                        },
                        scope: me,
                        single: true
                    });
                    message.show(msgAnimation);
                },
                scope: me,
                single: true
            });

            message.hide(msgAnimation);
        } else {
            Ext.util.InputBlocker.blockInputs();
            me.setConfig(config);

            //if it has not been added to a container, add it to the Viewport.
            if (!me.getParent() && Ext.Viewport) {
                Ext.Viewport.add(me);
            }

            if (!Ext.isEmpty(timeout)) {
                me._timeoutID = setTimeout(Ext.bind(me.onTimeout, me), timeout);
            }

            me.callParent(arguments);
        }
    },

    /**
     * @private
     */
    hide: function(animation) {
        clearTimeout(this._timeoutID);
        if (!this.next()) {
            this.callParent(arguments);
        }
    },

    /**
     * @private
     */
    onTimeout: function() {
        this.hide();
    }
}, function(Toast) {
    var _queue = [], _isToasting = false;

    function next() {
        var config = _queue.shift();

        if (config) {
            _isToasting = true;
            this.show(config);
        } else {
            _isToasting = false;
        }

        return _isToasting;
    }

    function getInstance() {
        if (!Ext.Toast._instance) {
            Ext.Toast._instance = Ext.create('Ext.Toast');
            Ext.Toast._instance.next = next;
        }
        return Ext.Toast._instance;
    }

    Ext.toast = function(message, timeout) {
        var toast = getInstance(),
            config = message;

        if (Ext.isString(message)) {
            config = {
                message: message,
                timeout: timeout
            };
        }

        if (config.timeout === undefined) {
            config.timeout = Ext.Toast.prototype.config.timeout;
        }

        _queue.push(config);
        if (!_isToasting) {
            toast.next();
        }

        return toast;
    }
});