r1230 - in trunk: tests tests/visual themes/base ui
Author: rdworth
Date: Tue Dec 23 02:38:12 2008
New Revision: 1230
Modified:
trunk/tests/slider.js
trunk/tests/visual/slider.html
trunk/themes/base/ui.slider.css
trunk/ui/ui.slider.js
Log:
merged dev/slider branch (revs 1152-1229) back to trunk
Modified: trunk/tests/slider.js
==============================================================================
--- trunk/tests/slider.js (original)
+++ trunk/tests/slider.js Tue Dec 23 02:38:12 2008
@@ -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
-};
+var el, options;
-$.each(keyCodes, function(key, val) {
- $.fn[key] = function() {
- return this.simulate("keydown", { keyCode: val });
- }
-});
-
-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("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 @@
$([]).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 @@
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 @@
el.remove();
});
-module("slider: single handle");
+module("slider");
-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")
-})
+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);
Modified: trunk/tests/visual/slider.html
==============================================================================
--- trunk/tests/visual/slider.html (original)
+++ trunk/tests/visual/slider.html Tue Dec 23 02:38:12 2008
@@ -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>
Modified: trunk/themes/base/ui.slider.css
==============================================================================
--- trunk/themes/base/ui.slider.css (original)
+++ trunk/themes/base/ui.slider.css Tue Dec 23 02:38:12 2008
@@ -1,9 +1,13 @@
/* Slider
----------------------------------*/
-.ui-slider { height: .8em; position: relative; text-align: left; }
-.ui-slider-handle { position: absolute; z-index: 2; top: -.3em; width:
1.2em; height: 1.2em; margin-left:-.6em; }
-.ui-slider-range { position: relative; z-index: 1; top: 0; height: 100%;
font-size:1%; display:block; border:0; }
+.ui-slider { position: relative; text-align: left; }
+.ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height:
1.2em; cursor: default; }
+.ui-slider-range { position: absolute; z-index: 1; font-size: 1%; display:
block; border: 0; }
-.ui-slider-vertical { height: auto; width: .8em; }
-.ui-slider-vertical .ui-slider-handle { top: auto; left: -.3em;
margin-left:0; margin-top:-.6em; }
-.ui-slider-vertical .ui-slider-range { top: auto; left: 0; height: auto;
width:100%; }
\ No newline at end of file
+.ui-slider-horizontal { height: .8em; }
+.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
+.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
+
+.ui-slider-vertical { width: .8em; height: 100%; }
+.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0;
margin-bottom: -.6em; }
+.ui-slider-vertical .ui-slider-range { left: 0; height: auto; width: 100%;
}
\ No newline at end of file
Modified: trunk/ui/ui.slider.js
==============================================================================
--- trunk/ui/ui.slider.js (original)
+++ trunk/ui/ui.slider.js Tue Dec 23 02:38:12 2008
@@ -10,542 +10,423 @@
* Depends:
* ui.core.js
*/
-(function($) {
-$.fn.unwrap = $.fn.unwrap || function(expr) {
- return this.each(function(){
- $(this).parents(expr).eq(0).after(this).remove();
- });
-};
+(function($) {
-$.widget("ui.slider", {
+$.widget("ui.slider", $.extend({}, $.ui.mouse, {
_init: function() {
var self = this;
- this.element.addClass("ui-slider ui-widget ui-widget-content
ui-corner-all");
- this._initBoundaries();
-
- // Initialize mouse and key events for interaction
- this.handle = $(this.options.handle, this.element);
- if (!this.handle.length) {
- self.handle = self.generated = $(self.options.handles ||
[0]).map(function() {
- var handle = $('<a href="#"></a>').addClass("ui-slider-handle
ui-state-default ui-corner-all").appendTo(self.element);
- if (this.id)
- handle.attr("id", this.id);
- return handle[0];
- });
- }
-
- var handleclass = function(el) {
- this.element = $(el);
- this.element.data("mouse", this);
- this.options = self.options;
-
- this.element.bind("mousedown", function() {
- if(self.currentHandle) this.blur(self.currentHandle);
- self._focus(this, true);
- });
-
- this._mouseInit();
- };
-
- $.extend(handleclass.prototype, $.ui.mouse, {
- _mouseCapture: function() { return true; },
- _mouseStart: function(event) { return self._start.call(self, event,
this.element[0]); },
- _mouseDrag: function(event) { return self._drag.call(self, event,
this.element[0]); },
- _mouseStop: function(event) { return self._stop.call(self, event,
this.element[0]); },
- trigger: function(event) { this._mouseDown(event); }
- });
- $(this.handle)
- .each(function() {
- new handleclass(this);
- })
- .parent()
- .bind(&