Changeset 7504

Timestamp:

03/01/07 12:02:26 (21 months ago)

Author:

peller

Message:

ProgressBar?: more "craptastic" functions, more tweaks

Location:

dijit/trunk

Files:

• ProgressBar.js (modified) (9 diffs)
• templates/ProgressBar.html (modified) (1 diff)
• tests/test_ProgressBar.html (modified) (6 diffs)

dijit/trunk/ProgressBar.js

@@ -37 +37 @@
                 //   places="0" width="..." height="..." dataSource="..."
                 //   pollInterval="..." 
-                //   numeric="true|false" orientation="vertical" 
+                //   annotate="true|false" orientation="vertical" 
                 //   progress="..." maximum="..."></div>
         
@@ -62 +62 @@
                 color: "",
 
-                // numeric: Boolean
-                // if true, the percent label is visible
-                numeric: false,
-
                 // orientation: String
                 // whether bar grows along the x-axis (default) or y- axis (vertical)
                 orientation: "",
 
+                // annotate: Boolean
+                // if true, the percent label is visible
+                annotate: false,
+
                 // places: Number
-                // number of places to show in percent values; 0 by default
+                // number of places to show in values; 0 by default
                 places: 0,
-                
+
                 // dataSource: String
                 // dataSource uri for server polling
@@ -88 +88 @@
                 templatePath: dojo.uri.moduleUri("dijit", "templates/ProgressBar.html"),                
 
-                _percent: 0.0,
-                _animationStopped: true,
-
                 // public functions
                 postCreate: function(){
@@ -99 +96 @@
                                 dojo.html.setClass(this.internalProgress, "dojoProgressBarFull");
                         }
-                        dojo.html.setClass(this.containerNode, "dojoProgressBarEmpty");
                         if(this.orientation == "vertical"){
                                 dojo.html.addClass(this.containerNode, "dojoProgressBarVertical");
@@ -112 +108 @@
                         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.showLabel(this.numeric);
-                        this.render();
-                },
-                showLabel: function(/*Boolean*/visible){
-                        // summary: shows or hides the labels
-                        var display = visible ? "block" : "none";
-                        this.backLabel.style.display=display;
-                        this.frontLabel.style.display=display;
-                        this.numeric = visible;
-                },
+                        this.update();
+                },
+
+                update: function(/*Object*/attributes){
+                        // summary: update progress information
+                        //
+                        // attributes: may provide progress and/or maximum properties on this parameter,
+                        //      see attribute specs for details.
+                        dojo.lang.mixin(this, attributes);
+                        var percent;
+                        if(String(this.progress).indexOf("%") != -1){
+                                percent = Math.min(parseFloat(this.progress)/100, 1);
+                                this.progress = percent * this.maximum;
+                        }else{
+                                this.progress = Math.min(this.progress, this.maximum);
+                                percent = this.progress / this.maximum;
+                        }
+
+                        if(!this._animationStopped){return;}
+
+                        var pixels = percent * this[this._dimension];
+                        this.internalProgress.style[this._dimension] = pixels + 'px';
+
+                        var display = this.annotate ? "block" : "none";
+                        dojo.lang.forEach(["front", "back"], function(name){
+                                var labelNode = this[name+"Label"];
+                                dojo.dom.textContent(labelNode, this.report(percent));
+
+                                labelNode.style.display = display;
+
+                                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);
+
+                        this.onChange();
+                },
+
+                report: function(/*float*/percent){
+                        // Generates percentage to overlay; may be overridden by user
+                        return dojo.number.format(percent, {type: "percent", places: this.places});
+                },
+
+                _animationStopped: true,
+
                 _setupAnimation: function(){
                         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));
-                                                dojo.event.connect(_backAnim, "onEnd", function(){
-                                                        if(!self._animationStopped){
-                                                                self._animation.play();
-                                                        }
-                                                        });
+                                function(){
+                                        var backAnim = dojo.lfx.html.slideTo(self.internalProgress, 
+                                        { top: 0, left: 0 }, parseInt(self.duration));
+                                        dojo.event.connect(backAnim, "onEnd", function(){
                                                 if(!self._animationStopped){
-                                                        _backAnim.play();
+                                                        self._animation.play();
                                                 }
-                                                _backAnim = null; // <-- to avoid memory leaks in IE
+                                        });
+                                        if(!self._animationStopped){
+                                                backAnim.play();
                                         }
-                                );
-                },
-                setMaximum: function(/*Number*/maximum, /*Boolean?*/noRender){
-                        // summary: sets the maximum
-                        // if noRender is true, only sets the internal max progress value
-                        if(!this._animationStopped){
-                                return;
-                        }
-                        this.maximum = maximum;
-                        this.setProgress(this.progress, true);
-                        if(!noRender){
-                                this.render();
-                        }
-                },
-                setProgress: function(/*String|Number*/value, /*Boolean?*/noRender){
-                        // summary: sets the progress
-                        // if value ends width "%", does a normalization
-                        // if noRender is true, only sets the internal value: useful if
-                        // there is a setMaximum call
-                        if(!this._animationStopped){
-                                return;
-                        }
-                        if(String(value).indexOf("%") != -1){
-                                this._percent = Math.min(parseFloat(value)/100, 1);
-                                this.progress = this._percent * this.maximum;
-                        }else{
-                                this.progress = Math.min(value, this.maximum);
-                                this._percent = value / this.maximum;
-                        }
-                        if(!noRender){
-                                this.render();
-                        }
-                },
-                start: function(){
-                        // summary: starts the server polling
-                        var _showFunction = dojo.lang.hitch(this, this._showRemoteProgress);
-                        this._timer = setInterval(_showFunction, this.pollInterval);
-                },
+                                        backAnim = null; // <-- to avoid memory leaks in IE
+                                });
+                },
+
                 startAnimation: function(){
                         // summary: starts the left-right animation, useful when
                         // the user doesn't know how much time the operation will last
                         if(this._animationStopped){
-                                this._backup = {progress: this.progress, numeric: this.numeric};
-                                this.setProgress("10%");
+                                this._backup = {progress: this.progress, annotate: this.annotate};
+                                this.update({progress: "10%", annotate: false});
                                 this._animationStopped = false;
                                 this._setupAnimation();
-                                this.showLabel(false);
                                 this.internalProgress.style.height="105%";
                                 this._animation.play();
@@ -200 +194 @@
                                 this.internalProgress.style.left = "0px";
                                 dojo.lang.mixin(this, this._backup);
-                                this.setProgress(this.progress);
-                                this.showLabel(this.numeric);
-                                this._positionLabels();
-                        }
-                },
+                                this.update();
+                        }
+                },
+
+                start: function(){
+                        // summary: starts the server polling
+                        var _showFunction = dojo.lang.hitch(this, this._showRemoteProgress);
+                        this._timer = setInterval(_showFunction, this.pollInterval);
+                },
+
                 _showRemoteProgress: function(){
                         var self = this;
@@ -210 +209 @@
                                 clearInterval(this._timer);
                                 this._timer = null;
-                                this.setProgress("100%");
+                                this.update({progress: "100%"});
                                 return; 
                         }
@@ -221 +220 @@
                                 },
                                 load: function(type, data, evt){
-                                        self.setProgress(self._timer ? data.progress : "100%");
+                                        self.update({progress: self._timer ? data.progress : "100%"});
                                 }
                         };
@@ -227 +226 @@
                 },
 
-                render: function(){
-                        // summary: renders the ProgressBar, based on current values
-
-                        this._updateLabels(this._percent);
-
-                        var pixels = this._percent * this[this._dimension];
-                        this.internalProgress.style[this._dimension] = pixels + 'px';
-                        this.onChange();
-
-                        this._positionLabels();
-                },
-
-                _positionLabels: function(){
-                        dojo.lang.forEach(["front", "back"], function(name){
-                                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);
-                },
                 onChange: function(){
                 }

dijit/trunk/templates/ProgressBar.html

@@ -1 @@
-<div dojoAttachPoint="containerNode">
+<div dojoAttachPoint="containerNode" class="dojoProgressBarEmpty">
         <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">

dijit/trunk/tests/test_ProgressBar.html

@@ -14 +14 @@
                         dojo.require("dojo.io.*");
                         dojo.require("dojo.io.IframeIO");
+                        dojo.require("dojo.string.extras");
                         dojo.hostenv.writeIncludes();
                 </script>
@@ -20 +21 @@
                         dojo.addOnLoad(go);
                         function go(){
-                                var theBar = dijit.byId("testBar");
+                                //TODO: it's a little strange that id must be specified again?  
+                                var theBar = new dijit.ProgressBar({id: "testBar", width: 400, annotate: true, maximum: 256, duration: 2000,
+                                        report:function(percent){
+                                                return dojo.string.substitute("${0} out of ${1} max chars", [this.progress, this.maximum]);
+                                        }
+                                }, dojo.byId("testBar"));
                                 dojo.event.connect(dojo.byId("start"), "onclick", dojo.lang.hitch(theBar,theBar.startAnimation));
                                 dojo.event.connect(dojo.byId("stop"), "onclick", dojo.lang.hitch(theBar,theBar.stopAnimation));
@@ -48 +54 @@
                         }
                         function setParameters(){
-                                dijit.byId("setTestBar").setMaximum(dojo.byId("maximum").value, true);
-                                dijit.byId("setTestBar").setProgress(dojo.byId("progressValue").value, true);
-                                dijit.byId("setTestBar").render();
+                                dijit.byId("setTestBar").update({maximum: dojo.byId("maximum").value, progress: dojo.byId("progressValue").value});
                         }
                         function keyUpHandler(){
-                                dijit.byId("testBar").setProgress(dojo.byId("test").value.length);
-                                dijit.byId("testBarInt").setProgress(dojo.byId("test").value.length);
-                                dijit.byId("testBar2").setProgress(dojo.byId("test").value.length);
-                                dijit.byId("smallTestBar").setProgress(dojo.byId("test").value.length);
+                                dijit.byId("testBar").update({progress:dojo.byId("test").value.length});
+                                dijit.byId("testBarInt").update({progress:dojo.byId("test").value.length});
+                                dijit.byId("testBar2").update({progress:dojo.byId("test").value.length});
+                                dijit.byId("smallTestBar").update({progress:dojo.byId("test").value.length});
                         }
                 </script>
@@ -69 +73 @@
                 <input type="button" name="set" id="set" value="set!" />
                 <br />
-                <div width="400" numeric="true"
-                        maximum="200" id="setTestBar" progress="20" dojoType="dijit.ProgressBar"></div>         
+                <div width="400" annotate="true"
+                        maximum="200" id="setTestBar" progress="20" dojoType="dijit.ProgressBar"></div>
                 <br />
                 <br />
@@ -77 +81 @@
                 <br />
                 <br />
-                <div width="400" numeric="true"  
-                        maximum="256" id="testBar" duration="2000" dojoType="dijit.ProgressBar"></div>          
+                <div id="testBar"></div>                
                 <input type="button" name="start" id="start" value="start" />
                 <input type="button" name="stop" id="stop" value="stop" />
@@ -88 +91 @@
                 <br />
                 Show decimal place:
-                <div places="1" width="400" numeric="true" orientation="horizontal" 
-                        maximum="256" id="testBarInt" dojoType="dijit.ProgressBar"></div>               
+                <div places="1" width="400" annotate="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" numeric="true" orientation="vertical" 
+                <div progress="0" height="420" width="50" annotate="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"
+                <div width="400" annotate="true"
                         id="implied1" progress="25" dojoType="dijit.ProgressBar"></div>         
-                <div width="400" numeric="true"
+                <br />
+                <div width="400" annotate="true"
                         id="implied2" progress="25%" dojoType="dijit.ProgressBar"></div>
         </body>