r1172 - in branches/dev/slider: tests ui
Author: rdworth
Date: Thu Dec 18 06:25:40 2008
New Revision: 1172
Modified:
branches/dev/slider/tests/slider.js
branches/dev/slider/ui/ui.slider.js
Log:
/branches/dev/slider: slider refactor for #3650
- changed axis option to orientation
- fixed vertical slider to be min on bottom, max on top
- updated unit tests to better match specs
Modified: branches/dev/slider/tests/slider.js
==============================================================================
--- branches/dev/slider/tests/slider.js (original)
+++ branches/dev/slider/tests/slider.js Thu Dec 18 06:25:40 2008
@@ -7,9 +7,9 @@
//
var defaults = {
- axis: 'horizontal',
max: 100,
min: 0,
+ orientation: 'horizontal',
step: 1,
value: 0
};
@@ -90,107 +90,227 @@
module("slider");
-test("handle.keydown and value - axis: horizontal", function() {
+test("keydown HOME on handle sets value to min", function() {
+ el = $('<div></div>').slider({ value: 50 });
+ handle().simulate("keydown", { keyCode: $.ui.keyCode.HOME });
+ equals(el.slider('value'), el.slider("option", "min"));
+ el.slider('destroy');
+});
+
+test("keydown END on handle sets value to max", function() {
+ el = $('<div></div>').slider({ value: 50 });
+ handle().simulate("keydown", { keyCode: $.ui.keyCode.END });
+ equals(el.slider('value'), el.slider("option", "max"));
+ el.slider('destroy');
+});
+
+test("horizontal slider - keydown RIGHT on handle increases value by step,
not greater than max", function() {
el = $('<div></div>');
+ var 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");
+});
+test("horizontal slider - keydown LEFT on handle decreases value by step,
not less than min", function() {
+ el = $('<div></div>');
var options = {
- axis: 'horizontal',
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");
+});
+
+test("horizontal slider - keydown UP/DOWN on handle does not change
value", function() {
+ el = $('<div></div>');
+ var options = {
+ max: 5,
+ min: -5,
+ orientation: 'horizontal',
step: 1,
value: 0
};
-
el.slider(options);
+
handle().simulate("keydown", { keyCode: $.ui.keyCode.UP });
- ok(el.slider('value') == options.value, 'keydown UP does not change
value');
- el.slider('destroy');
+ equals(el.slider("value"), options.value);
- el.slider(options);
handle().simulate("keydown", { keyCode: $.ui.keyCode.DOWN });
- ok(el.slider('value') == options.value, 'keydown DOWN does not change
value');
- el.slider('destroy');
+ equals(el.slider("value"), options.value);
+ el.slider("destroy");
+});
+
+test("horizontal slider disabled - keydown UP/DOWN/LEFT/RIGHT/HOME/END on
handle does not change value", function() {
+ el = $('<div></div>');
+ var options = {
+ max: 5,
+ min: -5,
+ orientation: 'horizontal',
+ step: 1,
+ value: 0
+ };
el.slider(options);
+
+ el.slider("disable");
+
+ handle().simulate("keydown", { keyCode: $.ui.keyCode.UP });
+ equals(el.slider("value"), options.value);
+
+ handle().simulate("keydown", { keyCode: $.ui.keyCode.DOWN });
+ equals(el.slider("value"), options.value);
+
handle().simulate("keydown", { keyCode: $.ui.keyCode.LEFT });
- ok(el.slider('value') == options.value - options.step, 'keydown LEFT
decreases value by step');
- el.slider('destroy');
+ equals(el.slider("value"), options.value);
- el.slider(options);
handle().simulate("keydown", { keyCode: $.ui.keyCode.RIGHT });
- ok(el.slider('value') == options.value + options.step, 'keydown RIGHT
increases value by step');
- el.slider('destroy');
+ equals(el.slider("value"), options.value);
- el.slider(options);
handle().simulate("keydown", { keyCode: $.ui.keyCode.HOME });
- ok(el.slider('value') == options.min, 'keydown HOME sets value to min');
- el.slider('destroy');
+ equals(el.slider("value"), options.value);
- el.slider(options);
handle().simulate("keydown", { keyCode: $.ui.keyCode.END });
- ok(el.slider('value') == options.max, 'keydown END sets value to max');
- el.slider('destroy');
-
+ equals(el.slider("value"), options.value);
+
+ el.slider("destroy");
+});
+
+test("vertical slider - keydown UP on handle increases value by step, not
greater than max", function() {
+ el = $('<div></div>');
+ var 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("handle.keydown and value - axis: vertical", function() {
+test("vertical slider - keydown DOWN on handle decreases value by step,
not less than min", function() {
el = $('<div></div>');
+ var 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("vertical slider - keydown LEFT/RIGHT on handle does not change
value", function() {
+ el = $('<div></div>');
var options = {
- axis: 'vertical',
max: 5,
min: -5,
+ orientation: 'vertical',
step: 1,
value: 0
};
+ el.slider(options);
+
+ handle().simulate("keydown", { keyCode: $.ui.keyCode.LEFT });
+ equals(el.slider("value"), options.value);
+
+ handle().simulate("keydown", { keyCode: $.ui.keyCode.RIGHT });
+ equals(el.slider("value"), options.value);
+
+ el.slider("destroy");
+});
+test("vertical slider disabled - keydown UP/DOWN/LEFT/RIGHT/HOME/END on
handle does not change value", function() {
+ el = $('<div></div>');
+ var options = {
+ max: 5,
+ min: -5,
+ orientation: 'vertical',
+ step: 1,
+ value: 0
+ };
el.slider(options);
+
+ el.slider("disable");
+
handle().simulate("keydown", { keyCode: $.ui.keyCode.UP });
- ok(el.slider('value') == options.value - options.step, 'keydown UP
decreases value by step');
- el.slider('destroy');
+ equals(el.slider("value"), options.value);
- el.slider(options);
handle().simulate("keydown", { keyCode: $.ui.keyCode.DOWN });
- ok(el.slider('value') == options.value + options.step, 'keydown DOWN
increases value by step');
- el.slider('destroy');
+ equals(el.slider("value"), options.value);
- el.slider(options);
handle().simulate("keydown", { keyCode: $.ui.keyCode.LEFT });
- ok(el.slider('value') == options.value, 'keydown LEFT does not change
value');
- el.slider('destroy');
+ equals(el.slider("value"), options.value);
- el.slider(options);
handle().simulate("keydown", { keyCode: $.ui.keyCode.RIGHT });
- ok(el.slider('value') == options.value, 'keydown RIGHT does not change
value');
- el.slider('destroy');
+ equals(el.slider("value"), options.value);
- el.slider(options);
handle().simulate("keydown", { keyCode: $.ui.keyCode.HOME });
- ok(el.slider('value') == options.min, 'keydown HOME sets value to min');
- el.slider('destroy');
+ equals(el.slider("value"), options.value);
- el.slider(options);
handle().simulate("keydown", { keyCode: $.ui.keyCode.END });
- ok(el.slider('value') == options.max, 'keydown END sets value to max');
- el.slider('destroy');
-
+ equals(el.slider("value"), options.value);
+
+ el.slider("destroy");
});
module("slider: Options");
-test("axis", function() {
+test("orientation", function() {
el = $('<div></div>');
var options = {
- axis: 'vertical',
max: 2,
min: -2,
+ orientation: 'vertical',
value: 1
};
var percentVal = (options.value - options.min) / (options.max -
options.min) * 100;
- el.slider(options).slider("option", "axis", "horizontal");
+ 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: %");
@@ -198,18 +318,18 @@
el.slider('destroy');
var options = {
- axis: 'horizontal',
max: 2,
min: -2,
+ orientation: 'horizontal',
value: -1
};
var percentVal = (options.value - options.min) / (options.max -
options.min) * 100;
- el.slider(options).slider("option", "axis", "vertical");
+ 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('top'), percentVal + '%', "vertical slider handle is
positioned with top: %");
+ equals(handle().css('bottom'), percentVal + '%', "vertical slider handle
is positioned with bottom: %");
el.slider('destroy');
@@ -219,9 +339,9 @@
el = $('<div></div>');
var options = {
- axis: 'horizontal',
max: 37,
min: 6,
+ orientation: 'horizontal',
step: 1,
value: 50
};
@@ -237,9 +357,9 @@
el = $('<div></div>');
var options = {
- axis: 'vertical',
max: 37,
min: 6,
+ orientation: 'vertical',
step: 1,
value: 2
};
Modified: branches/dev/slider/ui/ui.slider.js
==============================================================================
--- branches/dev/slider/ui/ui.slider.js (original)
+++ branches/dev/slider/ui/ui.slider.js Thu Dec 18 06:25:40 2008
@@ -20,7 +20,7 @@
this.element
.addClass("ui-slider"
- + " ui-slider-" + this._axis()
+ + " ui-slider-" + this._orientation()
+ " ui-widget"
+ " ui-widget-content"
+ " ui-corner-all");
@@ -38,16 +38,16 @@
self._setData('value', self._valueMin());
break;
case $.ui.keyCode.LEFT:
- (self.options.axis == 'horizontal') && self._setData('value',
self.value() - self._step());
+ (self.options.orientation == 'horizontal') && self._setData('value',
self.value() - self._step());
break;
case $.ui.keyCode.UP:
- (self.options.axis == 'vertical') && self._setData('value',
self.value() - self._step());
+ (self.options.orientation == 'vertical') && self._setData('value',
self.value() + self._step());
break;
case $.ui.keyCode.RIGHT:
- (self.options.axis == 'horizontal') && self._setData('value',
self.value() + self._step());
+ (self.options.orientation == 'horizontal') && self._setData('value',
self.value() + self._step());
break;
case $.ui.keyCode.DOWN:
- (self.options.axis == 'vertical') && self._setData('value',
self.value() + self._step());
+ (self.options.orientation == 'vertical') && self._setData('value',
self.value() - self._step());
break;
case $.ui.keyCode.END:
self._setData('value', self._valueMax());
@@ -86,10 +86,10 @@
$.widget.prototype._setData.apply(this, arguments);
switch (key) {
- case 'axis':
+ case 'orientation':
this.element
.removeClass("ui-slider-horizontal ui-slider-vertical")
- .addClass("ui-slider-" + this._axis());
+ .addClass("ui-slider-" + this._orientation());
this._refreshValue();
break;
case 'value':
@@ -98,12 +98,12 @@
}
},
- _axis: function() {
- var axis = this.options.axis;
- if (axis != 'horizontal' && axis != 'vertical')
- axis = 'horizontal';
+ _orientation: function() {
+ var orientation = this.options.orientation;
+ if (orientation != 'horizontal' && orientation != 'vertical')
+ orientation = 'horizontal';
- return axis;
+ return orientation;
},
_step: function() {
@@ -134,7 +134,7 @@
_refreshValue: function() {
var valPercent = (this.value() - this._valueMin()) / (this._valueMax() -
this._valueMin()) * 100;
- this.handle.css(this.options.axis == 'horizontal' ? 'left' : 'top',
valPercent + '%');
+ this.handle.css(this.options.orientation
== 'horizontal' ? 'left' : 'bottom', valPercent + '%');
}
});
@@ -143,9 +143,9 @@
getter: "value",
version: "@VERSION",
defaults: {
- axis: 'horizontal',
max: 100,
min: 0,
+ orientation: 'horizontal',
step: 1,
value: 0
}