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