lib/dijit/ProgressBar.js

   1 /*
   2         Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved.
   3         Available via Academic Free License >= 2.1 OR the modified BSD license.
   4         see: http://dojotoolkit.org/license for details
   5 */
   6
   7
   8 if(!dojo._hasResource["dijit.ProgressBar"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
   9 dojo._hasResource["dijit.ProgressBar"] = true;
  10 dojo.provide("dijit.ProgressBar");
  11 dojo.require("dojo.fx");
  12 dojo.require("dojo.number");
  13 dojo.require("dijit._Widget");
  14 dojo.require("dijit._Templated");
  15
  16
  17 dojo.declare("dijit.ProgressBar", [dijit._Widget, dijit._Templated], {
  18         // summary:
  19         //              A progress indication widget, showing the amount completed
  20         //              (often the percentage completed) of a task.
  21         //
  22         // example:
  23         // |    <div dojoType="ProgressBar"
  24         // |             places="0"
  25         // |             value="..." maximum="...">
  26         // |    </div>
  27
  28         // progress: [const] String (Percentage or Number)
  29         //              Number or percentage indicating amount of task completed.
  30         //              Deprecated.   Use "value" instead.
  31         progress: "0",
  32
  33         // value: String (Percentage or Number)
  34         //              Number or percentage indicating amount of task completed.
  35         //              With "%": percentage value, 0% <= progress <= 100%, or
  36         //              without "%": absolute value, 0 <= progress <= maximum.
  37         //              Infinity means that the progress bar is indeterminate.
  38         value: "",
  39
  40         // maximum: [const] Float
  41         //              Max sample number
  42         maximum: 100,
  43
  44         // places: [const] Number
  45         //              Number of places to show in values; 0 by default
  46         places: 0,
  47
  48         // indeterminate: [const] Boolean
  49         //              If false: show progress value (number or percentage).
  50         //              If true: show that a process is underway but that the amount completed is unknown.
  51         //              Deprecated.   Use "value" instead.
  52         indeterminate: false,
  53
  54         // label: String?
  55         //              Label on progress bar.   Defaults to percentage for determinate progress bar and
  56         //              blank for indeterminate progress bar.
  57         label:"",
  58
  59         // name: String
  60         //              this is the field name (for a form) if set. This needs to be set if you want to use
  61         //              this widget in a dijit.form.Form widget (such as dijit.Dialog)
  62         name: '',
  63
  64         templateString: dojo.cache("dijit", "templates/ProgressBar.html", "<div class=\"dijitProgressBar dijitProgressBarEmpty\" role=\"progressbar\"\n\t><div  dojoAttachPoint=\"internalProgress\" class=\"dijitProgressBarFull\"\n\t\t><div class=\"dijitProgressBarTile\" role=\"presentation\"></div\n\t\t><span style=\"visibility:hidden\">&nbsp;</span\n\t></div\n\t><div dojoAttachPoint=\"labelNode\" class=\"dijitProgressBarLabel\" id=\"${id}_label\"></div\n\t><img dojoAttachPoint=\"indeterminateHighContrastImage\" class=\"dijitProgressBarIndeterminateHighContrastImage\" alt=\"\"\n/></div>\n"),
  65
  66         // _indeterminateHighContrastImagePath: [private] dojo._URL
  67         //              URL to image to use for indeterminate progress bar when display is in high contrast mode
  68         _indeterminateHighContrastImagePath:
  69                 dojo.moduleUrl("dijit", "themes/a11y/indeterminate_progress.gif"),
  70
  71         postMixInProperties: function(){
  72                 this.inherited(arguments);
  73                 if(!("value" in this.params)){
  74                         this.value = this.indeterminate ? Infinity : this.progress;
  75                 }
  76         },
  77
  78         buildRendering: function(){
  79                 this.inherited(arguments);
  80                 this.indeterminateHighContrastImage.setAttribute("src",
  81                         this._indeterminateHighContrastImagePath.toString());
  82                 this.update();
  83         },
  84
  85         update: function(/*Object?*/attributes){
  86                 // summary:
  87                 //              Internal method to change attributes of ProgressBar, similar to set(hash).  Users should call
  88                 //              set("value", ...) rather than calling this method directly.
  89                 // attributes:
  90                 //              May provide progress and/or maximum properties on this parameter;
  91                 //              see attribute specs for details.
  92                 // example:
  93                 //      |       myProgressBar.update({'indeterminate': true});
  94                 //      |       myProgressBar.update({'progress': 80});
  95                 //      |       myProgressBar.update({'indeterminate': true, label:"Loading ..." })
  96                 // tags:
  97                 //              private
  98
  99                 // TODO: deprecate this method and use set() instead
 100
 101                 dojo.mixin(this, attributes || {});
 102                 var tip = this.internalProgress, ap = this.domNode;
 103                 var percent = 1;
 104                 if(this.indeterminate){
 105                         dijit.removeWaiState(ap, "valuenow");
 106                         dijit.removeWaiState(ap, "valuemin");
 107                         dijit.removeWaiState(ap, "valuemax");
 108                 }else{
 109                         if(String(this.progress).indexOf("%") != -1){
 110                                 percent = Math.min(parseFloat(this.progress)/100, 1);
 111                                 this.progress = percent * this.maximum;
 112                         }else{
 113                                 this.progress = Math.min(this.progress, this.maximum);
 114                                 percent = this.progress / this.maximum;
 115                         }
 116
 117                         dijit.setWaiState(ap, "describedby", this.labelNode.id);
 118                         dijit.setWaiState(ap, "valuenow", this.progress);
 119                         dijit.setWaiState(ap, "valuemin", 0);
 120                         dijit.setWaiState(ap, "valuemax", this.maximum);
 121                 }
 122                 this.labelNode.innerHTML = this.report(percent);
 123
 124                 dojo.toggleClass(this.domNode, "dijitProgressBarIndeterminate", this.indeterminate);
 125                 tip.style.width = (percent * 100) + "%";
 126                 this.onChange();
 127         },
 128
 129         _setValueAttr: function(v){
 130                 this._set("value", v);
 131                 if(v == Infinity){
 132                         this.update({indeterminate:true});
 133                 }else{
 134                         this.update({indeterminate:false, progress:v});
 135                 }
 136         },
 137
 138         _setLabelAttr: function(label){
 139                 this._set("label", label);
 140                 this.update();
 141         },
 142
 143         _setIndeterminateAttr: function(indeterminate){
 144                 // Deprecated, use set("value", ...) instead
 145                 this.indeterminate = indeterminate;
 146                 this.update();
 147         },
 148
 149         report: function(/*float*/percent){
 150                 // summary:
 151                 //              Generates message to show inside progress bar (normally indicating amount of task completed).
 152                 //              May be overridden.
 153                 // tags:
 154                 //              extension
 155
 156                 return this.label ? this.label :
 157                                 (this.indeterminate ? "&nbsp;" : dojo.number.format(percent, { type: "percent", places: this.places, locale: this.lang }));
 158         },
 159
 160         onChange: function(){
 161                 // summary:
 162                 //              Callback fired when progress updates.
 163                 // tags:
 164                 //              extension
 165         }
 166 });
 167
 168 }