add extjs 6.0.1 sources

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

/**\r
 * {@link Ext.ProgressIndicator} provides a progress indicator for file uploads.\r
 */\r
Ext.define('Ext.ProgressIndicator', {\r
    extend: 'Ext.Container',\r
\r
    mixins: ['Ext.mixin.Progressable'],\r
\r
    xtype: 'progressindicator',\r
\r
    config: {\r
        baseCls: Ext.baseCSSPrefix + 'progressindicator',\r
        hidden: true,\r
        modal: true,\r
        centered: true,\r
\r
        /**\r
         * @cfg {String/Ext.XTemplate/Object} loadingText\r
         * This template is used when progress is dynamic (many updates will be received). Template will be passed\r
         * and object with properties percent and state.\r
         *\r
         * If a String or XTemplate is given that text will be used for all states of loading. One can optionally pass in an object\r
         * with the properties 'upload' and/or 'download' with custom state templates.\r
         *\r
         *\r
         * @accessor\r
         */\r
        loadingText: {\r
            any: 'Loading: {percent}%',\r
            upload: 'Uploading: {percent}%',\r
            download: 'Downloading: {percent}%'\r
        },\r
\r
        /**\r
         * @cfg {String/Object} fallbackText\r
         * This String is used when progress is not dynamic (only start and end events will be received).\r
         *\r
         * If a String is given that text will be used for all states of loading. One can optionally pass in an object\r
         * with the properties 'upload' and/or 'download' with custom state strings.\r
         *\r
         * @accessor\r
         */\r
        fallbackText: {\r
            any: 'Loading',\r
            upload: 'Uploading',\r
            download: 'Downloading'\r
        },\r
\r
        /**\r
         * @cfg {Object} monitoredStates\r
         * Object with the properties of 'upload' and 'download'. To disable progress monitoring of any state simply set\r
         * it to false. For example:\r
         *\r
         *  monitoredStates: {\r
         *      upload:false\r
         *  }\r
         *\r
         *  @accessor\r
         */\r
        monitoredStates: {\r
            upload: true,\r
            download: true\r
        },\r
\r
        showAnimation: !Ext.browser.is.AndroidStock ? {\r
            type: 'slideIn',\r
            direction: "left",\r
            duration: 250,\r
            easing: 'ease-out'\r
        } : null,\r
\r
        hideAnimation: !Ext.browser.is.AndroidStock ? {\r
            type: 'slideOut',\r
            direction: "left",\r
            duration: 250,\r
            easing: 'ease-in'\r
        } : null,\r
\r
        /**\r
         * @private\r
         */\r
        minProgressOutput: 0,\r
\r
        /**\r
         * @private\r
         */\r
        maxProgressOutput: 1,\r
\r
        /**\r
         * @private\r
         */\r
        state: null\r
    },\r
\r
    constructor: function() {\r
        this.emptyTpl = new Ext.XTemplate("");\r
        this.callParent(arguments);\r
    },\r
\r
    getElementConfig: function() {\r
        return {\r
            reference: 'element',\r
            classList: ['x-container', 'x-unsized'],\r
            children: [\r
                {\r
                    reference: 'innerElement',\r
                    className: Ext.baseCSSPrefix + 'progressindicator-inner',\r
                    children: [\r
                        {\r
                            reference: 'progressBarText',\r
                            className: Ext.baseCSSPrefix + 'progressindicator-text'\r
                        },\r
                        {\r
                            reference: 'progressBar',\r
                            className: Ext.baseCSSPrefix + 'progressindicator-bar',\r
                            children: [\r
                                {\r
                                    reference: 'progressBarFill',\r
                                    className: Ext.baseCSSPrefix + 'progressindicator-bar-fill'\r
                                }\r
                            ]\r
                        }\r
                    ]\r
                }\r
            ]\r
        };\r
    },\r
\r
    onStartProgress: function() {\r
        if (!this.getParent()) {\r
            Ext.Viewport.add(this);\r
        }\r
        this.show();\r
    },\r
\r
    onEndProgress: function() {\r
        this.hide();\r
    },\r
\r
    onUpdateProgress: function() {\r
        this.updateBar();\r
    },\r
\r
    getLoadingText: function() {\r
        var state = this.getState();\r
        if (this._loadingText[state]) {\r
            return this._loadingText[state];\r
        }\r
\r
        if (this._loadingText["any"]) {\r
            return this._loadingText["any"];\r
        }\r
\r
        return this.emptyTpl;\r
    },\r
\r
    applyLoadingText: function(loadingText) {\r
        var tpl = {}, property, value;\r
        if (Ext.isString(loadingText)) {\r
            tpl = {\r
                any: new Ext.XTemplate(loadingText)\r
            }\r
        } else if (loadingText instanceof Ext.XTemplate) {\r
            tpl = {\r
                any: loadingText\r
            }\r
        } else {\r
            for (property in loadingText) {\r
                value = loadingText[property];\r
                tpl[property] = new Ext.XTemplate(value);\r
            }\r
        }\r
        if (!tpl.any) {\r
            tpl.any = this.emptyTpl;\r
        }\r
        return tpl;\r
    },\r
\r
    getFallbackText: function() {\r
        var state = this.getState();\r
        if (this._fallbackText[state]) {\r
            return this._fallbackText[state];\r
        }\r
\r
        if(this._fallbackText["any"]) {\r
            return this._fallbackText["any"];\r
        }\r
\r
        return "";\r
    },\r
\r
    applyFallbackText: function(fallbackText) {\r
        var obj = {}, property, value;\r
        if (Ext.isString(fallbackText)) {\r
            obj = {\r
                any: fallbackText\r
            }\r
        } else {\r
            for (property in fallbackText) {\r
                value = fallbackText[property];\r
                obj[property] = value;\r
            }\r
        }\r
        if (!obj.any) {\r
            obj.any = this.emptyTpl;\r
        }\r
        return obj;\r
    },\r
\r
    updateDynamic: function(value) {\r
        if (!value) {\r
            this.progressBarText.setHtml(this.getFallbackText());\r
            this.progressBar.setWidth("100%");\r
        } else {\r
            this.updateBar();\r
        }\r
        return value;\r
    },\r
\r
    updateBar: function() {\r
        var state = this.getState();\r
        if(this.getMonitoredStates()[state] !== true) {\r
            this.progressBarText.setHtml(this.getFallbackText());\r
            this.progressBar.setWidth("100%");\r
            return;\r
        }\r
\r
        var percent = this.getProgress() * 100;\r
        if (!Ext.isNumber(percent)) percent = 0;\r
        this.progressBar.setWidth(percent + "%");\r
\r
        var loadingText = this.getLoadingText();\r
        if (loadingText) {\r
            this.progressBarText.setHtml(this.getLoadingText().apply({state:state, percent: Math.ceil(percent) || 0}));\r
        } else {\r
            this.progressBarText.setHtml('');\r
        }\r
    }\r
})\r
;\r