Changeset 5050

Timestamp:

03/17/08 11:14:42 (10 months ago)

Author:

joern.zaefferer

Message:

ui.slider: autocreate sliders if none present (#2523)

Location:

trunk/ui

Files:

• tests/slider_test.html (modified) (1 diff)
• tests/slider_test.js (modified) (2 diffs)
• ui.slider.js (modified) (4 diffs)

trunk/ui/tests/slider_test.html

@@ -27 +27 @@
 
     <div id="main" style="position:absolute;top:-20000px">
+        <div id='slider1'></div>
         <div id='slider3' style="position: relative; margin: 40px; width: 217px; height: 28px; background: url(http://developer.yahoo.com/yui/examples/slider/assets/bg-fader.gif) no-repeat scroll 5px 0px;">
             <div class='ui-slider-handle' style='position: absolute; height: 21px; left: 0px; bottom: 0px; width: 17px; background-image: url(http://developer.yahoo.com/yui/examples/slider/assets/thumb-n.gif);'></div>   

trunk/ui/tests/slider_test.js

@@ -54 +54 @@
 
 test("options update min/max", function() {
-    //expect(1);
+    expect(2);
     var slider = $("#slider3").slider({
         stepping: 1,
-        startValue: 1,
-        minValue: 0,
-        maxValue: 100,
-        change: function(e, ui) {
-            //equals(ui.value, result, "changed to " + ui.value);
-        }
+        startValue: 1
     });
     slider.slider("moveTo", "-=10");
@@ -71 +66 @@
 })
 
+module("setup and teardown");
+
 test("destroy and recreate", function() {
+    expect(3)
     var slider = $("#slider3").slider();
     slider.slider("moveTo", "+=20");
     equals(slider.slider("value"), 20);
     slider.slider("destroy");
-    try {
-        slider.slider("moveTo", "+=30");
-        ok(false, "must throw error when destroyed");
-    } catch(e) {
-        ok(true, "can't move a destroyed slider");
-    }
+    
+    slider.slider("moveTo", "+=30");
+    ok(true, "nothing happens after slider is destroyed");
+    
     slider.slider().slider("moveTo", "30");
     
     equals(Math.round(slider.slider("value")), 30);
-    
 })
+
+test("handle creation", function() {
+    var slider = $("#slider1");
+    equals(slider.children().size(), 0);
+    slider.slider({
+        handles: [
+            { start: 0 },
+            { start: 10 }
+        ]
+    });
+    equals(slider.children().size(), 2);
+    var instance = $.data(slider[0], "slider")
+    equals(instance.handle.length, 2);
+    ok(instance.handle.jquery, "handle must be a jquery object")
+})

trunk/ui/ui.slider.js

@@ -28 +28 @@
         
         //Prepare the passed options
-        this.options = $.extend({}, options);
+        this.options = $.extend({}, $.ui.slider.defaults, options);
         var o = this.options;
         $.extend(o, {
@@ -49 +49 @@
 
         //Initialize mouse and key events for interaction
-        this.handle = o.handle ? $(o.handle, element) : $('> *', element);
+        this.handle = $(o.handle, element);
+        if (!this.handle.length) {
+            self.handle = $(o.handles || [0]).map(function() {
+                var handle = $("<div/>").addClass("ui-slider-handle").appendTo(element);
+                if (this.id)
+                    handle.attr("id", this.id);
+                return handle[0];
+            });
+        }
         $(this.handle)
             .mouseInteraction({
@@ -94 +102 @@
         
         //Move the first handle to the startValue
-        if (o.startValue && o.startValue.constructor == Array) {
-            $.each(o.startValue, function(index, value) {
-                self.moveTo(value, index, true);
-            });
-        } else if (!isNaN(o.startValue))
+        $.each(o.handles || [], function(index, handle) {
+            self.moveTo(handle.start, index, true);
+        });
+        if (!isNaN(o.startValue))
             this.moveTo(o.startValue, 0, true);
         
@@ -276 +283 @@
         }
     });
+    
+    $.ui.slider.defaults = {
+        handle: ".ui-slider-handle"
+    };
 
 })(jQuery);