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