add extjs 6.0.1 sources

[extjs.git] / extjs / modern / modern / src / Toast.js

/**\r
 * 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\r
 * 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**\r
 * but creating by calling 'Ext.toast(message, timeout)'. This will create one reusable toast container and content will be swapped out as\r
 * toast messages are queued or displayed.\r
 *\r
 *  # Simple Toast\r
 *\r
 *      @example miniphone\r
 *      Ext.toast('Hello Sencha!'); // Toast will close in 1000 milliseconds (default)\r
 *\r
 *  # Toast with Timeout\r
 *\r
 *      @example miniphone\r
 *      Ext.toast('Hello Sencha!', 5000); // Toast will close in 5000 milliseconds\r
 *\r
 *  # Toast with config\r
 *\r
 *      @example miniphone\r
 *      Ext.toast({message: 'Hello Sencha!', timeout: 2000}); // Toast will close in 2000 milliseconds\r
 *\r
 * # Multiple Toasts queued\r
 *\r
 *      @example miniphone\r
 *      Ext.toast('Hello Sencha!');\r
 *      Ext.toast('Hello Sencha Again!');\r
 *      Ext.toast('Hello Sencha One More Time!');\r
 */\r
Ext.define('Ext.Toast', {\r
    extend: 'Ext.Sheet',\r
    requires: [\r
        'Ext.util.InputBlocker'\r
    ],\r
\r
    config: {\r
        /**\r
         * @cfg\r
         * @inheritdoc\r
         */\r
        ui: 'dark',\r
\r
        /**\r
         * @cfg\r
         * @inheritdoc\r
         */\r
        baseCls: Ext.baseCSSPrefix + 'toast',\r
\r
        /**\r
         * @cfg\r
         * @inheritdoc\r
         */\r
        showAnimation: {\r
            type: 'popIn',\r
            duration: 250,\r
            easing: 'ease-out'\r
        },\r
\r
        /**\r
         * @cfg\r
         * @inheritdoc\r
         */\r
        hideAnimation: {\r
            type: 'popOut',\r
            duration: 250,\r
            easing: 'ease-out'\r
        },\r
\r
        /**\r
         * Override the default `zIndex` so it is normally always above floating components.\r
         */\r
        zIndex: 999,\r
\r
        /**\r
         * @cfg {String} message\r
         * The message to be displayed in the {@link Ext.Toast}.\r
         * @accessor\r
         */\r
        message: null,\r
\r
        /**\r
         * @cfg {Number} timeout\r
         * The amount of time in milliseconds to wait before destroying the toast automatically\r
         */\r
        timeout: 1000,\r
\r
        /**\r
         * @cfg{Boolean/Object} animation\r
         * The animation that should be used between toast messages when they are queued up\r
         */\r
        messageAnimation: true,\r
\r
        /**\r
         * @cfg\r
         * @inheritdoc\r
         */\r
        hideOnMaskTap: true,\r
\r
        /**\r
         * @private\r
         */\r
        modal: true,\r
\r
        /**\r
         * @cfg\r
         * @inheritdoc\r
         */\r
        layout: {\r
            type: 'vbox',\r
            pack: 'center'\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    applyMessage: function(config) {\r
        config = {\r
            html: config,\r
            cls: this.getBaseCls() + '-text'\r
        };\r
\r
        return Ext.factory(config, Ext.Component, this._message);\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    updateMessage: function(newMessage) {\r
        if (newMessage) {\r
            this.add(newMessage);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    applyTimeout: function(timeout) {\r
        if (this._timeoutID) {\r
            clearTimeout(this._timeoutID);\r
            if (!Ext.isEmpty(timeout)) {\r
                this._timeoutID = setTimeout(Ext.bind(this.onTimeout, this), timeout);\r
            }\r
        }\r
        return timeout;\r
    },\r
\r
    /**\r
     * @internal\r
     */\r
    next: Ext.emptyFn,\r
\r
    /**\r
     * @private\r
     */\r
    show: function(config) {\r
        var me = this,\r
            timeout = config.timeout,\r
            msgAnimation = me.getMessageAnimation(),\r
            message = me.getMessage();\r
\r
        if (me.isRendered() && me.isHidden() === false) {\r
            config.timeout = null;\r
            message.onAfter({\r
                hiddenchange: function() {\r
                    me.setMessage(config.message);\r
                    message = me.getMessage();\r
                    message.onAfter({\r
                        hiddenchange: function() {\r
\r
                            // Forces applyTimeout to create a timer\r
                            this._timeoutID = true;\r
                            me.setTimeout(timeout);\r
                        },\r
                        scope: me,\r
                        single: true\r
                    });\r
                    message.show(msgAnimation);\r
                },\r
                scope: me,\r
                single: true\r
            });\r
\r
            message.hide(msgAnimation);\r
        } else {\r
            Ext.util.InputBlocker.blockInputs();\r
            me.setConfig(config);\r
\r
            //if it has not been added to a container, add it to the Viewport.\r
            if (!me.getParent() && Ext.Viewport) {\r
                Ext.Viewport.add(me);\r
            }\r
\r
            if (!Ext.isEmpty(timeout)) {\r
                me._timeoutID = setTimeout(Ext.bind(me.onTimeout, me), timeout);\r
            }\r
\r
            me.callParent(arguments);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    hide: function(animation) {\r
        clearTimeout(this._timeoutID);\r
        if (!this.next()) {\r
            this.callParent(arguments);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onTimeout: function() {\r
        this.hide();\r
    }\r
}, function(Toast) {\r
    var _queue = [], _isToasting = false;\r
\r
    function next() {\r
        var config = _queue.shift();\r
\r
        if (config) {\r
            _isToasting = true;\r
            this.show(config);\r
        } else {\r
            _isToasting = false;\r
        }\r
\r
        return _isToasting;\r
    }\r
\r
    function getInstance() {\r
        if (!Ext.Toast._instance) {\r
            Ext.Toast._instance = Ext.create('Ext.Toast');\r
            Ext.Toast._instance.next = next;\r
        }\r
        return Ext.Toast._instance;\r
    }\r
\r
    Ext.toast = function(message, timeout) {\r
        var toast = getInstance(),\r
            config = message;\r
\r
        if (Ext.isString(message)) {\r
            config = {\r
                message: message,\r
                timeout: timeout\r
            };\r
        }\r
\r
        if (config.timeout === undefined) {\r
            config.timeout = Ext.Toast.prototype.config.timeout;\r
        }\r
\r
        _queue.push(config);\r
        if (!_isToasting) {\r
            toast.next();\r
        }\r
\r
        return toast;\r
    }\r
});\r
\r