library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Spinner: Changed default for numberformat to null. Fixed disabled option to not prevent changing value via step and page methods. OVerhauled testsuite.

Browse Source
This commit is contained in:
jzaefferer 2010-10-26 12:14:45 +02:00
parent e442dd3528
commit 2df094527e
8 changed files with 200 additions and 425 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
demos/spinner/decimal.html
View File

@ -17,7 +17,8 @@
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$("#spinner").spinner({ $("#spinner").spinner({
step: 0.01 step: 0.01,
numberformat: "n"
}); });
$("#culture").change(function() { $("#culture").change(function() {

1
tests/unit/spinner/spinner.html
View File

@ -7,6 +7,7 @@
<script type="text/javascript" src="../../../jquery-1.4.3.js"></script> <script type="text/javascript" src="../../../jquery-1.4.3.js"></script>
<script type="text/javascript" src="../../../external/jquery.mousewheel-3.0.4.js"></script> <script type="text/javascript" src="../../../external/jquery.mousewheel-3.0.4.js"></script>
<script type="text/javascript" src="../../../external/glob.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script> <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script>

292
tests/unit/spinner/spinner_core.js
View File

@ -2,23 +2,9 @@
* spinner_core.js * spinner_core.js
*/ */
var el, var simulateKeyDownUp = function(el, kCode, shift) {
options,
simulateKeyDownUp = function(el, kCode, shift) {
el.simulate("keydown",{keyCode:kCode, shiftKey: shift || false }) el.simulate("keydown",{keyCode:kCode, shiftKey: shift || false })
.simulate("keyup",{keyCode:kCode, shiftKey: shift || false }); .simulate("keyup",{keyCode:kCode, shiftKey: shift || false });
},
wrapper = function() {
return el.closest('.ui-spinner');
},
upButton = function() {
return wrapper().find('.ui-spinner-up');
},
downButton = function() {
return wrapper().find('.ui-spinner-down');
},
box = function() {
return $('.ui-spinner-input', wrapper());
}; };
(function($) { (function($) {
@ -26,308 +12,141 @@ var el,
// Spinner Tests // Spinner Tests
module("spinner: core"); module("spinner: core");
test("init", function() {
expect(3);
$("<input>").appendTo('body').spinner().remove();
ok(true, '.spinner() called on element');
$('<input id="spinner_dis">').spinner().remove();
ok(true, '.spinner() called on disconnected element');
el = $('<input>').spinner();
ok(el.hasClass('ui-spinner-input'), 'input gets ui-spinner-input class on init');
});
test("destroy", function() { test("destroy", function() {
expect(3); var beforeHtml = $("#spin").parent().html();
var afterHtml = $("#spin").spinner().spinner("destroy").parent().html();
$("<input>").appendTo('body').spinner().spinner("destroy").remove(); // Opera 9 outputs role="" instead of removing the attribute like everyone else
ok(true, '.spinner("destroy") called on element'); /*
if ($.browser.opera) {
$('<input id="spinner_dis">').spinner().spinner("destroy").remove(); afterHtml = afterHtml.replace(/ role=""/g, "");
ok(true, '.spinner().spinner("destroy") called on disconnected element'); }
*/
el = $('<input>').spinner().spinner('destroy'); equal( afterHtml, beforeHtml, "before/after html should be the same" );
ok(!el.hasClass('ui-spinner-input'), 'ui-spinner-input class removed on destroy');
});
test("re-attach", function() {
expect(2);
el = $("<input>").spinner().spinner("destroy").spinner();
ok(true, '.spinner().spinner("destroy").spinner() called on element');
el = $('<input id="spinner_dis">').spinner().spinner("destroy").spinner().remove();
ok(true, '.spinner().spinner("destroy").spinner() called on disconnected element');
}); });
test("keydown UP on input, increases value not greater than max", function() { test("keydown UP on input, increases value not greater than max", function() {
expect(3); var el = $("#spin").spinner({
el = $("#spin");
options = {
max:100, max:100,
value:50, value:50,
step:10 step:10
} });
el.spinner(options);
simulateKeyDownUp(el, $.ui.keyCode.UP); simulateKeyDownUp(el, $.ui.keyCode.UP);
equals(el.val(), 60); equals(el.val(), 60);
for (i = 0; i<11; i++) { for (i = 0; i<11; i++) {
simulateKeyDownUp(el, $.ui.keyCode.UP); simulateKeyDownUp(el, $.ui.keyCode.UP);
} }
equals(el.val(), 100); equals(el.val(), 100);
el.val(50); el.val(50);
simulateKeyDownUp(el, $.ui.keyCode.UP); simulateKeyDownUp(el, $.ui.keyCode.UP);
equals(el.val(), 60); equals(el.val(), 60);
}); });
test("keydown DOWN on input, decreases value not less than min", function() { test("keydown DOWN on input, decreases value not less than min", function() {
expect(3); var el = $("#spin").spinner({
el = $("#spin");
options = {
min:-100, min:-100,
value:50, value:50,
step:10 step:10
} });
el.spinner(options);
simulateKeyDownUp(el, $.ui.keyCode.DOWN); simulateKeyDownUp(el, $.ui.keyCode.DOWN);
equals(el.val(), 40); equals(el.val(), 40);
for (i = 0; i<21; i++) { for (i = 0; i<21; i++) {
simulateKeyDownUp(el, $.ui.keyCode.DOWN); simulateKeyDownUp(el, $.ui.keyCode.DOWN);
} }
equals(el.val(), -100); equals(el.val(), -100);
el.val(50); el.val(50);
simulateKeyDownUp(el, $.ui.keyCode.DOWN); simulateKeyDownUp(el, $.ui.keyCode.DOWN);
equals(el.val(), 40); equals(el.val(), 40);
}); });
test("keydown PGUP on input, increases value not greater than max", function() { test("keydown PGUP on input, increases value not greater than max", function() {
expect(3); var el = $("#spin").spinner({
max: 500,
el = $("#spin");
options = {
max:100,
value: 0, value: 0,
step: 10 step: 10
} });
el.spinner(options);
simulateKeyDownUp(el, $.ui.keyCode.PAGE_UP); simulateKeyDownUp(el, $.ui.keyCode.PAGE_UP);
equal(el.val(), 100);
equals(el.val(), 50);
for (i = 0; i<5; i++) { for (i = 0; i<5; i++) {
simulateKeyDownUp(el, $.ui.keyCode.PAGE_UP); simulateKeyDownUp(el, $.ui.keyCode.PAGE_UP);
} }
equal(el.val(), 500);
equals(el.val(), 100);
el.val(0); el.val(0);
simulateKeyDownUp(el, $.ui.keyCode.PAGE_UP); simulateKeyDownUp(el, $.ui.keyCode.PAGE_UP);
equals(el.val(), 100);
equals(el.val(), 50);
}); });
test("keydown PGDN on input, decreases value not less than min", function() { test("keydown PGDN on input, decreases value not less than min", function() {
expect(3); var el = $("#spin").spinner({
min:-500,
el = $("#spin");
options = {
min:-100,
value:0, value:0,
step:10 step:10
} });
el.spinner(options);
simulateKeyDownUp(el, $.ui.keyCode.PAGE_DOWN); simulateKeyDownUp(el, $.ui.keyCode.PAGE_DOWN);
equals(el.val(), -100);
equals(el.val(), -50);
for (i = 0; i<5; i++) { for (i = 0; i<5; i++) {
simulateKeyDownUp(el, $.ui.keyCode.PAGE_DOWN); simulateKeyDownUp(el, $.ui.keyCode.PAGE_DOWN);
} }
equals(el.val(), -500);
equals(el.val(), -100);
el.val(0); el.val(0);
simulateKeyDownUp(el, $.ui.keyCode.PAGE_DOWN); simulateKeyDownUp(el, $.ui.keyCode.PAGE_DOWN);
equals(el.val(), -50);
});
test("hold SHIFT and keydown UP, increments value but no greater than max", function() {
expect(2);
el = $("#spin");
options = {
max:100,
value:0,
step:10
}
el.spinner(options);
simulateKeyDownUp(el, $.ui.keyCode.UP, true);
equals(el.val(), 50);
for (i = 0; i<5; i++) {
simulateKeyDownUp(el, $.ui.keyCode.UP, true);
}
equals(el.val(), 100);
});
test("hold SHIFT and keydown DOWN, decreases value but no less than min", function() {
expect(2);
el = $("#spin");
options = {
min:-100,
value:0,
step:10
}
el.spinner(options);
simulateKeyDownUp(el, $.ui.keyCode.DOWN, true);
equals(el.val(), -50);
for (i = 0; i<5; i++) {
simulateKeyDownUp(el, $.ui.keyCode.DOWN, true);
}
equals(el.val(), -100); equals(el.val(), -100);
}); });
test("keydown HOME on input, sets value to minimum", function() {
el = $("#spin");
options = {
min:-100,
value:50,
step:10
}
el.spinner(options);
simulateKeyDownUp(el, $.ui.keyCode.HOME);
equals(el.val(), -100);
el.spinner('option', 'min', -200);
simulateKeyDownUp(el, $.ui.keyCode.HOME);
equals(el.val(), -200);
});
test("keydown END on input, sets value to maximum", function() {
el = $("#spin");
options = {
max:100,
value:50,
step:10
}
el.spinner(options);
simulateKeyDownUp(el, $.ui.keyCode.END);
equals(el.val(), 100);
el.spinner('option', 'max', 200);
simulateKeyDownUp(el, $.ui.keyCode.END);
equals(el.val(), 200);
});
test("keydown LEFT on input has no effect", function() {
el = $("#spin");
el.spinner();
var value = el.val();
simulateKeyDownUp(el, $.ui.keyCode.LEFT);
equals(el.val(), value);
for (i = 0; i<5; i++) {
simulateKeyDownUp(el, $.ui.keyCode.LEFT);
}
equals(el.val(), value);
});
test("keydown RIGHT on input has no effect", function() {
expect(2);
el = $("#spin");
el.spinner();
var value = el.val();
simulateKeyDownUp(el, $.ui.keyCode.RIGHT);
equals(el.val(), value);
for (i = 0; i<5; i++) {
simulateKeyDownUp(el, $.ui.keyCode.RIGHT);
}
equals(el.val(), value);
});
test("mouse click on buttons", function() { test("mouse click on buttons", function() {
expect(4); var el = $("#spin").spinner(),
el = $("#spin").spinner();
val = 0; val = 0;
$(".ui-spinner-up").trigger("mousedown").trigger("mouseup"); $(".ui-spinner-up").trigger("mousedown").trigger("mouseup");
equals(el.val(), ++val, "mouse click to up"); equals(el.val(), ++val, "mouse click to up");
$(".ui-spinner-down").trigger("mousedown").trigger("mouseup"); $(".ui-spinner-down").trigger("mousedown").trigger("mouseup");
equals(el.val(), --val, "mouse click to down"); equals(el.val(), --val, "mouse click to down");
el.val(50); el.val(50);
$(".ui-spinner-up").trigger("mousedown").trigger("mouseup"); $(".ui-spinner-up").trigger("mousedown").trigger("mouseup");
equals(el.val(), 51); equals(el.val(), 51);
el.val(50); el.val(50);
$(".ui-spinner-down").trigger("mousedown").trigger("mouseup"); $(".ui-spinner-down").trigger("mousedown").trigger("mouseup");
equals(el.val(), 49); equals(el.val(), 49);
}); });
test("mouse wheel on input", function() { test("mouse wheel on input", function() {
ok(false, 'missing test - untested code is broken code'); expect(3);
var el = $("#spin").spinner();
el.trigger("mousewheel", 1);
equal(el.val(), 1);
// mousewheel handler uses a timeout, need to accomodate that
stop();
setTimeout(function() {
el.trigger("mousewheel", -1);
equal(el.val(), 0);
setTimeout(function() {
el.trigger("mousewheel", -1);
equal(el.val(), -1);
start();
}, 100);
}, 100);
}); });
test("reading HTML5 attributes", function() { test("reading HTML5 attributes", function() {
expect(4); var el = $('<input id="spinner" type="number" min="-100" max="100" value="5" step="2">').spinner();
el = $('<input id="spinner" type="number" min="-100" max="100" value="5" step="2">').spinner();
equals(el.spinner('option', 'value'), 5, 'value'); equals(el.spinner('option', 'value'), 5, 'value');
equals(el.spinner('option', 'max'), 100, 'max'); equals(el.spinner('option', 'max'), 100, 'max');
equals(el.spinner('option', 'min'), -100, 'min'); equals(el.spinner('option', 'min'), -100, 'min');
@ -335,23 +154,22 @@ test("reading HTML5 attributes", function() {
}); });
test("ARIA attributes", function() { test("ARIA attributes", function() {
expect(7); var el = $('#spin').spinner({ min: -5, max: 5, value: 2 }),
wrapper = el.spinner("widget");
el = $('#spin').spinner({ min: -5, max: 5, value: 2 }); equals(wrapper.attr('role'), 'spinbutton', 'role');
equals(wrapper.attr('aria-valuemin'), -5, 'aria-valuemin');
equals(wrapper().attr('role'), 'spinbutton', 'role'); equals(wrapper.attr('aria-valuemax'), 5, 'aria-valuemax');
equals(wrapper().attr('aria-valuemin'), -5, 'aria-valuemin'); equals(wrapper.attr('aria-valuenow'), 2, 'aria-valuenow');
equals(wrapper().attr('aria-valuemax'), 5, 'aria-valuemax');
equals(wrapper().attr('aria-valuenow'), 2, 'aria-valuenow');
el.spinner('stepUp'); el.spinner('stepUp');
equals(wrapper().attr('aria-valuenow'), 3, 'stepUp 1 step changes aria-valuenow'); equals(wrapper.attr('aria-valuenow'), 3, 'stepUp 1 step changes aria-valuenow');
el.spinner('option', { min: -10, max: 10 }); el.spinner('option', { min: -10, max: 10 });
equals(wrapper().attr('aria-valuemin'), -10, 'min option changed aria-valuemin changes'); equals(wrapper.attr('aria-valuemin'), -10, 'min option changed aria-valuemin changes');
equals(wrapper().attr('aria-valuemax'), 10, 'max option changed aria-valuemax changes'); equals(wrapper.attr('aria-valuemax'), 10, 'max option changed aria-valuemax changes');
}); });
})(jQuery); })(jQuery);

11
tests/unit/spinner/spinner_defaults.js
View File

@ -3,15 +3,12 @@
*/ */
var spinner_defaults = { var spinner_defaults = {
dir: 'ltr',
disabled: false, disabled: false,
incremental: true, incremental: true,
max: null, max: Number.MAX_VALUE,
min: null, min: -Number.MAX_VALUE,
mouseWheel: true, numberformat: null,
numberformat: "n", step: 1,
page: 5,
step: null,
value: null value: null
}; };

16
tests/unit/spinner/spinner_events.js
View File

@ -6,11 +6,9 @@
module("spinner: events"); module("spinner: events");
test("start", function() { test("start", function() {
expect(1);
var start = 0; var start = 0;
el = $("#spin").spinner({ var el = $("#spin").spinner({
start: function(){ start: function(){
start++; start++;
} }
@ -22,11 +20,9 @@ test("start", function() {
}); });
test("spin", function() { test("spin", function() {
expect(1);
var spin = 0; var spin = 0;
el = $("#spin").spinner({ var el = $("#spin").spinner({
spin: function(){ spin: function(){
spin++; spin++;
} }
@ -38,11 +34,9 @@ test("spin", function() {
}); });
test("stop", function() { test("stop", function() {
expect(1);
var stop = 0; var stop = 0;
el = $("#spin").spinner({ var el = $("#spin").spinner({
stop: function(){ stop: function(){
stop++; stop++;
} }
@ -54,11 +48,9 @@ test("stop", function() {
}); });
test("change", function() { test("change", function() {
expect(1);
var start = spin = stop = change = 0; var start = spin = stop = change = 0;
el = $("#spin").spinner({ var el = $("#spin").spinner({
change: function(){ change: function(){
change++; change++;
} }

91
tests/unit/spinner/spinner_methods.js
View File

@ -6,17 +6,16 @@
module("spinner: methods"); module("spinner: methods");
test("disable", function() { test("disable", function() {
expect(14); var el = $("#spin").spinner({ disabled: false }),
val = el.val(),
wrapper = $("#spin").spinner("widget");
el = $("#spin").spinner({ disabled: false }); ok(!wrapper.hasClass("ui-spinner-disabled"), "before: wrapper does not have ui-spinner-disabled class");
var val = el.val(); ok(!el.is(':disabled'), "before: input does not have disabled attribute");
ok(!wrapper().hasClass(".ui-spinner-disabled"), "before: wrapper does not have ui-spinner-disabled class");
ok(!box().is(':disabled'), "before: input does not have disabled attribute");
el.spinner("disable"); el.spinner("disable");
ok(wrapper().hasClass(".ui-spinner-disabled"), "after: wrapper has ui-spinner-disabled class"); ok(wrapper.hasClass("ui-spinner-disabled"), "after: wrapper has ui-spinner-disabled class");
ok(box().is(':disabled'), "after: input has disabled attribute"); ok(el.is(':disabled'), "after: input has disabled attribute");
simulateKeyDownUp(el, $.ui.keyCode.UP); simulateKeyDownUp(el, $.ui.keyCode.UP);
equals(val, el.val(), "keyboard - value does not change on key UP"); equals(val, el.val(), "keyboard - value does not change on key UP");
@ -30,10 +29,10 @@ test("disable", function() {
simulateKeyDownUp(el, $.ui.keyCode.PAGE_DOWN); simulateKeyDownUp(el, $.ui.keyCode.PAGE_DOWN);
equals(val, el.val(), "keyboard - value does not change on key PGDN"); equals(val, el.val(), "keyboard - value does not change on key PGDN");
upButton().trigger('mousedown').trigger('mouseup'); wrapper.find(":ui-button").first().trigger('mousedown').trigger('mouseup');
equals(val, el.val(), "mouse - value does not change on clicking up button"); equals(val, el.val(), "mouse - value does not change on clicking up button");
downButton().trigger('mousedown').trigger('mouseup'); wrapper.find(":ui-button").last().trigger('mousedown').trigger('mouseup');
equals(val, el.val(), "mouse - value does not change on clicking down button"); equals(val, el.val(), "mouse - value does not change on clicking down button");
el.spinner('stepUp', 6); el.spinner('stepUp', 6);
@ -43,7 +42,7 @@ test("disable", function() {
equals(5, el.val(), "script - stepDown 1 step changes value"); equals(5, el.val(), "script - stepDown 1 step changes value");
el.spinner('pageUp'); el.spinner('pageUp');
equals(10, el.val(), "script - pageUp 1 page changes value"); equals(15, el.val(), "script - pageUp 1 page changes value");
el.spinner('pageDown'); el.spinner('pageDown');
equals(5, el.val(), "script - pageDown 1 page changes value"); equals(5, el.val(), "script - pageDown 1 page changes value");
@ -51,61 +50,31 @@ test("disable", function() {
}); });
test("enable", function() { test("enable", function() {
expect(14); var el = $("#spin").spinner({ disabled: true })
val = el.val(),
wrapper = el.spinner("widget");
el = $("#spin").spinner({ disabled: true }); ok(wrapper.hasClass("ui-spinner-disabled"), "before: wrapper has ui-spinner-disabled class");
var val = el.val(); ok(el.is(':disabled'), "before: input has disabled attribute");
ok(wrapper().hasClass(".ui-spinner-disabled"), "before: wrapper has ui-spinner-disabled class");
ok(box().is(':disabled'), "before: input has disabled attribute");
el.spinner("enable"); el.spinner("enable");
ok(!wrapper().hasClass(".ui-spinner-disabled"), "after: wrapper does not have ui-spinner-disabled class"); ok(!wrapper.hasClass(".ui-spinner-disabled"), "after: wrapper does not have ui-spinner-disabled class");
ok(!box().is(':disabled'), "after: input does not have disabled attribute"); ok(!el.is(':disabled'), "after: input does not have disabled attribute");
simulateKeyDownUp(el, $.ui.keyCode.UP);
equals(1, el.val(), "keyboard - value changes on key UP");
simulateKeyDownUp(el, $.ui.keyCode.DOWN);
equals(0, el.val(), "keyboard - value changes on key DOWN");
simulateKeyDownUp(el, $.ui.keyCode.PAGE_UP);
equals(5, el.val(), "keyboard - value changes on key PGUP");
simulateKeyDownUp(el, $.ui.keyCode.PAGE_DOWN);
equals(0, el.val(), "keyboard - value changes on key PGDN");
upButton().trigger('mousedown').trigger('mouseup');
equals(1, el.val(), "mouse - value changes on clicking up button");
downButton().trigger('mousedown').trigger('mouseup');
equals(0, el.val(), "mouse - value changes on clicking down button");
el.spinner('stepUp', 6);
equals(6, el.val(), "script - stepUp 6 steps changes value");
el.spinner('stepDown');
equals(5, el.val(), "script - stepDown 1 step changes value");
el.spinner('pageUp');
equals(10, el.val(), "script - pageUp 1 page changes value");
el.spinner('pageDown');
equals(5, el.val(), "script - pageDown 1 page changes value");
}); });
test("pageDown", function() { test("pageDown", function() {
expect(4); var el = $('#spin').spinner({
step: 2,
el = $('#spin').spinner({ step: 2, page: 5, value: 0, min: -100 }); value: 0,
min: -100
});
el.spinner('pageDown'); el.spinner('pageDown');
equals(el.val(), -10, "pageDown 1 page"); equals(el.val(), -20, "pageDown 1 page");
el.spinner('pageDown', 3); el.spinner('pageDown', 3);
equals(el.val(), -40, "pageDown 3 pages"); equals(el.val(), -80, "pageDown 3 pages");
el.val(-91).spinner('pageDown'); el.val(-91).spinner('pageDown');
equals(el.val(), -100, "value close to min and pageDown 1 page"); equals(el.val(), -100, "value close to min and pageDown 1 page");
@ -115,15 +84,17 @@ test("pageDown", function() {
}); });
test("pageUp", function() { test("pageUp", function() {
expect(4); var el = $('#spin').spinner({
step: 2,
el = $('#spin').spinner({ step: 2, page: 5, value: 0, max: 100 }); value: 0,
max: 100
});
el.spinner('pageUp'); el.spinner('pageUp');
equals(el.val(), 10, "pageUp 1 page"); equals(el.val(), 20, "pageUp 1 page");
el.spinner('pageUp', 3); el.spinner('pageUp', 3);
equals(el.val(), 40, "pageUp 3 pages"); equals(el.val(), 80, "pageUp 3 pages");
el.val(91).spinner('pageUp'); el.val(91).spinner('pageUp');
equals(el.val(), 100, "value close to max and pageUp 1 page"); equals(el.val(), 100, "value close to max and pageUp 1 page");

119
tests/unit/spinner/spinner_options.js
View File

@ -5,36 +5,33 @@
module("spinner: options"); module("spinner: options");
test("numberformat", function() { test("numberformat, number", function() {
ok( false, "tests for numberformat!"); var el = $("#spin").spinner({
value: "1",
numberformat: "n"
});
equal(el.val(), "1.00");
}); });
test("dir - left-to-right (default)", function() { test("numberformat, number, simple", function() {
expect(3); var el = $("#spin").spinner({
value: "1",
el = $("#spin"); numberformat: "n0"
el.spinner(); });
equal(el.val(), "1");
ok(upButton().position().left > box().position().left, 'input on left up button on right');
ok(downButton().position().left > box().position().left, 'input on left down button on right');
ok(wrapper().hasClass('ui-spinner-ltr'), 'container has correct text direction class setting');
}); });
test("dir - right-to-left", function() { test("numberformat, currency", function() {
expect(3); var el = $("#spin").spinner({
value: "1",
el = $("#spin"); numberformat: "C"
el.spinner({ dir: 'rtl' }); });
equal(el.val(), "$1.00");
ok(upButton().position().left < box().position().left, 'input on right up button on left');
ok(downButton().position().left < box().position().left, 'input on right down button on left');
ok(wrapper().hasClass('ui-spinner-rtl'), 'container has correct text direction class setting');
}); });
/* TODO figure out how to test this properly
test("incremental - false (default)", function() { test("incremental - false (default)", function() {
expect(2); var el = $("#spin").spinner({ incremental:false });
el = $("#spin").spinner({ incremental:false });
for ( var i = 1 ; i<=120 ; i++ ) { for ( var i = 1 ; i<=120 ; i++ ) {
el.simulate("keydown",{keyCode:$.ui.keyCode.UP}); el.simulate("keydown",{keyCode:$.ui.keyCode.UP});
@ -51,10 +48,8 @@ test("incremental - false (default)", function() {
equals(el.val(), -90, "incremental false - keydown 210 times"); equals(el.val(), -90, "incremental false - keydown 210 times");
}); });
test("incremental - true", function() { test("incremental - true (default)", function() {
expect(2); var el = $("#spin").spinner();
el.spinner('option', 'incremental', true );
for ( var i = 1 ; i<=120 ; i++ ) { for ( var i = 1 ; i<=120 ; i++ ) {
el.simulate("keydown",{keyCode:$.ui.keyCode.UP}); el.simulate("keydown",{keyCode:$.ui.keyCode.UP});
@ -70,11 +65,10 @@ test("incremental - true", function() {
equals(el.val(), -1800, "incremental true - keydown 210 times (300-100-100*10-10*100)"); equals(el.val(), -1800, "incremental true - keydown 210 times (300-100-100*10-10*100)");
}); });
*/
test("max", function() { test("max", function() {
expect(3); var el = $("#spin").spinner({ max: 100, value: 1000 });
el = $("#spin").spinner({ max: 100, value: 1000 });
equals(el.val(), 100, "max constrained if value option is greater"); equals(el.val(), 100, "max constrained if value option is greater");
el.spinner('value', 1000); el.spinner('value', 1000);
@ -85,9 +79,7 @@ test("max", function() {
}); });
test("min", function() { test("min", function() {
expect(3); var el = $("#spin").spinner({ min: -100, value: -1000 });
el = $("#spin").spinner({ min: -100, value: -1000 });
equals(el.val(), -100, "min constrained if value option is greater"); equals(el.val(), -100, "min constrained if value option is greater");
el.spinner('value', -1000); el.spinner('value', -1000);
@ -97,53 +89,14 @@ test("min", function() {
equals(el.val(), -100, "min constrained if manual entry"); equals(el.val(), -100, "min constrained if manual entry");
}); });
test("mouseWheel", function() { test("step, 2", function() {
ok(false, 'missing test - untested code is broken code'); var el = $("#spin").spinner({ step: 2 });
}); equals(el.val(), "0", "value initialized to");
test("page", function() {
expect(3);
el = $("#spin").spinner({ step: 2, page:2.5 });
equals(el.val(), "0", "start number");
simulateKeyDownUp(el, $.ui.keyCode.PAGE_DOWN);
equals(el.val(), "-5", "PAGE_DOWN on spinner once");
for ( var i = 1 ; i<=11 ; i++ ) {
simulateKeyDownUp(el, $.ui.keyCode.PAGE_UP);
}
equals(el.val(), "50", "PAGE_UP 11 times on spinner");
});
test("step", function() {
expect(7);
el = $("#spin").spinner({ step:0.7 });
equals(el.val(), "0.0", "value initialized to");
simulateKeyDownUp(el, $.ui.keyCode.DOWN);
equals(el.val(), "-0.7", "DOWN 1 time with step: 0.7");
for ( var i = 0 ; i < 11 ; i++ ) {
simulateKeyDownUp(el, $.ui.keyCode.UP);
}
equals(el.val(), "7.0", "UP 11 times with step: 0.7");
el.spinner('option', 'step', 1);
for ( var i = 0 ; i < 3 ; i++ ) {
simulateKeyDownUp(el, $.ui.keyCode.UP);
}
equals(el.val(), "10.0", "UP 3 times with step: 1");
el.spinner('option', 'step', 2);
for ( var i = 0 ; i < 5 ; i++ ) { for ( var i = 0 ; i < 5 ; i++ ) {
simulateKeyDownUp(el, $.ui.keyCode.UP); simulateKeyDownUp(el, $.ui.keyCode.UP);
} }
equals(el.val(), "20.0", "UP 5 times with step: 2"); equals(el.val(), "10", "UP 5 times with step: 2");
el.spinner('value', '10.5'); el.spinner('value', '10.5');
equals(el.val(), "10.5", "value reset to"); equals(el.val(), "10.5", "value reset to");
@ -153,8 +106,22 @@ test("step", function() {
simulateKeyDownUp(el, $.ui.keyCode.UP); simulateKeyDownUp(el, $.ui.keyCode.UP);
} }
equals(el.val(), "20.5", "UP 5 times with step: 2"); equals(el.val(), "20.5", "UP 5 times with step: 2");
});
test("step, 0.7", function() {
var el = $("#spin").spinner({
step: 0.7,
numberformat: "n1"
});
equals(el.val(), "0.0", "value initialized to");
simulateKeyDownUp(el, $.ui.keyCode.DOWN);
equals(el.val(), "-0.7", "DOWN 1 time with step: 0.7");
for ( var i = 0 ; i < 11 ; i++ ) {
simulateKeyDownUp(el, $.ui.keyCode.UP);
}
equals(el.val(), "7.0", "UP 11 times with step: 0.7");
}); });
test("value, default, specified in markup", function() { test("value, default, specified in markup", function() {

76
ui/jquery.ui.spinner.js vendored
View File

@ -24,13 +24,27 @@ $.widget('ui.spinner', {
incremental: true, incremental: true,
max: Number.MAX_VALUE, max: Number.MAX_VALUE,
min: -Number.MAX_VALUE, min: -Number.MAX_VALUE,
numberformat: "n", numberformat: null,
step: 1, step: 1,
value: null value: null
}, },
_create: function() { _create: function() {
this.value(this.options.value !== null ? this.options.value : this.element.val()); // html5 attributes initalization
// TODO refactor
var min = this.element.attr("min");
if (typeof min == "string" && min.length > 0) {
this.options.min = this._parse(min);
}
var max = this.element.attr("max");
if (typeof max == "string" && max.length > 0) {
this.options.max = this._parse(max);
}
var step = this.element.attr("step");
if (typeof step == "string" && step.length > 0) {
this.options.step = this._parse(step);
}
this.value(this.options.value !== null ? this.options.value : this.element.val() || 0);
this._draw(); this._draw();
this._mousewheel(); this._mousewheel();
this._aria(); this._aria();
@ -39,7 +53,7 @@ $.widget('ui.spinner', {
var self = this, var self = this,
options = self.options; options = self.options;
var uiSpinner = self.element var uiSpinner = this.uiSpinner = self.element
.addClass('ui-spinner-input') .addClass('ui-spinner-input')
.attr('autocomplete', 'off') .attr('autocomplete', 'off')
.wrap(self._uiSpinnerHtml()) .wrap(self._uiSpinnerHtml())
@ -65,12 +79,18 @@ $.widget('ui.spinner', {
this.element this.element
.bind('keydown'+namespace, function(event) { .bind('keydown'+namespace, function(event) {
if (self.options.disabled) {
return;
}
if (self._start(event)) { if (self._start(event)) {
return self._keydown(event); return self._keydown(event);
} }
return true; return true;
}) })
.bind('keyup'+namespace, function(event) { .bind('keyup'+namespace, function(event) {
if (self.options.disabled) {
return;
}
if (self.spinning) { if (self.spinning) {
self._stop(event); self._stop(event);
self._change(event); self._change(event);
@ -88,11 +108,6 @@ $.widget('ui.spinner', {
self.focused = false; self.focused = false;
}); });
// disable spinner if element was already disabled
if (options.disabled) {
this.disable();
}
// button bindings // button bindings
this.buttons = uiSpinner.find('.ui-spinner-button') this.buttons = uiSpinner.find('.ui-spinner-button')
.attr("tabIndex", -1) .attr("tabIndex", -1)
@ -104,12 +119,18 @@ $.widget('ui.spinner', {
.removeClass("ui-corner-all") .removeClass("ui-corner-all")
.end() .end()
.bind('mousedown', function(event) { .bind('mousedown', function(event) {
if (self.options.disabled) {
return;
}
if (self._start(event) === false) { if (self._start(event) === false) {
return false; return false;
} }
self._repeat(null, $(this).hasClass('ui-spinner-up') ? 1 : -1, event); self._repeat(null, $(this).hasClass('ui-spinner-up') ? 1 : -1, event);
}) })
.bind('mouseup', function(event) { .bind('mouseup', function(event) {
if (self.options.disabled) {
return;
}
if (self.counter == 1) { if (self.counter == 1) {
self._spin(($(this).hasClass('ui-spinner-up') ? 1 : -1) * self.options.step, event); self._spin(($(this).hasClass('ui-spinner-up') ? 1 : -1) * self.options.step, event);
} }
@ -119,6 +140,9 @@ $.widget('ui.spinner', {
} }
}) })
.bind("mouseenter", function() { .bind("mouseenter", function() {
if (self.options.disabled) {
return;
}
// button will add ui-state-active if mouse was down while mouseleave and kept down // button will add ui-state-active if mouse was down while mouseleave and kept down
if ($(this).hasClass("ui-state-active")) { if ($(this).hasClass("ui-state-active")) {
if (self._start(event) === false) { if (self._start(event) === false) {
@ -132,9 +156,12 @@ $.widget('ui.spinner', {
self._stop(event); self._stop(event);
self._change(event); self._change(event);
} }
}) });
self.uiSpinner = uiSpinner; // disable spinner if element was already disabled
if (options.disabled) {
this.disable();
}
}, },
_uiSpinnerHtml: function() { _uiSpinnerHtml: function() {
return '<div role="spinbutton" class="ui-spinner ui-state-default ui-widget ui-widget-content ui-corner-all"></div>'; return '<div role="spinbutton" class="ui-spinner ui-state-default ui-widget ui-widget-content ui-corner-all"></div>';
@ -154,9 +181,6 @@ $.widget('ui.spinner', {
return false; return false;
}, },
_spin: function(step, event) { _spin: function(step, event) {
if (this.options.disabled) {
return;
}
if (!this.counter) { if (!this.counter) {
this.counter = 1; this.counter = 1;
} }
@ -176,7 +200,7 @@ $.widget('ui.spinner', {
_stop: function(event) { _stop: function(event) {
this.counter = 0; this.counter = 0;
if (this.timer) { if (this.timer) {
window.clearInterval(this.timer); window.clearTimeout(this.timer);
} }
this.element[0].focus(); this.element[0].focus();
this.spinning = false; this.spinning = false;
@ -226,6 +250,9 @@ $.widget('ui.spinner', {
_mousewheel: function() { _mousewheel: function() {
var self = this; var self = this;
this.element.bind("mousewheel", function(event, delta) { this.element.bind("mousewheel", function(event, delta) {
if (self.options.disabled) {
return;
}
if (!self._start(event)) { if (!self._start(event)) {
return false; return false;
} }
@ -233,12 +260,13 @@ $.widget('ui.spinner', {
if (self.timeout) { if (self.timeout) {
window.clearTimeout(self.timeout); window.clearTimeout(self.timeout);
} }
// TODO can we implement that without a timeout?
self.timeout = window.setTimeout(function() { self.timeout = window.setTimeout(function() {
if (self.spinning) { if (self.spinning) {
self._stop(event); self._stop(event);
self._change(event); self._change(event);
} }
}, 50); }, 13);
event.preventDefault(); event.preventDefault();
}); });
}, },
@ -286,11 +314,13 @@ $.widget('ui.spinner', {
break; break;
case 'value': case 'value':
this._format(this._parse(this.options.value)); this._format(this._parse(this.options.value));
this._aria();
break; break;
} }
}, },
_aria: function() { _aria: function() {
this.uiSpinner // TODO remove check, as soon as this method doesn't get called anymore before uiSpinner is initalized
this.uiSpinner && this.uiSpinner
.attr('aria-valuemin', this.options.min) .attr('aria-valuemin', this.options.min)
.attr('aria-valuemax', this.options.max) .attr('aria-valuemax', this.options.max)
.attr('aria-valuenow', this.value()); .attr('aria-valuenow', this.value());
@ -305,13 +335,13 @@ $.widget('ui.spinner', {
var culture = Globalization.culture || Globalization.cultures['default']; var culture = Globalization.culture || Globalization.cultures['default'];
val = val.replace(culture.numberFormat.currency.symbol, ""); val = val.replace(culture.numberFormat.currency.symbol, "");
} }
val = window.Globalization ? Globalization.parseFloat(val) : +val; val = window.Globalization && this.options.numberformat ? Globalization.parseFloat(val) : +val;
} }
console.log("input", input, "parsed", val) console.log("input", input, "parsed", val)
return isNaN(val) ? null : val; return isNaN(val) ? null : val;
}, },
_format: function(num) { _format: function(num) {
this.element.val( window.Globalization ? Globalization.format(num, this.options.numberformat) : num ); this.element.val( window.Globalization && this.options.numberformat ? Globalization.format(num, this.options.numberformat) : num );
}, },
destroy: function() { destroy: function() {
@ -331,20 +361,18 @@ $.widget('ui.spinner', {
enable: function() { enable: function() {
this.element this.element
.removeAttr('disabled') .removeAttr('disabled')
.siblings()
.removeAttr('disabled')
.parent() .parent()
.removeClass('ui-spinner-disabled ui-state-disabled'); .removeClass('ui-spinner-disabled ui-state-disabled');
this.options.disabled = false; this.options.disabled = false;
this.buttons.button("enable");
}, },
disable: function() { disable: function() {
this.element this.element
.attr('disabled', true) .attr('disabled', true)
.siblings()
.attr('disabled', true)
.parent() .parent()
.addClass('ui-spinner-disabled ui-state-disabled'); .addClass('ui-spinner-disabled ui-state-disabled');
this.options.disabled = true; this.options.disabled = true;
this.buttons.button("disable");
}, },
stepUp: function(steps) { stepUp: function(steps) {
this._spin((steps || 1) * this.options.step, null); this._spin((steps || 1) * this.options.step, null);
@ -355,10 +383,10 @@ $.widget('ui.spinner', {
return this; return this;
}, },
pageUp: function(pages) { pageUp: function(pages) {
return this.stepUp((pages || 1) * this.options.page); return this.stepUp((pages || 1) * pageModifier);
}, },
pageDown: function(pages) { pageDown: function(pages) {
return this.stepDown((pages || 1) * this.options.page); return this.stepDown((pages || 1) * pageModifier);
}, },
widget: function() { widget: function() {