ProgressBar

class webix.ProgressBar()

Progressbar mixin

References

helpers
delay(), extend(), isUndefined().

External references

Official documentation page.

Code

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
webix.ProgressBar = {
    $init:function(){
        if (webix.isUndefined(this._progress) && this.attachEvent){
            this.attachEvent("onBeforeLoad", this.showProgress);
            this.attachEvent("onAfterLoad", this.hideProgress);
            this._progress = null;
        }
    },
    showProgress:function(config){
        // { position: 0 - 1, delay: 2000ms by default, css : name of css class to use }
        if (!this._progress){

            config = webix.extend({
                position:0,
                delay: 2000,
                type:"icon",
                icon:"refresh",
                hide:false
            }, (config||{}), true);

            var incss = (config.type == "icon") ? ("fa-"+config.icon+" fa-spin") : "";



            this._progress = webix.html.create(
                "DIV",
                {
                    "class":"webix_progress_"+config.type,
                    "role":"progressbar",
                    "aria-valuemin":"0",
                    "aria-valuemax":"100",
                    "tabindex":"0"
                },
                "<div class='webix_progress_state "+incss+"'></div>"
            );

            if(!this.setPosition)
                this._viewobj.style.position = "relative";

            webix.html.insertBefore(this._progress, this._viewobj.firstChild, this._viewobj);
            this._viewobj.setAttribute("aria-busy", "true");

            if(!webix.Touch.$active){
                if(this.getScrollState){
                    var scroll = this.getScrollState();
                    if(this._viewobj.scrollWidth != this.$width){
                        this._progress.style.left = scroll.x +"px";
                    }
                    if(this._viewobj.scrollHeight != this.$height){
                        if(config.type != "bottom"){
                            this._progress.style.top = scroll.y +"px";
                        } else {
                            this._progress.style.top =  scroll.y + this.$height - this._progress.offsetHeight +"px";
                        }

                    }
                }
            }


            this._progress_delay = 1;
        }

        if (config && config.type != "icon")
            webix.delay(function(){
                if (this._progress){
                    var position = config.position || 1;
                    //check for css-transition support
                    if(this._progress.style[webix.env.transitionDuration] !== webix.undefined || !config.delay){
                        this._progress.firstChild.style.width = position*100+"%";
                        if (config.delay)
                            this._progress.firstChild.style[webix.env.transitionDuration] = config.delay+"ms";
                    } else{
                    //if animation is not supported fallback to timeouts [IE9]
                        var count = 0,
                            start = 0,
                            step = position/config.delay*30,
                            view = this;

                        if(this._progressTimer){
                            //reset the existing progress
                            window.clearInterval(this._progressTimer);
                            start = this._progress.firstChild.offsetWidth/this._progress.offsetWidth*100;
                        }
                        this._progressTimer = window.setInterval(function(){
                            if(count*30 == config.delay){
                                window.clearInterval(view._progressTimer);
                            }
                            else{
                                if(view._progress && view._progress.firstChild)
                                    view._progress.firstChild.style.width = start+count*step*position*100+"%";
                                count++;
                            }
                        },30);
                    }

                    if (config.hide)
                        webix.delay(this.hideProgress, this, [1], config.delay);

                }
                this._progress_delay = 0;
            }, this);
        else if(config && config.type == "icon" && config.hide)
            webix.delay(this.hideProgress, this, [1], config.delay);
    },
    hideProgress:function(now){
        if (this._progress_delay)
            now = true;

        if (this._progress){
            if (now){
                if(this._progressTimer)
                    window.clearInterval(this._progressTimer);
                webix.html.remove(this._progress);
                this._progress = null;
                this._viewobj.removeAttribute("aria-busy");
            } else {
                this.showProgress({ position:1.1, delay:300 , hide:true });
            }
        }
    }
};

/*
    UI:Video
*/