Changeset 7501

Timestamp:

03/01/07 08:17:08 (23 months ago)

Author:

peller

Message:

more ProgressBar? cleanup, attribute changes

Location:

dijit/trunk

Files:

• ProgressBar.js (modified) (15 diffs)
• templates/ProgressBar.html (modified) (1 diff)
• tests/test_ProgressBar.html (modified) (3 diffs)
• themes/tundra/tundra.css (modified) (1 diff)

dijit/trunk/ProgressBar.js

@@ -23 +23 @@
                 // (4) higher z-index
                 // back and front percent label have the same content: when the vertical line (*)
-                // partially hides the backPercentLabel, the frontPercentLabel becomes visible
+                // partially hides the backLabel, the frontLabel becomes visible
                 // 
                 //  ________________________(1)_containerNode_________________________________
                 // |__(3)_internalProgress____________                                        |
                 // |                                  | <--- (*)                              |
-                // |     (4) frontPercentLabel        | (2) backPercentLabel                  |
+                // |     (4) frontLabel        | (2) backLabel                  |
                 // |__________________________________|                                       |
                 // |__________________________________________________________________________| 
@@ -37 +37 @@
                 //   places="0" width="..." height="..." dataSource="..."
                 //   pollInterval="..." 
-                //   hasText="true|false" isVertical="true|false" 
+                //   numeric="true|false" orientation="vertical" 
                 //   progress="..." maximum="..."></div>
         
-                // progress: String
+                // progress: String (Percentage or Number)
                 // initial progress value. 
                 // with "%": percentual value, 0% <= progress <= 100%
                 // or without "%": absolute value, 0 <= progress <= maximum
-                progress: 0,
-                
+                progress: "0",
+
                 // maximum: Float
                 // max sample number
@@ -62 +62 @@
                 color: "",
 
-                // hasText: Boolean
+                // numeric: Boolean
                 // if true, the percent label is visible
-                hasText: false,
-
-                // isVertical: Boolean
-                // if true, the widget is vertical
-                isVertical: false,
+                numeric: false,
+
+                // orientation: String
+                // whether bar grows along the x-axis (default) or y- axis (vertical)
+                orientation: "",
 
                 // places: Number
@@ -100 +100 @@
                         }
                         dojo.html.setClass(this.containerNode, "dojoProgressBarEmpty");
-                        if(this.isVertical){
+                        if(this.orientation == "vertical"){
                                 dojo.html.addClass(this.containerNode, "dojoProgressBarVertical");
                                 this.internalProgress.style.bottom="0px";
@@ -110 +110 @@
                                 this._dimension = "width";
                         }
-                        dojo.html.setClass(this.frontPercentLabel, "dojoProgressBarFrontPercent");
-                        dojo.html.setClass(this.backPercentLabel, "dojoProgressBarBackPercent");
                         this.domNode.style.height = this.height + "px"; 
                         this.domNode.style.width = this.width + "px";
                         this.setMaximum(this.maximum, true);
                         this.setProgress(this.progress, true);
-                        this.showText(this.hasText);
-
+                        this.showLabel(this.numeric);
                         this.render();
                 },
-                showText: function(/*Boolean*/visible){
+                showLabel: function(/*Boolean*/visible){
                         // summary: shows or hides the labels
                         var display = visible ? "block" : "none";
-                        this.backPercentLabel.style.display=display;
-                        this.frontPercentLabel.style.display=display;
-                        this.hasText = visible;
+                        this.backLabel.style.display=display;
+                        this.frontLabel.style.display=display;
+                        this.numeric = visible;
                 },
                 _setupAnimation: function(){
-                        var _self = this;
+                        var self = this;
                         this._animation = dojo.lfx.html.slideTo(this.internalProgress, 
                                 {top: 0, left: parseInt(this.width)-parseInt(this.internalProgress.style.width)}, parseInt(this.duration), null, 
                                         function(){
-                                                var _backAnim = dojo.lfx.html.slideTo(_self.internalProgress, 
-                                                { top: 0, left: 0 }, parseInt(_self.duration));
+                                                var _backAnim = dojo.lfx.html.slideTo(self.internalProgress, 
+                                                { top: 0, left: 0 }, parseInt(self.duration));
                                                 dojo.event.connect(_backAnim, "onEnd", function(){
-                                                        if(!_self._animationStopped){
-                                                                _self._animation.play();
+                                                        if(!self._animationStopped){
+                                                                self._animation.play();
                                                         }
                                                         });
-                                                if(!_self._animationStopped){
+                                                if(!self._animationStopped){
                                                         _backAnim.play();
                                                 }
@@ -146 +143 @@
                                 );
                 },
-                setMaximum: function(maxValue, noRender){
+                setMaximum: function(/*Number*/maximum, /*Boolean?*/noRender){
                         // summary: sets the maximum
                         // if noRender is true, only sets the internal max progress value
@@ -152 +149 @@
                                 return;
                         }
-                        this.maximum = maxValue;
+                        this.maximum = maximum;
                         this.setProgress(this.progress, true);
                         if(!noRender){
@@ -158 +155 @@
                         }
                 },
-                setProgress: function(/*String|Number*/value, /*Boolean*/noRender){
+                setProgress: function(/*String|Number*/value, /*Boolean?*/noRender){
                         // summary: sets the progress
                         // if value ends width "%", does a normalization
@@ -166 +163 @@
                                 return;
                         }
-
                         if(String(value).indexOf("%") != -1){
                                 this._percent = Math.min(parseFloat(value)/100, 1);
@@ -187 +183 @@
                         // the user doesn't know how much time the operation will last
                         if(this._animationStopped){
-                                this._backup = {progress: this.progress, hasText: this.hasText};
+                                this._backup = {progress: this.progress, numeric: this.numeric};
                                 this.setProgress("10%");
                                 this._animationStopped = false;
                                 this._setupAnimation();
-                                this.showText(false);
+                                this.showLabel(false);
                                 this.internalProgress.style.height="105%";
                                 this._animation.play();
@@ -205 +201 @@
                                 dojo.lang.mixin(this, this._backup);
                                 this.setProgress(this.progress);
-                                this.showText(this.hasText);
-                                this._positionPercentLabels();
+                                this.showLabel(this.numeric);
+                                this._positionLabels();
                         }
                 },
                 _showRemoteProgress: function(){
-                        var _self = this;
-                        if((this.maximum == this.progress) &&
-                                this._timer){
+                        var self = this;
+                        if((this.maximum == this.progress) && this._timer){
                                 clearInterval(this._timer);
                                 this._timer = null;
@@ -219 +214 @@
                         }
                         var bArgs = {
-                                url: _self.dataSource,
+                                url: self.dataSource,
                                 method: "POST",
                                 mimetype: "text/json",
@@ -226 +221 @@
                                 },
                                 load: function(type, data, evt){
-                                        _self.setProgress(_self._timer ? data.progress : "100%");
+                                        self.setProgress(self._timer ? data.progress : "100%");
                                 }
                         };
@@ -235 +230 @@
                         // summary: renders the ProgressBar, based on current values
 
-                        this._updatePercentLabels(this._percent);
+                        this._updateLabels(this._percent);
 
                         var pixels = this._percent * this[this._dimension];
@@ -241 +236 @@
                         this.onChange();
 
-                        this._positionPercentLabels();
-                },
-
-                _positionPercentLabels: function(){
-                        var front = dojo.html.getContentBox(this.frontPercentLabel);
-                        var frontLeft = (this.width - front.width)/2;
-                        var frontBottom = (this.height - front.height)/2;
-                        this.frontPercentLabel.style.left = frontLeft + "px";
-                        this.frontPercentLabel.style.bottom = frontBottom + "px";
-                        var back = dojo.html.getContentBox(this.backPercentLabel);
-                        var backLeft = (this.width - back.width)/2;
-                        var backBottom = (this.height - back.height)/2;
-                        this.backPercentLabel.style.left = backLeft + "px";
-                        this.backPercentLabel.style.bottom = backBottom + "px"; 
-                },
-                _updatePercentLabels: function(/*float*/percentValue){
+                        this._positionLabels();
+                },
+
+                _positionLabels: function(){
                         dojo.lang.forEach(["front", "back"], function(name){
-                                var labelNode = this[name+"PercentLabel"];
-                                dojo.dom.textContent(labelNode, dojo.number.format(percentValue, {type: "percent", places: this.places}));
+                                var labelNode = this[name+"Label"];
+                                var dim = dojo.html.getContentBox(labelNode);
+                                var labelLeft = (this.width - dim.width)/2;
+                                var labelBottom = (this.height - dim.height)/2;
+                                labelNode.style.left = labelLeft + "px";
+                                labelNode.style.bottom = labelBottom + "px";
+                        }, this);
+                },
+                _updateLabels: function(/*float*/percent){
+                        dojo.lang.forEach(["front", "back"], function(name){
+                                var labelNode = this[name+"Label"];
+                                dojo.dom.textContent(labelNode, dojo.number.format(percent, {type: "percent", places: this.places}));
                         }, this);
                 },

dijit/trunk/templates/ProgressBar.html

@@ -1 +1 @@
 <div dojoAttachPoint="containerNode">
-        <div style="position:absolute;display:none;width:100%;text-align:center" dojoAttachPoint="backPercentLabel" class="dojoBackPercentLabel"></div>
+        <div style="position:absolute;display:none;width:100%;text-align:center" dojoAttachPoint="backLabel" class="dojoProgressBarBackLabel"></div>
         <div style="position:absolute;overflow:hidden;width:100%;height:100%" dojoAttachPoint="internalProgress">
-        <div style="position:absolute;display:none;width:100%;text-align:center" dojoAttachPoint="frontPercentLabel" class="dojoFrontPercentLabel"></div></div>
+        <div style="position:absolute;display:none;width:100%;text-align:center" dojoAttachPoint="frontLabel" class="dojoProgressBarFrontLabel"></div></div>
 </div>

dijit/trunk/tests/test_ProgressBar.html

@@ -69 +69 @@
                 <input type="button" name="set" id="set" value="set!" />
                 <br />
-                <div width="400" hasText="true"
+                <div width="400" numeric="true"
                         maximum="200" id="setTestBar" progress="20" dojoType="dijit.ProgressBar"></div>         
                 <br />
@@ -77 +77 @@
                 <br />
                 <br />
-                <div width="400" hasText="true"  
+                <div width="400" numeric="true"  
                         maximum="256" id="testBar" duration="2000" dojoType="dijit.ProgressBar"></div>          
                 <input type="button" name="start" id="start" value="start" />
@@ -84 +84 @@
                 Small, without text and background image:
                 <br />
-                <div width="440" height="10" color="red" hasText="false" isVertical="false" 
+                <div width="440" height="10" color="red" orientation="horizontal" 
                         maximum="256" id="smallTestBar" dojoType="dijit.ProgressBar"></div>             
                 <br />
                 Show decimal place:
-                <div places="1" width="400" hasText="true" isVertical="false" 
+                <div places="1" width="400" numeric="true" orientation="horizontal" 
                         maximum="256" id="testBarInt" dojoType="dijit.ProgressBar"></div>               
                 <br />
                 <div style="position:absolute;top:70px;left:530px">
                 Vertical:
-                <div progress="0" height="420" width="50" hasText="true" isVertical="true" 
+                <div progress="0" height="420" width="50" numeric="true" orientation="vertical" 
                                 maximum="256" id="testBar2" dojoType="dijit.ProgressBar"></div>
                 </div>
+                <h3>Test 3</h3>
+                No explicit maximum (both 25%)
+                <div width="400" numeric="true"
+                        id="implied1" progress="25" dojoType="dijit.ProgressBar"></div>         
+                <div width="400" numeric="true"
+                        id="implied2" progress="25%" dojoType="dijit.ProgressBar"></div>
         </body>
 </html>
-€

dijit/trunk/themes/tundra/tundra.css

@@ -149 +149 @@
 }
 
-.dojoProgressBarSimpleFrontBar{
-        background: red;
-}
-
-.dojoProgressBarFrontPercent,.dojoProgressBarBackPercent{
+.dojoProgressBarFrontLabel,.dojoProgressBarBackLabel{
         font:bold 13px helvetica;
 }
 
-.dojoProgressBarBackPercent{
+.dojoProgressBarBackLabel{
         color:#293a4b;
 }
-.dojoProgressBarFrontPercent{
+.dojoProgressBarFrontLabel{
         color:#fff;
 }