From c6afaa10727fdabefad129cf76cf8a4d2caafb60 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Wed, 11 May 2011 16:30:21 -0700 Subject: Fix #5645 - Position: Allow for arbitrary element to be containing element --- ui/jquery.ui.position.js | 62 +++++++++++++++++++++++++++++------------------- 1 file changed, 37 insertions(+), 25 deletions(-) diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index 98b8198e2..184571154 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -28,6 +28,7 @@ $.fn.position = function( options ) { options = $.extend( {}, options ); var target = $( options.of ), + within = $( options.within || window ), targetElem = target[0], collision = ( options.collision || "flip" ).split( " " ), offsets = {}, @@ -36,6 +37,8 @@ $.fn.position = function( options ) { targetHeight, basePosition; + options.within = within; + if ( targetElem.nodeType === 9 ) { targetWidth = target.width(); targetHeight = target.height(); @@ -168,7 +171,8 @@ $.fn.position = function( options ) { collisionHeight: collisionHeight, offset: [ atOffset[ 0 ] + myOffset[ 0 ], atOffset [ 1 ] + myOffset[ 1 ] ], my: options.my, - at: options.at + at: options.at, + within: within }); } }); @@ -183,12 +187,14 @@ $.fn.position = function( options ) { $.ui.position = { fit: { left: function( position, data ) { - var win = $( window ), - overLeft = win.scrollLeft() - data.collisionPosition.left, - overRight = data.collisionPosition.left + data.collisionWidth - win.width() - win.scrollLeft(); + var win = $( data.within ), + winOffset = win.offset(), + outerWidth = win.outerWidth(), + overLeft = win.scrollLeft() - data.collisionPosition.left + winOffset.left, + overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - win.scrollLeft() - winOffset.left; // element is wider than window or too far left -> align with left edge - if ( data.collisionWidth > win.width() || overLeft > 0 ) { + if ( data.collisionWidth > outerWidth || overLeft > 0 ) { position.left = position.left + overLeft; // too far right -> align with right edge } else if ( overRight > 0 ) { @@ -199,12 +205,14 @@ $.ui.position = { } }, top: function( position, data ) { - var win = $( window ), - overTop = win.scrollTop() - data.collisionPosition.top, - overBottom = data.collisionPosition.top + data.collisionHeight - win.height() - win.scrollTop(); + var win = $( data.within ), + winOffset = win.offset(), + outerHeight = win.outerHeight(), + overTop = win.scrollTop() - data.collisionPosition.top + winOffset.top, + overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - win.scrollTop() - winOffset.top; // element is taller than window or too far up -> align with top edge - if ( data.collisionHeight > win.height() || overTop > 0 ) { + if ( data.collisionHeight > outerHeight || overTop > 0 ) { position.top = position.top + overTop; // too far down -> align with bottom edge } else if ( overBottom > 0 ) { @@ -220,8 +228,12 @@ $.ui.position = { if ( data.at[ 0 ] === center ) { return; } - var win = $( window ), - over = data.collisionPosition.left + data.collisionWidth - win.width() - win.scrollLeft(), + var win = $( data.within ), + winOffset = win.offset(), + outerWidth = win.outerWidth(), + overLeft = data.collisionPosition.left - winOffset.left, + overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - win.scrollLeft() - winOffset.left, + left = data.my[ 0 ] === "left", myOffset = data.my[ 0 ] === "left" ? -data.elemWidth : data.my[ 0 ] === "right" ? @@ -231,19 +243,21 @@ $.ui.position = { data.targetWidth : -data.targetWidth, offset = -2 * data.offset[ 0 ]; - position.left += data.collisionPosition.left < 0 ? - myOffset + atOffset + offset : - over > 0 ? - myOffset + atOffset + offset : - 0; + if ( overLeft < 0 || overRight > 0 ) { + position.left += myOffset + atOffset + offset; + } }, top: function( position, data ) { if ( data.at[ 1 ] === center ) { return; } - var win = $( window ), - over = data.collisionPosition.top + data.collisionHeight - win.height() - win.scrollTop(), - myOffset = data.my[ 1 ] === "top" ? + var win = $( data.within ), + winOffset = win.offset(), + outerHeight = win.outerHeight(), + overTop = data.collisionPosition.top - winOffset.top, + overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - win.scrollTop() - winOffset.top, + top = data.my[ 1 ] === "top", + myOffset = top ? -data.elemHeight : data.my[ 1 ] === "bottom" ? data.elemHeight : @@ -252,11 +266,9 @@ $.ui.position = { data.targetHeight : -data.targetHeight, offset = -2 * data.offset[ 1 ]; - position.top += data.collisionPosition.top < 0 ? - myOffset + atOffset + offset : - over > 0 ? - myOffset + atOffset + offset : - 0; + if ( overTop < 0 || overBottom > 0) { + position.top += myOffset + atOffset + offset; + } } } }; @@ -297,4 +309,4 @@ if ( $.uiBackCompat !== false ) { }( jQuery ) ); } -}( jQuery ) ); +}( jQuery ) ); \ No newline at end of file -- cgit v1.2.3 From abf3a86c8b4220442d35c2da61544d5a0a529b77 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Wed, 11 May 2011 16:44:20 -0700 Subject: Fix issue when window is "within". --- ui/jquery.ui.position.js | 46 ++++++++++++++++++++++++---------------------- 1 file changed, 24 insertions(+), 22 deletions(-) diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index 184571154..eb94a6457 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -37,8 +37,6 @@ $.fn.position = function( options ) { targetHeight, basePosition; - options.within = within; - if ( targetElem.nodeType === 9 ) { targetWidth = target.width(); targetHeight = target.height(); @@ -187,11 +185,12 @@ $.fn.position = function( options ) { $.ui.position = { fit: { left: function( position, data ) { - var win = $( data.within ), - winOffset = win.offset(), - outerWidth = win.outerWidth(), - overLeft = win.scrollLeft() - data.collisionPosition.left + winOffset.left, - overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - win.scrollLeft() - winOffset.left; + var win = data.within, + isWindow = $.isWindow(data.within[0]), + winOffset = isWindow ? 0 : win.offset().left, + outerWidth = isWindow ? win.width() : win.outerWidth(), + overLeft = win.scrollLeft() - data.collisionPosition.left + winOffset, + overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - win.scrollLeft() - winOffset; // element is wider than window or too far left -> align with left edge if ( data.collisionWidth > outerWidth || overLeft > 0 ) { @@ -205,11 +204,12 @@ $.ui.position = { } }, top: function( position, data ) { - var win = $( data.within ), - winOffset = win.offset(), - outerHeight = win.outerHeight(), - overTop = win.scrollTop() - data.collisionPosition.top + winOffset.top, - overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - win.scrollTop() - winOffset.top; + var win = data.within, + isWindow = $.isWindow(data.within[0]), + winOffset = isWindow ? 0 : win.offset().top, + outerHeight = isWindow ? win.height() : win.outerHeight(), + overTop = win.scrollTop() - data.collisionPosition.top + winOffset, + overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - win.scrollTop() - winOffset; // element is taller than window or too far up -> align with top edge if ( data.collisionHeight > outerHeight || overTop > 0 ) { @@ -228,11 +228,12 @@ $.ui.position = { if ( data.at[ 0 ] === center ) { return; } - var win = $( data.within ), - winOffset = win.offset(), - outerWidth = win.outerWidth(), - overLeft = data.collisionPosition.left - winOffset.left, - overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - win.scrollLeft() - winOffset.left, + var win = data.within, + isWindow = $.isWindow(data.within[0]), + winOffset = isWindow ? 0 : win.offset().left, + outerWidth = isWindow ? win.width() : win.outerWidth(), + overLeft = data.collisionPosition.left - winOffset, + overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - win.scrollLeft() - winOffset left = data.my[ 0 ] === "left", myOffset = data.my[ 0 ] === "left" ? -data.elemWidth : @@ -251,11 +252,12 @@ $.ui.position = { if ( data.at[ 1 ] === center ) { return; } - var win = $( data.within ), - winOffset = win.offset(), - outerHeight = win.outerHeight(), - overTop = data.collisionPosition.top - winOffset.top, - overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - win.scrollTop() - winOffset.top, + var win = data.within, + isWindow = $.isWindow(data.within[0]), + winOffset = isWindow ? 0 : win.offset().top, + outerHeight = isWindow ? win.height() : win.outerHeight(), + overTop = data.collisionPosition.top - winOffset, + overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - win.scrollTop() - winOffset, top = data.my[ 1 ] === "top", myOffset = top ? -data.elemHeight : -- cgit v1.2.3 From 9e4e359705e6cb0b9608c3d842b7235ab1daefef Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Wed, 11 May 2011 16:52:43 -0700 Subject: fix spacing and add in a missing comma --- ui/jquery.ui.position.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index eb94a6457..ab9c6aae0 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -186,7 +186,7 @@ $.ui.position = { fit: { left: function( position, data ) { var win = data.within, - isWindow = $.isWindow(data.within[0]), + isWindow = $.isWindow( data.within[0] ), winOffset = isWindow ? 0 : win.offset().left, outerWidth = isWindow ? win.width() : win.outerWidth(), overLeft = win.scrollLeft() - data.collisionPosition.left + winOffset, @@ -205,7 +205,7 @@ $.ui.position = { }, top: function( position, data ) { var win = data.within, - isWindow = $.isWindow(data.within[0]), + isWindow = $.isWindow( data.within[0] ), winOffset = isWindow ? 0 : win.offset().top, outerHeight = isWindow ? win.height() : win.outerHeight(), overTop = win.scrollTop() - data.collisionPosition.top + winOffset, @@ -228,12 +228,13 @@ $.ui.position = { if ( data.at[ 0 ] === center ) { return; } + var win = data.within, - isWindow = $.isWindow(data.within[0]), + isWindow = $.isWindow( data.within[0] ), winOffset = isWindow ? 0 : win.offset().left, outerWidth = isWindow ? win.width() : win.outerWidth(), overLeft = data.collisionPosition.left - winOffset, - overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - win.scrollLeft() - winOffset + overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - win.scrollLeft() - winOffset, left = data.my[ 0 ] === "left", myOffset = data.my[ 0 ] === "left" ? -data.elemWidth : @@ -253,7 +254,7 @@ $.ui.position = { return; } var win = data.within, - isWindow = $.isWindow(data.within[0]), + isWindow = $.isWindow( data.within[0] ), winOffset = isWindow ? 0 : win.offset().top, outerHeight = isWindow ? win.height() : win.outerHeight(), overTop = data.collisionPosition.top - winOffset, -- cgit v1.2.3 From b6497996cee2dc8dff0006ceae0d6e240e658f6a Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 12 May 2011 13:28:01 +0000 Subject: Replace comma with semi-colon. How'd that get there? --- ui/jquery.ui.position.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index ab9c6aae0..c1c815bd2 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -111,7 +111,7 @@ $.fn.position = function( options ) { parseInt( offsets.at[ 1 ], 10 ) * ( rpercent.test( offsets.at[ 1 ] ) ? targetHeight / 100 : 1 ) ]; - basePosition.left += atOffset[ 0 ], + basePosition.left += atOffset[ 0 ]; basePosition.top += atOffset[ 1 ]; return this.each(function() { -- cgit v1.2.3 From 396ed559a490507d07a605bd989e83d24e2d7f40 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 12 May 2011 14:27:29 +0000 Subject: Add a new visual test for position --- tests/visual/position/position_within.html | 177 +++++++++++++++++++++++++++++ 1 file changed, 177 insertions(+) create mode 100644 tests/visual/position/position_within.html diff --git a/tests/visual/position/position_within.html b/tests/visual/position/position_within.html new file mode 100644 index 000000000..f30ee625f --- /dev/null +++ b/tests/visual/position/position_within.html @@ -0,0 +1,177 @@ + + + + + Position Visual Test: Default + + + + + + + + + + + + + + + + +
+ Use the form controls to configure the positioning, or drag the positioned element to modify its offset. +
Drag around the parent element to see collision detection in action. +
+ +
+
+ +
+

This is the position parent element.

+
+ +
+

to position

+
+ +
+

to position 2

+
+ +
+ position... +
+ my: + + +
+
+ at: + + +
+
+ offset: + +
+
+ collision: + + +
+
+ +
+
+ + + \ No newline at end of file -- cgit v1.2.3 From 0bda22f443ace20035ec4f049c60b951d5c82b03 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 12 May 2011 14:29:27 +0000 Subject: Update title to reflect test --- tests/visual/position/position_within.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/visual/position/position_within.html b/tests/visual/position/position_within.html index f30ee625f..da97eb7e1 100644 --- a/tests/visual/position/position_within.html +++ b/tests/visual/position/position_within.html @@ -2,7 +2,7 @@ - Position Visual Test: Default + Position Visual Test: Containing Element -- cgit v1.2.3 From 7bca8c100445d1ab8da4f25bd9201408f5eb2174 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 12 May 2011 20:44:24 +0000 Subject: Fix typos in original tests --- tests/unit/position/position_core.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/tests/unit/position/position_core.js b/tests/unit/position/position_core.js index dbbda8a3b..b3f5d9b61 100644 --- a/tests/unit/position/position_core.js +++ b/tests/unit/position/position_core.js @@ -1,7 +1,7 @@ (function( $ ) { function scrollTopSupport() { - $( window ).scrollTop( 1 ); + $( window ).scrollTop( 1 ); return $( window ).scrollTop() === 1; } @@ -64,7 +64,6 @@ test( "positions", function() { center: 3, right: 6, top: 0, - center: 3, bottom: 6 }; var start = { left: 4, top: 4 }; @@ -351,7 +350,7 @@ test( "collision: flip, with offset", function() { collisionTest2({ collision: "flip", - at: "left-2 top-3", + at: "left-2 top-3" }, { top: $( window ).height() + 3, left: $( window ).width() + 2 }, "right bottom, negative offset" ); }); -- cgit v1.2.3 From 17be87f34cb2651e7903db3911527c43f5c05ba1 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 12 May 2011 20:48:01 +0000 Subject: Whitespace fix --- tests/unit/position/position_core.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/unit/position/position_core.js b/tests/unit/position/position_core.js index b3f5d9b61..613fffa02 100644 --- a/tests/unit/position/position_core.js +++ b/tests/unit/position/position_core.js @@ -1,7 +1,7 @@ (function( $ ) { function scrollTopSupport() { - $( window ).scrollTop( 1 ); + $( window ).scrollTop( 1 ); return $( window ).scrollTop() === 1; } -- cgit v1.2.3 From dc66f02601eb3a46a93e5d08145e9b4580def237 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 12 May 2011 20:50:16 +0000 Subject: Add tests for position's `within` --- tests/unit/position/position.html | 44 ++- tests/unit/position/position_core_within.js | 560 ++++++++++++++++++++++++++++ tests/visual/position/position_within.html | 1 + 3 files changed, 586 insertions(+), 19 deletions(-) create mode 100644 tests/unit/position/position_core_within.js diff --git a/tests/unit/position/position.html b/tests/unit/position/position.html index 4f2e87e08..6e4373172 100644 --- a/tests/unit/position/position.html +++ b/tests/unit/position/position.html @@ -16,6 +16,7 @@ + @@ -34,29 +35,34 @@ elements smaller than 10px have a line-height set on them to avoid a bug in IE6 -->
-
-
-
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+ +
+ +
+
+
+
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
diff --git a/tests/unit/position/position_core_within.js b/tests/unit/position/position_core_within.js new file mode 100644 index 000000000..0ece93b69 --- /dev/null +++ b/tests/unit/position/position_core_within.js @@ -0,0 +1,560 @@ +(function( $ ) { + +$("#within-container").show(); + +function scrollTopSupport() { + $( window ).scrollTop( 1 ); + return $( window ).scrollTop() === 1; +} +var addTop = -20, + addLeft = -20; + +$.fn.addOffsets = function() { + var elOffset = this.offset(), + offset = $("#within-container").offset(); + + elOffset.top -= offset.top; + elOffset.left -= offset.left; + + return {top: elOffset.top - offset.top, left: elOffset.left - offset.left }; +}; + +test( "within: my, at, of", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + $( "#elx" ).position({ + my: "left top", + at: "left top", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "left top, left top" ); + + $( "#elx" ).position({ + my: "left top", + at: "left bottom", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 60, left: addLeft + 40 }, "left top, left bottom" ); + + $( "#elx" ).position({ + my: "left", + at: "bottom", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 55, left: addLeft + 50 }, "left, bottom" ); + + $( "#elx" ).position({ + my: "left foo", + at: "bar baz", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 45, left: addLeft +50 }, "left foo, bar baz" ); +}); + +test( "within: multiple elements", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + var elements = $( "#el1, #el2" ); + var result = elements.position({ + my: "left top", + at: "left bottom", + of: "#parent", + collision: "none", + within: $("#within-container") + }); + + same( result, elements ); + var expected = { top: addTop + 10, left: addLeft + 4 }; + elements.each(function() { + same( $( this ).addOffsets(), expected ); + }); +}); + +test( "within: positions", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + var definitions = []; + var offsets = { + left: 0, + center: 3, + right: 6, + top: 0, + bottom: 6 + }; + var start = { left: 4, top: 4 }; + $.each( [ 0, 1 ], function( my ) { + $.each( [ "top", "center", "bottom" ], function( vindex, vertical ) { + $.each( [ "left", "center", "right" ], function( hindex, horizontal ) { + definitions.push({ + my: my ? horizontal + " " + vertical : "left top", + at: !my ? horizontal + " " + vertical : "left top", + result: { + top: addTop + (my ? start.top - offsets[ vertical ] : start.top + offsets[ vertical ]), + left: addLeft + (my ? start.left - offsets[ horizontal ] : start.left + offsets[ horizontal ]) + } + }); + }); + }); + }); + var el = $( "#el1" ); + $.each( definitions, function( index, definition ) { + el.position({ + my: definition.my, + at: definition.at, + of: "#parent", + collision: "none", + within: $("#within-container") + }); + same( el.addOffsets(), definition.result, + "Position via " + QUnit.jsDump.parse({ my:definition.my, at:definition.at }) ); + }); +}); + +test( "within: of", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + + $( "#elx" ).position({ + my: "left top", + at: "left top", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "selector" ); + + $( "#elx" ).position({ + my: "left top", + at: "left bottom", + of: $( "#parentx"), + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 60, left: addLeft + 40 }, "jQuery object" ); + + $( "#elx" ).position({ + my: "left top", + at: "left top", + of: $( "#parentx" )[ 0 ], + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "DOM element" ); + + // these tests are not valid for "within" since of is not contained by within. + /* + $( "#elx" ).position({ + my: "right bottom", + at: "right bottom", + of: document, + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { + top: addTop + $( document ).height() - 10, + left: addLeft + $( document ).width() - 10 + }, "document" ); + + $( "#elx" ).position({ + my: "right bottom", + at: "right bottom", + of: $( document ), + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { + top: addTop + $( document ).height() - 10, + left: addLeft + $( document ).width() - 10 + }, "document as jQuery object" ); + + $( window ).scrollTop( 0 ); + + $( "#elx" ).position({ + my: "right bottom", + at: "right bottom", + of: window, + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { + top: addTop + $( window ).height() - 10, + left: addLeft + $( window ).width() - 10 + }, "window" ); + + $( "#elx" ).position({ + my: "right bottom", + at: "right bottom", + of: $( window ), + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { + top: addTop + $( window ).height() - 10, + left: addLeft + $( window ).width() - 10 + }, "window as jQuery object" ); + + if ( scrollTopSupport() ) { + $( window ).scrollTop( 500 ).scrollLeft( 200 ); + $( "#elx" ).position({ + my: "right bottom", + at: "right bottom", + of: window, + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { + top: addTop + $( window ).height() + 500 - 10, + left: addLeft + $( window ).width() + 200 - 10 + }, "window, scrolled" ); + $( window ).scrollTop( 0 ).scrollLeft( 0 ); + }*/ + + var event = $.extend( $.Event( "someEvent" ), { pageX: 200, pageY: 300 } ); + $( "#elx" ).position({ + my: "left top", + at: "left top", + of: event, + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).offset(), { + top: 300, + left: 200 + }, "event - left top, left top" ); + + event = $.extend( $.Event( "someEvent" ), { pageX: 400, pageY: 600 } ); + $( "#elx" ).position({ + my: "left top", + at: "right bottom", + of: event, + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).offset(), { + top: 600, + left: 400 + }, "event - left top, right bottom" ); +}); + +test( "within:offsets", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + $( "#elx" ).position({ + my: "left top", + at: "left+10 bottom+10", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 70, left: addLeft + 50 }, "offsets in at" ); + + $( "#elx" ).position({ + my: "left+10 top-10", + at: "left bottom", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 50, left: addLeft + 50 }, "offsets in my" ); + + $( "#elx" ).position({ + my: "left top", + at: "left+50% bottom-10%", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 58, left: addLeft + 50 }, "percentage offsets in at" ); + + $( "#elx" ).position({ + my: "left-30% top+50%", + at: "left bottom", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 65, left: addLeft + 37 }, "percentage offsets in my" ); +}); + +test( "within: using", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + expect( 6 ); + + var count = 0, + elems = $( "#el1, #el2" ), + expectedPosition = { top: addTop + 40, left: addLeft + 40 }, + originalPosition = elems.position({ + my: "right bottom", + at: "rigt bottom", + of: "#parentx", + collision: "none", + within: $("#within-container") + }).addOffsets(); + + elems.position({ + my: "left top", + at: "left top", + of: "#parentx", + using: function( position ) { + position.top -= $("#within-container").offset().top; + position.left -= $("#within-container").offset().left; + same( this, elems[ count ], "correct context for call #" + count ); + same( position, expectedPosition, "correct position for call #" + count ); + count++; + }, + within: $("#within-container") + }); + + elems.each(function() { + same( $( this ).addOffsets(), originalPosition, "elements not moved" ); + }); +}); + +function collisionTest( config, result, msg ) { + var elem = $( "#elx" ).position( $.extend({ + my: "left top", + at: "right bottom", + of: $("#within-container")[0], + within: $("#within-container") + }, config ) ); + same( elem.addOffsets(), result, msg ); +} + +function collisionTest2( config, result, msg ) { + collisionTest( $.extend({ + my: "right bottom", + at: "left top" + }, config ), result, msg ); +} + +test( "within: collision: fit, no offset", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + collisionTest({ + collision: "fit" + }, { top: addTop + $("#within-container").height() - 10, left: addLeft + $("#within-container").width() - 10 }, "right bottom" ); + + collisionTest2({ + collision: "fit" + }, { top: addTop + 0, left: addLeft + 0 }, "left top" ); +}); + + +test( "within: collision: fit, with offset", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + collisionTest({ + collision: "fit", + at: "right+2 bottom+3" + }, { top: addTop + $("#within-container").height() - 10, left: addLeft + $("#within-container").width() - 10 }, "right bottom"); + + collisionTest2({ + collision: "fit", + at: "left+2 top+3" + }, { top: addTop + 0, left: addLeft + 0 }, "left top, positive offset" ); + + collisionTest2({ + collision: "fit", + at: "left-2 top-3" + }, { top: addTop + 0, left: addLeft + 0 }, "left top, negative offset" ); +}); + +test( "within: collision: fit, window scrolled", function() { + if ( scrollTopSupport() ) { + $("#within-container").css({"width": "1000px", "height": "800px", "top": "20px", "left": "20px", "position": "relative"}); + + + + var win = $("#within-container").css("overflow", "auto"); + win.scrollTop( 300 ).scrollLeft( 150 ); + + collisionTest({ + collision: "fit", + at: "left-100 top-100" + }, { top: addTop + 300, left: addLeft + 150 }, "top left" ); + collisionTest2({ + collision: "fit", + at: "right+100 bottom+100" + }, { top: addTop + 300 + win.height() + 10, left: addLeft + 150 + win.width() + 10 }, "right bottom" ); + win.scrollTop( 0 ).scrollLeft( 0 ); + + } + +}); + +test( "within: collision: flip, no offset", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + collisionTest({ + collision: "flip" + }, { top: addTop + -10, left: addLeft + -10 }, "left top" ); + + collisionTest2({ + collision: "flip" + }, { top: addTop + $("#within-container").height(), left: addLeft + $("#within-container").width() }, "right bottom" ); +}); + +test( "within: collision: flip, with offset", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + collisionTest({ + collision: "flip", + at: "right+2 bottom+3" + }, { top: addTop + -13, left: addLeft + -12 }, "left top, with offset added" ); + + collisionTest2({ + collision: "flip", + at: "left+2 top+3" + }, { top: addTop + $("#within-container").height() - 3, left: addLeft + $("#within-container").width() - 2 }, "bottom, positive offset" ); + + collisionTest2({ + collision: "flip", + at: "left-2 top-3" + }, { top: addTop + $("#within-container").height() + 3, left: addLeft + $("#within-container").width() + 2 }, "right bottom, negative offset" ); +}); + +test( "within: collision: none, no offset", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + collisionTest({ + collision: "none" + }, { top: addTop + $("#within-container").height(), left: addLeft + $("#within-container").width() }, "left top" ); + + collisionTest2({ + collision: "none" + }, { top: addTop + -10, left: addLeft + -10 }, "moved to the right bottom" ); +}); + +test( "within: collision: none, with offset", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + collisionTest({ + collision: "none", + at: "right+2 bottom+3" + }, { top: addTop + $("#within-container").height() + 3, left: addLeft + $("#within-container").width() + 2 }, "right bottom, with offset added" ); + + collisionTest2({ + collision: "none", + at: "left+2 top+3" + }, { top: addTop + -7, left: addLeft + -8 }, "left top, positive offset" ); + + collisionTest2({ + collision: "none", + at: "left-2 top-3" + }, { top: addTop + -13, left: addLeft + -12 }, "left top, negative offset" ); +}); + +test( "within: collision: fit, with margin", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + $( "#elx" ).css( "margin", 10 ); + + collisionTest({ + collision: "fit" + }, { top: addTop + $("#within-container").height() - 20, left: addLeft + $("#within-container").width() - 20 }, "right bottom" ); + + collisionTest2({ + collision: "fit" + }, { top: addTop + 10, left: addLeft + 10 }, "left top" ); + + $( "#elx" ).css({ + "margin-left": 5, + "margin-top": 5 + }); + + collisionTest({ + collision: "fit" + }, { top: addTop + $("#within-container").height() - 20, left: addLeft + $("#within-container").width() - 20 }, "right bottom" ); + + collisionTest2({ + collision: "fit" + }, { top: addTop + 5, left: addLeft + 5 }, "left top" ); + + $( "#elx" ).css({ + "margin-right": 15, + "margin-bottom": 15 + }); + + collisionTest({ + collision: "fit" + }, { top: addTop + $("#within-container").height() - 25, left: addLeft + $("#within-container").width() - 25 }, "right bottom" ); + + collisionTest2({ + collision: "fit" + }, { top: addTop + 5, left: addLeft + 5 }, "left top" ); +}); + +test( "within: collision: flip, with margin", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + $( "#elx" ).css( "margin", 10 ); + + collisionTest({ + collision: "flip", + at: "left top" + }, { top: addTop + $("#within-container").height() - 10, left: addLeft + $("#within-container").width() - 10 }, "left top" ); + + collisionTest2({ + collision: "flip", + at: "right bottom" + }, { top: addTop + 0, left: addLeft + 0 }, "right bottom" ); +}); + +//test( "bug #5280: consistent results (avoid fractional values)", function() { +// var wrapper = $( "#bug-5280" ), +// elem = wrapper.children(), +// offset1 = elem.position({ +// my: "center", +// at: "center", +// of: wrapper, +// collision: "none" +// }).offset(), +// offset2 = elem.position({ +// my: "center", +// at: "center", +// of: wrapper, +// collision: "none" +// }).offset(); +// same( offset1, offset2 ); +//}); + + + +}( jQuery ) ); diff --git a/tests/visual/position/position_within.html b/tests/visual/position/position_within.html index da97eb7e1..e53e9ddf6 100644 --- a/tests/visual/position/position_within.html +++ b/tests/visual/position/position_within.html @@ -76,6 +76,7 @@ collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val() }); } + $( ".demo" ).append("
").css("overflow","auto").scrollTop( 500 ).scrollLeft( 500 ); $( ".positionable" ).css( "opacity", 0.5 ); -- cgit v1.2.3 From c9c6908434b41df9fcfd55c38d2cbf58df9d2e04 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 12 May 2011 20:51:49 +0000 Subject: Another whitespace fix --- tests/unit/position/position_core_within.js | 206 ++++++++++++++-------------- 1 file changed, 103 insertions(+), 103 deletions(-) diff --git a/tests/unit/position/position_core_within.js b/tests/unit/position/position_core_within.js index 0ece93b69..90c12c44b 100644 --- a/tests/unit/position/position_core_within.js +++ b/tests/unit/position/position_core_within.js @@ -3,33 +3,33 @@ $("#within-container").show(); function scrollTopSupport() { - $( window ).scrollTop( 1 ); - return $( window ).scrollTop() === 1; + $( window ).scrollTop( 1 ); + return $( window ).scrollTop() === 1; } var addTop = -20, - addLeft = -20; - + addLeft = -20; + $.fn.addOffsets = function() { - var elOffset = this.offset(), - offset = $("#within-container").offset(); + var elOffset = this.offset(), + offset = $("#within-container").offset(); - elOffset.top -= offset.top; - elOffset.left -= offset.left; - - return {top: elOffset.top - offset.top, left: elOffset.left - offset.left }; + elOffset.top -= offset.top; + elOffset.left -= offset.left; + + return {top: elOffset.top - offset.top, left: elOffset.left - offset.left }; }; test( "within: my, at, of", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + $( "#elx" ).position({ my: "left top", at: "left top", of: "#parentx", collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "left top, left top" ); @@ -38,7 +38,7 @@ test( "within: my, at, of", function() { at: "left bottom", of: "#parentx", collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + 60, left: addLeft + 40 }, "left top, left bottom" ); @@ -47,7 +47,7 @@ test( "within: my, at, of", function() { at: "bottom", of: "#parentx", collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + 55, left: addLeft + 50 }, "left, bottom" ); @@ -56,23 +56,23 @@ test( "within: my, at, of", function() { at: "bar baz", of: "#parentx", collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + 45, left: addLeft +50 }, "left foo, bar baz" ); }); test( "within: multiple elements", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + var elements = $( "#el1, #el2" ); var result = elements.position({ my: "left top", at: "left bottom", of: "#parent", collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( result, elements ); @@ -83,10 +83,10 @@ test( "within: multiple elements", function() { }); test( "within: positions", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + var definitions = []; var offsets = { left: 0, @@ -117,7 +117,7 @@ test( "within: positions", function() { at: definition.at, of: "#parent", collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( el.addOffsets(), definition.result, "Position via " + QUnit.jsDump.parse({ my:definition.my, at:definition.at }) ); @@ -125,17 +125,17 @@ test( "within: positions", function() { }); test( "within: of", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + $( "#elx" ).position({ my: "left top", at: "left top", of: "#parentx", collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "selector" ); @@ -144,7 +144,7 @@ test( "within: of", function() { at: "left bottom", of: $( "#parentx"), collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + 60, left: addLeft + 40 }, "jQuery object" ); @@ -153,18 +153,18 @@ test( "within: of", function() { at: "left top", of: $( "#parentx" )[ 0 ], collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "DOM element" ); - // these tests are not valid for "within" since of is not contained by within. - /* - $( "#elx" ).position({ + // these tests are not valid for "within" since of is not contained by within. + /* + $( "#elx" ).position({ my: "right bottom", at: "right bottom", of: document, collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + $( document ).height() - 10, @@ -176,7 +176,7 @@ test( "within: of", function() { at: "right bottom", of: $( document ), collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + $( document ).height() - 10, @@ -190,7 +190,7 @@ test( "within: of", function() { at: "right bottom", of: window, collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + $( window ).height() - 10, @@ -202,7 +202,7 @@ test( "within: of", function() { at: "right bottom", of: $( window ), collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + $( window ).height() - 10, @@ -216,7 +216,7 @@ test( "within: of", function() { at: "right bottom", of: window, collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + $( window ).height() + 500 - 10, @@ -231,7 +231,7 @@ test( "within: of", function() { at: "left top", of: event, collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).offset(), { top: 300, @@ -244,7 +244,7 @@ test( "within: of", function() { at: "right bottom", of: event, collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).offset(), { top: 600, @@ -253,16 +253,16 @@ test( "within: of", function() { }); test( "within:offsets", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + $( "#elx" ).position({ my: "left top", at: "left+10 bottom+10", of: "#parentx", collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + 70, left: addLeft + 50 }, "offsets in at" ); @@ -271,7 +271,7 @@ test( "within:offsets", function() { at: "left bottom", of: "#parentx", collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + 50, left: addLeft + 50 }, "offsets in my" ); @@ -280,7 +280,7 @@ test( "within:offsets", function() { at: "left+50% bottom-10%", of: "#parentx", collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + 58, left: addLeft + 50 }, "percentage offsets in at" ); @@ -289,16 +289,16 @@ test( "within:offsets", function() { at: "left bottom", of: "#parentx", collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + 65, left: addLeft + 37 }, "percentage offsets in my" ); }); test( "within: using", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + expect( 6 ); var count = 0, @@ -309,7 +309,7 @@ test( "within: using", function() { at: "rigt bottom", of: "#parentx", collision: "none", - within: $("#within-container") + within: $("#within-container") }).addOffsets(); elems.position({ @@ -317,13 +317,13 @@ test( "within: using", function() { at: "left top", of: "#parentx", using: function( position ) { - position.top -= $("#within-container").offset().top; - position.left -= $("#within-container").offset().left; + position.top -= $("#within-container").offset().top; + position.left -= $("#within-container").offset().left; same( this, elems[ count ], "correct context for call #" + count ); same( position, expectedPosition, "correct position for call #" + count ); count++; }, - within: $("#within-container") + within: $("#within-container") }); elems.each(function() { @@ -336,7 +336,7 @@ function collisionTest( config, result, msg ) { my: "left top", at: "right bottom", of: $("#within-container")[0], - within: $("#within-container") + within: $("#within-container") }, config ) ); same( elem.addOffsets(), result, msg ); } @@ -349,10 +349,10 @@ function collisionTest2( config, result, msg ) { } test( "within: collision: fit, no offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + collisionTest({ collision: "fit" }, { top: addTop + $("#within-container").height() - 10, left: addLeft + $("#within-container").width() - 10 }, "right bottom" ); @@ -364,10 +364,10 @@ test( "within: collision: fit, no offset", function() { test( "within: collision: fit, with offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + collisionTest({ collision: "fit", at: "right+2 bottom+3" @@ -386,13 +386,13 @@ test( "within: collision: fit, with offset", function() { test( "within: collision: fit, window scrolled", function() { if ( scrollTopSupport() ) { - $("#within-container").css({"width": "1000px", "height": "800px", "top": "20px", "left": "20px", "position": "relative"}); - - - - var win = $("#within-container").css("overflow", "auto"); - win.scrollTop( 300 ).scrollLeft( 150 ); - + $("#within-container").css({"width": "1000px", "height": "800px", "top": "20px", "left": "20px", "position": "relative"}); + + + + var win = $("#within-container").css("overflow", "auto"); + win.scrollTop( 300 ).scrollLeft( 150 ); + collisionTest({ collision: "fit", at: "left-100 top-100" @@ -406,12 +406,12 @@ test( "within: collision: fit, window scrolled", function() { } }); - + test( "within: collision: flip, no offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + collisionTest({ collision: "flip" }, { top: addTop + -10, left: addLeft + -10 }, "left top" ); @@ -422,10 +422,10 @@ test( "within: collision: flip, no offset", function() { }); test( "within: collision: flip, with offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + collisionTest({ collision: "flip", at: "right+2 bottom+3" @@ -443,10 +443,10 @@ test( "within: collision: flip, with offset", function() { }); test( "within: collision: none, no offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + collisionTest({ collision: "none" }, { top: addTop + $("#within-container").height(), left: addLeft + $("#within-container").width() }, "left top" ); @@ -457,10 +457,10 @@ test( "within: collision: none, no offset", function() { }); test( "within: collision: none, with offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + collisionTest({ collision: "none", at: "right+2 bottom+3" @@ -478,10 +478,10 @@ test( "within: collision: none, with offset", function() { }); test( "within: collision: fit, with margin", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + $( "#elx" ).css( "margin", 10 ); collisionTest({ @@ -520,10 +520,10 @@ test( "within: collision: fit, with margin", function() { }); test( "within: collision: flip, with margin", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + $( "#elx" ).css( "margin", 10 ); collisionTest({ -- cgit v1.2.3 From e31d707d93faafa6ba788de06688069015411adf Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 12 May 2011 21:07:09 +0000 Subject: The qunit-fixture were preventing the results from being clicked. Make the results appear on top of the qunit-fixture --- tests/unit/position/position.html | 17 +++++++++-------- tests/unit/position/position_core_within.js | 2 -- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/tests/unit/position/position.html b/tests/unit/position/position.html index 6e4373172..d71bae497 100644 --- a/tests/unit/position/position.html +++ b/tests/unit/position/position.html @@ -21,20 +21,21 @@ - -

jQuery UI Position Test Suite

-

-
-

-
    -
+
+

jQuery UI Position Test Suite

+

+
+

+
    +
+
-
+
diff --git a/tests/unit/position/position_core_within.js b/tests/unit/position/position_core_within.js index 90c12c44b..98a2f5943 100644 --- a/tests/unit/position/position_core_within.js +++ b/tests/unit/position/position_core_within.js @@ -555,6 +555,4 @@ test( "within: collision: flip, with margin", function() { // same( offset1, offset2 ); //}); - - }( jQuery ) ); -- cgit v1.2.3 From 2f4da6f13d825698ce1fed5c11b2b4e8afada04e Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Fri, 13 May 2011 19:17:42 +0000 Subject: Update var name to avoid confusion --- ui/jquery.ui.position.js | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index c1c815bd2..6020f0141 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -185,12 +185,12 @@ $.fn.position = function( options ) { $.ui.position = { fit: { left: function( position, data ) { - var win = data.within, + var within = data.within, isWindow = $.isWindow( data.within[0] ), - winOffset = isWindow ? 0 : win.offset().left, - outerWidth = isWindow ? win.width() : win.outerWidth(), - overLeft = win.scrollLeft() - data.collisionPosition.left + winOffset, - overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - win.scrollLeft() - winOffset; + withinOffset = isWindow ? 0 : within.offset().left, + outerWidth = isWindow ? within.width() : within.outerWidth(), + overLeft = within.scrollLeft() - data.collisionPosition.left + withinOffset, + overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - within.scrollLeft() - withinOffset; // element is wider than window or too far left -> align with left edge if ( data.collisionWidth > outerWidth || overLeft > 0 ) { @@ -204,12 +204,12 @@ $.ui.position = { } }, top: function( position, data ) { - var win = data.within, + var within = data.within, isWindow = $.isWindow( data.within[0] ), - winOffset = isWindow ? 0 : win.offset().top, - outerHeight = isWindow ? win.height() : win.outerHeight(), - overTop = win.scrollTop() - data.collisionPosition.top + winOffset, - overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - win.scrollTop() - winOffset; + withinOffset = isWindow ? 0 : within.offset().top, + outerHeight = isWindow ? within.height() : within.outerHeight(), + overTop = within.scrollTop() - data.collisionPosition.top + withinOffset, + overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - within.scrollTop() - withinOffset; // element is taller than window or too far up -> align with top edge if ( data.collisionHeight > outerHeight || overTop > 0 ) { @@ -229,12 +229,12 @@ $.ui.position = { return; } - var win = data.within, + var within = data.within, isWindow = $.isWindow( data.within[0] ), - winOffset = isWindow ? 0 : win.offset().left, - outerWidth = isWindow ? win.width() : win.outerWidth(), - overLeft = data.collisionPosition.left - winOffset, - overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - win.scrollLeft() - winOffset, + withinOffset = isWindow ? 0 : within.offset().left, + outerWidth = isWindow ? within.width() : within.outerWidth(), + overLeft = data.collisionPosition.left - withinOffset, + overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - within.scrollLeft() - withinOffset, left = data.my[ 0 ] === "left", myOffset = data.my[ 0 ] === "left" ? -data.elemWidth : @@ -253,12 +253,12 @@ $.ui.position = { if ( data.at[ 1 ] === center ) { return; } - var win = data.within, + var within = data.within, isWindow = $.isWindow( data.within[0] ), - winOffset = isWindow ? 0 : win.offset().top, - outerHeight = isWindow ? win.height() : win.outerHeight(), - overTop = data.collisionPosition.top - winOffset, - overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - win.scrollTop() - winOffset, + withinOffset = isWindow ? 0 : within.offset().top, + outerHeight = isWindow ? within.height() : within.outerHeight(), + overTop = data.collisionPosition.top - withinOffset, + overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - within.scrollTop() - withinOffset, top = data.my[ 1 ] === "top", myOffset = top ? -data.elemHeight : -- cgit v1.2.3 From 2bf45db9a556cfdcdb62e568a61423f395156482 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Fri, 13 May 2011 20:53:25 +0000 Subject: Update test to make things a bit easier to test --- tests/visual/position/position_within.html | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/tests/visual/position/position_within.html b/tests/visual/position/position_within.html index e53e9ddf6..a20ae7b56 100644 --- a/tests/visual/position/position_within.html +++ b/tests/visual/position/position_within.html @@ -19,6 +19,9 @@ height:100%; width:100%; margin:0; + /* force scroll bar*/ + min-height:800px; + min-width:800px; } .demo-description { text-align:center; @@ -76,7 +79,7 @@ collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val() }); } - $( ".demo" ).append("
").css("overflow","auto").scrollTop( 500 ).scrollLeft( 500 ); + $( ".demo" ).append("
").css("overflow","auto"); $( ".positionable" ).css( "opacity", 0.5 ); @@ -91,8 +94,9 @@ // reset offset before calculating it $( "#offset" ).val( "0" ); position(function( result ) { - $( "#offset" ).val( "" + ( ui.offset.left - result.left ) + - " " + ( ui.offset.top - result.top ) ); + var demo = $( ".demo" ); + $( "#offset" ).val( "" + ( ui.offset.left - result.left - demo.offset().left + demo.scrollLeft() ) + + " " + ( ui.offset.top - result.top - demo.offset().top + demo.scrollTop() ) ); position(); }); } -- cgit v1.2.3 From 939b6989c71683638415361e2f5410307b4211dc Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Fri, 13 May 2011 20:54:25 +0000 Subject: Update position to work properly when window and/or within element is scrolled. --- ui/jquery.ui.position.js | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index 6020f0141..5ac19fcca 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -186,11 +186,12 @@ $.ui.position = { fit: { left: function( position, data ) { var within = data.within, + win = $( window ), isWindow = $.isWindow( data.within[0] ), withinOffset = isWindow ? 0 : within.offset().left, outerWidth = isWindow ? within.width() : within.outerWidth(), - overLeft = within.scrollLeft() - data.collisionPosition.left + withinOffset, - overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - within.scrollLeft() - withinOffset; + overLeft = - data.collisionPosition.left + withinOffset, + overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - withinOffset; // element is wider than window or too far left -> align with left edge if ( data.collisionWidth > outerWidth || overLeft > 0 ) { @@ -205,11 +206,12 @@ $.ui.position = { }, top: function( position, data ) { var within = data.within, + win = $( window ), isWindow = $.isWindow( data.within[0] ), withinOffset = isWindow ? 0 : within.offset().top, outerHeight = isWindow ? within.height() : within.outerHeight(), - overTop = within.scrollTop() - data.collisionPosition.top + withinOffset, - overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - within.scrollTop() - withinOffset; + overTop = - data.collisionPosition.top + withinOffset, + overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - withinOffset; // element is taller than window or too far up -> align with top edge if ( data.collisionHeight > outerHeight || overTop > 0 ) { @@ -230,11 +232,12 @@ $.ui.position = { } var within = data.within, + win = $( window ), isWindow = $.isWindow( data.within[0] ), withinOffset = isWindow ? 0 : within.offset().left, outerWidth = isWindow ? within.width() : within.outerWidth(), overLeft = data.collisionPosition.left - withinOffset, - overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - within.scrollLeft() - withinOffset, + overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - withinOffset, left = data.my[ 0 ] === "left", myOffset = data.my[ 0 ] === "left" ? -data.elemWidth : @@ -254,11 +257,12 @@ $.ui.position = { return; } var within = data.within, + win = $( window ), isWindow = $.isWindow( data.within[0] ), withinOffset = isWindow ? 0 : within.offset().top, outerHeight = isWindow ? within.height() : within.outerHeight(), overTop = data.collisionPosition.top - withinOffset, - overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - within.scrollTop() - withinOffset, + overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - withinOffset, top = data.my[ 1 ] === "top", myOffset = top ? -data.elemHeight : @@ -269,6 +273,7 @@ $.ui.position = { data.targetHeight : -data.targetHeight, offset = -2 * data.offset[ 1 ]; + console.log(overBottom); if ( overTop < 0 || overBottom > 0) { position.top += myOffset + atOffset + offset; } -- cgit v1.2.3 From cf96d225325961a24d43bbfdfcf0023bb87e3101 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Fri, 13 May 2011 21:57:16 +0000 Subject: position now passes all tests! 0/ --- tests/unit/position/position_core.js | 3 ++- tests/unit/position/position_core_within.js | 8 +++---- ui/jquery.ui.position.js | 33 ++++++++++++++++------------- 3 files changed, 23 insertions(+), 21 deletions(-) diff --git a/tests/unit/position/position_core.js b/tests/unit/position/position_core.js index 613fffa02..73b7026e6 100644 --- a/tests/unit/position/position_core.js +++ b/tests/unit/position/position_core.js @@ -314,7 +314,7 @@ test( "collision: fit, with offset", function() { test( "collision: fit, window scrolled", function() { if ( scrollTopSupport() ) { var win = $( window ); - win.scrollTop( 300 ).scrollLeft( 200 ); + $( window ).scrollTop( 300 ).scrollLeft( 200 ); collisionTest({ collision: "fit", at: "left-100 top-100" @@ -323,6 +323,7 @@ test( "collision: fit, window scrolled", function() { collision: "fit", at: "right+100 bottom+100" }, { top: 300 + win.height() - 10, left: 200 + win.width() - 10 }, "right bottom" ); + win.scrollTop( 0 ).scrollLeft( 0 ); } }); diff --git a/tests/unit/position/position_core_within.js b/tests/unit/position/position_core_within.js index 98a2f5943..2f912c6b9 100644 --- a/tests/unit/position/position_core_within.js +++ b/tests/unit/position/position_core_within.js @@ -384,7 +384,7 @@ test( "within: collision: fit, with offset", function() { }, { top: addTop + 0, left: addLeft + 0 }, "left top, negative offset" ); }); -test( "within: collision: fit, window scrolled", function() { +test( "within: collision: fit, within scrolled", function() { if ( scrollTopSupport() ) { $("#within-container").css({"width": "1000px", "height": "800px", "top": "20px", "left": "20px", "position": "relative"}); @@ -396,15 +396,13 @@ test( "within: collision: fit, window scrolled", function() { collisionTest({ collision: "fit", at: "left-100 top-100" - }, { top: addTop + 300, left: addLeft + 150 }, "top left" ); + }, { top: addTop, left: addLeft }, "top left" ); collisionTest2({ collision: "fit", at: "right+100 bottom+100" - }, { top: addTop + 300 + win.height() + 10, left: addLeft + 150 + win.width() + 10 }, "right bottom" ); + }, { top: addTop + win.height() - 10, left: addLeft + win.width() - 10 }, "right bottom" ); win.scrollTop( 0 ).scrollLeft( 0 ); - } - }); test( "within: collision: flip, no offset", function() { diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index 5ac19fcca..2b44c8f70 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -188,41 +188,45 @@ $.ui.position = { var within = data.within, win = $( window ), isWindow = $.isWindow( data.within[0] ), - withinOffset = isWindow ? 0 : within.offset().left, - outerWidth = isWindow ? within.width() : within.outerWidth(), - overLeft = - data.collisionPosition.left + withinOffset, - overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - withinOffset; + withinOffset = isWindow ? win.scrollLeft() : within.offset().left, + outerWidth = isWindow ? win.width() : within.outerWidth(), + overLeft = withinOffset - data.collisionPosition.left, + overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - withinOffset, + newLeft; // element is wider than window or too far left -> align with left edge if ( data.collisionWidth > outerWidth || overLeft > 0 ) { - position.left = position.left + overLeft; + newLeft = position.left + overLeft; // too far right -> align with right edge } else if ( overRight > 0 ) { - position.left = position.left - overRight; + newLeft = position.left - overRight; // adjust based on position and margin } else { - position.left = Math.max( position.left - data.collisionPosition.left, position.left ); + newLeft = Math.max( position.left - data.collisionPosition.left, position.left ); } + position.left = newLeft; }, top: function( position, data ) { var within = data.within, win = $( window ), isWindow = $.isWindow( data.within[0] ), - withinOffset = isWindow ? 0 : within.offset().top, - outerHeight = isWindow ? within.height() : within.outerHeight(), - overTop = - data.collisionPosition.top + withinOffset, - overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - withinOffset; + withinOffset = isWindow ? win.scrollTop() : within.offset().top, + outerHeight = isWindow ? win.height() : within.outerHeight(), + overTop = withinOffset - data.collisionPosition.top, + overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - withinOffset, + newTop; // element is taller than window or too far up -> align with top edge if ( data.collisionHeight > outerHeight || overTop > 0 ) { - position.top = position.top + overTop; + newTop = position.top + overTop; // too far down -> align with bottom edge } else if ( overBottom > 0 ) { - position.top = position.top - overBottom; + newTop = position.top - overBottom; // adjust based on position and margin } else { - position.top = Math.max( position.top - data.collisionPosition.top, position.top ); + newTop = Math.max( position.top - data.collisionPosition.top, position.top ); } + position.top = newTop; } }, flip: { @@ -273,7 +277,6 @@ $.ui.position = { data.targetHeight : -data.targetHeight, offset = -2 * data.offset[ 1 ]; - console.log(overBottom); if ( overTop < 0 || overBottom > 0) { position.top += myOffset + atOffset + offset; } -- cgit v1.2.3 From f798b046e0e25f1eea0ed695089c4f4502f9c18d Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Fri, 13 May 2011 22:21:52 +0000 Subject: Update core visual test to allow testing while the window is scrolled. --- tests/visual/position/position.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/visual/position/position.html b/tests/visual/position/position.html index da0ff5170..11932da0e 100644 --- a/tests/visual/position/position.html +++ b/tests/visual/position/position.html @@ -35,7 +35,7 @@ -- cgit v1.2.3 From e4a42991df74955294d0cfa95273722eb006969d Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Mon, 16 May 2011 23:46:21 +0000 Subject: Removing unnecessary variables, caching 'within' in tests where its beneficial, and making some other changes based on the code review --- tests/unit/position/position_core.js | 5 +- tests/unit/position/position_core_within.js | 259 ++++++++-------------------- ui/jquery.ui.position.js | 20 +-- 3 files changed, 83 insertions(+), 201 deletions(-) diff --git a/tests/unit/position/position_core.js b/tests/unit/position/position_core.js index 73b7026e6..bd8e58612 100644 --- a/tests/unit/position/position_core.js +++ b/tests/unit/position/position_core.js @@ -314,7 +314,8 @@ test( "collision: fit, with offset", function() { test( "collision: fit, window scrolled", function() { if ( scrollTopSupport() ) { var win = $( window ); - $( window ).scrollTop( 300 ).scrollLeft( 200 ); + win.scrollTop( 300 ).scrollLeft( 200 ); + collisionTest({ collision: "fit", at: "left-100 top-100" @@ -323,7 +324,7 @@ test( "collision: fit, window scrolled", function() { collision: "fit", at: "right+100 bottom+100" }, { top: 300 + win.height() - 10, left: 200 + win.width() - 10 }, "right bottom" ); - + win.scrollTop( 0 ).scrollLeft( 0 ); } }); diff --git a/tests/unit/position/position_core_within.js b/tests/unit/position/position_core_within.js index 2f912c6b9..c572329e5 100644 --- a/tests/unit/position/position_core_within.js +++ b/tests/unit/position/position_core_within.js @@ -1,14 +1,19 @@ (function( $ ) { -$("#within-container").show(); - function scrollTopSupport() { $( window ).scrollTop( 1 ); return $( window ).scrollTop() === 1; } + +module( "position - within", { + setup: function(){ + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}).show(); + } +}); + var addTop = -20, addLeft = -20; - + $.fn.addOffsets = function() { var elOffset = this.offset(), offset = $("#within-container").offset(); @@ -19,17 +24,15 @@ $.fn.addOffsets = function() { return {top: elOffset.top - offset.top, left: elOffset.left - offset.left }; }; -test( "within: my, at, of", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - +test( "my, at, of", function() { + var within = $("#within-container"); $( "#elx" ).position({ my: "left top", at: "left top", of: "#parentx", collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "left top, left top" ); @@ -38,7 +41,7 @@ test( "within: my, at, of", function() { at: "left bottom", of: "#parentx", collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).addOffsets(), { top: addTop + 60, left: addLeft + 40 }, "left top, left bottom" ); @@ -47,7 +50,7 @@ test( "within: my, at, of", function() { at: "bottom", of: "#parentx", collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).addOffsets(), { top: addTop + 55, left: addLeft + 50 }, "left, bottom" ); @@ -56,16 +59,12 @@ test( "within: my, at, of", function() { at: "bar baz", of: "#parentx", collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).addOffsets(), { top: addTop + 45, left: addLeft +50 }, "left foo, bar baz" ); }); -test( "within: multiple elements", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - +test( "multiple elements", function() { var elements = $( "#el1, #el2" ); var result = elements.position({ my: "left top", @@ -82,11 +81,7 @@ test( "within: multiple elements", function() { }); }); -test( "within: positions", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - +test( "positions", function() { var definitions = []; var offsets = { left: 0, @@ -124,18 +119,15 @@ test( "within: positions", function() { }); }); -test( "within: of", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - +test( "of", function() { + var within = $("#within-container"); $( "#elx" ).position({ my: "left top", at: "left top", of: "#parentx", collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "selector" ); @@ -144,7 +136,7 @@ test( "within: of", function() { at: "left bottom", of: $( "#parentx"), collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).addOffsets(), { top: addTop + 60, left: addLeft + 40 }, "jQuery object" ); @@ -153,85 +145,17 @@ test( "within: of", function() { at: "left top", of: $( "#parentx" )[ 0 ], collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "DOM element" ); - // these tests are not valid for "within" since of is not contained by within. - /* - $( "#elx" ).position({ - my: "right bottom", - at: "right bottom", - of: document, - collision: "none", - within: $("#within-container") - }); - same( $( "#elx" ).addOffsets(), { - top: addTop + $( document ).height() - 10, - left: addLeft + $( document ).width() - 10 - }, "document" ); - - $( "#elx" ).position({ - my: "right bottom", - at: "right bottom", - of: $( document ), - collision: "none", - within: $("#within-container") - }); - same( $( "#elx" ).addOffsets(), { - top: addTop + $( document ).height() - 10, - left: addLeft + $( document ).width() - 10 - }, "document as jQuery object" ); - - $( window ).scrollTop( 0 ); - - $( "#elx" ).position({ - my: "right bottom", - at: "right bottom", - of: window, - collision: "none", - within: $("#within-container") - }); - same( $( "#elx" ).addOffsets(), { - top: addTop + $( window ).height() - 10, - left: addLeft + $( window ).width() - 10 - }, "window" ); - - $( "#elx" ).position({ - my: "right bottom", - at: "right bottom", - of: $( window ), - collision: "none", - within: $("#within-container") - }); - same( $( "#elx" ).addOffsets(), { - top: addTop + $( window ).height() - 10, - left: addLeft + $( window ).width() - 10 - }, "window as jQuery object" ); - - if ( scrollTopSupport() ) { - $( window ).scrollTop( 500 ).scrollLeft( 200 ); - $( "#elx" ).position({ - my: "right bottom", - at: "right bottom", - of: window, - collision: "none", - within: $("#within-container") - }); - same( $( "#elx" ).addOffsets(), { - top: addTop + $( window ).height() + 500 - 10, - left: addLeft + $( window ).width() + 200 - 10 - }, "window, scrolled" ); - $( window ).scrollTop( 0 ).scrollLeft( 0 ); - }*/ - var event = $.extend( $.Event( "someEvent" ), { pageX: 200, pageY: 300 } ); $( "#elx" ).position({ my: "left top", at: "left top", of: event, collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).offset(), { top: 300, @@ -244,7 +168,7 @@ test( "within: of", function() { at: "right bottom", of: event, collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).offset(), { top: 600, @@ -253,16 +177,14 @@ test( "within: of", function() { }); test( "within:offsets", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - + var within = $("#within-container"); $( "#elx" ).position({ my: "left top", at: "left+10 bottom+10", of: "#parentx", collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).addOffsets(), { top: addTop + 70, left: addLeft + 50 }, "offsets in at" ); @@ -271,7 +193,7 @@ test( "within:offsets", function() { at: "left bottom", of: "#parentx", collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).addOffsets(), { top: addTop + 50, left: addLeft + 50 }, "offsets in my" ); @@ -280,7 +202,7 @@ test( "within:offsets", function() { at: "left+50% bottom-10%", of: "#parentx", collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).addOffsets(), { top: addTop + 58, left: addLeft + 50 }, "percentage offsets in at" ); @@ -289,17 +211,15 @@ test( "within:offsets", function() { at: "left bottom", of: "#parentx", collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).addOffsets(), { top: addTop + 65, left: addLeft + 37 }, "percentage offsets in my" ); }); -test( "within: using", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - +test( "using", function() { expect( 6 ); + + var within = $("#within-container"); var count = 0, elems = $( "#el1, #el2" ), @@ -309,7 +229,7 @@ test( "within: using", function() { at: "rigt bottom", of: "#parentx", collision: "none", - within: $("#within-container") + within: within }).addOffsets(); elems.position({ @@ -317,13 +237,13 @@ test( "within: using", function() { at: "left top", of: "#parentx", using: function( position ) { - position.top -= $("#within-container").offset().top; - position.left -= $("#within-container").offset().left; + position.top -= within.offset().top; + position.left -= within.offset().left; same( this, elems[ count ], "correct context for call #" + count ); same( position, expectedPosition, "correct position for call #" + count ); count++; }, - within: $("#within-container") + within: within }); elems.each(function() { @@ -332,12 +252,15 @@ test( "within: using", function() { }); function collisionTest( config, result, msg ) { + var within = $("#within-container"); + var elem = $( "#elx" ).position( $.extend({ my: "left top", at: "right bottom", - of: $("#within-container")[0], - within: $("#within-container") + of: within[0], + within: within }, config ) ); + same( elem.addOffsets(), result, msg ); } @@ -348,14 +271,12 @@ function collisionTest2( config, result, msg ) { }, config ), result, msg ); } -test( "within: collision: fit, no offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - +test( "collision: fit, no offset", function() { + var within = $("#within-container"); collisionTest({ collision: "fit" - }, { top: addTop + $("#within-container").height() - 10, left: addLeft + $("#within-container").width() - 10 }, "right bottom" ); + }, { top: addTop + within.height() - 10, left: addLeft + within.width() - 10 }, "right bottom" ); collisionTest2({ collision: "fit" @@ -363,15 +284,13 @@ test( "within: collision: fit, no offset", function() { }); -test( "within: collision: fit, with offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - +test( "collision: fit, with offset", function() { + var within = $("#within-container"); collisionTest({ collision: "fit", at: "right+2 bottom+3" - }, { top: addTop + $("#within-container").height() - 10, left: addLeft + $("#within-container").width() - 10 }, "right bottom"); + }, { top: addTop + within.height() - 10, left: addLeft + within.width() - 10 }, "right bottom"); collisionTest2({ collision: "fit", @@ -384,14 +303,10 @@ test( "within: collision: fit, with offset", function() { }, { top: addTop + 0, left: addLeft + 0 }, "left top, negative offset" ); }); -test( "within: collision: fit, within scrolled", function() { +test( "collision: fit, within scrolled", function() { if ( scrollTopSupport() ) { - $("#within-container").css({"width": "1000px", "height": "800px", "top": "20px", "left": "20px", "position": "relative"}); - - - - var win = $("#within-container").css("overflow", "auto"); - win.scrollTop( 300 ).scrollLeft( 150 ); + var within = $("#within-container").css({"width": "1000px", "height": "800px", "overflow": "auto"}); + within.scrollTop( 300 ).scrollLeft( 150 ); collisionTest({ collision: "fit", @@ -400,15 +315,13 @@ test( "within: collision: fit, within scrolled", function() { collisionTest2({ collision: "fit", at: "right+100 bottom+100" - }, { top: addTop + win.height() - 10, left: addLeft + win.width() - 10 }, "right bottom" ); - win.scrollTop( 0 ).scrollLeft( 0 ); + }, { top: addTop + within.height() - 10, left: addLeft + within.width() - 10 }, "right bottom" ); + within.scrollTop( 0 ).scrollLeft( 0 ); } }); -test( "within: collision: flip, no offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - +test( "collision: flip, no offset", function() { + var within = $("#within-container"); collisionTest({ collision: "flip" @@ -416,13 +329,11 @@ test( "within: collision: flip, no offset", function() { collisionTest2({ collision: "flip" - }, { top: addTop + $("#within-container").height(), left: addLeft + $("#within-container").width() }, "right bottom" ); + }, { top: addTop + within.height(), left: addLeft + within.width() }, "right bottom" ); }); -test( "within: collision: flip, with offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - +test( "collision: flip, with offset", function() { + var within = $("#within-container"); collisionTest({ collision: "flip", @@ -432,37 +343,33 @@ test( "within: collision: flip, with offset", function() { collisionTest2({ collision: "flip", at: "left+2 top+3" - }, { top: addTop + $("#within-container").height() - 3, left: addLeft + $("#within-container").width() - 2 }, "bottom, positive offset" ); + }, { top: addTop + within.height() - 3, left: addLeft + within.width() - 2 }, "bottom, positive offset" ); collisionTest2({ collision: "flip", at: "left-2 top-3" - }, { top: addTop + $("#within-container").height() + 3, left: addLeft + $("#within-container").width() + 2 }, "right bottom, negative offset" ); + }, { top: addTop + within.height() + 3, left: addLeft + within.width() + 2 }, "right bottom, negative offset" ); }); -test( "within: collision: none, no offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - +test( "collision: none, no offset", function() { + var within = $("#within-container"); collisionTest({ collision: "none" - }, { top: addTop + $("#within-container").height(), left: addLeft + $("#within-container").width() }, "left top" ); + }, { top: addTop + within.height(), left: addLeft + within.width() }, "left top" ); collisionTest2({ collision: "none" }, { top: addTop + -10, left: addLeft + -10 }, "moved to the right bottom" ); }); -test( "within: collision: none, with offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - +test( "collision: none, with offset", function() { + var within = $("#within-container"); collisionTest({ collision: "none", at: "right+2 bottom+3" - }, { top: addTop + $("#within-container").height() + 3, left: addLeft + $("#within-container").width() + 2 }, "right bottom, with offset added" ); + }, { top: addTop + within.height() + 3, left: addLeft + within.width() + 2 }, "right bottom, with offset added" ); collisionTest2({ collision: "none", @@ -475,16 +382,14 @@ test( "within: collision: none, with offset", function() { }, { top: addTop + -13, left: addLeft + -12 }, "left top, negative offset" ); }); -test( "within: collision: fit, with margin", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - +test( "collision: fit, with margin", function() { + var within = $("#within-container"); $( "#elx" ).css( "margin", 10 ); collisionTest({ collision: "fit" - }, { top: addTop + $("#within-container").height() - 20, left: addLeft + $("#within-container").width() - 20 }, "right bottom" ); + }, { top: addTop + within.height() - 20, left: addLeft + within.width() - 20 }, "right bottom" ); collisionTest2({ collision: "fit" @@ -497,7 +402,7 @@ test( "within: collision: fit, with margin", function() { collisionTest({ collision: "fit" - }, { top: addTop + $("#within-container").height() - 20, left: addLeft + $("#within-container").width() - 20 }, "right bottom" ); + }, { top: addTop + within.height() - 20, left: addLeft + within.width() - 20 }, "right bottom" ); collisionTest2({ collision: "fit" @@ -510,24 +415,22 @@ test( "within: collision: fit, with margin", function() { collisionTest({ collision: "fit" - }, { top: addTop + $("#within-container").height() - 25, left: addLeft + $("#within-container").width() - 25 }, "right bottom" ); + }, { top: addTop + within.height() - 25, left: addLeft + within.width() - 25 }, "right bottom" ); collisionTest2({ collision: "fit" }, { top: addTop + 5, left: addLeft + 5 }, "left top" ); }); -test( "within: collision: flip, with margin", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - +test( "collision: flip, with margin", function() { + var within = $("#within-container"); $( "#elx" ).css( "margin", 10 ); collisionTest({ collision: "flip", at: "left top" - }, { top: addTop + $("#within-container").height() - 10, left: addLeft + $("#within-container").width() - 10 }, "left top" ); + }, { top: addTop + within.height() - 10, left: addLeft + within.width() - 10 }, "left top" ); collisionTest2({ collision: "flip", @@ -535,22 +438,4 @@ test( "within: collision: flip, with margin", function() { }, { top: addTop + 0, left: addLeft + 0 }, "right bottom" ); }); -//test( "bug #5280: consistent results (avoid fractional values)", function() { -// var wrapper = $( "#bug-5280" ), -// elem = wrapper.children(), -// offset1 = elem.position({ -// my: "center", -// at: "center", -// of: wrapper, -// collision: "none" -// }).offset(), -// offset2 = elem.position({ -// my: "center", -// at: "center", -// of: wrapper, -// collision: "none" -// }).offset(); -// same( offset1, offset2 ); -//}); - }( jQuery ) ); diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index 2b44c8f70..cea45dc2d 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -191,20 +191,18 @@ $.ui.position = { withinOffset = isWindow ? win.scrollLeft() : within.offset().left, outerWidth = isWindow ? win.width() : within.outerWidth(), overLeft = withinOffset - data.collisionPosition.left, - overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - withinOffset, - newLeft; + overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - withinOffset; // element is wider than window or too far left -> align with left edge if ( data.collisionWidth > outerWidth || overLeft > 0 ) { - newLeft = position.left + overLeft; + position.left += overLeft; // too far right -> align with right edge } else if ( overRight > 0 ) { - newLeft = position.left - overRight; + position.left -= overRight; // adjust based on position and margin } else { - newLeft = Math.max( position.left - data.collisionPosition.left, position.left ); + position.left = Math.max( position.left - data.collisionPosition.left, position.left ); } - position.left = newLeft; }, top: function( position, data ) { var within = data.within, @@ -213,20 +211,18 @@ $.ui.position = { withinOffset = isWindow ? win.scrollTop() : within.offset().top, outerHeight = isWindow ? win.height() : within.outerHeight(), overTop = withinOffset - data.collisionPosition.top, - overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - withinOffset, - newTop; + overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - withinOffset; // element is taller than window or too far up -> align with top edge if ( data.collisionHeight > outerHeight || overTop > 0 ) { - newTop = position.top + overTop; + position.top += overTop; // too far down -> align with bottom edge } else if ( overBottom > 0 ) { - newTop = position.top - overBottom; + position.top -= overBottom; // adjust based on position and margin } else { - newTop = Math.max( position.top - data.collisionPosition.top, position.top ); + position.top = Math.max( position.top - data.collisionPosition.top, position.top ); } - position.top = newTop; } }, flip: { -- cgit v1.2.3 From ab365be03d2672784b6475cb05baaad0a9076e7d Mon Sep 17 00:00:00 2001 From: kborchers Date: Fri, 20 May 2011 13:44:14 -0500 Subject: Datepicker: Added checks for the disabled option. Fixed #5665 - Datepicker: Disabled parameter doesn't work --- ui/jquery.ui.datepicker.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/ui/jquery.ui.datepicker.js b/ui/jquery.ui.datepicker.js index 4c73bdfd8..ae3a9ac32 100644 --- a/ui/jquery.ui.datepicker.js +++ b/ui/jquery.ui.datepicker.js @@ -105,7 +105,8 @@ function Datepicker() { altFormat: '', // The date format to use for the alternate field constrainInput: true, // The input is constrained by the current date format showButtonPanel: false, // True to show button panel, false to not show it - autoSize: false // True to size the input for the date format, false to leave as is + autoSize: false, // True to size the input for the date format, false to leave as is + disabled: false // The initial disabled state }; $.extend(this._defaults, this.regional['']); this.dpDiv = bindHover($('
')); @@ -194,6 +195,10 @@ $.extend(Datepicker.prototype, { }); this._autoSize(inst); $.data(target, PROP_NAME, inst); + //If disabled option is true, disable the datepicker once it has been attached to the input (see ticket #5665) + if( inst.settings.disabled ) { + this._disableDatepicker( target ); + } }, /* Make attachments based on settings. */ @@ -273,6 +278,10 @@ $.extend(Datepicker.prototype, { this._setDate(inst, this._getDefaultDate(inst), true); this._updateDatepicker(inst); this._updateAlternate(inst); + //If disabled option is true, disable the datepicker before showing it (see ticket #5665) + if( inst.settings.disabled ) { + this._disableDatepicker( target ); + } inst.dpDiv.show(); }, -- cgit v1.2.3 From f45fc08f8638640ac30a47d9acbdb0a544a275d9 Mon Sep 17 00:00:00 2001 From: Hans Hillen Date: Wed, 25 May 2011 14:58:26 +0200 Subject: wrapping tab order for popup --- demos/popup/default.html | 18 +++++++++------ ui/jquery.ui.popup.js | 57 ++++++++++++++++++++++++++++++++++++++---------- 2 files changed, 56 insertions(+), 19 deletions(-) diff --git a/demos/popup/default.html b/demos/popup/default.html index 71b3c8dd2..ecfeaaf5b 100644 --- a/demos/popup/default.html +++ b/demos/popup/default.html @@ -54,22 +54,26 @@
- Log In -
+ Log In +
- - + +
- - + +
- +
+ + + +
diff --git a/ui/jquery.ui.popup.js b/ui/jquery.ui.popup.js index 10361a35c..10e6931b8 100644 --- a/ui/jquery.ui.popup.js +++ b/ui/jquery.ui.popup.js @@ -35,7 +35,7 @@ $.widget( "ui.popup", { if ( !this.element.attr( "role" ) ) { // TODO alternatives to tooltip are dialog and menu, all three aren't generic popups - this.element.attr( "role", "tooltip" ); + this.element.attr( "role", "dialog" ); this.generatedRole = true; } @@ -80,19 +80,22 @@ $.widget( "ui.popup", { }); this._bind(this.element, { - // TODO use focusout so that element itself doesn't need to be focussable - blur: function( event ) { + focusout: function( event ) { var that = this; // use a timer to allow click to clear it and letting that // handle the closing instead of opening again that.closeTimer = setTimeout( function() { that.close( event ); }, 100); - } + }, + focusin: function( event ) { + var that = this; + clearTimeout( that.closeTimer ); + } }); this._bind({ - // TODO only triggerd on element if it can receive focus + // TODO only triggered on element if it can receive focus // bind to document instead? // either element itself or a child should be focusable keyup: function( event ) { @@ -141,14 +144,43 @@ $.widget( "ui.popup", { .show() .attr( "aria-hidden", false ) .attr( "aria-expanded", true ) - .position( position ) - // TODO find a focussable child, otherwise put focus on element, add tabIndex=0 if not focussable - .focus(); - - if (this.element.is(":ui-menu")) { + .position( position ); + + if (this.element.is(":ui-menu")) { //popup is a menu + this.element.focus(); this.element.menu("focus", event, this.element.children( "li" ).first() ); + this.element.focus(); } - + // TODO add other special use cases that differ from the default dialog style keyboard mechanism + else { + //default use case, popup could be anything (e.g. a form) + this.element + .bind( "keypress.ui-popup", function( event ) { + if ( event.keyCode !== $.ui.keyCode.TAB ) { + return; + } + var tabbables = $( ":tabbable", this ), + first = tabbables.filter( ":first" ), + last = tabbables.filter( ":last" ); + if ( event.target === last[0] && !event.shiftKey ) { + first.focus( 1 ); + return false; + } else if ( event.target === first[0] && event.shiftKey ) { + last.focus( 1 ); + return false; + } + }); + + // set focus to the first tabbable element in the popup container + // if there are no tabbable elements, set focus on the popup itself + var tabbables = this.element.find( ":tabbable" ); + if (!tabbables.length) { + this.element.attr("tabindex", "0"); + tabbables.add(this.element); + } + tabbables.eq( 0 ).focus(1); + } + // take trigger out of tab order to allow shift-tab to skip trigger this.options.trigger.attr("tabindex", -1); @@ -160,7 +192,8 @@ $.widget( "ui.popup", { this.element .hide() .attr( "aria-hidden", true ) - .attr( "aria-expanded", false ); + .attr( "aria-expanded", false ) + .unbind( "keypress.ui-popup"); this.options.trigger.attr("tabindex", 0); -- cgit v1.2.3 From ab2bbd3bab8c0dd106fe1a1ca4ae4d5f30e97986 Mon Sep 17 00:00:00 2001 From: Hans Hillen Date: Thu, 26 May 2011 00:31:16 +0200 Subject: Key event fix --- ui/jquery.ui.popup.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/jquery.ui.popup.js b/ui/jquery.ui.popup.js index 10e6931b8..7ccf0ff2e 100644 --- a/ui/jquery.ui.popup.js +++ b/ui/jquery.ui.popup.js @@ -155,7 +155,7 @@ $.widget( "ui.popup", { else { //default use case, popup could be anything (e.g. a form) this.element - .bind( "keypress.ui-popup", function( event ) { + .bind( "keydown.ui-popup", function( event ) { if ( event.keyCode !== $.ui.keyCode.TAB ) { return; } -- cgit v1.2.3 From c11ac9c3f30d923164dea9cbe6982d212388fddb Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 26 May 2011 00:53:16 +0000 Subject: Now takes scrollbar width into account in collision detection --- ui/jquery.ui.position.js | 34 ++++++++++++++++++++++++++++++---- 1 file changed, 30 insertions(+), 4 deletions(-) diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index cea45dc2d..678b5e3ea 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -17,7 +17,32 @@ var rhorizontal = /left|center|right/, rposition = /^\w+/, rpercent = /%$/, center = "center", - _position = $.fn.position; + _position = $.fn.position, + getScrollbarWidth = function() { + var div = $( "
" ), + innerDiv = div.children()[0], + w1, w2; + $( "body" ).append( div ); + w1 = innerDiv.offsetWidth; + div.css( "overflow", "scroll" ); + + w2 = innerDiv.offsetWidth; + + if ( w1 === w2 ) { + w2 = div[0].clientWidth; + } + + div.remove(); + + return w1 - w2; + }, + getScrollInfo = function( within ) { + var that = within[0], + scrollHeight = within.height() < that.scrollHeight, + scrollWidth = within.width() < that.scrollWidth, + scrollbarWidth = getScrollbarWidth(); + return { height : scrollHeight ? scrollbarWidth : 0, width : scrollWidth ? scrollbarWidth : 0 }; + }; $.fn.position = function( options ) { if ( !options || !options.of ) { @@ -114,16 +139,17 @@ $.fn.position = function( options ) { basePosition.left += atOffset[ 0 ]; basePosition.top += atOffset[ 1 ]; - return this.each(function() { + return this.each(function() { console.log(getScrollInfo( within )); var elem = $( this ), elemWidth = elem.outerWidth(), elemHeight = elem.outerHeight(), marginLeft = parseInt( $.curCSS( this, "marginLeft", true ) ) || 0, marginTop = parseInt( $.curCSS( this, "marginTop", true ) ) || 0, + scrollInfo = getScrollInfo( within ), collisionWidth = elemWidth + marginLeft + - ( parseInt( $.curCSS( this, "marginRight", true ) ) || 0 ), + ( parseInt( $.curCSS( this, "marginRight", true ) ) || 0 ) + scrollInfo.width, collisionHeight = elemHeight + marginTop + - ( parseInt( $.curCSS( this, "marginBottom", true ) ) || 0 ), + ( parseInt( $.curCSS( this, "marginBottom", true ) ) || 0 ) + scrollInfo.height, position = $.extend( {}, basePosition ), myOffset = [ parseInt( offsets.my[ 0 ], 10 ) * -- cgit v1.2.3 From cde7cc0e6f5981d74390fa75c2519b935a4d6e0c Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 26 May 2011 01:15:05 +0000 Subject: updated tests to account for scrollbar width/height --- tests/unit/position/position_core_within.js | 37 ++++++++++++++++++++++++----- ui/jquery.ui.position.js | 2 +- 2 files changed, 32 insertions(+), 7 deletions(-) diff --git a/tests/unit/position/position_core_within.js b/tests/unit/position/position_core_within.js index c572329e5..9c563b1a2 100644 --- a/tests/unit/position/position_core_within.js +++ b/tests/unit/position/position_core_within.js @@ -4,6 +4,31 @@ function scrollTopSupport() { $( window ).scrollTop( 1 ); return $( window ).scrollTop() === 1; } +function getScrollbarWidth() { + var div = $( "
" ), + innerDiv = div.children()[0], + w1, w2; + $( "body" ).append( div ); + w1 = innerDiv.offsetWidth; + div.css( "overflow", "scroll" ); + + w2 = innerDiv.offsetWidth; + + if ( w1 === w2 ) { + w2 = div[0].clientWidth; + } + + div.remove(); + + return w1 - w2; +} +function getScrollInfo ( within ) { + var that = within[0], + scrollHeight = within.height() < that.scrollHeight, + scrollWidth = within.width() < that.scrollWidth, + scrollbarWidth = getScrollbarWidth(); + return { height : scrollHeight ? scrollbarWidth : 0, width : scrollWidth ? scrollbarWidth : 0 }; +}; module( "position - within", { setup: function(){ @@ -276,7 +301,7 @@ test( "collision: fit, no offset", function() { collisionTest({ collision: "fit" - }, { top: addTop + within.height() - 10, left: addLeft + within.width() - 10 }, "right bottom" ); + }, { top: addTop + within.height() - 10 - getScrollInfo( within ).height, left: addLeft + within.width() - 10 - getScrollInfo( within ).width }, "right bottom" ); collisionTest2({ collision: "fit" @@ -290,7 +315,7 @@ test( "collision: fit, with offset", function() { collisionTest({ collision: "fit", at: "right+2 bottom+3" - }, { top: addTop + within.height() - 10, left: addLeft + within.width() - 10 }, "right bottom"); + }, { top: addTop + within.height() - 10 - getScrollInfo( within ).height, left: addLeft + within.width() - 10 - getScrollInfo( within ).width }, "right bottom"); collisionTest2({ collision: "fit", @@ -315,7 +340,7 @@ test( "collision: fit, within scrolled", function() { collisionTest2({ collision: "fit", at: "right+100 bottom+100" - }, { top: addTop + within.height() - 10, left: addLeft + within.width() - 10 }, "right bottom" ); + }, { top: addTop + within.height() - 10 - getScrollInfo( within ).height, left: addLeft + within.width() - 10 - getScrollInfo( within ).width }, "right bottom" ); within.scrollTop( 0 ).scrollLeft( 0 ); } }); @@ -389,7 +414,7 @@ test( "collision: fit, with margin", function() { collisionTest({ collision: "fit" - }, { top: addTop + within.height() - 20, left: addLeft + within.width() - 20 }, "right bottom" ); + }, { top: addTop + within.height() - 20 - getScrollInfo( within ).height, left: addLeft + within.width() - 20 - getScrollInfo( within ).width }, "right bottom" ); collisionTest2({ collision: "fit" @@ -402,7 +427,7 @@ test( "collision: fit, with margin", function() { collisionTest({ collision: "fit" - }, { top: addTop + within.height() - 20, left: addLeft + within.width() - 20 }, "right bottom" ); + }, { top: addTop + within.height() - 20 - getScrollInfo( within ).height, left: addLeft + within.width() - 20 - getScrollInfo( within ).width }, "right bottom" ); collisionTest2({ collision: "fit" @@ -415,7 +440,7 @@ test( "collision: fit, with margin", function() { collisionTest({ collision: "fit" - }, { top: addTop + within.height() - 25, left: addLeft + within.width() - 25 }, "right bottom" ); + }, { top: addTop + within.height() - 25 - getScrollInfo( within ).height, left: addLeft + within.width() - 25 - getScrollInfo( within ).width }, "right bottom" ); collisionTest2({ collision: "fit" diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index 678b5e3ea..e254ff9ff 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -139,7 +139,7 @@ $.fn.position = function( options ) { basePosition.left += atOffset[ 0 ]; basePosition.top += atOffset[ 1 ]; - return this.each(function() { console.log(getScrollInfo( within )); + return this.each(function() { var elem = $( this ), elemWidth = elem.outerWidth(), elemHeight = elem.outerHeight(), -- cgit v1.2.3 From 40c008872154965d7572cda7911d42857e9fc3a9 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 26 May 2011 14:22:12 +0000 Subject: Fix visual test in IE6 and move the new helper functions for getting scrollbar properties to $.position --- tests/unit/position/position_core_within.js | 37 +++++------------------------ tests/visual/position/position_within.html | 9 ++++++- ui/jquery.ui.position.js | 15 +++++++----- 3 files changed, 23 insertions(+), 38 deletions(-) diff --git a/tests/unit/position/position_core_within.js b/tests/unit/position/position_core_within.js index 9c563b1a2..567c17192 100644 --- a/tests/unit/position/position_core_within.js +++ b/tests/unit/position/position_core_within.js @@ -4,31 +4,6 @@ function scrollTopSupport() { $( window ).scrollTop( 1 ); return $( window ).scrollTop() === 1; } -function getScrollbarWidth() { - var div = $( "
" ), - innerDiv = div.children()[0], - w1, w2; - $( "body" ).append( div ); - w1 = innerDiv.offsetWidth; - div.css( "overflow", "scroll" ); - - w2 = innerDiv.offsetWidth; - - if ( w1 === w2 ) { - w2 = div[0].clientWidth; - } - - div.remove(); - - return w1 - w2; -} -function getScrollInfo ( within ) { - var that = within[0], - scrollHeight = within.height() < that.scrollHeight, - scrollWidth = within.width() < that.scrollWidth, - scrollbarWidth = getScrollbarWidth(); - return { height : scrollHeight ? scrollbarWidth : 0, width : scrollWidth ? scrollbarWidth : 0 }; -}; module( "position - within", { setup: function(){ @@ -301,7 +276,7 @@ test( "collision: fit, no offset", function() { collisionTest({ collision: "fit" - }, { top: addTop + within.height() - 10 - getScrollInfo( within ).height, left: addLeft + within.width() - 10 - getScrollInfo( within ).width }, "right bottom" ); + }, { top: addTop + within.height() - 10 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 10 - $.position.getScrollInfo( within ).width }, "right bottom" ); collisionTest2({ collision: "fit" @@ -315,7 +290,7 @@ test( "collision: fit, with offset", function() { collisionTest({ collision: "fit", at: "right+2 bottom+3" - }, { top: addTop + within.height() - 10 - getScrollInfo( within ).height, left: addLeft + within.width() - 10 - getScrollInfo( within ).width }, "right bottom"); + }, { top: addTop + within.height() - 10 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 10 - $.position.getScrollInfo( within ).width }, "right bottom"); collisionTest2({ collision: "fit", @@ -340,7 +315,7 @@ test( "collision: fit, within scrolled", function() { collisionTest2({ collision: "fit", at: "right+100 bottom+100" - }, { top: addTop + within.height() - 10 - getScrollInfo( within ).height, left: addLeft + within.width() - 10 - getScrollInfo( within ).width }, "right bottom" ); + }, { top: addTop + within.height() - 10 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 10 - $.position.getScrollInfo( within ).width }, "right bottom" ); within.scrollTop( 0 ).scrollLeft( 0 ); } }); @@ -414,7 +389,7 @@ test( "collision: fit, with margin", function() { collisionTest({ collision: "fit" - }, { top: addTop + within.height() - 20 - getScrollInfo( within ).height, left: addLeft + within.width() - 20 - getScrollInfo( within ).width }, "right bottom" ); + }, { top: addTop + within.height() - 20 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 20 - $.position.getScrollInfo( within ).width }, "right bottom" ); collisionTest2({ collision: "fit" @@ -427,7 +402,7 @@ test( "collision: fit, with margin", function() { collisionTest({ collision: "fit" - }, { top: addTop + within.height() - 20 - getScrollInfo( within ).height, left: addLeft + within.width() - 20 - getScrollInfo( within ).width }, "right bottom" ); + }, { top: addTop + within.height() - 20 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 20 - $.position.getScrollInfo( within ).width }, "right bottom" ); collisionTest2({ collision: "fit" @@ -440,7 +415,7 @@ test( "collision: fit, with margin", function() { collisionTest({ collision: "fit" - }, { top: addTop + within.height() - 25 - getScrollInfo( within ).height, left: addLeft + within.width() - 25 - getScrollInfo( within ).width }, "right bottom" ); + }, { top: addTop + within.height() - 25 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 25 - $.position.getScrollInfo( within ).width }, "right bottom" ); collisionTest2({ collision: "fit" diff --git a/tests/visual/position/position_within.html b/tests/visual/position/position_within.html index a20ae7b56..ac1009d3e 100644 --- a/tests/visual/position/position_within.html +++ b/tests/visual/position/position_within.html @@ -22,6 +22,9 @@ /* force scroll bar*/ min-height:800px; min-width:800px; + + /* IE6 needs this */ + text-align:center; } .demo-description { text-align:center; @@ -29,8 +32,10 @@ } .demo-container { background:#aaa; - width:80%; + width:80%; height:80%; + + text-align:left; margin:0 auto; position:relative; padding:10px; @@ -40,6 +45,8 @@ overflow:hidden; position:relative; height:100%; + /* IE6 needs this */ + width:100%; } #parent { width: 60%; diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index e254ff9ff..5ebff5d16 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -17,8 +17,10 @@ var rhorizontal = /left|center|right/, rposition = /^\w+/, rpercent = /%$/, center = "center", - _position = $.fn.position, - getScrollbarWidth = function() { + _position = $.fn.position; + +$.position = { + scrollbarWidth : function() { var div = $( "
" ), innerDiv = div.children()[0], w1, w2; @@ -36,13 +38,14 @@ var rhorizontal = /left|center|right/, return w1 - w2; }, - getScrollInfo = function( within ) { + getScrollInfo : function( within ) { var that = within[0], scrollHeight = within.height() < that.scrollHeight, scrollWidth = within.width() < that.scrollWidth, - scrollbarWidth = getScrollbarWidth(); + scrollbarWidth = $.position.scrollbarWidth(); return { height : scrollHeight ? scrollbarWidth : 0, width : scrollWidth ? scrollbarWidth : 0 }; - }; + } +}; $.fn.position = function( options ) { if ( !options || !options.of ) { @@ -145,7 +148,7 @@ $.fn.position = function( options ) { elemHeight = elem.outerHeight(), marginLeft = parseInt( $.curCSS( this, "marginLeft", true ) ) || 0, marginTop = parseInt( $.curCSS( this, "marginTop", true ) ) || 0, - scrollInfo = getScrollInfo( within ), + scrollInfo = $.position.getScrollInfo( within ), collisionWidth = elemWidth + marginLeft + ( parseInt( $.curCSS( this, "marginRight", true ) ) || 0 ) + scrollInfo.width, collisionHeight = elemHeight + marginTop + -- cgit v1.2.3 From 1d984e76b79bfeda15eff392e06d8ed0eab72333 Mon Sep 17 00:00:00 2001 From: kborchers Date: Fri, 27 May 2011 15:10:53 -0500 Subject: Datepicker: Calculate the max number of rows necessary when displaying months. Fixes #7043 - Datepicker: Using multiple months always renders 6 rows of dates even if only 5 are needed --- ui/jquery.ui.datepicker.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/ui/jquery.ui.datepicker.js b/ui/jquery.ui.datepicker.js index 4c73bdfd8..97b4e0756 100644 --- a/ui/jquery.ui.datepicker.js +++ b/ui/jquery.ui.datepicker.js @@ -114,6 +114,9 @@ function Datepicker() { $.extend(Datepicker.prototype, { /* Class name added to elements to indicate already configured with a date picker. */ markerClassName: 'hasDatepicker', + + //Keep track of the maximum number of rows displayed (see #7043) + maxRows: 4, /* Debug logging (if enabled). */ log: function () { @@ -682,6 +685,7 @@ $.extend(Datepicker.prototype, { /* Generate the date picker content. */ _updateDatepicker: function(inst) { var self = this; + self.maxRows = 4; //Reset the max number of rows being displayed (see #7043) var borders = $.datepicker._getBorders(inst.dpDiv); instActive = inst; // for delegate hover events inst.dpDiv.empty().append(this._generateHTML(inst)); @@ -1505,7 +1509,9 @@ $.extend(Datepicker.prototype, { if (drawYear == inst.selectedYear && drawMonth == inst.selectedMonth) inst.selectedDay = Math.min(inst.selectedDay, daysInMonth); var leadDays = (this._getFirstDayOfMonth(drawYear, drawMonth) - firstDay + 7) % 7; - var numRows = (isMultiMonth ? 6 : Math.ceil((leadDays + daysInMonth) / 7)); // calculate the number of rows to generate + var curRows = Math.ceil((leadDays + daysInMonth) / 7); // calculate the number of rows to generate + var numRows = (isMultiMonth ? this.maxRows > curRows ? this.maxRows : curRows : curRows); //If multiple months, use the higher number of rows (see #7043) + this.maxRows = numRows; var printDate = this._daylightSavingAdjust(new Date(drawYear, drawMonth, 1 - leadDays)); for (var dRow = 0; dRow < numRows; dRow++) { // create date picker rows calender += ''; -- cgit v1.2.3 From 6d01873dd8cbfcee6c5a32d4ea1ff08db7b2406c Mon Sep 17 00:00:00 2001 From: Hans Hillen Date: Mon, 30 May 2011 23:37:14 +0200 Subject: Fix various pull request comments and coding standards issues --- demos/popup/default.html | 32 +++++-------- ui/jquery.ui.popup.js | 122 +++++++++++++++++++++++------------------------ 2 files changed, 73 insertions(+), 81 deletions(-) diff --git a/demos/popup/default.html b/demos/popup/default.html index ecfeaaf5b..accd2b31a 100644 --- a/demos/popup/default.html +++ b/demos/popup/default.html @@ -29,7 +29,7 @@ - - +
Use the form controls to configure the positioning, or drag the positioned element to modify its offset.
Drag around the parent element to see collision detection in action. @@ -126,15 +126,15 @@

This is the position parent element.

- +

to position

- +

to position 2

- +
position...
@@ -142,7 +142,7 @@ - +
- -
+ +
- \ No newline at end of file + diff --git a/ui/jquery.ui.menubar.js b/ui/jquery.ui.menubar.js index a0e9afb3c..39e75924e 100644 --- a/ui/jquery.ui.menubar.js +++ b/ui/jquery.ui.menubar.js @@ -21,7 +21,11 @@ $.widget( "ui.menubar", { version: "@VERSION", options: { buttons: false, - menuIcon: false + menuIcon: false, + position: { + my: "left top", + at: "left bottom" + } }, _create: function() { var that = this; @@ -39,6 +43,9 @@ $.widget( "ui.menubar", { this._hoverable( items ); items.next( "ul" ) .menu({ + position: { + within: this.options.position.within + }, select: function( event, ui ) { ui.item.parents( "ul.ui-menu:last" ).hide(); that._trigger( "select", event, ui ); @@ -119,7 +126,7 @@ $.widget( "ui.menubar", { // TODO ui-menubar-link is added above, not needed here? input.addClass( "ui-menubar-link" ).removeClass( "ui-state-default" ); }; - + }); that._bind( { keydown: function( event ) { @@ -210,11 +217,9 @@ $.widget( "ui.menubar", { var button = menu.prev().addClass( "ui-state-active" ).attr( "tabIndex", -1 ); this.active = menu .show() - .position( { - my: "left top", - at: "left bottom", + .position( $.extend({ of: button - }) + }, this.options.position ) ) .removeAttr( "aria-hidden" ) .attr( "aria-expanded", "true" ) .menu("focus", event, menu.children( "li" ).first() ) -- cgit v1.2.3 From 19dcac2129a2b39a24989835c1c732fa630bdefd Mon Sep 17 00:00:00 2001 From: tashekelahi Date: Thu, 9 Jun 2011 21:04:51 -0400 Subject: Position: added check for undefined value of offset. Fixed #7458 - ui.position offset property creates error when set to undefined --- ui/jquery.ui.position.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index 5ebff5d16..51e7561b3 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -315,7 +315,7 @@ if ( $.uiBackCompat !== false ) { (function( $ ) { var _position = $.fn.position; $.fn.position = function( options ) { - if ( !options || !( "offset" in options ) ) { + if ( !options || !options.offset ) { return _position.call( this, options ); } var offset = options.offset.split( " " ), -- cgit v1.2.3 From 2c8151848d191ad9ba53c0ee86b14aefe4288f67 Mon Sep 17 00:00:00 2001 From: tomykaira Date: Thu, 9 Jun 2011 20:36:48 -0500 Subject: effects.core: Convert elements height/width to px and restore after animation in all effects. Fixed #5245 - Relative width elements break when wrapped for effects --- tests/unit/effects/effects.html | 11 +++++++++++ tests/unit/effects/effects_core.js | 15 +++++++++++++++ ui/jquery.effects.blind.js | 2 +- ui/jquery.effects.bounce.js | 2 +- ui/jquery.effects.core.js | 8 +++++++- ui/jquery.effects.drop.js | 2 +- ui/jquery.effects.fold.js | 2 +- ui/jquery.effects.scale.js | 2 +- ui/jquery.effects.shake.js | 2 +- ui/jquery.effects.slide.js | 16 +++++++++------- 10 files changed, 48 insertions(+), 14 deletions(-) diff --git a/tests/unit/effects/effects.html b/tests/unit/effects/effects.html index 84fecd9cc..6956ebcda 100644 --- a/tests/unit/effects/effects.html +++ b/tests/unit/effects/effects.html @@ -54,6 +54,14 @@ .testChildren h2 { font-size: 20px; } + + .relWidth { + width: 50%; + } + + .relHeight { + height: 50%; + } @@ -70,6 +78,9 @@

Child Element Test

+
+

Slide with relative width +

diff --git a/tests/unit/effects/effects_core.js b/tests/unit/effects/effects_core.js index ed9fbf9ba..4c685ebb6 100644 --- a/tests/unit/effects/effects_core.js +++ b/tests/unit/effects/effects_core.js @@ -54,6 +54,21 @@ $.each( $.effects.effect, function( effect ) { start(); })); }); + + asyncTest( "relative width & height - properties are preserved", function() { + var test = $("div.relWidth.relHeight"), + width = test.width(), height = test.height(), + cssWidth = test[0].style.width, cssHeight = test[0].style.height; + + expect( 4 ); + test.toggle( effect, minDuration, function() { + equal( test[0].style.width, cssWidth, "Inline CSS Width has been reset after animation ended" ); + equal( test[0].style.height, cssHeight, "Inline CSS Height has been rest after animation ended" ); + start(); + }); + equal( test.width(), width, "Width is the same px after animation started" ); + equal( test.height(), height, "Height is the same px after animation started" ); + }); }); module("animateClass"); diff --git a/ui/jquery.effects.blind.js b/ui/jquery.effects.blind.js index 8ef544faa..b6485b641 100644 --- a/ui/jquery.effects.blind.js +++ b/ui/jquery.effects.blind.js @@ -21,7 +21,7 @@ $.effects.effect.blind = function( o ) { // Create element var el = $( this ), - props = [ "position", "top", "bottom", "left", "right" ], + props = [ "position", "top", "bottom", "left", "right", "height", "width" ], mode = $.effects.setMode( el, o.mode || "hide" ), direction = o.direction || "up", vertical = rvertical.test( direction ), diff --git a/ui/jquery.effects.bounce.js b/ui/jquery.effects.bounce.js index 9e1117ce9..78fedb0ce 100644 --- a/ui/jquery.effects.bounce.js +++ b/ui/jquery.effects.bounce.js @@ -16,7 +16,7 @@ $.effects.effect.bounce = function(o) { return this.queue( function( next ) { var el = $( this ), - props = [ "position", "top", "bottom", "left", "right" ], + props = [ "position", "top", "bottom", "left", "right", "height", "width" ], // defaults: mode = $.effects.setMode( el, o.mode || "effect" ), diff --git a/ui/jquery.effects.core.js b/ui/jquery.effects.core.js index 7650aa8f4..00a803360 100644 --- a/ui/jquery.effects.core.js +++ b/ui/jquery.effects.core.js @@ -410,7 +410,12 @@ $.extend( $.effects, { border: "none", margin: 0, padding: 0 - }); + }), + // Store the size in case width/height are defined in % - Fixes #5245 + size = { + width: element.width(), + height: element.height() + }; element.wrap( wrapper ); wrapper = element.parent(); //Hotfix for jQuery 1.4 since some change in wrap() seems to actually loose the reference to the wrapped element @@ -438,6 +443,7 @@ $.extend( $.effects, { bottom: "auto" }); } + element.css(size); return wrapper.css( props ).show(); }, diff --git a/ui/jquery.effects.drop.js b/ui/jquery.effects.drop.js index 24fb89db0..4265b737b 100644 --- a/ui/jquery.effects.drop.js +++ b/ui/jquery.effects.drop.js @@ -17,7 +17,7 @@ $.effects.effect.drop = function( o ) { return this.queue( function() { var el = $( this ), - props = [ 'position', 'top', 'bottom', 'left', 'right', 'opacity' ], + props = [ 'position', 'top', 'bottom', 'left', 'right', 'opacity', "height", "width" ], mode = $.effects.setMode( el, o.mode || 'hide' ), direction = o.direction || 'left', ref = ( direction == 'up' || direction == 'down' ) ? 'top' : 'left', diff --git a/ui/jquery.effects.fold.js b/ui/jquery.effects.fold.js index 29da090cb..6100c33a1 100644 --- a/ui/jquery.effects.fold.js +++ b/ui/jquery.effects.fold.js @@ -18,7 +18,7 @@ $.effects.effect.fold = function( o ) { // Create element var el = $( this ), - props = ['position','top','bottom','left','right'], + props = ['position','top','bottom','left','right','height','width'], mode = $.effects.setMode(el, o.mode || 'hide'), size = o.size || 15, percent = /([0-9]+)%/.exec(size), diff --git a/ui/jquery.effects.scale.js b/ui/jquery.effects.scale.js index 00f0151af..fe0c03c53 100644 --- a/ui/jquery.effects.scale.js +++ b/ui/jquery.effects.scale.js @@ -116,7 +116,7 @@ $.effects.effect.size = function( o ) { // Set options mode = $.effects.setMode( el, o.mode || 'effect' ), - restore = o.restore || false, + restore = o.restore || mode !== "effect", scale = o.scale || 'both', origin = o.origin, original, baseline, factor; diff --git a/ui/jquery.effects.shake.js b/ui/jquery.effects.shake.js index 550329ca4..52ab331e8 100644 --- a/ui/jquery.effects.shake.js +++ b/ui/jquery.effects.shake.js @@ -17,7 +17,7 @@ $.effects.effect.shake = function( o ) { return this.queue( function() { var el = $( this ), - props = [ "position", "top", "bottom", "left", "right" ], + props = [ "position", "top", "bottom", "left", "right", "height", "width" ], mode = $.effects.setMode( el, o.mode || "effect" ), direction = o.direction || "left", distance = o.distance || 20, diff --git a/ui/jquery.effects.slide.js b/ui/jquery.effects.slide.js index 6b0296754..ccb13fa1b 100644 --- a/ui/jquery.effects.slide.js +++ b/ui/jquery.effects.slide.js @@ -18,24 +18,26 @@ $.effects.effect.slide = function( o ) { // Create element var el = $( this ), - props = ['position','top','bottom','left','right'], + props = [ "position", "top", "bottom", "left", "right", "width", "height" ], mode = $.effects.setMode( el, o.mode || 'show' ), direction = o.direction || 'left', ref = (direction == 'up' || direction == 'down') ? 'top' : 'left', motion = (direction == 'up' || direction == 'left') ? 'pos' : 'neg', distance, - animation = {}; + animation = {}, + size; // Adjust - $.effects.save( el, props ); + $.effects.save( el, props ); el.show(); + distance = o.distance || el[ ref == 'top' ? "outerHeight" : "outerWidth" ]({ + margin: true + }); + $.effects.createWrapper( el ).css({ overflow: 'hidden' - }); - - distance = o.distance || el[ ref == 'top' ? "outerHeight" : "outerWidth" ]({ - margin: true }); + if (mode == 'show') { el.css( ref, motion == 'pos' ? (isNaN(distance) ? "-" + distance : -distance) : distance ); } -- cgit v1.2.3 From 7ccb0e52c4f1b14ee8df24d37fb601d03fba5a18 Mon Sep 17 00:00:00 2001 From: Hans Hillen Date: Fri, 10 Jun 2011 11:42:43 +0200 Subject: Use of _bind, maintain original tabindex value for popup --- ui/jquery.ui.popup.js | 39 +++++++++++++++++++++------------------ 1 file changed, 21 insertions(+), 18 deletions(-) diff --git a/ui/jquery.ui.popup.js b/ui/jquery.ui.popup.js index 9ea4d59e2..a7f610082 100644 --- a/ui/jquery.ui.popup.js +++ b/ui/jquery.ui.popup.js @@ -81,21 +81,20 @@ $.widget( "ui.popup", { if ( !this.element.is( ":ui-menu" ) ) { //default use case, wrap tab order in popup - this.element.bind( "keydown.ui-popup", function( event ) { - if ( event.keyCode !== $.ui.keyCode.TAB ) { - return; - } - - var tabbables = $( ":tabbable", this ), - first = tabbables.first(), - last = tabbables.last(); - - if ( event.target === last[ 0 ] && !event.shiftKey ) { - first.focus( 1 ); - return false; - } else if ( event.target === first[ 0 ] && event.shiftKey ) { - last.focus( 1 ); - return false; + this._bind({ keydown : function( event ) { + if ( event.keyCode !== $.ui.keyCode.TAB ) { + return; + } + var tabbables = $( ":tabbable", this.element ), + first = tabbables.first(), + last = tabbables.last(); + if ( event.target === last[ 0 ] && !event.shiftKey ) { + first.focus( 1 ); + event.preventDefault(); + } else if ( event.target === first[ 0 ] && event.shiftKey ) { + last.focus( 1 ); + event.preventDefault(); + } } }); } @@ -174,11 +173,13 @@ $.widget( "ui.popup", { // set focus to the first tabbable element in the popup container // if there are no tabbable elements, set focus on the popup itself var tabbables = this.element.find( ":tabbable" ); + this.removeTabIndex = false; if ( !tabbables.length ) { if ( !this.element.is(":tabbable") ) { this.element.attr("tabindex", "0"); + this.removeTabIndex = true; } - tabbables.add(this.element); + tabbables = tabbables.add( this.element[ 0 ] ); } tabbables.first().focus( 1 ); } @@ -195,8 +196,10 @@ $.widget( "ui.popup", { .attr( "aria-hidden", true ) .attr( "aria-expanded", false ); - this.options.trigger.attr("tabindex", 0); - + this.options.trigger.attr( "tabindex" , 0 ); + if ( this.removeTabIndex ) { + this.element.removeAttr( "tabindex" ); + } this.isOpen = false; this._trigger( "close", event ); } -- cgit v1.2.3 From 596f61b8ddc1e112e667c25bbe22e22282424ce5 Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Fri, 10 Jun 2011 12:21:58 +0200 Subject: Popup: Remove comment in default demo, focus handling is now working properly --- demos/popup/default.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demos/popup/default.html b/demos/popup/default.html index accd2b31a..7b63d9e1d 100644 --- a/demos/popup/default.html +++ b/demos/popup/default.html @@ -72,7 +72,7 @@
-

A link to a login form that opens as a popup. [Not quite functional, focus handling needs to get better]

+

A link to a login form that opens as a popup.

-- cgit v1.2.3 From e993a9b210a9febe432760bdc6ddecc66c0113f2 Mon Sep 17 00:00:00 2001 From: gnarf Date: Fri, 10 Jun 2011 05:20:45 -0500 Subject: menu: Partial Style Guidance - Fixing JSLint Warnings --- ui/jquery.ui.menu.js | 99 ++++++++++++++++++++++++++++------------------------ 1 file changed, 54 insertions(+), 45 deletions(-) diff --git a/ui/jquery.ui.menu.js b/ui/jquery.ui.menu.js index 03e14f124..337e9bd13 100644 --- a/ui/jquery.ui.menu.js +++ b/ui/jquery.ui.menu.js @@ -1,6 +1,6 @@ /* * jQuery UI Menu @VERSION - * + * * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license @@ -12,7 +12,7 @@ * jquery.ui.widget.js */ (function($) { - + var idIncrement = 0; $.widget("ui.menu", { @@ -71,7 +71,7 @@ $.widget("ui.menu", { } }); this.refresh(); - + this.element.attr( "tabIndex", 0 ).bind( "keydown.menu", function( event ) { if ( self.options.disabled ) { return; @@ -130,9 +130,11 @@ $.widget("ui.menu", { default: event.stopPropagation(); clearTimeout(self.filterTimer); - var prev = self.previousFilter || ""; - var character = String.fromCharCode(event.keyCode); - var skip = false; + var match, + prev = self.previousFilter || "", + character = String.fromCharCode( event.keyCode ), + skip = false; + if (character == prev) { skip = true; } else { @@ -141,10 +143,10 @@ $.widget("ui.menu", { function escape(value) { return value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"); } - var match = self.activeMenu.children(".ui-menu-item").filter(function() { + match = self.activeMenu.children(".ui-menu-item").filter(function() { return new RegExp("^" + escape(character), "i").test($(this).children("a").text()); }); - var match = skip && match.index(self.active.next()) != -1 ? self.active.nextAll(".ui-menu-item") : match; + match = skip && match.index(self.active.next()) != -1 ? self.active.nextAll(".ui-menu-item") : match; if (!match.length) { character = String.fromCharCode(event.keyCode); match = self.activeMenu.children(".ui-menu-item").filter(function() { @@ -167,7 +169,7 @@ $.widget("ui.menu", { } }); }, - + _destroy: function() { //destroy (sub)menus this.element @@ -181,7 +183,7 @@ $.widget("ui.menu", { .removeAttr( "aria-expanded" ) .removeAttr( "aria-hidden" ) .show(); - + //destroy menu items this.element.find( ".ui-menu-item" ) .unbind( ".menu" ) @@ -193,45 +195,48 @@ $.widget("ui.menu", { .removeAttr( "role" ) .removeAttr( "aria-haspopup" ) .removeAttr( "id" ) - .children(".ui-icon").remove(); + .children(".ui-icon").remove(); }, - + refresh: function() { var self = this; // initialize nested menus - var submenus = this.element.find("ul:not(.ui-menu)") + var submenus = this.element.find( "ul:not(.ui-menu)" ) .addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" ) - .attr("role", "menu") + .attr( "role", "menu" ) .hide() - .attr("aria-hidden", "true") - .attr("aria-expanded", "false") + .attr( "aria-hidden", "true" ) + .attr( "aria-expanded", "false" ) ; - + // don't refresh list items that are already adapted - var items = submenus.add(this.element).children( "li:not(.ui-menu-item):has(a)" ) + var items = submenus.add( this.element ).children( "li:not(.ui-menu-item):has(a)" ) .addClass( "ui-menu-item" ) .attr( "role", "presentation" ); - + items.children( "a" ) .addClass( "ui-corner-all" ) .attr( "tabIndex", -1 ) .attr( "role", "menuitem" ) - .attr("id", function(i) {return self.element.attr("id") + "-" + i}); - - submenus.each(function() { - var menu = $(this); - var item = menu.prev("a") - item.attr("aria-haspopup", "true") - .prepend(''); - menu.attr("aria-labelledby", item.attr("id")); + .attr( "id", function( i ) { + return self.element.attr( "id" ) + "-" + i; + }); + + submenus.each( function() { + var menu = $( this ), + item = menu.prev( "a" ); + + item.attr( "aria-haspopup", "true" ) + .prepend( '' ); + menu.attr( "aria-labelledby", item.attr( "id" ) ); }); }, focus: function( event, item ) { - var self = this; - + var nested, self = this; + this.blur(); - + if ( this._hasScroll() ) { var borderTop = parseFloat( $.curCSS( this.element[0], "borderTopWidth", true) ) || 0, paddingTop = parseFloat( $.curCSS( this.element[0], "paddingTop", true) ) || 0, @@ -245,25 +250,26 @@ $.widget("ui.menu", { this.element.scrollTop( scroll + offset - elementHeight + itemHeight ); } } - + this.active = item.first() .children( "a" ) .addClass( "ui-state-focus" ) .end(); - self.element.attr("aria-activedescendant", self.active.children("a").attr("id")) + self.element.attr( "aria-activedescendant", self.active.children("a").attr("id") ); // highlight active parent menu item, if any this.active.parent().closest(".ui-menu-item").children("a:first").addClass("ui-state-active"); - - self.timer = setTimeout(function() { + + self.timer = setTimeout( function() { self._close(); - }, self.delay) - var nested = $(">ul", item); - if (nested.length && /^mouse/.test(event.type)) { + }, self.delay ); + + nested = $( ">ul", item ); + if ( nested.length && ( /^mouse/.test( event.type ) ) ) { self._startOpening(nested); } this.activeMenu = item.parent(); - + this._trigger( "focus", event, { item: item } ); }, @@ -271,9 +277,9 @@ $.widget("ui.menu", { if (!this.active) { return; } - + clearTimeout(this.timer); - + this.active.children( "a" ).removeClass( "ui-state-focus" ); this.active = null; }, @@ -286,7 +292,7 @@ $.widget("ui.menu", { self._open(submenu); }, self.delay); }, - + _open: function(submenu) { clearTimeout(this.timer); this.element.find(".ui-menu").not(submenu.parents()).hide().attr("aria-hidden", "true"); @@ -298,7 +304,7 @@ $.widget("ui.menu", { ); submenu.show().removeAttr("aria-hidden").attr("aria-expanded", "true").position(position); }, - + closeAll: function() { this.element .find("ul").hide().attr("aria-hidden", "true").attr("aria-expanded", "false").end() @@ -306,7 +312,7 @@ $.widget("ui.menu", { this.blur(); this.activeMenu = this.element; }, - + _close: function() { this.active.parent() .find("ul").hide().attr("aria-hidden", "true").attr("aria-expanded", "false").end() @@ -328,8 +334,11 @@ $.widget("ui.menu", { if (newItem && newItem.length) { this._open(newItem.parent()); var current = this.active; + //timeout so Firefox will not hide activedescendant change in expanding submenu from AT - setTimeout(function(){self.focus(event, newItem)}, 20); + setTimeout( function() { + self.focus( event, newItem ); + }, 20 ); return true; } }, @@ -362,7 +371,7 @@ $.widget("ui.menu", { this.focus( event, this.activeMenu.children(edge)[filter]() ); } }, - + nextPage: function( event ) { if ( this._hasScroll() ) { if ( !this.active || this.last() ) { -- cgit v1.2.3 From 85eeaf0b05960f1e1a470991f88657a590c27fce Mon Sep 17 00:00:00 2001 From: gnarf Date: Fri, 10 Jun 2011 07:23:01 -0500 Subject: menu: Second pass style guidance --- ui/jquery.ui.menu.js | 168 ++++++++++++++++++++++++++++++--------------------- 1 file changed, 98 insertions(+), 70 deletions(-) diff --git a/ui/jquery.ui.menu.js b/ui/jquery.ui.menu.js index 337e9bd13..7dd1a9ce0 100644 --- a/ui/jquery.ui.menu.js +++ b/ui/jquery.ui.menu.js @@ -15,7 +15,7 @@ var idIncrement = 0; -$.widget("ui.menu", { +$.widget( "ui.menu", { version: "@VERSION", defaultElement: "
    ", delay: 150, @@ -29,8 +29,8 @@ $.widget("ui.menu", { var self = this; this.activeMenu = this.element; this.menuId = this.element.attr( "id" ) || "ui-menu-" + idIncrement++; - if (this.element.find(".ui-icon").length) { - this.element.addClass("ui-menu-icons"); + if ( this.element.find( ".ui-icon" ).length ) { + this.element.addClass( "ui-menu-icons" ); } this.element .addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" ) @@ -61,7 +61,7 @@ $.widget("ui.menu", { self.focus( event, target ); } }) - .bind("mouseout.menu", function( event ) { + .bind( "mouseout.menu", function( event ) { if ( self.options.disabled ) { return; } @@ -110,8 +110,8 @@ $.widget("ui.menu", { event.preventDefault(); break; case $.ui.keyCode.ENTER: - if (self.active.children("a[aria-haspopup='true']").length) { - if (self.right( event )) { + if ( self.active.children( "a[aria-haspopup='true']" ).length ) { + if ( self.right( event ) ) { event.stopImmediatePropagation(); } } @@ -129,7 +129,7 @@ $.widget("ui.menu", { break; default: event.stopPropagation(); - clearTimeout(self.filterTimer); + clearTimeout( self.filterTimer ); var match, prev = self.previousFilter || "", character = String.fromCharCode( event.keyCode ), @@ -140,26 +140,28 @@ $.widget("ui.menu", { } else { character = prev + character; } - function escape(value) { - return value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"); + function escape( value ) { + return value.replace( /[-[\]{}()*+?.,\\^$|#\s]/g , "\\$&" ); } - match = self.activeMenu.children(".ui-menu-item").filter(function() { - return new RegExp("^" + escape(character), "i").test($(this).children("a").text()); + match = self.activeMenu.children( ".ui-menu-item" ).filter( function() { + return new RegExp("^" + escape(character), "i") + .test( $( this ).children( "a" ).text() ); }); match = skip && match.index(self.active.next()) != -1 ? self.active.nextAll(".ui-menu-item") : match; - if (!match.length) { + if ( !match.length ) { character = String.fromCharCode(event.keyCode); - match = self.activeMenu.children(".ui-menu-item").filter(function() { - return new RegExp("^" + escape(character), "i").test($(this).children("a").text()); + match = self.activeMenu.children(".ui-menu-item").filter( function() { + return new RegExp("^" + escape(character), "i") + .test( $( this ).children( "a" ).text() ); }); } - if (match.length) { - self.focus(event, match); + if ( match.length ) { + self.focus( event, match ); if (match.length > 1) { self.previousFilter = character; - self.filterTimer = setTimeout(function() { + self.filterTimer = setTimeout( function() { delete self.previousFilter; - }, 1000); + }, 1000 ); } else { delete self.previousFilter; } @@ -174,11 +176,11 @@ $.widget("ui.menu", { //destroy (sub)menus this.element .removeAttr( "aria-activedescendant" ) - .find("ul") + .find( "ul" ) .andSelf() .removeClass( "ui-menu ui-widget ui-widget-content ui-corner-all" ) .removeAttr( "role" ) - .removeAttr("tabIndex") + .removeAttr( "tabIndex" ) .removeAttr( "aria-labelledby" ) .removeAttr( "aria-expanded" ) .removeAttr( "aria-hidden" ) @@ -195,24 +197,25 @@ $.widget("ui.menu", { .removeAttr( "role" ) .removeAttr( "aria-haspopup" ) .removeAttr( "id" ) - .children(".ui-icon").remove(); + .children( ".ui-icon" ) + .remove(); }, refresh: function() { - var self = this; - // initialize nested menus - var submenus = this.element.find( "ul:not(.ui-menu)" ) - .addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" ) - .attr( "role", "menu" ) - .hide() - .attr( "aria-hidden", "true" ) - .attr( "aria-expanded", "false" ) - ; + var self = this, + + // initialize nested menus + submenus = this.element.find( "ul:not(.ui-menu)" ) + .addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" ) + .attr( "role", "menu" ) + .hide() + .attr( "aria-hidden", "true" ) + .attr( "aria-expanded", "false" ), // don't refresh list items that are already adapted - var items = submenus.add( this.element ).children( "li:not(.ui-menu-item):has(a)" ) - .addClass( "ui-menu-item" ) - .attr( "role", "presentation" ); + items = submenus.add( this.element ).children( "li:not(.ui-menu-item):has(a)" ) + .addClass( "ui-menu-item" ) + .attr( "role", "presentation" ); items.children( "a" ) .addClass( "ui-corner-all" ) @@ -233,17 +236,19 @@ $.widget("ui.menu", { }, focus: function( event, item ) { - var nested, self = this; + var nested, + self = this; this.blur(); if ( this._hasScroll() ) { - var borderTop = parseFloat( $.curCSS( this.element[0], "borderTopWidth", true) ) || 0, - paddingTop = parseFloat( $.curCSS( this.element[0], "paddingTop", true) ) || 0, + var borderTop = parseFloat( $.curCSS( this.element[0], "borderTopWidth", true ) ) || 0, + paddingTop = parseFloat( $.curCSS( this.element[0], "paddingTop", true ) ) || 0, offset = item.offset().top - this.element.offset().top - borderTop - paddingTop, scroll = this.element.scrollTop(), elementHeight = this.element.height(), itemHeight = item.height(); + if ( offset < 0 ) { this.element.scrollTop( scroll + offset ); } else if ( offset + itemHeight > elementHeight ) { @@ -273,67 +278,90 @@ $.widget("ui.menu", { this._trigger( "focus", event, { item: item } ); }, - blur: function(event) { - if (!this.active) { + blur: function( event ) { + if ( !this.active ) { return; } - clearTimeout(this.timer); + clearTimeout( this.timer ); this.active.children( "a" ).removeClass( "ui-state-focus" ); this.active = null; }, - _startOpening: function(submenu) { - clearTimeout(this.timer); + _startOpening: function( submenu ) { + clearTimeout( this.timer ); var self = this; - self.timer = setTimeout(function() { + self.timer = setTimeout( function() { self._close(); - self._open(submenu); - }, self.delay); + self._open( submenu ); + }, self.delay ); }, - _open: function(submenu) { - clearTimeout(this.timer); - this.element.find(".ui-menu").not(submenu.parents()).hide().attr("aria-hidden", "true"); + _open: function( submenu ) { + clearTimeout( this.timer ); + this.element + .find( ".ui-menu" ) + .not( submenu.parents() ) + .hide() + .attr( "aria-hidden", "true" ); + var position = $.extend({}, { - of: this.active - }, $.type(this.options.position) == "function" - ? this.options.position(this.active) - : this.options.position - ); - submenu.show().removeAttr("aria-hidden").attr("aria-expanded", "true").position(position); + of: this.active + }, $.type(this.options.position) == "function" + ? this.options.position(this.active) + : this.options.position + ); + + submenu.show() + .removeAttr( "aria-hidden" ) + .attr( "aria-expanded", "true" ) + .position( position ); }, closeAll: function() { this.element - .find("ul").hide().attr("aria-hidden", "true").attr("aria-expanded", "false").end() - .find("a.ui-state-active").removeClass("ui-state-active"); + .find( "ul" ) + .hide() + .attr( "aria-hidden", "true" ) + .attr( "aria-expanded", "false" ) + .end() + .find( "a.ui-state-active" ) + .removeClass( "ui-state-active" ); + this.blur(); this.activeMenu = this.element; }, _close: function() { this.active.parent() - .find("ul").hide().attr("aria-hidden", "true").attr("aria-expanded", "false").end() - .find("a.ui-state-active").removeClass("ui-state-active"); + .find( "ul" ) + .hide() + .attr( "aria-hidden", "true" ) + .attr( "aria-expanded", "false" ) + .end() + .find( "a.ui-state-active" ) + .removeClass( "ui-state-active" ); }, - left: function(event) { + left: function( event ) { var newItem = this.active && this.active.parents("li:not(.ui-menubar-item)").first(); - if (newItem && newItem.length) { - this.active.parent().attr("aria-hidden", "true").attr("aria-expanded", "false").hide(); - this.focus(event, newItem); + if ( newItem && newItem.length ) { + this.active.parent() + .attr("aria-hidden", "true") + .attr("aria-expanded", "false") + .hide(); + this.focus( event, newItem ); return true; } }, - right: function(event) { - var self= this; - var newItem = this.active && this.active.children("ul").children("li").first(); - if (newItem && newItem.length) { - this._open(newItem.parent()); - var current = this.active; + right: function( event ) { + var self = this, + newItem = this.active && this.active.children("ul").children("li").first(); + + if ( newItem && newItem.length ) { + this._open( newItem.parent() ); //timeout so Firefox will not hide activedescendant change in expanding submenu from AT setTimeout( function() { @@ -359,16 +387,16 @@ $.widget("ui.menu", { return this.active && !this.active.nextAll( ".ui-menu-item" ).length; }, - _move: function(direction, edge, filter, event) { + _move: function( direction, edge, filter, event ) { if ( !this.active ) { - this.focus( event, this.activeMenu.children(edge)[filter]() ); + this.focus( event, this.activeMenu.children( edge )[ filter ]() ); return; } var next = this.active[ direction + "All" ]( ".ui-menu-item" ).eq( 0 ); if ( next.length ) { this.focus( event, next ); } else { - this.focus( event, this.activeMenu.children(edge)[filter]() ); + this.focus( event, this.activeMenu.children( edge )[ filter ]() ); } }, -- cgit v1.2.3 From 75408eb08a16a16adc096eff0e3966abebf5c2de Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Fri, 10 Jun 2011 19:07:54 +0200 Subject: Menubar and Menu: Cleanup menu styles. Pull out menubar styles from demo into css file. --- demos/menubar/default.html | 39 ++++----------------------------------- themes/base/jquery.ui.base.css | 1 + themes/base/jquery.ui.menu.css | 38 +++++++------------------------------- themes/base/jquery.ui.menubar.css | 15 +++++++++++++++ 4 files changed, 27 insertions(+), 66 deletions(-) create mode 100644 themes/base/jquery.ui.menubar.css diff --git a/demos/menubar/default.html b/demos/menubar/default.html index 8f15be516..57a3209ce 100644 --- a/demos/menubar/default.html +++ b/demos/menubar/default.html @@ -3,7 +3,7 @@ jQuery UI Menubar - Default demo - + @@ -21,7 +21,7 @@ $("
    ").text("Selected: " + ui.item.text()).appendTo("#log"); } }); - + $(".menubar-icons").menubar({ menuIcon: true, buttons: true, @@ -34,39 +34,8 @@ }); }); - diff --git a/themes/base/jquery.ui.base.css b/themes/base/jquery.ui.base.css index 9a18856c1..a359c2ba4 100644 --- a/themes/base/jquery.ui.base.css +++ b/themes/base/jquery.ui.base.css @@ -15,6 +15,7 @@ @import url("jquery.ui.datepicker.css"); @import url("jquery.ui.dialog.css"); @import url("jquery.ui.menu.css"); +@import url("jquery.ui.menubar.css"); @import url("jquery.ui.progressbar.css"); @import url("jquery.ui.resizable.css"); @import url("jquery.ui.selectable.css"); diff --git a/themes/base/jquery.ui.menu.css b/themes/base/jquery.ui.menu.css index ed4b4a13a..c616cf2c5 100644 --- a/themes/base/jquery.ui.menu.css +++ b/themes/base/jquery.ui.menu.css @@ -7,38 +7,14 @@ * * http://docs.jquery.com/UI/Menu#theming */ -.ui-menu { - list-style:none; - padding: 2px; - margin: 0; - display:block; - outline: none; -} -.ui-menu .ui-menu { - margin-top: -3px; -} -.ui-menu .ui-menu-item { - margin:0; - padding: 0; - zoom: 1; - width: 100%; -} -.ui-menu .ui-menu-item a { - text-decoration:none; - display:block; - padding: 2px .4em; - line-height:1.5; - zoom:1; - font-weight: normal; -} +.ui-menu { list-style:none; padding: 2px; margin: 0; display:block; outline: none; } +.ui-menu .ui-menu { margin-top: -3px; position: absolute; } +.ui-menu .ui-menu-item { margin: 0; padding: 0; zoom: 1; width: 100%; } +.ui-menu .ui-menu-item a { text-decoration: none; display: block; padding: 2px .4em; line-height: 1.5; zoom: 1; font-weight: normal; } .ui-menu .ui-menu-item a.ui-state-focus, -.ui-menu .ui-menu-item a.ui-state-active { - font-weight: normal; - margin: -1px; -} +.ui-menu .ui-menu-item a.ui-state-active { font-weight: normal; margin: -1px; } -/* nested menus */ -.ui-menu .ui-menu { position: absolute; } +.ui-menu li.ui-state-disabled { font-weight: normal; padding: .0em .4em; margin: .4em 0 .2em; line-height: 1.5; } /* icon support */ .ui-menu-icons { position: relative; } @@ -48,4 +24,4 @@ .ui-menu .ui-icon { position: absolute; top: .2em; left: .2em; } /* right-aligned */ -.ui-menu .ui-menu-icon { position: static; float: right; } \ No newline at end of file +.ui-menu .ui-menu-icon { position: static; float: right; } diff --git a/themes/base/jquery.ui.menubar.css b/themes/base/jquery.ui.menubar.css new file mode 100644 index 000000000..95c42ae9e --- /dev/null +++ b/themes/base/jquery.ui.menubar.css @@ -0,0 +1,15 @@ +/* + * jQuery UI Menubar @VERSION + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + */ +.ui-menubar { list-style: none; margin: 0; padding-left: 0; } + +.ui-menubar-item { float: left; } + +.ui-menubar .ui-button { float: left; font-weight: normal; border-top-width: 0 !important; border-bottom-width: 0 !important; margin: 0; outline: none; } +.ui-menubar .ui-menubar-link { border-right: 1px dashed transparent; border-left: 1px dashed transparent; } + +.ui-menubar .ui-menu { width: 200px; position: absolute; z-index: 9999; } -- cgit v1.2.3 From 154c5e5fd1d6de9dac369914eb98b5b966cdfae1 Mon Sep 17 00:00:00 2001 From: Scott González Date: Fri, 10 Jun 2011 16:07:03 -0400 Subject: Position: Coding standards. --- ui/jquery.ui.position.js | 41 +++++++++++++++++++++++------------------ 1 file changed, 23 insertions(+), 18 deletions(-) diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index 51e7561b3..3bae0d010 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -20,30 +20,35 @@ var rhorizontal = /left|center|right/, _position = $.fn.position; $.position = { - scrollbarWidth : function() { - var div = $( "
    " ), - innerDiv = div.children()[0], - w1, w2; - $( "body" ).append( div ); - w1 = innerDiv.offsetWidth; - div.css( "overflow", "scroll" ); - - w2 = innerDiv.offsetWidth; - + scrollbarWidth: function() { + var w1, w2, + div = $( "
    " ), + innerDiv = div.children()[0]; + + $( "body" ).append( div ); + w1 = innerDiv.offsetWidth; + div.css( "overflow", "scroll" ); + + w2 = innerDiv.offsetWidth; + if ( w1 === w2 ) { w2 = div[0].clientWidth; } - div.remove(); - - return w1 - w2; + div.remove(); + + return w1 - w2; }, - getScrollInfo : function( within ) { + getScrollInfo: function( within ) { var that = within[0], scrollHeight = within.height() < that.scrollHeight, scrollWidth = within.width() < that.scrollWidth, scrollbarWidth = $.position.scrollbarWidth(); - return { height : scrollHeight ? scrollbarWidth : 0, width : scrollWidth ? scrollbarWidth : 0 }; + + return { + height: scrollHeight ? scrollbarWidth : 0, + width : scrollWidth ? scrollbarWidth : 0 + }; } }; @@ -85,7 +90,7 @@ $.fn.position = function( options ) { } // force my and at to have valid horizontal and vertical positions - // if a value is missing or invalid, it will be converted to center + // if a value is missing or invalid, it will be converted to center $.each( [ "my", "at" ], function() { var pos = ( options[ this ] || "" ).split( " " ), horizontalOffset, @@ -302,7 +307,7 @@ $.ui.position = { data.targetHeight : -data.targetHeight, offset = -2 * data.offset[ 1 ]; - if ( overTop < 0 || overBottom > 0) { + if ( overTop < 0 || overBottom > 0 ) { position.top += myOffset + atOffset + offset; } } @@ -345,4 +350,4 @@ if ( $.uiBackCompat !== false ) { }( jQuery ) ); } -}( jQuery ) ); \ No newline at end of file +}( jQuery ) ); -- cgit v1.2.3 From 3e0d3c9225913db2f5aa8cd48ff29efa95f1feab Mon Sep 17 00:00:00 2001 From: tomykaira Date: Fri, 10 Jun 2011 15:52:27 -0500 Subject: Effects.transfer: check the target is fixed or not, and consider scrolling. Fixed #5547 - Transfer effect to fixed positioned element. --- ui/jquery.effects.transfer.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/ui/jquery.effects.transfer.js b/ui/jquery.effects.transfer.js index 17d23c5fa..f0f9d9fd4 100644 --- a/ui/jquery.effects.transfer.js +++ b/ui/jquery.effects.transfer.js @@ -17,10 +17,14 @@ $.effects.effect.transfer = function( o ) { return this.queue( function() { var elem = $( this ), target = $( o.to ), + targetFixed = target.css( "position" ) === "fixed", + body = $("body"), + fixTop = targetFixed ? body.scrollTop() : 0, + fixLeft = targetFixed ? body.scrollLeft() : 0, endPosition = target.offset(), animation = { - top: endPosition.top, - left: endPosition.left, + top: endPosition.top - fixTop , + left: endPosition.left - fixLeft , height: target.innerHeight(), width: target.innerWidth() }, @@ -29,11 +33,11 @@ $.effects.effect.transfer = function( o ) { .appendTo( document.body ) .addClass( o.className ) .css({ - top: startPosition.top, - left: startPosition.left, + top: startPosition.top - fixTop , + left: startPosition.left - fixLeft , height: elem.innerHeight(), width: elem.innerWidth(), - position: 'absolute' + position: targetFixed ? "fixed" : "absolute" }) .animate( animation, o.duration, o.easing, function() { transfer.remove(); -- cgit v1.2.3 From ba9bd20c0d5a6ede11a536da9024bb1a582d131f Mon Sep 17 00:00:00 2001 From: Scott González Date: Mon, 13 Jun 2011 10:54:47 -0400 Subject: Accordion tests: Don't use deprecated assertion methods. --- tests/unit/accordion/accordion.html | 6 +-- tests/unit/accordion/accordion_core.js | 30 ++++++------- tests/unit/accordion/accordion_deprecated.html | 6 +-- tests/unit/accordion/accordion_deprecated.js | 48 ++++++++++----------- tests/unit/accordion/accordion_events.js | 58 +++++++++++++------------- tests/unit/accordion/accordion_options.js | 30 ++++++------- 6 files changed, 89 insertions(+), 89 deletions(-) diff --git a/tests/unit/accordion/accordion.html b/tests/unit/accordion/accordion.html index c260ef22f..ef20c057e 100644 --- a/tests/unit/accordion/accordion.html +++ b/tests/unit/accordion/accordion.html @@ -25,7 +25,7 @@ var actual = accordion.find( ".ui-accordion-content" ).map(function() { return $( this ).css( "display" ) === "none" ? 0 : 1; }).get(); - same( actual, expected ); + deepEqual( actual, expected ); } function equalHeights( accordion, min, max ) { var sizes = []; @@ -34,8 +34,8 @@ }); ok( sizes[ 0 ] >= min && sizes[ 0 ] <= max, "must be within " + min + " and " + max + ", was " + sizes[ 0 ] ); - same( sizes[ 0 ], sizes[ 1 ] ); - same( sizes[ 0 ], sizes[ 2 ] ); + deepEqual( sizes[ 0 ], sizes[ 1 ] ); + deepEqual( sizes[ 0 ], sizes[ 2 ] ); } function accordionSetupTeardown() { var animated = $.ui.accordion.prototype.options.animated; diff --git a/tests/unit/accordion/accordion_core.js b/tests/unit/accordion/accordion_core.js index 280339c26..000470d0b 100644 --- a/tests/unit/accordion/accordion_core.js +++ b/tests/unit/accordion/accordion_core.js @@ -10,7 +10,7 @@ $.each( { div: "#list1", ul: "#navigation", dl: "#accordion-dl" }, function( typ ".ui-accordion-header elements exist, correct number" ); equal( element.find( ".ui-accordion-content" ).length, 3, ".ui-accordion-content elements exist, correct number" ); - same( element.find( ".ui-accordion-header" ).next().get(), + deepEqual( element.find( ".ui-accordion-header" ).next().get(), element.find( ".ui-accordion-content" ).get(), "content panels come immediately after headers" ); }); @@ -26,7 +26,7 @@ test( "ui-accordion-heading class added to headers anchor", function() { expect( 1 ); var element = $( "#list1" ).accordion(); var anchors = element.find( ".ui-accordion-heading" ); - equals( anchors.length, 3 ); + equal( anchors.length, 3 ); }); test( "accessibility", function () { @@ -34,20 +34,20 @@ test( "accessibility", function () { var element = $( "#list1" ).accordion().accordion( "option", "active", 1 ); var headers = element.find( ".ui-accordion-header" ); - equals( headers.eq( 1 ).attr( "tabindex" ), 0, "active header should have tabindex=0" ); - equals( headers.eq( 0 ).attr( "tabindex" ), -1, "inactive header should have tabindex=-1" ); - equals( element.attr( "role" ), "tablist", "main role" ); - equals( headers.attr( "role" ), "tab", "tab roles" ); - equals( headers.next().attr( "role" ), "tabpanel", "tabpanel roles" ); - equals( headers.eq( 1 ).attr( "aria-expanded" ), "true", "active tab has aria-expanded" ); - equals( headers.eq( 0 ).attr( "aria-expanded" ), "false", "inactive tab has aria-expanded" ); - equals( headers.eq( 1 ).attr( "aria-selected" ), "true", "active tab has aria-selected" ); - equals( headers.eq( 0 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected" ); + equal( headers.eq( 1 ).attr( "tabindex" ), 0, "active header should have tabindex=0" ); + equal( headers.eq( 0 ).attr( "tabindex" ), -1, "inactive header should have tabindex=-1" ); + equal( element.attr( "role" ), "tablist", "main role" ); + equal( headers.attr( "role" ), "tab", "tab roles" ); + equal( headers.next().attr( "role" ), "tabpanel", "tabpanel roles" ); + equal( headers.eq( 1 ).attr( "aria-expanded" ), "true", "active tab has aria-expanded" ); + equal( headers.eq( 0 ).attr( "aria-expanded" ), "false", "inactive tab has aria-expanded" ); + equal( headers.eq( 1 ).attr( "aria-selected" ), "true", "active tab has aria-selected" ); + equal( headers.eq( 0 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected" ); element.accordion( "option", "active", 0 ); - equals( headers.eq( 0 ).attr( "aria-expanded" ), "true", "newly active tab has aria-expanded" ); - equals( headers.eq( 1 ).attr( "aria-expanded" ), "false", "newly inactive tab has aria-expanded" ); - equals( headers.eq( 0 ).attr( "aria-selected" ), "true", "active tab has aria-selected" ); - equals( headers.eq( 1 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected" ); + equal( headers.eq( 0 ).attr( "aria-expanded" ), "true", "newly active tab has aria-expanded" ); + equal( headers.eq( 1 ).attr( "aria-expanded" ), "false", "newly inactive tab has aria-expanded" ); + equal( headers.eq( 0 ).attr( "aria-selected" ), "true", "active tab has aria-selected" ); + equal( headers.eq( 1 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected" ); }); }( jQuery ) ); diff --git a/tests/unit/accordion/accordion_deprecated.html b/tests/unit/accordion/accordion_deprecated.html index e8254f4f3..2e754fe6a 100644 --- a/tests/unit/accordion/accordion_deprecated.html +++ b/tests/unit/accordion/accordion_deprecated.html @@ -22,7 +22,7 @@ var actual = accordion.find( ".ui-accordion-content" ).map(function() { return $( this ).css( "display" ) === "none" ? 0 : 1; }).get(); - same( actual, expected ); + deepEqual( actual, expected ); } function equalHeights( accordion, min, max ) { var sizes = []; @@ -31,8 +31,8 @@ }); ok( sizes[ 0 ] >= min && sizes[ 0 ] <= max, "must be within " + min + " and " + max + ", was " + sizes[ 0 ] ); - same( sizes[ 0 ], sizes[ 1 ] ); - same( sizes[ 0 ], sizes[ 2 ] ); + deepEqual( sizes[ 0 ], sizes[ 1 ] ); + deepEqual( sizes[ 0 ], sizes[ 2 ] ); } function accordionSetupTeardown() { var animated = $.ui.accordion.prototype.options.animated; diff --git a/tests/unit/accordion/accordion_deprecated.js b/tests/unit/accordion/accordion_deprecated.js index 0435f48a7..733cb82b0 100644 --- a/tests/unit/accordion/accordion_deprecated.js +++ b/tests/unit/accordion/accordion_deprecated.js @@ -237,11 +237,11 @@ test( "changestart", function() { var content = element.find( ".ui-accordion-content" ); element.one( "accordionchangestart", function( event, ui ) { - equals( ui.oldHeader.size(), 0 ); - equals( ui.oldContent.size(), 0 ); - equals( ui.newHeader.size(), 1 ); + equal( ui.oldHeader.size(), 0 ); + equal( ui.oldContent.size(), 0 ); + equal( ui.newHeader.size(), 1 ); strictEqual( ui.newHeader[ 0 ], headers[ 0 ] ); - equals( ui.newContent.size(), 1 ); + equal( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 0 ] ); accordion_state( element, 0, 0, 0 ); }); @@ -249,13 +249,13 @@ test( "changestart", function() { accordion_state( element, 1, 0, 0 ); element.one( "accordionchangestart", function( event, ui ) { - equals( ui.oldHeader.size(), 1 ); + equal( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 0 ] ); - equals( ui.oldContent.size(), 1 ); + equal( ui.oldContent.size(), 1 ); strictEqual( ui.oldContent[ 0 ], content[ 0 ] ); - equals( ui.newHeader.size(), 1 ); + equal( ui.newHeader.size(), 1 ); strictEqual( ui.newHeader[ 0 ], headers[ 1 ] ); - equals( ui.newContent.size(), 1 ); + equal( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 1 ] ); accordion_state( element, 1, 0, 0 ); }); @@ -263,12 +263,12 @@ test( "changestart", function() { accordion_state( element, 0, 1, 0 ); element.one( "accordionchangestart", function( event, ui ) { - equals( ui.oldHeader.size(), 1 ); + equal( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 1 ] ); - equals( ui.oldContent.size(), 1 ); + equal( ui.oldContent.size(), 1 ); strictEqual( ui.oldContent[ 0 ], content[ 1 ] ); - equals( ui.newHeader.size(), 0 ); - equals( ui.newContent.size(), 0 ); + equal( ui.newHeader.size(), 0 ); + equal( ui.newContent.size(), 0 ); accordion_state( element, 0, 1, 0 ); }); element.accordion( "option", "active", false ); @@ -285,34 +285,34 @@ test( "change", function() { var content = element.find( ".ui-accordion-content" ); element.one( "accordionchange", function( event, ui ) { - equals( ui.oldHeader.size(), 0 ); - equals( ui.oldContent.size(), 0 ); - equals( ui.newHeader.size(), 1 ); + equal( ui.oldHeader.size(), 0 ); + equal( ui.oldContent.size(), 0 ); + equal( ui.newHeader.size(), 1 ); strictEqual( ui.newHeader[ 0 ], headers[ 0 ] ); - equals( ui.newContent.size(), 1 ); + equal( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 0 ] ); }); element.accordion( "option", "active", 0 ); element.one( "accordionchange", function( event, ui ) { - equals( ui.oldHeader.size(), 1 ); + equal( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 0 ] ); - equals( ui.oldContent.size(), 1 ); + equal( ui.oldContent.size(), 1 ); strictEqual( ui.oldContent[ 0 ], content[ 0 ] ); - equals( ui.newHeader.size(), 1 ); + equal( ui.newHeader.size(), 1 ); strictEqual( ui.newHeader[ 0 ], headers[ 1 ] ); - equals( ui.newContent.size(), 1 ); + equal( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 1 ] ); }); headers.eq( 1 ).click(); element.one( "accordionchange", function( event, ui ) { - equals( ui.oldHeader.size(), 1 ); + equal( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 1 ] ); - equals( ui.oldContent.size(), 1 ); + equal( ui.oldContent.size(), 1 ); strictEqual( ui.oldContent[ 0 ], content[ 1 ] ); - equals( ui.newHeader.size(), 0 ); - equals( ui.newContent.size(), 0 ); + equal( ui.newHeader.size(), 0 ); + equal( ui.newContent.size(), 0 ); }); element.accordion( "option", "active", false ); }); diff --git a/tests/unit/accordion/accordion_events.js b/tests/unit/accordion/accordion_events.js index 2438f28ea..d704e54c8 100644 --- a/tests/unit/accordion/accordion_events.js +++ b/tests/unit/accordion/accordion_events.js @@ -13,11 +13,11 @@ test( "beforeActivate", function() { element.one( "accordionbeforeactivate", function( event, ui ) { ok( !( "originalEvent" in event ) ); - equals( ui.oldHeader.size(), 0 ); - equals( ui.oldContent.size(), 0 ); - equals( ui.newHeader.size(), 1 ); + equal( ui.oldHeader.size(), 0 ); + equal( ui.oldContent.size(), 0 ); + equal( ui.newHeader.size(), 1 ); strictEqual( ui.newHeader[ 0 ], headers[ 0 ] ); - equals( ui.newContent.size(), 1 ); + equal( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 0 ] ); accordion_state( element, 0, 0, 0 ); }); @@ -25,14 +25,14 @@ test( "beforeActivate", function() { accordion_state( element, 1, 0, 0 ); element.one( "accordionbeforeactivate", function( event, ui ) { - equals( event.originalEvent.type, "click" ); - equals( ui.oldHeader.size(), 1 ); + equal( event.originalEvent.type, "click" ); + equal( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 0 ] ); - equals( ui.oldContent.size(), 1 ); + equal( ui.oldContent.size(), 1 ); strictEqual( ui.oldContent[ 0 ], content[ 0 ] ); - equals( ui.newHeader.size(), 1 ); + equal( ui.newHeader.size(), 1 ); strictEqual( ui.newHeader[ 0 ], headers[ 1 ] ); - equals( ui.newContent.size(), 1 ); + equal( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 1 ] ); accordion_state( element, 1, 0, 0 ); }); @@ -41,12 +41,12 @@ test( "beforeActivate", function() { element.one( "accordionbeforeactivate", function( event, ui ) { ok( !( "originalEvent" in event ) ); - equals( ui.oldHeader.size(), 1 ); + equal( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 1 ] ); - equals( ui.oldContent.size(), 1 ); + equal( ui.oldContent.size(), 1 ); strictEqual( ui.oldContent[ 0 ], content[ 1 ] ); - equals( ui.newHeader.size(), 0 ); - equals( ui.newContent.size(), 0 ); + equal( ui.newHeader.size(), 0 ); + equal( ui.newContent.size(), 0 ); accordion_state( element, 0, 1, 0 ); }); element.accordion( "option", "active", false ); @@ -54,11 +54,11 @@ test( "beforeActivate", function() { element.one( "accordionbeforeactivate", function( event, ui ) { ok( !( "originalEvent" in event ) ); - equals( ui.oldHeader.size(), 0 ); - equals( ui.oldContent.size(), 0 ); - equals( ui.newHeader.size(), 1 ); + equal( ui.oldHeader.size(), 0 ); + equal( ui.oldContent.size(), 0 ); + equal( ui.newHeader.size(), 1 ); strictEqual( ui.newHeader[ 0 ], headers[ 2 ] ); - equals( ui.newContent.size(), 1 ); + equal( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 2 ] ); event.preventDefault(); accordion_state( element, 0, 0, 0 ); @@ -77,34 +77,34 @@ test( "activate", function() { var content = element.find( ".ui-accordion-content" ); element.one( "accordionactivate", function( event, ui ) { - equals( ui.oldHeader.size(), 0 ); - equals( ui.oldContent.size(), 0 ); - equals( ui.newHeader.size(), 1 ); + equal( ui.oldHeader.size(), 0 ); + equal( ui.oldContent.size(), 0 ); + equal( ui.newHeader.size(), 1 ); strictEqual( ui.newHeader[ 0 ], headers[ 0 ] ); - equals( ui.newContent.size(), 1 ); + equal( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 0 ] ); }); element.accordion( "option", "active", 0 ); element.one( "accordionactivate", function( event, ui ) { - equals( ui.oldHeader.size(), 1 ); + equal( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 0 ] ); - equals( ui.oldContent.size(), 1 ); + equal( ui.oldContent.size(), 1 ); strictEqual( ui.oldContent[ 0 ], content[ 0 ] ); - equals( ui.newHeader.size(), 1 ); + equal( ui.newHeader.size(), 1 ); strictEqual( ui.newHeader[ 0 ], headers[ 1 ] ); - equals( ui.newContent.size(), 1 ); + equal( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 1 ] ); }); headers.eq( 1 ).click(); element.one( "accordionactivate", function( event, ui ) { - equals( ui.oldHeader.size(), 1 ); + equal( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 1 ] ); - equals( ui.oldContent.size(), 1 ); + equal( ui.oldContent.size(), 1 ); strictEqual( ui.oldContent[ 0 ], content[ 1 ] ); - equals( ui.newHeader.size(), 0 ); - equals( ui.newContent.size(), 0 ); + equal( ui.newHeader.size(), 0 ); + equal( ui.newContent.size(), 0 ); }); element.accordion( "option", "active", false ); diff --git a/tests/unit/accordion/accordion_options.js b/tests/unit/accordion/accordion_options.js index 7bd6f2e74..57762dec8 100644 --- a/tests/unit/accordion/accordion_options.js +++ b/tests/unit/accordion/accordion_options.js @@ -4,7 +4,7 @@ module( "accordion: options", accordionSetupTeardown() ); test( "{ active: default }", function() { var element = $( "#list1" ).accordion(); - equals( element.accordion( "option", "active" ), 0 ); + equal( element.accordion( "option", "active" ), 0 ); accordion_state( element, 1, 0, 0 ); }); @@ -14,12 +14,12 @@ test( "{ active: false }", function() { collapsible: true }); accordion_state( element, 0, 0, 0 ); - equals( element.find( ".ui-accordion-header.ui-state-active" ).size(), 0, "no headers selected" ); - equals( element.accordion( "option", "active" ), false ); + equal( element.find( ".ui-accordion-header.ui-state-active" ).size(), 0, "no headers selected" ); + equal( element.accordion( "option", "active" ), false ); element.accordion( "option", "collapsible", false ); accordion_state( element, 1, 0, 0 ); - equals( element.accordion( "option", "active" ), 0 ); + equal( element.accordion( "option", "active" ), 0 ); element.accordion( "destroy" ); element.accordion({ @@ -33,19 +33,19 @@ test( "{ active: Number }", function() { var element = $( "#list1" ).accordion({ active: 2 }); - equals( element.accordion( "option", "active" ), 2 ); + equal( element.accordion( "option", "active" ), 2 ); accordion_state( element, 0, 0, 1 ); element.accordion( "option", "active", 0 ); - equals( element.accordion( "option", "active" ), 0 ); + equal( element.accordion( "option", "active" ), 0 ); accordion_state( element, 1, 0, 0 ); element.find( ".ui-accordion-header" ).eq( 1 ).click(); - equals( element.accordion( "option", "active" ), 1 ); + equal( element.accordion( "option", "active" ), 1 ); accordion_state( element, 0, 1, 0 ); element.accordion( "option", "active", 10 ); - equals( element.accordion( "option", "active" ), 1 ); + equal( element.accordion( "option", "active" ), 1 ); accordion_state( element, 0, 1, 0 ); }); @@ -54,19 +54,19 @@ if ( $.uiBackCompat === false ) { var element = $( "#list1" ).accordion({ active: -1 }); - equals( element.accordion( "option", "active" ), 2 ); + equal( element.accordion( "option", "active" ), 2 ); accordion_state( element, 0, 0, 1 ); element.accordion( "option", "active", -2 ); - equals( element.accordion( "option", "active" ), 1 ); + equal( element.accordion( "option", "active" ), 1 ); accordion_state( element, 0, 1, 0 ); element.accordion( "option", "active", -10 ); - equals( element.accordion( "option", "active" ), 1 ); + equal( element.accordion( "option", "active" ), 1 ); accordion_state( element, 0, 1, 0 ); element.accordion( "option", "active", -3 ); - equals( element.accordion( "option", "active" ), 0 ); + equal( element.accordion( "option", "active" ), 0 ); accordion_state( element, 1, 0, 0 ); }); } @@ -101,7 +101,7 @@ test( "{ collapsible: true }", function() { accordion_state( element, 0, 1, 0 ); element.find( ".ui-accordion-header" ).eq( 1 ).click(); - equals( element.accordion( "option", "active" ), false ); + equal( element.accordion( "option", "active" ), false ); accordion_state( element, 0, 0, 0 ); }); @@ -238,8 +238,8 @@ test( "{ heightStyle: 'fill' } with multiple siblings", function() { test( "{ icons: false }", function() { var element = $( "#list1" ); function icons( on ) { - same( element.find( "span.ui-icon").length, on ? 3 : 0 ); - same( element.hasClass( "ui-accordion-icons" ), on ); + deepEqual( element.find( "span.ui-icon").length, on ? 3 : 0 ); + deepEqual( element.hasClass( "ui-accordion-icons" ), on ); } element.accordion(); icons( true ); -- cgit v1.2.3 From ed7802090fc6ec8109d69c91a425adfffb8cff39 Mon Sep 17 00:00:00 2001 From: kborchers Date: Mon, 13 Jun 2011 10:54:40 -0500 Subject: Datepicker: Reset this.maxRows (rows in a month) on each row in a multi-row datepicker. --- ui/jquery.ui.datepicker.js | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/jquery.ui.datepicker.js b/ui/jquery.ui.datepicker.js index 97b4e0756..ebc5b119d 100644 --- a/ui/jquery.ui.datepicker.js +++ b/ui/jquery.ui.datepicker.js @@ -1475,6 +1475,7 @@ $.extend(Datepicker.prototype, { var html = ''; for (var row = 0; row < numMonths[0]; row++) { var group = ''; + this.maxRows = 4; for (var col = 0; col < numMonths[1]; col++) { var selectedDate = this._daylightSavingAdjust(new Date(drawYear, drawMonth, inst.selectedDay)); var cornerClass = ' ui-corner-all'; -- cgit v1.2.3 From abf833049d4e56b591595b65c5150baa0ff2223f Mon Sep 17 00:00:00 2001 From: kborchers Date: Mon, 13 Jun 2011 12:05:42 -0500 Subject: Datepicker: Set font-size to 0em on ui-datepicker-row-break to override font-size coming from ui-widget which caused the height to be too tall in IE --- themes/base/jquery.ui.datepicker.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/themes/base/jquery.ui.datepicker.css b/themes/base/jquery.ui.datepicker.css index f457800f4..8d574bac4 100644 --- a/themes/base/jquery.ui.datepicker.css +++ b/themes/base/jquery.ui.datepicker.css @@ -39,7 +39,7 @@ .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; } .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; } .ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; } -.ui-datepicker-row-break { clear:both; width:100%; } +.ui-datepicker-row-break { clear:both; width:100%; font-size:0em; } /* RTL support */ .ui-datepicker-rtl { direction: rtl; } -- cgit v1.2.3 From 2bc66279912b460f572abff0d502e8e2c9c285a7 Mon Sep 17 00:00:00 2001 From: Scott González Date: Mon, 13 Jun 2011 14:09:44 -0400 Subject: Autocomplete tests: Cleanup. --- tests/unit/autocomplete/autocomplete.html | 60 ++--- tests/unit/autocomplete/autocomplete_core.js | 106 ++++---- tests/unit/autocomplete/autocomplete_events.js | 337 ++++++++++++------------ tests/unit/autocomplete/autocomplete_methods.js | 55 ++-- tests/unit/autocomplete/autocomplete_options.js | 317 +++++++++------------- 5 files changed, 405 insertions(+), 470 deletions(-) diff --git a/tests/unit/autocomplete/autocomplete.html b/tests/unit/autocomplete/autocomplete.html index 8f1d9db9a..a69562d3f 100644 --- a/tests/unit/autocomplete/autocomplete.html +++ b/tests/unit/autocomplete/autocomplete.html @@ -1,46 +1,44 @@ - + - + jQuery UI Autocomplete Test Suite - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + - +

    jQuery UI Autocomplete Test Suite

    -
      -
    - +
      -
      -
      -
      -
      +
      +
      +
      +
      diff --git a/tests/unit/autocomplete/autocomplete_core.js b/tests/unit/autocomplete/autocomplete_core.js index 19f52dc15..3f92aa01f 100644 --- a/tests/unit/autocomplete/autocomplete_core.js +++ b/tests/unit/autocomplete/autocomplete_core.js @@ -1,73 +1,83 @@ -/* - * autocomplete_core.js - */ +(function( $ ) { +module( "autocomplete: core" ); -(function($) { +asyncTest( "close-on-blur is properly delayed", function() { + expect( 3 ); + var element = $( "#autocomplete" ) + .autocomplete({ + source: [ "java", "javascript" ] + }) + .val( "ja" ) + .autocomplete( "search" ), + menu = element.autocomplete( "widget" ); -module("autocomplete: core", { - teardown: function() { - $( ":ui-autocomplete" ).autocomplete( "destroy" ); - } -}); - -test("close-on-blur is properly delayed", function() { - var ac = $("#autocomplete").autocomplete({ - source: ["java", "javascript"] - }).val("ja").autocomplete("search"); - same( $(".ui-menu:visible").length, 1 ); - ac.blur(); - same( $(".ui-menu:visible").length, 1 ); - stop(); + ok( menu.is( ":visible" ) ); + element.blur(); + ok( menu.is( ":visible" ) ); setTimeout(function() { - same( $(".ui-menu:visible").length, 0 ); + ok( menu.is( ":hidden") ); start(); - }, 200); + }, 200 ); }); -test("close-on-blur is cancelled when starting a search", function() { - var ac = $("#autocomplete").autocomplete({ - source: ["java", "javascript"] - }).val("ja").autocomplete("search"); - same( $(".ui-menu:visible").length, 1 ); - ac.blur(); - same( $(".ui-menu:visible").length, 1 ); - ac.autocomplete("search"); - stop(); +asyncTest( "close-on-blur is cancelled when starting a search", function() { + expect( 3 ); + var element = $( "#autocomplete" ) + .autocomplete({ + source: [ "java", "javascript" ] + }) + .val( "ja" ) + .autocomplete( "search" ), + menu = element.autocomplete( "widget" ); + + ok( menu.is( ":visible" ) ); + element.blur(); + ok( menu.is( ":visible" ) ); + element.autocomplete( "search" ); setTimeout(function() { - same( $(".ui-menu:visible").length, 1 ); + ok( menu.is( ":visible" ) ); start(); - }, 200); + }, 200 ); }); test( "prevent form submit on enter when menu is active", function() { - var event; - var ac = $( "#autocomplete" ).autocomplete({ - source: [ "java", "javascript" ] - }).val( "ja" ).autocomplete( "search" ); - + expect( 2 ); + var event, + element = $( "#autocomplete" ) + .autocomplete({ + source: [ "java", "javascript" ] + }) + .val( "ja" ) + .autocomplete( "search" ), + menu = element.autocomplete( "widget" ); + event = $.Event( "keydown" ); event.keyCode = $.ui.keyCode.DOWN; - ac.trigger( event ); - same( $( ".ui-menu-item:has(.ui-state-focus)" ).length, 1, "menu item is active" ); - + element.trigger( event ); + deepEqual( menu.find( ".ui-menu-item:has(.ui-state-focus)" ).length, 1, "menu item is active" ); + event = $.Event( "keydown" ); event.keyCode = $.ui.keyCode.ENTER; - ac.trigger( event ); + element.trigger( event ); ok( event.isDefaultPrevented(), "default action is prevented" ); }); test( "allow form submit on enter when menu is not active", function() { - var event; - var ac = $( "#autocomplete" ).autocomplete({ - autoFocus: false, - source: [ "java", "javascript" ] - }).val( "ja" ).autocomplete( "search" ); - + expect( 1 ); + var event, + element = $( "#autocomplete" ) + .autocomplete({ + autoFocus: false, + source: [ "java", "javascript" ] + }) + .val( "ja" ) + .autocomplete( "search" ); + event = $.Event( "keydown" ); event.keyCode = $.ui.keyCode.ENTER; - ac.trigger( event ); + element.trigger( event ); ok( !event.isDefaultPrevented(), "default action is prevented" ); }); -})(jQuery); +}( jQuery ) ); diff --git a/tests/unit/autocomplete/autocomplete_events.js b/tests/unit/autocomplete/autocomplete_events.js index c884733d6..c6d42ddcc 100644 --- a/tests/unit/autocomplete/autocomplete_events.js +++ b/tests/unit/autocomplete/autocomplete_events.js @@ -1,206 +1,197 @@ -/* - * autocomplete_events.js - */ -(function($) { +(function( $ ) { -module("autocomplete: events", { - teardown: function() { - $( ":ui-autocomplete" ).autocomplete( "destroy" ); - } -}); +module( "autocomplete: events" ); var data = [ "Clojure", "COBOL", "ColdFusion", "Java", "JavaScript", "Scala", "Scheme" ]; -test("all events", function() { - expect(14); - var ac = $("#autocomplete").autocomplete({ - autoFocus: false, - delay: 0, - source: data, - search: function(event) { - same(event.type, "autocompletesearch"); - }, - response: function(event, ui) { - same(event.type, "autocompleteresponse"); - same(ui.content, [ - { label: "Clojure", value: "Clojure" }, - { label: "Java", value: "Java" }, - { label: "JavaScript", value: "JavaScript" } - ]); - ui.content.splice( 0, 1 ); - }, - open: function(event) { - same(event.type, "autocompleteopen"); - }, - focus: function(event, ui) { - same(event.type, "autocompletefocus"); - same(ui.item, {label:"Java", value:"Java"}); - }, - close: function(event) { - same(event.type, "autocompleteclose"); - same( $(".ui-menu:visible").length, 0 ); - }, - select: function(event, ui) { - same(event.type, "autocompleteselect"); - same(ui.item, {label:"Java", value:"Java"}); - }, - change: function(event, ui) { - same(event.type, "autocompletechange"); - same(ui.item, {label:"Java", value:"Java"}); - same( $(".ui-menu:visible").length, 0 ); - start(); - } - }); - stop(); - ac.focus().val("j").keydown(); +asyncTest( "all events", function() { + expect( 13 ); + var element = $( "#autocomplete" ) + .autocomplete({ + autoFocus: false, + delay: 0, + source: data, + search: function( event ) { + equal( event.originalEvent.type, "keydown", "search originalEvent" ); + }, + response: function( event, ui ) { + deepEqual( ui.content, [ + { label: "Clojure", value: "Clojure" }, + { label: "Java", value: "Java" }, + { label: "JavaScript", value: "JavaScript" } + ], "response ui.content" ); + ui.content.splice( 0, 1 ); + }, + open: function( event ) { + ok( menu.is( ":visible" ), "menu open on open" ); + }, + focus: function( event, ui ) { + equal( event.originalEvent.type, "menufocus", "focus originalEvent" ); + deepEqual( ui.item, { label: "Java", value: "Java" }, "focus ui.item" ); + }, + close: function( event ) { + equal( event.originalEvent.type, "menuselect", "close originalEvent" ); + ok( menu.is( ":hidden" ), "menu closed on close" ); + }, + select: function( event, ui ) { + equal( event.originalEvent.type, "menuselect", "select originalEvent" ); + deepEqual( ui.item, { label: "Java", value: "Java" }, "select ui.item" ); + }, + change: function( event, ui ) { + equal( event.originalEvent.type, "blur", "change originalEvent" ); + deepEqual( ui.item, { label: "Java", value: "Java" }, "chnage ui.item" ); + ok( menu.is( ":hidden" ), "menu closed on change" ); + start(); + } + }), + menu = element.autocomplete( "widget" ); + + element.focus().val( "j" ).keydown(); setTimeout(function() { - same( $(".ui-menu:visible").length, 1 ); - ac.simulate("keydown", { keyCode: $.ui.keyCode.DOWN }); - ac.simulate("keydown", { keyCode: $.ui.keyCode.ENTER }); + ok( menu.is( ":visible" ), "menu is visible after delay" ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); // blurring through jQuery causes a bug in IE 6 which causes the // autocompletechange event to occur twice - ac[0].blur(); - }, 50); + element[0].blur(); + }, 50 ); }); -test("all events - contenteditable", function() { - expect(14); - var ac = $("#autocomplete-contenteditable").autocomplete({ - autoFocus: false, - delay: 0, - source: data, - search: function(event) { - same(event.type, "autocompletesearch"); - }, - response: function(event, ui) { - same(event.type, "autocompleteresponse"); - same(ui.content, [ - { label: "Clojure", value: "Clojure" }, - { label: "Java", value: "Java" }, - { label: "JavaScript", value: "JavaScript" } - ]); - ui.content.splice( 0, 1 ); - }, - open: function(event) { - same(event.type, "autocompleteopen"); - }, - focus: function(event, ui) { - same(event.type, "autocompletefocus"); - same(ui.item, {label:"Java", value:"Java"}); - }, - close: function(event) { - same(event.type, "autocompleteclose"); - same( $(".ui-menu:visible").length, 0 ); - }, - select: function(event, ui) { - same(event.type, "autocompleteselect"); - same(ui.item, {label:"Java", value:"Java"}); - }, - change: function(event, ui) { - same(event.type, "autocompletechange"); - same(ui.item, {label:"Java", value:"Java"}); - same( $(".ui-menu:visible").length, 0 ); - start(); - } - }); - stop(); - ac.focus().text("j").keydown(); +asyncTest( "all events - contenteditable", function() { + expect( 13 ); + var element = $( "#autocomplete-contenteditable" ) + .autocomplete({ + autoFocus: false, + delay: 0, + source: data, + search: function( event ) { + equal( event.originalEvent.type, "keydown", "search originalEvent" ); + }, + response: function( event, ui ) { + deepEqual( ui.content, [ + { label: "Clojure", value: "Clojure" }, + { label: "Java", value: "Java" }, + { label: "JavaScript", value: "JavaScript" } + ], "response ui.content" ); + ui.content.splice( 0, 1 ); + }, + open: function( event ) { + ok( menu.is( ":visible" ), "menu open on open" ); + }, + focus: function( event, ui ) { + equal( event.originalEvent.type, "menufocus", "focus originalEvent" ); + deepEqual( ui.item, { label: "Java", value: "Java" }, "focus ui.item" ); + }, + close: function( event ) { + equal( event.originalEvent.type, "menuselect", "close originalEvent" ); + ok( menu.is( ":hidden" ), "menu closed on close" ); + }, + select: function( event, ui ) { + equal( event.originalEvent.type, "menuselect", "select originalEvent" ); + deepEqual( ui.item, { label: "Java", value: "Java" }, "select ui.item" ); + }, + change: function( event, ui ) { + equal( event.originalEvent.type, "blur", "change originalEvent" ); + deepEqual( ui.item, { label: "Java", value: "Java" }, "chnage ui.item" ); + ok( menu.is( ":hidden" ), "menu closed on change" ); + start(); + } + }), + menu = element.autocomplete( "widget" ); + + element.focus().text( "j" ).keydown(); setTimeout(function() { - same( $(".ui-menu:visible").length, 1 ); - ac.simulate("keydown", { keyCode: $.ui.keyCode.DOWN }); - ac.simulate("keydown", { keyCode: $.ui.keyCode.ENTER }); - // blurring through jQuery causes a bug in IE 6 which causes the + ok( menu.is( ":visible" ), "menu is visible after delay" ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); + // TODO: blurring through jQuery causes a bug in IE 6 which causes the // autocompletechange event to occur twice - ac[0].blur(); - }, 50); + element[0].blur(); + }, 50 ); }); -test("change without selection", function() { - expect(2); - stop(); - var ac = $("#autocomplete").autocomplete({ +asyncTest( "change without selection", function() { + expect( 1 ); + var element = $( "#autocomplete" ).autocomplete({ delay: 0, source: data, - change: function(event, ui) { - same(event.type, "autocompletechange"); - same(ui.item, null); + change: function( event, ui ) { + strictEqual( ui.item, null ); start(); } }); - ac.triggerHandler("focus"); - ac.val("ja").triggerHandler("blur"); + element.triggerHandler( "focus" ); + element.val( "ja" ).triggerHandler( "blur" ); }); -test("cancel search", function() { - expect(6); - var first = true; - var ac = $("#autocomplete").autocomplete({ - delay: 0, - source: data, - search: function() { - if (first) { - same( ac.val(), "ja" ); - first = false; - return false; +asyncTest( "cancel search", function() { + expect( 6 ); + var first = true, + element = $( "#autocomplete" ).autocomplete({ + delay: 0, + source: data, + search: function() { + if ( first ) { + equal( element.val(), "ja", "val on first search" ); + first = false; + return false; + } + equal( element.val(), "java", "val on second search" ); + }, + open: function() { + ok( true, "menu opened" ); } - same( ac.val(), "java" ); - }, - open: function() { - ok(true); - } - }); - stop(); - ac.val("ja").keydown(); + }), + menu = element.autocomplete( "widget" ); + element.val( "ja" ).keydown(); setTimeout(function() { - same( $(".ui-menu:visible").length, 0 ); - ac.val("java").keydown(); + ok( menu.is( ":hidden" ), "menu is hidden after first search" ); + element.val( "java" ).keydown(); setTimeout(function() { - same( $(".ui-menu:visible").length, 1 ); - same( $(".ui-menu .ui-menu-item").length, 2 ); + ok( menu.is( ":visible" ), "menu is visible after second search" ); + equal( menu.find( ".ui-menu-item" ).length, 2, "# of menu items" ); start(); - }, 50); - }, 50); + }, 50 ); + }, 50 ); }); -test("cancel focus", function() { - expect(1); - var customVal = 'custom value'; - var ac = $("#autocomplete").autocomplete({ - delay: 0, - source: data, - focus: function(event, ui) { - $(this).val(customVal); - return false; - } - }); - stop(); - ac.val("ja").keydown(); +asyncTest( "cancel focus", function() { + expect( 1 ); + var customVal = "custom value"; + element = $( "#autocomplete" ).autocomplete({ + delay: 0, + source: data, + focus: function( event, ui ) { + $( this ).val( customVal ); + return false; + } + }); + element.val( "ja" ).keydown(); setTimeout(function() { - ac.simulate("keydown", { keyCode: $.ui.keyCode.DOWN }); - same( ac.val(), customVal ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + equal( element.val(), customVal ); start(); - }, 50); + }, 50 ); }); -test("cancel select", function() { - expect(1); - var customVal = 'custom value'; - var ac = $("#autocomplete").autocomplete({ - delay: 0, - source: data, - select: function(event, ui) { - $(this).val(customVal); - return false; - } - }); - stop(); - ac.val("ja").keydown(); +asyncTest( "cancel select", function() { + expect( 1 ); + var customVal = "custom value", + element = $( "#autocomplete" ).autocomplete({ + delay: 0, + source: data, + select: function( event, ui ) { + $( this ).val( customVal ); + return false; + } + }); + element.val( "ja" ).keydown(); setTimeout(function() { - ac.simulate("keydown", { keyCode: $.ui.keyCode.DOWN }); - ac.simulate("keydown", { keyCode: $.ui.keyCode.ENTER }); - same( ac.val(), customVal ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); + equal( element.val(), customVal ); start(); - }, 50); + }, 50 ); }); /* TODO previous fix broke more than it fixed, disabling this for now - messed up regular menu select event @@ -215,10 +206,10 @@ test("blur without selection", function() { setTimeout(function() { $( ".ui-menu-item" ).first().simulate("mouseover"); ac.simulate("keydown", { keyCode: $.ui.keyCode.TAB }); - same( ac.val(), "j" ); + deepEqual( ac.val(), "j" ); start(); }, 50); }); */ -})(jQuery); +}( jQuery ) ); diff --git a/tests/unit/autocomplete/autocomplete_methods.js b/tests/unit/autocomplete/autocomplete_methods.js index 1043e47ba..3fe035d28 100644 --- a/tests/unit/autocomplete/autocomplete_methods.js +++ b/tests/unit/autocomplete/autocomplete_methods.js @@ -1,39 +1,30 @@ -/* - * autocomplete_methods.js - */ -(function($) { +(function( $ ) { +module( "autocomplete: methods" ); -module("autocomplete: methods", { - teardown: function() { - $( ":ui-autocomplete" ).autocomplete( "destroy" ); - } +test( "destroy", function() { + expect( 1 ); + domEqual( "#autocomplete", function() { + $( "#autocomplete" ).autocomplete().autocomplete( "destroy" ); + }); }); -test("destroy", function() { - domEqual("#autocomplete", function() { - $("#autocomplete").autocomplete().autocomplete("destroy"); - }); -}) +test( "search", function() { + expect( 3 ); + var data = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl" ], + element = $( "#autocomplete" ).autocomplete({ + source: data, + minLength: 0 + }), + menu = element.autocomplete( "widget" ); + element.autocomplete( "search" ); + equal( menu.find( ".ui-menu-item" ).length, data.length, "all items for a blank search" ); -var data = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"]; + element.val( "has" ).autocomplete( "search" ); + equal( menu.find( ".ui-menu-item" ).text(), "haskell", "only one item for set input value" ); -test("search", function() { - var ac = $("#autocomplete").autocomplete({ - source: data, - minLength: 0 - }); - ac.autocomplete("search"); - same( $(".ui-menu .ui-menu-item").length, data.length, "all items for a blank search" ); - - ac.val("has"); - ac.autocomplete("search") - same( $(".ui-menu .ui-menu-item").text(), "haskell", "only one item for set input value" ); - - ac.autocomplete("search", "ja"); - same( $(".ui-menu .ui-menu-item").length, 2, "only java and javascript for 'ja'" ); - - $("#autocomplete").autocomplete("destroy"); -}) + element.autocomplete( "search", "ja" ); + equal( menu.find( ".ui-menu-item" ).length, 2, "only java and javascript for 'ja'" ); +}); -})(jQuery); +}( jQuery ) ); diff --git a/tests/unit/autocomplete/autocomplete_options.js b/tests/unit/autocomplete/autocomplete_options.js index f2da2f4aa..01c4e9fef 100644 --- a/tests/unit/autocomplete/autocomplete_options.js +++ b/tests/unit/autocomplete/autocomplete_options.js @@ -1,247 +1,192 @@ -/* - * autocomplete_options.js - */ -(function($) { - -module("autocomplete: options", { - teardown: function() { - $( ":ui-autocomplete" ).autocomplete( "destroy" ); - } -}); - +(function( $ ) { -/* disabled until autocomplete actually has built-in support for caching -// returns at most 4 items -function source(request) { - ok(true, "handling a request"); - switch(request.term) { - case "cha": - return ["Common Pochard", "Common Chiffchaff", "Common Chaffinch", "Iberian Chiffchaff"] - case "chaf": - case "chaff": - return ["Common Chiffchaff", "Common Chaffinch", "Iberian Chiffchaff"] - case "chaffi": - return ["Common Chaffinch"] - case "schi": - return ["schifpre"] - } -} +module( "autocomplete: options" ); -function search(input) { - var autocomplete = input.data("autocomplete"); - autocomplete.search("cha"); - autocomplete.close(); - autocomplete.search("chaf"); - autocomplete.close(); - autocomplete.search("chaff"); - autocomplete.close(); - autocomplete.search("chaffi"); - autocomplete.close(); - autocomplete.search("schi"); -} - -test("cache: default", function() { - expect(2); - search($("#autocomplete").autocomplete({ - source: source - })); -}); - -test("cache: {limit:4}", function() { - expect(3); - search($("#autocomplete").autocomplete({ - cache: { - limit: 4 - }, - source: source - })); -}); - -test("cache: false", function() { - expect(5); - search($("#autocomplete").autocomplete({ - cache: false, - source: source - })); -}); -*/ - -var data = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"]; +var data = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl" ]; test( "appendTo", function() { - var ac = $( "#autocomplete" ).autocomplete(); - same( ac.autocomplete( "widget" ).parent()[0], document.body, "defaults to body" ); - ac.autocomplete( "destroy" ); - - ac.autocomplete({ - appendTo: "#ac-wrap2" - }); - same( ac.autocomplete( "widget" ).parent()[0], $( "#ac-wrap2" )[0], "id" ); - ac.autocomplete( "destroy" ); + expect( 5 ); + var element = $( "#autocomplete" ).autocomplete(); + equal( element.autocomplete( "widget" ).parent()[0], document.body, "defaults to body" ); + element.autocomplete( "destroy" ); - ac.autocomplete({ + element.autocomplete({ appendTo: ".ac-wrap" }); - same( ac.autocomplete( "widget" ).parent()[0], $( "#ac-wrap1" )[0], "class" ); - same( $( "#ac-wrap2 .ui-autocomplete").length, 0, "class - only appends to one element") - ac.autocomplete( "destroy" ); + equal( element.autocomplete( "widget" ).parent()[0], $( "#ac-wrap1" )[0], "first found element" ); + equal( $( "#ac-wrap2 .ui-autocomplete" ).length, 0, "only appends to one element" ); + element.autocomplete( "destroy" ); - ac.autocomplete({ + element.autocomplete({ appendTo: null }); - same( ac.autocomplete( "widget" ).parent()[0], document.body, "null" ); - ac.autocomplete( "destroy" ); - - ac.autocomplete().autocomplete( "option", "appendTo", "#ac-wrap1" ); - same( ac.autocomplete( "widget" ).parent()[0], $( "#ac-wrap1" )[0], "modified after init" ); - ac.autocomplete( "destroy" ); + equal( element.autocomplete( "widget" ).parent()[0], document.body, "null" ); + element.autocomplete( "destroy" ); + + element.autocomplete().autocomplete( "option", "appendTo", "#ac-wrap1" ); + equal( element.autocomplete( "widget" ).parent()[0], $( "#ac-wrap1" )[0], "modified after init" ); + element.autocomplete( "destroy" ); }); function autoFocusTest( afValue, focusedLength ) { - var ac = $( "#autocomplete" ).autocomplete({ + var element = $( "#autocomplete" ).autocomplete({ autoFocus: afValue, delay: 0, source: data, open: function( event, ui ) { - equal( ac.autocomplete( "widget" ).children( ".ui-menu-item:first .ui-state-focus" ).length, focusedLength, "first item is " + afValue ? "" : "not" + " auto focused" ); - start(); + equal( element.autocomplete( "widget" ).children( ".ui-menu-item:first .ui-state-focus" ).length, + focusedLength, "first item is " + (afValue ? "" : "not") + " auto focused" ); + start(); } }); - ac.val( "ja" ).keydown(); + element.val( "ja" ).keydown(); stop(); } test( "autoFocus: false", function() { + expect( 1 ); autoFocusTest( false, 0 ); }); test( "autoFocus: true", function() { + expect( 1 ); autoFocusTest( true, 1 ); }); -test("delay", function() { - var ac = $("#autocomplete").autocomplete({ - source: data, - delay: 50 - }); - ac.val("ja").keydown(); - - same( $(".ui-menu:visible").length, 0 ); - - // wait half a second for the default delay to open the menu - stop(); - setTimeout(function() { - same( $(".ui-menu:visible").length, 1 ); - ac.autocomplete("destroy"); - start(); - }, 100); -}); +asyncTest( "delay", function() { + expect( 2 ); + var element = $( "#autocomplete" ).autocomplete({ + source: data, + delay: 50 + }), + menu = element.autocomplete( "widget" ); + element.val( "ja" ).keydown(); + + ok( menu.is( ":hidden" ), "menu is closed immediately after search" ); -test("disabled", function() { - var ac = $("#autocomplete").autocomplete({ - source: data, - delay: 0, - disabled: true - }); - ac.val("ja").keydown(); - - same( $(".ui-menu:visible").length, 0 ); - - stop(); setTimeout(function() { - same( $(".ui-menu:visible").length, 0 ); - ac.autocomplete("destroy"); + ok( menu.is( ":visible" ), "menu is open after delay" ); start(); - }, 50); + }, 100 ); }); -test("minLength", function() { - var ac = $("#autocomplete").autocomplete({ - source: data - }); - ac.autocomplete("search", ""); - same( $(".ui-menu:visible").length, 0, "blank not enough for minLength: 1" ); - - ac.autocomplete("option", "minLength", 0); - ac.autocomplete("search", ""); - same( $(".ui-menu:visible").length, 1, "blank enough for minLength: 0" ); - ac.autocomplete("destroy"); -}); +asyncTest( "disabled", function() { + expect( 2 ); + var element = $( "#autocomplete" ).autocomplete({ + source: data, + delay: 0, + disabled: true + }), + menu = element.autocomplete( "widget" ); + element.val( "ja" ).keydown(); -test("source, local string array", function() { - var ac = $("#autocomplete").autocomplete({ - source: data - }); - ac.val("ja").autocomplete("search"); - same( $(".ui-menu .ui-menu-item").text(), "javajavascript" ); - ac.autocomplete("destroy"); -}); + ok( menu.is( ":hidden" ) ); -function source_test(source, async) { - var ac = $("#autocomplete").autocomplete({ - source: source - }); - ac.val("ja").autocomplete("search"); - function result(){ - same( $(".ui-menu .ui-menu-item").text(), "javajavascript" ); - ac.autocomplete("destroy"); - async && start(); + setTimeout(function() { + ok( menu.is( ":hidden" ) ); + start(); + }, 50 ); +}); + +test( "minLength", function() { + expect( 2 ); + var element = $( "#autocomplete" ).autocomplete({ + source: data + }), + menu = element.autocomplete( "widget" ); + element.autocomplete( "search", "" ); + ok( menu.is( ":hidden" ), "blank not enough for minLength: 1" ); + + element.autocomplete( "option", "minLength", 0 ); + element.autocomplete( "search", "" ); + ok( menu.is( ":visible" ), "blank enough for minLength: 0" ); +}); + +test( "source, local string array", function() { + expect( 1 ); + var element = $( "#autocomplete" ).autocomplete({ + source: data + }), + menu = element.autocomplete( "widget" ); + element.val( "ja" ).autocomplete( "search" ); + equal( menu.find( ".ui-menu-item" ).text(), "javajavascript" ); +}); + +function sourceTest( source, async ) { + var element = $( "#autocomplete" ).autocomplete({ + source: source + }), + menu = element.autocomplete( "widget" ); + element.val( "ja" ).autocomplete( "search" ); + function result() { + equal( menu.find( ".ui-menu-item" ).text(), "javajavascript" ); + element.autocomplete( "destroy" ); + if ( async ) { + start(); + } } - if (async) { + if ( async ) { stop(); - $(document).one("ajaxStop", result); + $( document ).one( "ajaxStop", result ); } else { result(); } } -test("source, local object array, only label property", function() { - source_test([ - {label:"java"}, - {label:"php"}, - {label:"coldfusion"}, - {label:"javascript"} +test( "source, local object array, only label property", function() { + expect( 1 ); + sourceTest([ + { label: "java" }, + { label: "php" }, + { label: "coldfusion" }, + { label: "javascript" } ]); }); -test("source, local object array, only value property", function() { - source_test([ - {value:"java"}, - {value:"php"}, - {value:"coldfusion"}, - {value:"javascript"} +test( "source, local object array, only value property", function() { + expect( 1 ); + sourceTest([ + { value: "java" }, + { value: "php" }, + { value: "coldfusion" }, + { value: "javascript" } ]); }); -test("source, url string with remote json string array", function() { - source_test("remote_string_array.txt", true); +test( "source, url string with remote json string array", function() { + expect( 1 ); + sourceTest( "remote_string_array.txt", true ); }); -test("source, url string with remote json object array, only value properties", function() { - source_test("remote_object_array_values.txt", true); +test( "source, url string with remote json object array, only value properties", function() { + expect( 1 ); + sourceTest( "remote_object_array_values.txt", true ); }); -test("source, url string with remote json object array, only label properties", function() { - source_test("remote_object_array_labels.txt", true); +test( "source, url string with remote json object array, only label properties", function() { + expect( 1 ); + sourceTest( "remote_object_array_labels.txt", true ); }); -test("source, custom", function() { - source_test(function(request, response) { - same( request.term, "ja" ); - response(["java", "javascript"]); +test( "source, custom", function() { + expect( 2 ); + sourceTest(function( request, response ) { + equal( request.term, "ja" ); + response( ["java", "javascript"] ); }); }); -test("source, update after init", function() { - var ac = $("#autocomplete").autocomplete({ - source: ["java", "javascript", "haskell"] - }); - ac.val("ja").autocomplete("search"); - same( $(".ui-menu .ui-menu-item").text(), "javajavascript" ); - ac.autocomplete("option", "source", ["php", "asp"]); - ac.val("ph").autocomplete("search"); - same( $(".ui-menu .ui-menu-item").text(), "php" ); - ac.autocomplete("destroy"); +test( "source, update after init", function() { + expect( 2 ); + var element = $( "#autocomplete" ).autocomplete({ + source: [ "java", "javascript", "haskell" ] + }), + menu = element.autocomplete( "widget" ); + element.val( "ja" ).autocomplete( "search" ); + equal( menu.find( ".ui-menu-item" ).text(), "javajavascript" ); + element.autocomplete( "option", "source", [ "php", "asp" ] ); + element.val( "ph" ).autocomplete( "search" ); + equal( menu.find( ".ui-menu-item" ).text(), "php" ); }); -})(jQuery); +}( jQuery ) ); -- cgit v1.2.3 From e549e18fc2f658fe15c53c1df84847c00e87c9de Mon Sep 17 00:00:00 2001 From: Scott González Date: Mon, 13 Jun 2011 14:51:13 -0400 Subject: Accordion tests: Cleanup. --- tests/unit/accordion/accordion.html | 2 +- tests/unit/accordion/accordion_core.js | 2 ++ tests/unit/accordion/accordion_deprecated.html | 2 +- tests/unit/accordion/accordion_deprecated.js | 42 ++++++++++++++++++-------- tests/unit/accordion/accordion_methods.js | 13 +++++--- tests/unit/accordion/accordion_options.js | 25 ++++++++++++--- 6 files changed, 63 insertions(+), 23 deletions(-) diff --git a/tests/unit/accordion/accordion.html b/tests/unit/accordion/accordion.html index ef20c057e..c4eee6b4c 100644 --- a/tests/unit/accordion/accordion.html +++ b/tests/unit/accordion/accordion.html @@ -27,7 +27,7 @@ }).get(); deepEqual( actual, expected ); } - function equalHeights( accordion, min, max ) { + function accordion_equalHeights( accordion, min, max ) { var sizes = []; accordion.find( ".ui-accordion-content" ).each(function() { sizes.push( $( this ).outerHeight() ); diff --git a/tests/unit/accordion/accordion_core.js b/tests/unit/accordion/accordion_core.js index 000470d0b..ec4ca29d5 100644 --- a/tests/unit/accordion/accordion_core.js +++ b/tests/unit/accordion/accordion_core.js @@ -3,6 +3,7 @@ module( "accordion: core", accordionSetupTeardown() ); $.each( { div: "#list1", ul: "#navigation", dl: "#accordion-dl" }, function( type, selector ) { + expect( 4 ); test( "markup structure: " + type, function() { var element = $( selector ).accordion(); ok( element.hasClass( "ui-accordion" ), "main element is .ui-accordion" ); @@ -17,6 +18,7 @@ $.each( { div: "#list1", ul: "#navigation", dl: "#accordion-dl" }, function( typ }); test( "handle click on header-descendant", function() { + expect( 1 ); var element = $( "#navigation" ).accordion(); $( "#navigation h2:eq(1) a" ).click(); accordion_state( element, 0, 1, 0 ); diff --git a/tests/unit/accordion/accordion_deprecated.html b/tests/unit/accordion/accordion_deprecated.html index 2e754fe6a..5bfe7562b 100644 --- a/tests/unit/accordion/accordion_deprecated.html +++ b/tests/unit/accordion/accordion_deprecated.html @@ -24,7 +24,7 @@ }).get(); deepEqual( actual, expected ); } - function equalHeights( accordion, min, max ) { + function accordion_equalHeights( accordion, min, max ) { var sizes = []; accordion.find( ".ui-accordion-content" ).each(function() { sizes.push( $( this ).outerHeight() ); diff --git a/tests/unit/accordion/accordion_deprecated.js b/tests/unit/accordion/accordion_deprecated.js index 733cb82b0..3a2075b2b 100644 --- a/tests/unit/accordion/accordion_deprecated.js +++ b/tests/unit/accordion/accordion_deprecated.js @@ -3,6 +3,7 @@ module( "accordion (deprecated): expanded active option, activate method", accordionSetupTeardown() ); test( "activate, numeric", function() { + expect( 5 ); var element = $( "#list1" ).accordion({ active: 1 }); accordion_state( element, 0, 1, 0 ); element.accordion( "activate", 2 ); @@ -16,6 +17,7 @@ test( "activate, numeric", function() { }); test( "activate, numeric, collapsible:true", function() { + expect( 3 ); var element = $( "#list1" ).accordion({ collapsible: true }); element.accordion( "activate", 2 ); accordion_state( element, 0, 0, 1 ); @@ -26,6 +28,7 @@ test( "activate, numeric, collapsible:true", function() { }); test( "activate, boolean, collapsible: true", function() { + expect( 2 ); var element = $( "#list1" ).accordion({ collapsible: true }); element.accordion( "activate", 2 ); accordion_state( element, 0, 0, 1 ); @@ -34,6 +37,7 @@ test( "activate, boolean, collapsible: true", function() { }); test( "activate, boolean, collapsible: false", function() { + expect( 2 ); var element = $( "#list1" ).accordion(); element.accordion( "activate", 2 ); accordion_state( element, 0, 0, 1 ); @@ -42,6 +46,7 @@ test( "activate, boolean, collapsible: false", function() { }); test( "activate, string expression", function() { + expect( 4 ); var element = $( "#list1" ).accordion({ active: "h3:last" }); accordion_state( element, 0, 0, 1 ); element.accordion( "activate", ":first" ); @@ -53,6 +58,7 @@ test( "activate, string expression", function() { }); test( "activate, jQuery or DOM element", function() { + expect( 3 ); var element = $( "#list1" ).accordion({ active: $( "#list1 h3:last" ) }); accordion_state( element, 0, 0, 1 ); element.accordion( "activate", $( "#list1 h3:first" ) ); @@ -62,6 +68,7 @@ test( "activate, jQuery or DOM element", function() { }); test( "{ active: Selector }", function() { + expect( 2 ); var element = $("#list1").accordion({ active: "h3:last" }); @@ -71,6 +78,7 @@ test( "{ active: Selector }", function() { }); test( "{ active: Element }", function() { + expect( 2 ); var element = $( "#list1" ).accordion({ active: $( "#list1 h3:last" )[ 0 ] }); @@ -80,6 +88,7 @@ test( "{ active: Element }", function() { }); test( "{ active: jQuery Object }", function() { + expect( 2 ); var element = $( "#list1" ).accordion({ active: $( "#list1 h3:last" ) }); @@ -95,14 +104,16 @@ test( "{ active: jQuery Object }", function() { module( "accordion (deprecated) - height options", accordionSetupTeardown() ); test( "{ autoHeight: true }, default", function() { - equalHeights($('#navigation').accordion({ autoHeight: true }), 95, 130); + expect( 3 ); + accordion_equalHeights( $( "#navigation" ).accordion({ autoHeight: true }), 95, 130 ); }); -test("{ autoHeight: false }", function() { - var element = $('#navigation').accordion({ autoHeight: false }); +test( "{ autoHeight: false }", function() { + expect( 3 ); + var element = $( "#navigation" ).accordion({ autoHeight: false }); var sizes = []; - element.find(".ui-accordion-content").each(function() { - sizes.push($(this).height()); + element.find( ".ui-accordion-content" ).each(function() { + sizes.push( $(this).height() ); }); ok( sizes[0] >= 70 && sizes[0] <= 105, "was " + sizes[0] ); ok( sizes[1] >= 98 && sizes[1] <= 126, "was " + sizes[1] ); @@ -110,12 +121,14 @@ test("{ autoHeight: false }", function() { }); test( "{ fillSpace: true }", function() { + expect( 3 ); $( "#navigationWrapper" ).height( 500 ); var element = $( "#navigation" ).accordion({ fillSpace: true }); - equalHeights( element, 446, 458 ); + accordion_equalHeights( element, 446, 458 ); }); test( "{ fillSapce: true } with sibling", function() { + expect( 3 ); $( "#navigationWrapper" ).height( 500 ); $( "

      Lorem Ipsum

      " ) .css({ @@ -125,10 +138,11 @@ test( "{ fillSapce: true } with sibling", function() { }) .prependTo( "#navigationWrapper" ); var element = $( "#navigation" ).accordion({ fillSpace: true }); - equalHeights( element , 346, 358); + accordion_equalHeights( element , 346, 358); }); test( "{ fillSpace: true } with multiple siblings", function() { + expect( 3 ); $( "#navigationWrapper" ).height( 500 ); $( "

      Lorem Ipsum

      " ) .css({ @@ -153,7 +167,7 @@ test( "{ fillSpace: true } with multiple siblings", function() { }) .prependTo( "#navigationWrapper" ); var element = $( "#navigation" ).accordion({ fillSpace: true }); - equalHeights( element, 296, 308 ); + accordion_equalHeights( element, 296, 308 ); }); @@ -163,6 +177,7 @@ test( "{ fillSpace: true } with multiple siblings", function() { module( "accordion (deprecated) - icons", accordionSetupTeardown() ); test( "icons, headerSelected", function() { + expect( 3 ); var element = $( "#list1" ).accordion({ icons: { headerSelected: "a1", header: "h1" } }); @@ -179,6 +194,7 @@ test( "icons, headerSelected", function() { module( "accordion (deprecated) - resize", accordionSetupTeardown() ); test( "resize", function() { + expect( 6 ); var element = $( "#navigation" ) .parent() .height( 300 ) @@ -186,11 +202,11 @@ test( "resize", function() { .accordion({ heightStyle: "fill" }); - equalHeights( element, 246, 258 ); + accordion_equalHeights( element, 246, 258 ); element.parent().height( 500 ); element.accordion( "resize" ); - equalHeights( element, 446, 458 ); + accordion_equalHeights( element, 446, 458 ); }); @@ -200,6 +216,7 @@ test( "resize", function() { module( "accordion (deprecated) - navigation", accordionSetupTeardown() ); test( "{ navigation: true, navigationFilter: header }", function() { + expect( 2 ); var element = $( "#navigation" ).accordion({ navigation: true, navigationFilter: function() { @@ -211,10 +228,11 @@ test( "{ navigation: true, navigationFilter: header }", function() { }); test( "{ navigation: true, navigationFilter: content }", function() { - var element = $("#navigation").accordion({ + expect( 2 ); + var element = $( "#navigation" ).accordion({ navigation: true, navigationFilter: function() { - return /\?p=1\.1\.3\.2$/.test(this.href); + return /\?p=1\.1\.3\.2$/.test( this.href ); } }); equal( element.accordion( "option", "active" ), 2 ); diff --git a/tests/unit/accordion/accordion_methods.js b/tests/unit/accordion/accordion_methods.js index d45bde134..c6ba3230a 100644 --- a/tests/unit/accordion/accordion_methods.js +++ b/tests/unit/accordion/accordion_methods.js @@ -3,13 +3,15 @@ module( "accordion: methods", accordionSetupTeardown() ); test( "destroy", function() { - domEqual("#list1", function() { - $("#list1").accordion().accordion("destroy"); + expect( 1 ); + domEqual( "#list1", function() { + $( "#list1" ).accordion().accordion( "destroy" ); }); }); test( "enable/disable", function() { - var element = $('#list1').accordion(); + expect( 3 ); + var element = $( "#list1" ).accordion(); accordion_state( element, 1, 0, 0 ); element.accordion( "disable" ); element.accordion( "option", "active", 1 ); @@ -20,6 +22,7 @@ test( "enable/disable", function() { }); test( "refresh", function() { + expect( 6 ); var element = $( "#navigation" ) .parent() .height( 300 ) @@ -27,11 +30,11 @@ test( "refresh", function() { .accordion({ heightStyle: "fill" }); - equalHeights( element, 246, 258 ); + accordion_equalHeights( element, 246, 258 ); element.parent().height( 500 ); element.accordion( "refresh" ); - equalHeights( element, 446, 458 ); + accordion_equalHeights( element, 446, 458 ); }); }( jQuery ) ); diff --git a/tests/unit/accordion/accordion_options.js b/tests/unit/accordion/accordion_options.js index 57762dec8..80b7f0b39 100644 --- a/tests/unit/accordion/accordion_options.js +++ b/tests/unit/accordion/accordion_options.js @@ -3,12 +3,14 @@ module( "accordion: options", accordionSetupTeardown() ); test( "{ active: default }", function() { + expect( 2 ); var element = $( "#list1" ).accordion(); equal( element.accordion( "option", "active" ), 0 ); accordion_state( element, 1, 0, 0 ); }); test( "{ active: false }", function() { + expect( 7 ); var element = $( "#list1" ).accordion({ active: false, collapsible: true @@ -30,6 +32,7 @@ test( "{ active: false }", function() { }); test( "{ active: Number }", function() { + expect( 8 ); var element = $( "#list1" ).accordion({ active: 2 }); @@ -51,6 +54,7 @@ test( "{ active: Number }", function() { if ( $.uiBackCompat === false ) { test( "{ active: -Number }", function() { + expect( 8 ); var element = $( "#list1" ).accordion({ active: -1 }); @@ -74,6 +78,7 @@ if ( $.uiBackCompat === false ) { // TODO: add animation tests test( "{ collapsible: false }", function() { + expect( 4 ); var element = $( "#list1" ).accordion({ active: 1 }); @@ -87,6 +92,7 @@ test( "{ collapsible: false }", function() { }); test( "{ collapsible: true }", function() { + expect( 6 ); var element = $( "#list1" ).accordion({ active: 1, collapsible: true @@ -106,6 +112,7 @@ test( "{ collapsible: true }", function() { }); test( "{ event: null }", function() { + expect( 5 ); var element = $( "#list1" ).accordion({ event: null }); @@ -122,6 +129,7 @@ test( "{ event: null }", function() { }); test( "{ event: custom }", function() { + expect( 11 ); var element = $( "#list1" ).accordion({ event: "custom1 custom2" }); @@ -153,6 +161,7 @@ test( "{ event: custom }", function() { }); test( "{ header: default }", function() { + expect( 2 ); // default: > li > :first-child,> :not(li):even // > :not(li):even accordion_state( $( "#list1" ).accordion(), 1, 0, 0); @@ -161,6 +170,7 @@ test( "{ header: default }", function() { }); test( "{ header: custom }", function() { + expect( 6 ); var element = $( "#navigationWrapper" ).accordion({ header: "h2" }); @@ -174,11 +184,13 @@ test( "{ header: custom }", function() { }); test( "{ heightStyle: 'auto' }", function() { + expect( 3 ); var element = $( "#navigation" ).accordion({ heightStyle: "auto" }); - equalHeights( element, 95, 130 ); + accordion_equalHeights( element, 95, 130 ); }); test( "{ heightStyle: 'content' }", function() { + expect( 3 ); var element = $( "#navigation" ).accordion({ heightStyle: "content" }); var sizes = element.find( ".ui-accordion-content" ).map(function() { return $( this ).height(); @@ -189,12 +201,14 @@ test( "{ heightStyle: 'content' }", function() { }); test( "{ heightStyle: 'fill' }", function() { + expect( 3 ); $( "#navigationWrapper" ).height( 500 ); var element = $( "#navigation" ).accordion({ heightStyle: "fill" }); - equalHeights( element, 446, 458 ); + accordion_equalHeights( element, 446, 458 ); }); test( "{ heightStyle: 'fill' } with sibling", function() { + expect( 3 ); $( "#navigationWrapper" ).height( 500 ); $( "

      Lorem Ipsum

      " ) .css({ @@ -204,10 +218,11 @@ test( "{ heightStyle: 'fill' } with sibling", function() { }) .prependTo( "#navigationWrapper" ); var element = $( "#navigation" ).accordion({ heightStyle: "fill" }); - equalHeights( element , 346, 358); + accordion_equalHeights( element , 346, 358); }); test( "{ heightStyle: 'fill' } with multiple siblings", function() { + expect( 3 ); $( "#navigationWrapper" ).height( 500 ); $( "

      Lorem Ipsum

      " ) .css({ @@ -232,10 +247,11 @@ test( "{ heightStyle: 'fill' } with multiple siblings", function() { }) .prependTo( "#navigationWrapper" ); var element = $( "#navigation" ).accordion({ heightStyle: "fill" }); - equalHeights( element, 296, 308 ); + accordion_equalHeights( element, 296, 308 ); }); test( "{ icons: false }", function() { + expect( 8 ); var element = $( "#list1" ); function icons( on ) { deepEqual( element.find( "span.ui-icon").length, on ? 3 : 0 ); @@ -254,6 +270,7 @@ test( "{ icons: false }", function() { }); test( "{ icons: hash }", function() { + expect( 3 ); var element = $( "#list1" ).accordion({ icons: { activeHeader: "a1", header: "h1" } }); -- cgit v1.2.3 From b0182d78229058fdf61d5f9c3b8a66617d056f30 Mon Sep 17 00:00:00 2001 From: beatryder Date: Mon, 13 Jun 2011 20:42:45 -0500 Subject: Spinner: modified _spin and _setOption to call new method _trimValue to check for min/max values. Fixed #7264 - Spinner returns values beyond min and max, off by one --- ui/jquery.ui.spinner.js | 25 ++++++++++++++++++------- 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/ui/jquery.ui.spinner.js b/ui/jquery.ui.spinner.js index b4cefc982..951b336ed 100644 --- a/ui/jquery.ui.spinner.js +++ b/ui/jquery.ui.spinner.js @@ -258,12 +258,29 @@ $.widget( "ui.spinner", { : 2 : 1); + // clamp the new value + newVal = this._trimValue( newVal ); + if ( this._trigger( "spin", event, { value: newVal } ) !== false) { this.value( newVal ); this.counter++; } }, + _trimValue: function( value ) { + var options = this.options; + + if ( value > options.max) { + return options.max; + } + + if ( value < options.min ) { + return options.min; + } + + return value; + }, + _stop: function( event ) { this.counter = 0; if ( this.timer ) { @@ -280,13 +297,7 @@ $.widget( "ui.spinner", { _setOption: function( key, value ) { if ( key === "value") { - value = this._parse( value ); - if ( value < this.options.min ) { - value = this.options.min; - } - if ( value > this.options.max ) { - value = this.options.max; - } + value = this._trimValue( this._parse(value) ); } if ( key === "disabled" ) { -- cgit v1.2.3 From c1f71f1c2f732e58a8fbca91185a284ea8db6b1b Mon Sep 17 00:00:00 2001 From: gnarf Date: Mon, 13 Jun 2011 13:02:16 -0500 Subject: Effects.scale: Update the position of the element post animation to avoid jumping - Fixed #4316 - Element jumps to wrong position after scale effect with origin: ['middle','center'] parameter --- ui/jquery.effects.scale.js | 49 +++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 46 insertions(+), 3 deletions(-) diff --git a/ui/jquery.effects.scale.js b/ui/jquery.effects.scale.js index fe0c03c53..e00d82497 100644 --- a/ui/jquery.effects.scale.js +++ b/ui/jquery.effects.scale.js @@ -118,8 +118,11 @@ $.effects.effect.size = function( o ) { mode = $.effects.setMode( el, o.mode || 'effect' ), restore = o.restore || mode !== "effect", scale = o.scale || 'both', - origin = o.origin, - original, baseline, factor; + origin = o.origin || [ "middle", "center" ], + original, baseline, factor, + position = el.css( "position" ), + originalVerticalPositioning = el.css( "bottom" ) !== "auto" ? "bottom" : "top"; + originalHorizontalPositioning = el.css( "right" ) !== "auto" ? "right" : "left"; if ( mode === "show" ) { el.show(); @@ -249,7 +252,47 @@ $.effects.effect.size = function( o ) { if( mode == 'hide' ) { el.hide(); } - $.effects.restore( el, restore ? props : props1 ); + $.effects.restore( el, restore ? props : props1 ); + + // we need to recalculate our positioning based on the new scaling + if ( position === "static" ) { + el.css({ + position: "relative", + top: el.to.top, + left: el.to.left + }); + } else { + $.each([ originalVerticalPositioning, originalHorizontalPositioning ], function( idx, pos ) { + el.css( pos, function( _, str ) { + var val = parseInt( str, 10 ), + toRef = idx ? el.to.left : el.to.top, + delta = idx ? el.to.outerWidth - el.from.outerWidth: el.to.outerHeight - el.from.outerHeight, + same = origin[ idx ] === pos, + mid = origin[ idx ] === "middle" || origin[ idx ] === "center", + direction = pos == "left" || pos == "top"; + + // if original was "auto", recalculate the new value from wrapper + if ( str === "auto" ) { + return toRef + "px"; + } + + // if not setting left or top + if ( !direction ) { + + // if the position is relative, bottom/right are reversed meaning + if ( position === "relative" ) { + toRef *= -1; + + // otherwise, if its NOT a midpoint origin, compensate for the outerWidth difference + } else if ( !mid ) { + toRef -= delta * ( same ? -1 : 1 ); + } + } + return val + toRef + "px"; + }); + }); + } + $.effects.removeWrapper( el ); $.isFunction( o.complete ) && o.complete.apply( this, arguments ); // Callback el.dequeue(); -- cgit v1.2.3 From db96e2a51f83c2b1e42b18d7995e356025083ec7 Mon Sep 17 00:00:00 2001 From: gnarf Date: Tue, 14 Jun 2011 15:11:43 -0500 Subject: Tests: Adding visual/unit tests for scale effect. --- tests/unit/effects/effects.html | 76 ++++++----- tests/unit/effects/effects_scale.js | 61 +++++++++ tests/visual/effects.all.css | 54 -------- tests/visual/effects.all.html | 217 -------------------------------- tests/visual/effects.all.js | 106 ---------------- tests/visual/effects/effects.all.css | 55 ++++++++ tests/visual/effects/effects.all.html | 217 ++++++++++++++++++++++++++++++++ tests/visual/effects/effects.all.js | 106 ++++++++++++++++ tests/visual/effects/effects.scale.html | 159 +++++++++++++++++++++++ 9 files changed, 644 insertions(+), 407 deletions(-) create mode 100644 tests/unit/effects/effects_scale.js delete mode 100644 tests/visual/effects.all.css delete mode 100644 tests/visual/effects.all.html delete mode 100644 tests/visual/effects.all.js create mode 100644 tests/visual/effects/effects.all.css create mode 100644 tests/visual/effects/effects.all.html create mode 100644 tests/visual/effects/effects.all.js create mode 100644 tests/visual/effects/effects.scale.html diff --git a/tests/unit/effects/effects.html b/tests/unit/effects/effects.html index 6956ebcda..e3c6d2f4e 100644 --- a/tests/unit/effects/effects.html +++ b/tests/unit/effects/effects.html @@ -28,40 +28,54 @@ - + + @@ -81,6 +95,8 @@

      Slide with relative width

      +
      +
    diff --git a/tests/unit/effects/effects_scale.js b/tests/unit/effects/effects_scale.js new file mode 100644 index 000000000..1436cd030 --- /dev/null +++ b/tests/unit/effects/effects_scale.js @@ -0,0 +1,61 @@ +(function( $ ) { +module( "effect.scale: Scale" ); + +function run( position, v, h, vo, ho ) { + var desc = "End Position Correct: " + position + " (" + v + "," + h + ") - origin: (" + vo + "," + ho + ")"; + asyncTest( desc, function() { + var test = $( ".testScale" ), + css = { + position: position + }, + effect = { + effect: "scale", + mode: "effect", + percent: 200, + origin: [ vo, ho ], + complete: complete, + duration: 1 + }, + target = {}, + relative = position === "relative"; + + css[ h ] = 33; + css[ v ] = 33; + target[ h ] = h === ho ? css[ h ] : ho == "center" ? css[ h ] - 35 : css[ h ] - 70; + target[ v ] = v === vo ? css[ v ] : vo == "middle" ? css[ v ] - 35 : css[ v ] - 70; + if ( relative && h == "right" ) { + target[ h ] += 70; + } + if ( relative && v == "bottom" ) { + target[ v ] += 70; + } + test.css( css ); + test.effect( effect ); + + function complete() { + equal( parseInt( test.css( h ), 10 ), target[ h ], "Horizontal Position Correct " + desc ); + equal( parseInt( test.css( v ), 10 ), target[ v ], "Vertical Position Correct " + desc ); + start(); + } + }); +} + +function suite( position ) { + run( position, "top", "left", "top", "left" ); + run( position, "top", "left", "middle", "center" ); + run( position, "top", "left", "bottom", "right" ); + run( position, "bottom", "right", "top", "left" ); + run( position, "bottom", "right", "middle", "center" ); + run( position, "bottom", "right", "bottom", "right" ); +} + +$(function() { + suite( "absolute" ); + suite( "relative" ); + $.offset.initialize(); + if ( $.offset.supportsFixedPosition ) { + suite( "fixed" ); + } +}); + +})( jQuery ); diff --git a/tests/visual/effects.all.css b/tests/visual/effects.all.css deleted file mode 100644 index d2ed94026..000000000 --- a/tests/visual/effects.all.css +++ /dev/null @@ -1,54 +0,0 @@ - -body,html { - margin: 0; - padding: 0; - font-size: 12px; - font-family: Arial; - background: #191919; -} -body { margin: 1em; } - -ul.effects { - list-style-type: none; - margin: 0; - padding: 0; -} - -ul.effects li { - list-style-type: none; - margin: 0; - padding: 0; - width: 120px; - height: 100px; - float: left; - margin-top: 20px; - margin-left: 20px; -} - -div.effect { - width: 120px; - height: 100px; - background: #ccc; - border: 5px outset #aaa; - float: left; - cursor: pointer; - cursor: hand; -} - -div.current { - border: 5px outset #FF9C08; - background: #FF9C08; -} - -div.effect p { - color: #191919; - font-weight: bold; - margin: 0px; - padding: 10px; -} - -.ui-effects-transfer { - border: 1px dotted #fff; - background: #666; - opacity: 0.5; -} diff --git a/tests/visual/effects.all.html b/tests/visual/effects.all.html deleted file mode 100644 index fed35de8a..000000000 --- a/tests/visual/effects.all.html +++ /dev/null @@ -1,217 +0,0 @@ - - - - - jQuery UI Effects Test Suite - - - - - - - - - - - - - - - - - - - - -
      - -
    • -
      -

      Blind up

      -
      -
      • - -
    • -
      -

      Blind down

      -
      -
      • - -
    • -
      -

      Blind left

      -
      -
      • - -
    • -
      -

      Blind right

      -
      -
      • - -
    • -
      -

      Bounce 3 times

      -
      -
      • - -
    • -
      -

      Clip horizontally

      -
      -
      • - -
    • -
      -

      Clip vertically

      -
      -
      • - -
    • - -
      • - -
    • -
      -

      Drop up

      -
      -
      • - -
    • -
      -

      Drop left

      -
      -
      • - -
    • -
      -

      Drop right

      -
      -
      • - -
    • -
      -

      Explode in 9 pieces

      -
      -
      • - -
    • -
      -

      Explode in 36 pieces

      -
      -
      • - -
    • -
      -

      Fade

      -
      -
      • - -
    • -
      -

      Fold

      -
      -
      • - -
    • -
      -

      Highlight

      -
      -
      • - -
    • -
      -

      Pulsate 2 times

      -
      -
      • - -
    • -
      -

      Puff

      -
      -
      • - -
    • -
      -

      Scale

      -
      -
      • - -
    • -
      -

      Shake

      -
      -
      • - -
    • -
      -

      Size Default Show/Hide

      -
      -
      • - -
    • -
      -

      Size Toggle

      -
      -
      • - -
    • -
      -

      Slide down

      -
      -
      • - -
    • -
      -

      Slide up

      -
      -
      • - -
    • -
      -

      Slide left

      -
      -
      • - -
    • -
      -

      Slide right

      -
      -
      • - -
    • -
      -

      Transfer to first element

      -
      -
      • - -
    • -
      -

      addClass

      -
      -
      • - -
    • -
      -

      removeClass

      -
      -
      • - -
    • -
      -

      toggleClass

      -
      -
      • - -
    • -
      -

      hide/show (jQuery)

      -
      -
      • - -
    - - - diff --git a/tests/visual/effects.all.js b/tests/visual/effects.all.js deleted file mode 100644 index a28c41a89..000000000 --- a/tests/visual/effects.all.js +++ /dev/null @@ -1,106 +0,0 @@ - -$(function() { - var duration = 1000, wait = 500; - - $("div.effect") - .hover(function() { $(this).addClass("hover"); }, - function() { $(this).removeClass("hover"); }); - - var effect = function(el, n, o) { - - $.extend(o, { - easing: "easeOutQuint" - }); - - $(el).bind("click", function() { - - $(this).addClass("current") - // delaying the initial animation makes sure that the queue stays in tact - .delay( 10 ) - .hide( n, o, duration ) - .delay( wait ) - .show( n, o, duration, function() { - $( this ).removeClass("current"); - }); - }); - - }; - - $("#hide").click(function() { - var el = $(this); - el.addClass("current").hide(duration, function() { - setTimeout(function() { - el.show(duration, function() { el.removeClass("current"); }); - }, wait); - }); - }); - - effect("#blindLeft", "blind", { direction: "left" }); - effect("#blindUp", "blind", { direction: "up" }); - effect("#blindRight", "blind", { direction: "right" }); - effect("#blindDown", "blind", { direction: "down" }); - - effect("#bounce3times", "bounce", { times: 3 }); - - effect("#clipHorizontally", "clip", { direction: "horizontal" }); - effect("#clipVertically", "clip", { direction: "vertical" }); - - effect("#dropDown", "drop", { direction: "down" }); - effect("#dropUp", "drop", { direction: "up" }); - effect("#dropLeft", "drop", { direction: "left" }); - effect("#dropRight", "drop", { direction: "right" }); - - effect("#explode9", "explode", {}); - effect("#explode36", "explode", { pieces: 36 }); - - effect("#fade", "fade", {}); - - effect("#fold", "fold", { size: 50 }); - - effect("#highlight", "highlight", {}); - - effect("#pulsate", "pulsate", { times: 2 }); - - effect("#puff", "puff", { times: 2 }); - effect("#scale", "scale", {}); - effect("#size", "size", {}); - $("#sizeToggle").bind("click", function() { - var opts = { to: { width: 300, height: 300 }}; - $(this).addClass('current') - .toggle("size", opts, duration) - .delay(wait) - .toggle("size", opts, duration, function() { - $(this).removeClass("current"); - }); - }); - - $("#shake").bind("click", function() { $(this).addClass("current").effect("shake", {}, 100, function() { $(this).removeClass("current"); }); }); - - effect("#slideDown", "slide", { direction: "down" }); - effect("#slideUp", "slide", { direction: "up" }); - effect("#slideLeft", "slide", { direction: "left" }); - effect("#slideRight", "slide", { direction: "right" }); - - $("#transfer").bind("click", function() { $(this).addClass("current").effect("transfer", { to: "div:eq(0)" }, 1000, function() { $(this).removeClass("current"); }); }); - - $("#addClass").click(function() { - $(this).addClass(function() { - window.console && console.log(arguments); - return "current"; - }, duration, function() { - $(this).removeClass("current"); - }); - }); - $("#removeClass").click(function() { - $(this).addClass("current").removeClass(function() { - window.console && console.log(arguments); - return "current"; - }, duration); - }); - $("#toggleClass").click(function() { - $(this).toggleClass(function() { - window.console && console.log(arguments); - return "current"; - }, duration); - }); -}); diff --git a/tests/visual/effects/effects.all.css b/tests/visual/effects/effects.all.css new file mode 100644 index 000000000..1d531b026 --- /dev/null +++ b/tests/visual/effects/effects.all.css @@ -0,0 +1,55 @@ + +body,html { + margin: 0; + padding: 0; + font-size: 12px; + font-family: Arial; + background: #191919; + color: #fff; +} +body { margin: 1em; } + +ul.effects { + list-style-type: none; + margin: 0; + padding: 0; +} + +ul.effects li { + list-style-type: none; + margin: 0; + padding: 0; + width: 120px; + height: 100px; + float: left; + margin-top: 20px; + margin-left: 20px; +} + +div.effect { + width: 120px; + height: 100px; + background: #ccc; + border: 5px outset #aaa; + float: left; + cursor: pointer; + cursor: hand; +} + +div.current { + border: 5px outset #FF9C08; + background: #FF9C08; +} + +div.effect p { + color: #191919; + font-weight: bold; + margin: 0px; + padding: 10px; +} + +.ui-effects-transfer { + border: 1px dotted #fff; + background: #666; + opacity: 0.5; +} diff --git a/tests/visual/effects/effects.all.html b/tests/visual/effects/effects.all.html new file mode 100644 index 000000000..a2f8f62ef --- /dev/null +++ b/tests/visual/effects/effects.all.html @@ -0,0 +1,217 @@ + + + + + jQuery UI Effects Test Suite + + + + + + + + + + + + + + + + + + + + +
      + +
    • +
      +

      Blind up

      +
      +
      • + +
    • +
      +

      Blind down

      +
      +
      • + +
    • +
      +

      Blind left

      +
      +
      • + +
    • +
      +

      Blind right

      +
      +
      • + +
    • +
      +

      Bounce 3 times

      +
      +
      • + +
    • +
      +

      Clip horizontally

      +
      +
      • + +
    • +
      +

      Clip vertically

      +
      +
      • + +
    • + +
      • + +
    • +
      +

      Drop up

      +
      +
      • + +
    • +
      +

      Drop left

      +
      +
      • + +
    • +
      +

      Drop right

      +
      +
      • + +
    • +
      +

      Explode in 9 pieces

      +
      +
      • + +
    • +
      +

      Explode in 36 pieces

      +
      +
      • + +
    • +
      +

      Fade

      +
      +
      • + +
    • +
      +

      Fold

      +
      +
      • + +
    • +
      +

      Highlight

      +
      +
      • + +
    • +
      +

      Pulsate 2 times

      +
      +
      • + +
    • +
      +

      Puff

      +
      +
      • + +
    • +
      +

      Scale

      +
      +
      • + +
    • +
      +

      Shake

      +
      +
      • + +
    • +
      +

      Size Default Show/Hide

      +
      +
      • + +
    • +
      +

      Size Toggle

      +
      +
      • + +
    • +
      +

      Slide down

      +
      +
      • + +
    • +
      +

      Slide up

      +
      +
      • + +
    • +
      +

      Slide left

      +
      +
      • + +
    • +
      +

      Slide right

      +
      +
      • + +
    • +
      +

      Transfer to first element

      +
      +
      • + +
    • +
      +

      addClass

      +
      +
      • + +
    • +
      +

      removeClass

      +
      +
      • + +
    • +
      +

      toggleClass

      +
      +
      • + +
    • +
      +

      hide/show (jQuery)

      +
      +
      • + +
    + + + diff --git a/tests/visual/effects/effects.all.js b/tests/visual/effects/effects.all.js new file mode 100644 index 000000000..a28c41a89 --- /dev/null +++ b/tests/visual/effects/effects.all.js @@ -0,0 +1,106 @@ + +$(function() { + var duration = 1000, wait = 500; + + $("div.effect") + .hover(function() { $(this).addClass("hover"); }, + function() { $(this).removeClass("hover"); }); + + var effect = function(el, n, o) { + + $.extend(o, { + easing: "easeOutQuint" + }); + + $(el).bind("click", function() { + + $(this).addClass("current") + // delaying the initial animation makes sure that the queue stays in tact + .delay( 10 ) + .hide( n, o, duration ) + .delay( wait ) + .show( n, o, duration, function() { + $( this ).removeClass("current"); + }); + }); + + }; + + $("#hide").click(function() { + var el = $(this); + el.addClass("current").hide(duration, function() { + setTimeout(function() { + el.show(duration, function() { el.removeClass("current"); }); + }, wait); + }); + }); + + effect("#blindLeft", "blind", { direction: "left" }); + effect("#blindUp", "blind", { direction: "up" }); + effect("#blindRight", "blind", { direction: "right" }); + effect("#blindDown", "blind", { direction: "down" }); + + effect("#bounce3times", "bounce", { times: 3 }); + + effect("#clipHorizontally", "clip", { direction: "horizontal" }); + effect("#clipVertically", "clip", { direction: "vertical" }); + + effect("#dropDown", "drop", { direction: "down" }); + effect("#dropUp", "drop", { direction: "up" }); + effect("#dropLeft", "drop", { direction: "left" }); + effect("#dropRight", "drop", { direction: "right" }); + + effect("#explode9", "explode", {}); + effect("#explode36", "explode", { pieces: 36 }); + + effect("#fade", "fade", {}); + + effect("#fold", "fold", { size: 50 }); + + effect("#highlight", "highlight", {}); + + effect("#pulsate", "pulsate", { times: 2 }); + + effect("#puff", "puff", { times: 2 }); + effect("#scale", "scale", {}); + effect("#size", "size", {}); + $("#sizeToggle").bind("click", function() { + var opts = { to: { width: 300, height: 300 }}; + $(this).addClass('current') + .toggle("size", opts, duration) + .delay(wait) + .toggle("size", opts, duration, function() { + $(this).removeClass("current"); + }); + }); + + $("#shake").bind("click", function() { $(this).addClass("current").effect("shake", {}, 100, function() { $(this).removeClass("current"); }); }); + + effect("#slideDown", "slide", { direction: "down" }); + effect("#slideUp", "slide", { direction: "up" }); + effect("#slideLeft", "slide", { direction: "left" }); + effect("#slideRight", "slide", { direction: "right" }); + + $("#transfer").bind("click", function() { $(this).addClass("current").effect("transfer", { to: "div:eq(0)" }, 1000, function() { $(this).removeClass("current"); }); }); + + $("#addClass").click(function() { + $(this).addClass(function() { + window.console && console.log(arguments); + return "current"; + }, duration, function() { + $(this).removeClass("current"); + }); + }); + $("#removeClass").click(function() { + $(this).addClass("current").removeClass(function() { + window.console && console.log(arguments); + return "current"; + }, duration); + }); + $("#toggleClass").click(function() { + $(this).toggleClass(function() { + window.console && console.log(arguments); + return "current"; + }, duration); + }); +}); diff --git a/tests/visual/effects/effects.scale.html b/tests/visual/effects/effects.scale.html new file mode 100644 index 000000000..9521a1872 --- /dev/null +++ b/tests/visual/effects/effects.scale.html @@ -0,0 +1,159 @@ + + + + + jQuery UI Effects Test Suite + + + + + + + + + +
    +
    +
    +
    +
    + + + + +
    + + + + +
    + \ No newline at end of file -- cgit v1.2.3 From c66a7b157b1e36c496272eb00444b4d26136c814 Mon Sep 17 00:00:00 2001 From: kborchers Date: Tue, 14 Jun 2011 16:55:27 -0500 Subject: CSS: Switched the icons for .ui-icon-radio-on and .ui-icon-radio-off. Fixes #7475 - .ui-icon-radio-on and .ui-icon-radio-off reversed --- themes/base/jquery.ui.theme.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/themes/base/jquery.ui.theme.css b/themes/base/jquery.ui.theme.css index be2676909..368ebfbb5 100644 --- a/themes/base/jquery.ui.theme.css +++ b/themes/base/jquery.ui.theme.css @@ -182,8 +182,8 @@ .ui-icon-help { background-position: -48px -144px; } .ui-icon-check { background-position: -64px -144px; } .ui-icon-bullet { background-position: -80px -144px; } -.ui-icon-radio-off { background-position: -96px -144px; } -.ui-icon-radio-on { background-position: -112px -144px; } +.ui-icon-radio-on { background-position: -96px -144px; } +.ui-icon-radio-off { background-position: -112px -144px; } .ui-icon-pin-w { background-position: -128px -144px; } .ui-icon-pin-s { background-position: -144px -144px; } .ui-icon-play { background-position: 0 -160px; } -- cgit v1.2.3