Changeset 11425

Timestamp:

11/06/07 17:24:39 (13 months ago)

Author:

doughays

Message:

Fixes #2288. Added slideDuration attribute and added animation call for sliding.

Location:

dijit/trunk

Files:

• form/Slider.js (modified) (3 diffs)
• tests/form/test_Slider.html (modified) (2 diffs)

dijit/trunk/form/Slider.js

@@ -6 +6 @@
 dojo.require("dijit.form.Button");
 dojo.require("dojo.number");
+dojo.require("dojo._base.fx");
 
 dojo.declare(
@@ -40 +41 @@
         //      If clicking the progress bar changes the value or not
         clickSelect: true,
+
+        // slideDuration: Number
+        //      The time in ms to take to animate the slider handle from 0% to 100%
+        slideDuration: 1000,
 
         widgetsInTemplate: true,
@@ -120 +125 @@
                 this.inherited('setValue', arguments);
                 var percent = (value - this.minimum) / (this.maximum - this.minimum);
-                this.progressBar.style[this._progressPixelSize] = (percent*100) + "%";
-                this.remainingBar.style[this._progressPixelSize] = ((1-percent)*100) + "%";
+                if(priorityChange && this.slideDuration > 0 && this.progressBar.style[this._progressPixelSize]){
+                        // animate the slider
+                        var _this = this;
+                        var props = {};
+                        var start = parseFloat(this.progressBar.style[this._progressPixelSize]);
+                        var duration = this.slideDuration * (percent-start/100);
+                        if(duration < 0){ duration = 0 - duration; }
+                        props[this._progressPixelSize] = { start: start, end: percent*100, units:"%" };
+                        dojo.animateProperty({ node: this.progressBar, duration: duration, 
+                                onAnimate: function(v){_this.remainingBar.style[_this._progressPixelSize] = (100-parseFloat(v[_this._progressPixelSize])) + "%";},
+                                properties: props
+                        }).play();
+                }
+                else{
+                        this.progressBar.style[this._progressPixelSize] = (percent*100) + "%";
+                        this.remainingBar.style[this._progressPixelSize] = ((1-percent)*100) + "%";
+                }
         },
 

dijit/trunk/tests/form/test_Slider.html

@@ -79 +79 @@
                 </div>
                 Slider2 Value:<input readonly id="slider2input" size="3" value="10">
-                <h1>Fancy HTML labels:</h1>
+                <h1>Fancy HTML labels (no slide animation):</h1>
                 <div dojoType="dijit.form.HorizontalSlider" name="horizontal2"
                         minimum="1"
@@ -87 +87 @@
                         showButtons="false"
                         intermediateChanges="true"
+                        slideDuration="0"
                         style="width:300px; height: 40px;"
                         id="slider3">