| 1 | define([ |
|---|
| 2 | "dojo/_base/declare", |
|---|
| 3 | "dojo/dom-class", |
|---|
| 4 | "dojo/dom-construct", |
|---|
| 5 | "dijit/_WidgetBase" |
|---|
| 6 | ], function(declare, domClass, domConstruct, WidgetBase){ |
|---|
| 7 | |
|---|
| 8 | // module: |
|---|
| 9 | // dojox/mobile/ProgressBar |
|---|
| 10 | |
|---|
| 11 | return declare("dojox.mobile.ProgressBar", WidgetBase, { |
|---|
| 12 | // summary: |
|---|
| 13 | // A widget that shows the progress of a task. |
|---|
| 14 | // description: |
|---|
| 15 | // The current progress can be specified either using a number (0 to maximum) |
|---|
| 16 | // or percentage (0% to 100%). The setter of the 'value' property can be used to |
|---|
| 17 | // update the degree of completion of the task. |
|---|
| 18 | |
|---|
| 19 | // value: String |
|---|
| 20 | // Number ("0" to maximum) or percentage ("0%" to "100%") |
|---|
| 21 | // indicating the degree of completion of the task. |
|---|
| 22 | value: "0", |
|---|
| 23 | |
|---|
| 24 | // maximum: Number |
|---|
| 25 | // Maximum value. |
|---|
| 26 | maximum: 100, |
|---|
| 27 | |
|---|
| 28 | // label: String |
|---|
| 29 | // A text to be shown at the center of the progress bar. |
|---|
| 30 | label: "", |
|---|
| 31 | |
|---|
| 32 | /* internal properties */ |
|---|
| 33 | |
|---|
| 34 | // baseClass: String |
|---|
| 35 | // The name of the CSS class of this widget. |
|---|
| 36 | baseClass: "mblProgressBar", |
|---|
| 37 | |
|---|
| 38 | buildRendering: function(){ |
|---|
| 39 | this.inherited(arguments); |
|---|
| 40 | this.progressNode = domConstruct.create("div", { |
|---|
| 41 | className: "mblProgressBarProgress" |
|---|
| 42 | }, this.domNode); |
|---|
| 43 | this.msgNode = domConstruct.create("div", { |
|---|
| 44 | className: "mblProgressBarMsg" |
|---|
| 45 | }, this.domNode); |
|---|
| 46 | }, |
|---|
| 47 | |
|---|
| 48 | _setValueAttr: function(/*String*/value){ |
|---|
| 49 | // summary: |
|---|
| 50 | // Sets the new value to the progress bar. |
|---|
| 51 | // tags: |
|---|
| 52 | // private |
|---|
| 53 | value += ""; |
|---|
| 54 | this._set("value", value); |
|---|
| 55 | |
|---|
| 56 | var percent = Math.min(100, (value.indexOf("%") != -1 ? |
|---|
| 57 | parseFloat(value) : this.maximum ? 100 * value / this.maximum : 0)); |
|---|
| 58 | this.progressNode.style.width = percent + "%"; |
|---|
| 59 | domClass.toggle(this.progressNode, "mblProgressBarNotStarted", !percent); |
|---|
| 60 | domClass.toggle(this.progressNode, "mblProgressBarComplete", percent == 100); |
|---|
| 61 | this.onChange(value, this.maximum, percent); |
|---|
| 62 | }, |
|---|
| 63 | |
|---|
| 64 | _setLabelAttr: function(label){ |
|---|
| 65 | // summary: |
|---|
| 66 | // Sets a label text to be shown at the center of the progress bar. |
|---|
| 67 | // tags: |
|---|
| 68 | // private |
|---|
| 69 | this.msgNode.innerHTML = label; |
|---|
| 70 | }, |
|---|
| 71 | |
|---|
| 72 | onChange: function(/*Number*/ /*===== percent =====*/){ |
|---|
| 73 | // summary: |
|---|
| 74 | // User-defined function called when progress updates. |
|---|
| 75 | // tags: |
|---|
| 76 | // callback |
|---|
| 77 | } |
|---|
| 78 | }); |
|---|
| 79 | }); |
|---|
