merged dev/slider branch (revs 1152-1229) back to trunk

2 files changed, 409 insertions, 128 deletions

diff --git a/tests/slider.js b/tests/slider.js
index 6ea1a3bac..34d29b4fd 100644
--- a/tests/slider.js
+++ b/tests/slider.js
@@ -3,54 +3,21 @@
  */
 (function($) {
 //
-// Selectable Test Helper Functions
+// Slider Test Helper Functions
 //
 
 var defaults = {
-	animate: false,
-	axis: "???",
-	disabled: false,
-	distance: 1,
-	handle: ".ui-slider-handle",
-	handles: null,
 	max: 100,
 	min: 0,
-	noKeyboard: false,
-	range: false,
-	realMax: "???",
-	round: true,
-	startValue: "???",
-	stepping: "???",
-	steps: 0
+	orientation: 'horizontal',
+	step: 1,
+	value: 0
 };
 
-var keyCodes = {
-	leftArrow: 37,
-	upArrow: 38,
-	rightArrow: 39,
-	downArrow: 40
-};
-
-$.each(keyCodes, function(key, val) {
-	$.fn[key] = function() {
-		return this.simulate("keydown", { keyCode: val });
-	}
-});
+var el, options;
 
-function assertChange(stepping, start, result, action) {
-	return function() {
-		expect(1);
-		var slider = $("#slider3").slider({
-			stepping: stepping,
-			startValue: start,
-			min: 0,
-			max: 1000,
-			change: function(event, ui) {
-				equals(ui.value, result, "changed to " + ui.value);
-			}
-		});
-		action.apply(slider);
-	}
+function handle() {
+	return el.find(".ui-slider-handle");
 }
 
 // Slider Tests
@@ -81,7 +48,7 @@ test("init", function() {
 });
 
 test("destroy", function() {
-	expect(6);
+	expect(8);
 
 	$("<div></div>").appendTo('body').slider().slider("destroy").remove();
 	ok(true, '.slider("destroy") called on element');
@@ -89,7 +56,7 @@ test("destroy", function() {
 	$([]).slider().slider("destroy").remove();
 	ok(true, '.slider("destroy") called on empty collection');
 
-	$('<div></div>').slider().slider("destroy").remove();
+	$('<div></div>').appendTo('body').remove().slider().slider("destroy").remove();
 	ok(true, '.slider("destroy") called on disconnected DOMElement');
 
 	$('<div></div>').slider().slider("destroy").slider("foo").remove();
@@ -98,10 +65,18 @@ test("destroy", function() {
 	el = $('<div></div>').slider();
 	var foo = el.slider("destroy").data("foo.slider");
 	el.remove();
-	ok(true, 'arbitrary option getter after destroy');
+	ok(true, 'arbitrary option getter (.data) after destroy');
+
+	el = $('<div></div>').slider();
+	var foo = el.slider("destroy").slider("option", "foo");
+	el.remove();
+	ok(true, 'arbitrary option getter (.slider option method) after destroy');
 
 	$('<div></div>').slider().slider("destroy").data("foo.slider", "bar").remove();
-	ok(true, 'arbitrary option setter after destroy');
+	ok(true, 'arbitrary option setter (.data) after destroy');
+
+	$('<div></div>').slider().slider("destroy").slider("options", "foo", "bar").remove();
+	ok(true, 'arbitrary option setter (.slider option method) after destroy');
 });
 
 test("defaults", function() {
@@ -113,85 +88,309 @@ test("defaults", function() {
 	el.remove();
 });
 
-module("slider: single handle");
-
-test("change one step via keydown", assertChange(1, undefined, 1, function() {
-	this.find("a").rightArrow();
-}))
-test("change - 10 steps via keydown", assertChange(10, 20, 10, function() {
-	this.find("a").leftArrow();
-}))
-test("change +10 steps via keydown", assertChange(10, 20, 30, function() {
-	this.find("a").rightArrow();
-}))
-
-test("moveTo, absolute value", assertChange(1, 1, 10, function() {
-	this.slider("moveTo", 10);
-}))
-
-test("moveTo, absolute value as string", assertChange(1, 1, 10, function() {
-	this.slider("moveTo", "10");
-}))
-
-test("moveTo, absolute value, below min", assertChange(1, 1, 0, function() {
-	this.slider("moveTo", -10);
-}))
-
-test("moveTo, relative positive value", assertChange(1, 1, 11, function() {
-	this.slider("moveTo", "+=10");
-}))
-
-test("moveTo, relative positive value, above max", assertChange(1, 10, 1000, function() {
-	this.slider("moveTo", "+=2000");
-}))
-
-test("moveTo, relative negative value", assertChange(1, 20, 10, function() {
-	this.slider("moveTo", "-=10");
-}))
-
-test("options update min/max", function() {
-	expect(2);
-	var slider = $("#slider3").slider({
-		stepping: 1,
-		startValue: 1
-	});
-	slider.slider("moveTo", "-=10");
-	equals(slider.slider("value"), 0);
-	slider.data("min.slider", -10);
-	slider.slider("moveTo", "-=20");
-	equals(slider.slider("value"), -10);
-})
-
-module("slider: 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");
-
-	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")
-})
+module("slider");
+
+test("keydown HOME on handle sets value to min", function() {
+	el = $('<div></div>');
+	options = {
+		max: 5,
+		min: -5,
+		orientation: 'horizontal',
+		step: 1
+	};
+	el.slider(options);
+
+	el.slider("value", 0);
+
+	handle().simulate("keydown", { keyCode: $.ui.keyCode.HOME });
+	equals(el.slider("value"), options.min);
+
+	el.slider('destroy');	
+
+	el = $('<div></div>');
+	options = {
+		max: 5,
+		min: -5,
+		orientation: 'vertical',
+		step: 1
+	};
+	el.slider(options);
+
+	el.slider("value", 0);
+
+	handle().simulate("keydown", { keyCode: $.ui.keyCode.HOME });
+	equals(el.slider("value"), options.min);
+
+	el.slider('destroy');
+});
+
+test("keydown END on handle sets value to max", function() {
+	el = $('<div></div>');
+	options = {
+		max: 5,
+		min: -5,
+		orientation: 'horizontal',
+		step: 1
+	};
+	el.slider(options);
+
+	el.slider("value", 0);
+
+	handle().simulate("keydown", { keyCode: $.ui.keyCode.END });
+	equals(el.slider("value"), options.max);
+
+	el.slider('destroy');	
+
+	el = $('<div></div>');
+	options = {
+		max: 5,
+		min: -5,
+		orientation: 'vertical',
+		step: 1
+	};
+	el.slider(options);
+
+	el.slider("value", 0);
+
+	handle().simulate("keydown", { keyCode: $.ui.keyCode.END });
+	equals(el.slider("value"), options.max);
+
+	el.slider('destroy');
+});
+
+test("keydown UP on handle increases value by step, not greater than max", function() {
+	el = $('<div></div>');
+	options = {
+		max: 5,
+		min: -5,
+		orientation: 'horizontal',
+		step: 1
+	};
+	el.slider(options);
+
+	el.slider("value", options.max - options.step);
+
+	handle().simulate("keydown", { keyCode: $.ui.keyCode.UP });
+	equals(el.slider("value"), options.max);
+
+	handle().simulate("keydown", { keyCode: $.ui.keyCode.UP });
+	equals(el.slider("value"), options.max);
+
+	el.slider("destroy");	
+
+	el = $('<div></div>');
+	options = {
+		max: 5,
+		min: -5,
+		orientation: 'vertical',
+		step: 1
+	};
+	el.slider(options);
+
+	el.slider("value", options.max - options.step);
+
+	handle().simulate("keydown", { keyCode: $.ui.keyCode.UP });
+	equals(el.slider("value"), options.max);
+
+	handle().simulate("keydown", { keyCode: $.ui.keyCode.UP });
+	equals(el.slider("value"), options.max);
+
+	el.slider("destroy");	
+});
+
+test("keydown RIGHT on handle increases value by step, not greater than max", function() {
+	el = $('<div></div>');
+	options = {
+		max: 5,
+		min: -5,
+		orientation: 'horizontal',
+		step: 1
+	};
+	el.slider(options);
+
+	el.slider("value", options.max - options.step);
+
+	handle().simulate("keydown", { keyCode: $.ui.keyCode.RIGHT });
+	equals(el.slider("value"), options.max);
+
+	handle().simulate("keydown", { keyCode: $.ui.keyCode.RIGHT });
+	equals(el.slider("value"), options.max);
+
+	el.slider("destroy");	
+
+	el = $('<div></div>');
+	options = {
+		max: 5,
+		min: -5,
+		orientation: 'vertical',
+		step: 1
+	};
+	el.slider(options);
+
+	el.slider("value", options.max - options.step);
+
+	handle().simulate("keydown", { keyCode: $.ui.keyCode.RIGHT });
+	equals(el.slider("value"), options.max);
+
+	handle().simulate("keydown", { keyCode: $.ui.keyCode.RIGHT });
+	equals(el.slider("value"), options.max);
+
+	el.slider("destroy");	
+});
+
+test("keydown DOWN on handle decreases value by step, not less than min", function() {
+	el = $('<div></div>');
+	options = {
+		max: 5,
+		min: -5,
+		orientation: 'horizontal',
+		step: 1
+	};
+	el.slider(options);
+
+	el.slider("value", options.min + options.step);
+
+	handle().simulate("keydown", { keyCode: $.ui.keyCode.DOWN });
+	equals(el.slider("value"), options.min);
+
+	handle().simulate("keydown", { keyCode: $.ui.keyCode.DOWN });
+	equals(el.slider("value"), options.min);
+
+	el.slider("destroy");	
+
+	el = $('<div></div>');
+	options = {
+		max: 5,
+		min: -5,
+		orientation: 'vertical',
+		step: 1
+	};
+	el.slider(options);
+
+	el.slider("value", options.min + options.step);
+
+	handle().simulate("keydown", { keyCode: $.ui.keyCode.DOWN });
+	equals(el.slider("value"), options.min);
+
+	handle().simulate("keydown", { keyCode: $.ui.keyCode.DOWN });
+	equals(el.slider("value"), options.min);
+
+	el.slider("destroy");	
+});
+
+test("keydown LEFT on handle decreases value by step, not less than min", function() {
+	el = $('<div></div>');
+	options = {
+		max: 5,
+		min: -5,
+		orientation: 'horizontal',
+		step: 1
+	};
+	el.slider(options);
+
+	el.slider("value", options.min + options.step);
+
+	handle().simulate("keydown", { keyCode: $.ui.keyCode.LEFT });
+	equals(el.slider("value"), options.min);
+
+	handle().simulate("keydown", { keyCode: $.ui.keyCode.LEFT });
+	equals(el.slider("value"), options.min);
+
+	el.slider("destroy");	
+
+	el = $('<div></div>');
+	options = {
+		max: 5,
+		min: -5,
+		orientation: 'vertical',
+		step: 1
+	};
+	el.slider(options);
+
+	el.slider("value", options.min + options.step);
+
+	handle().simulate("keydown", { keyCode: $.ui.keyCode.LEFT });
+	equals(el.slider("value"), options.min);
+
+	handle().simulate("keydown", { keyCode: $.ui.keyCode.LEFT });
+	equals(el.slider("value"), options.min);
+
+	el.slider("destroy");	
+});
+
+module("slider: Options");
+
+test("orientation", function() {
+	el = $('<div></div>');
+
+	options = {
+		max: 2,
+		min: -2,
+		orientation: 'vertical',
+		value: 1
+	};
+
+	var percentVal = (options.value - options.min) / (options.max - options.min) * 100;
+
+	el.slider(options).slider("option", "orientation", "horizontal");
+	ok(el.is('.ui-slider-horizontal'), "horizontal slider has class .ui-slider-horizontal");
+	ok(!el.is('.ui-slider-vertical'), "horizontal slider does not have class .ui-slider-vertical");
+	equals(handle().css('left'), percentVal + '%', "horizontal slider handle is positioned with left: %");
+
+	el.slider('destroy');
+
+	options = {
+		max: 2,
+		min: -2,
+		orientation: 'horizontal',
+		value: -1
+	};
+
+	var percentVal = (options.value - options.min) / (options.max - options.min) * 100;
+
+	el.slider(options).slider("option", "orientation", "vertical");
+	ok(el.is('.ui-slider-vertical'), "vertical slider has class .ui-slider-vertical");
+	ok(!el.is('.ui-slider-horizontal'), "vertical slider does not have class .ui-slider-horizontal");
+	equals(handle().css('bottom'), percentVal + '%', "vertical slider handle is positioned with bottom: %");
+
+	el.slider('destroy');
+
+});
+
+test("max", function() {
+	el = $('<div></div>');
+	
+	options = {
+		max: 37,
+		min: 6,
+		orientation: 'horizontal',
+		step: 1,
+		value: 50
+	};
+
+	el.slider(options);
+	ok(el.slider("option", "value") == options.value, "value option is not contained by max");
+	ok(el.slider("value") == options.max, "value method is contained by max");
+	el.slider('destroy');
+
+});
+
+test("min", function() {
+	el = $('<div></div>');
+	
+	options = {
+		max: 37,
+		min: 6,
+		orientation: 'vertical',
+		step: 1,
+		value: 2
+	};
+
+	el.slider(options);
+	ok(el.slider("option", "value") == options.value, "value option is not contained by min");
+	ok(el.slider("value") == options.min, "value method is contained by min");
+	el.slider('destroy');
+
+});
 
 })(jQuery);
diff --git a/tests/visual/slider.html b/tests/visual/slider.html
index 283138144..d7c63a4cc 100644
--- a/tests/visual/slider.html
+++ b/tests/visual/slider.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html lang="en">
 <head>
-	<title>Simple Slider</title>
+	<title>Slider Visual Test Page</title>
 	<link rel="stylesheet" href="all.css" type="text/css">
 	<link rel="stylesheet" href="../../themes/base/ui.all.css" type="text/css">
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
@@ -9,7 +9,36 @@
 	<script type="text/javascript" src="../../ui/ui.slider.js"></script>
 	<script type="text/javascript">
 	$(function() {
-		$("#slider").slider();
+		$("#slider1").slider();
+		$("#slider2").slider({
+			step: 2,
+			start: function(event, ui) {
+				//console.log('start');
+			},
+			slide: function(event, ui) {
+				//console.log('slide');
+				//return (ui.value < 50 || ui.value > 63);
+			},
+			stop: function(event, ui) {
+				//console.log('stop');
+			},
+			change: function(event, ui) {
+				//console.log('change');
+			},
+			values: [10, 50, 90]
+		});
+		$("#slider3").slider({
+			max: 10,
+			orientation: 'vertical',
+			step: 2,
+			value: 3
+		});
+		$("#h-range-true").slider({ orientation: "horizontal", range: true });
+		$("#h-range-max").slider({ orientation: "horizontal", range: 'max' });
+		$("#h-range-min").slider({ orientation: "horizontal", range: 'min' });
+		$("#v-range-true").slider({ orientation: "vertical", range: true });
+		$("#v-range-max").slider({ orientation: "vertical", range: 'max' });
+		$("#v-range-min").slider({ orientation: "vertical", range: 'min' });
 	});
 	</script>
 </head>
@@ -17,10 +46,63 @@
 <body>
 
 <ul class="plugins">
-<li class="plugin">
+
+<li class="plugin" style="padding:1em;">
 	Slider
-	<div id="slider"></div>
+	<div id="slider1"></div>
+</li>
+
+<li class="plugin" style="padding:1em;">
+	Slider - values: [10, 50, 90]
+	<div id="slider2">
+		<a id="foo" href="#" class="ui-slider-handle"></a>
+		<a id="bar" href="#" class="ui-slider-handle"></a>
+	</div>
+</li>
+
+<li class="plugin" style="padding:1em;">
+	Slider - orientation: vertical
+	<div id="slider3" style="height:100%;"></div>
+</li>
+
+</ul>
+
+<ul class="plugins">
+
+<li class="plugin" style="padding:1em;">
+	Slider - range: true
+	<div id="h-range-true"></div>
+</li>
+
+<li class="plugin" style="padding:1em;">
+	Slider - range: 'max'
+	<div id="h-range-max"></div>
 </li>
+
+<li class="plugin" style="padding:1em;">
+	Slider - range: 'min'
+	<div id="h-range-min"></div>
+</li>
+
+</ul>
+
+<ul class="plugins">
+
+<li class="plugin" style="padding:1em;">
+	Slider - range: true
+	<div id="v-range-true"></div>
+</li>
+
+<li class="plugin" style="padding:1em;">
+	Slider - range: 'max'
+	<div id="v-range-max"></div>
+</li>
+
+<li class="plugin" style="padding:1em;">
+	Slider - range: 'min'
+	<div id="v-range-min"></div>
+</li>
+
 </ul>
 
 </body>