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(-) (limited to 'ui/jquery.ui.position.js') 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(-) (limited to 'ui/jquery.ui.position.js') 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(-) (limited to 'ui/jquery.ui.position.js') 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(-) (limited to 'ui/jquery.ui.position.js') 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 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(-) (limited to 'ui/jquery.ui.position.js') 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 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(-) (limited to 'ui/jquery.ui.position.js') 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(-) (limited to 'ui/jquery.ui.position.js') 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 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(-) (limited to 'ui/jquery.ui.position.js') 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 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(-) (limited to 'ui/jquery.ui.position.js') 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(-) (limited to 'ui/jquery.ui.position.js') 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(-) (limited to 'ui/jquery.ui.position.js') 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 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(-) (limited to 'ui/jquery.ui.position.js') 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 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(-) (limited to 'ui/jquery.ui.position.js') 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 d5452c0ec27219c3564522b852f83ca9757bed84 Mon Sep 17 00:00:00 2001 From: Benjamin Sterling Date: Mon, 11 Jul 2011 19:49:56 -0400 Subject: Position: Add flip-classes. Fixes #5937 - Position: Add ability to determine if the element is flipped via css --- demos/position/default.html | 12 ++++ tests/unit/position/position_core.js | 81 ++++++++++++++++++++++++ tests/unit/position/position_core_within.js | 95 +++++++++++++++++++++++++++++ ui/jquery.ui.position.js | 18 +++++- 4 files changed, 205 insertions(+), 1 deletion(-) (limited to 'ui/jquery.ui.position.js') diff --git a/demos/position/default.html b/demos/position/default.html index 87fc8e38a..60b8b39f9 100644 --- a/demos/position/default.html +++ b/demos/position/default.html @@ -30,6 +30,18 @@ background-color: #bcd5e6; text-align: center; } + div.ui-flipped-top { + border-top: 3px solid #000000; + } + div.ui-flipped-bottom { + border-bottom: 3px solid #000000; + } + div.ui-flipped-left { + border-left: 3px solid #000000; + } + div.ui-flipped-right { + border-right: 3px solid #000000; + } select, input { margin-left: 15px; } diff --git a/tests/unit/position/position_core.js b/tests/unit/position/position_core.js index bd8e58612..fd6e643e9 100644 --- a/tests/unit/position/position_core.js +++ b/tests/unit/position/position_core.js @@ -435,6 +435,87 @@ test( "collision: flip, with margin", function() { }, { top: 0, left: 0 }, "right bottom" ); }); +test( "addClass: flipped left", function() { + var elem = $( "#elx" ).position( { + my: "left center", + of: window, + collision: "flip", + at: "right center" + }); + + same( elem.hasClass( 'ui-flipped-left' ), true, 'Has ui-flipped-left class' ); + + elem.position( { + my: "right center", + of: window, + collision: "flip", + at: "left center" + }) + + same( elem.hasClass( 'ui-flipped-left' ), false, 'Removed ui-flipped-left class' ); +}); + +test( "addClass: flipped top", function() { + var elem = $( "#elx" ).position( { + my: "left top", + of: window, + collision: "flip", + at: "right bottom" + }); + + same( elem.hasClass( 'ui-flipped-top' ), true, 'Has ui-flipped-top class' ); + + elem.position( { + my: "left bottom", + of: window, + collision: "flip", + at: "right top" + }); + + same( elem.hasClass( 'ui-flipped-top' ), false, 'Removed ui-flipped-top class' ); +}); + +test( "addClass: flipped right", function() { + var elem = $( "#elx" ).position( { + my: "right center", + of: window, + collision: "flip", + at: "left center" + }); + + same( elem.hasClass( 'ui-flipped-right' ), true, 'Has ui-flipped-right class' ); + + elem.position( { + my: "left center", + of: window, + collision: "flip", + at: "right center" + }); + + same( elem.hasClass( 'ui-flipped-right' ), false, 'Removed ui-flipped-right class' ); + +}); + +test( "addClass: flipped bottom", function() { + var elem = $( "#elx" ).position( { + my: "left bottom", + of: window, + collision: "flip", + at: "right top" + }); + + same( elem.hasClass( 'ui-flipped-bottom' ), true, 'Has ui-flipped-bottom class' ); + + elem.position( { + my: "left top", + of: window, + collision: "flip", + at: "right bottom" + }); + + same( elem.hasClass( 'ui-flipped-bottom' ), false, 'Removed ui-flipped-bottom class' ); +}); + //test( "bug #5280: consistent results (avoid fractional values)", function() { // var wrapper = $( "#bug-5280" ), // elem = wrapper.children(), diff --git a/tests/unit/position/position_core_within.js b/tests/unit/position/position_core_within.js index 567c17192..bfb913335 100644 --- a/tests/unit/position/position_core_within.js +++ b/tests/unit/position/position_core_within.js @@ -438,4 +438,99 @@ test( "collision: flip, with margin", function() { }, { top: addTop + 0, left: addLeft + 0 }, "right bottom" ); }); +test( "addClass: flipped left", function() { + var within = $("#within-container"); + + var elem = $( "#elx" ).position( { + my: "left center", + of: within[0], + within: within, + collision: "flip", + at: "right center" + }); + + same( elem.hasClass( 'ui-flipped-left' ), true, 'Has ui-flipped-left class' ); + + elem.position( { + my: "right center", + of: within[0], + within: within, + collision: "flip", + at: "left center" + }) + + same( elem.hasClass( 'ui-flipped-left' ), false, 'Removed ui-flipped-left class' ); +}); + +test( "addClass: flipped top", function() { + var within = $("#within-container"); + + var elem = $( "#elx" ).position( { + my: "left top", + of: within[0], + within: within, + collision: "flip", + at: "right bottom" + }); + + same( elem.hasClass( 'ui-flipped-top' ), true, 'Has ui-flipped-top class' ); + + elem.position( { + my: "left bottom", + of: within[0], + within: within, + collision: "flip", + at: "right top" + }); + + same( elem.hasClass( 'ui-flipped-top' ), false, 'Removed ui-flipped-top class' ); +}); + +test( "addClass: flipped right", function() { + var within = $("#within-container"); + + var elem = $( "#elx" ).position( { + my: "right center", + of: within[0], + within: within, + collision: "flip", + at: "left center" + }); + + same( elem.hasClass( 'ui-flipped-right' ), true, 'Has ui-flipped-right class' ); + + elem.position( { + my: "left center", + of: within[0], + within: within, + collision: "flip", + at: "right center" + }); + + same( elem.hasClass( 'ui-flipped-right' ), false, 'Removed ui-flipped-right class' ); + +}); + +test( "addClass: flipped bottom", function() { + var within = $("#within-container"); + + var elem = $( "#elx" ).position( { + my: "left bottom", + of: window, + collision: "flip", + at: "right top" + }); + + same( elem.hasClass( 'ui-flipped-bottom' ), true, 'Has ui-flipped-bottom class' ); + + elem.position( { + my: "left top", + of: window, + collision: "flip", + at: "right bottom" + }); + + same( elem.hasClass( 'ui-flipped-bottom' ), false, 'Removed ui-flipped-bottom class' ); +}); + }( jQuery ) ); diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index 3bae0d010..23a98b491 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -204,7 +204,8 @@ $.fn.position = function( options ) { offset: [ atOffset[ 0 ] + myOffset[ 0 ], atOffset [ 1 ] + myOffset[ 1 ] ], my: options.my, at: options.at, - within: within + within: within, + elem : elem }); } }); @@ -265,6 +266,9 @@ $.ui.position = { return; } + data.elem + .removeClass( "ui-flipped-left ui-flipped-right" ); + var within = data.within, win = $( window ), isWindow = $.isWindow( data.within[0] ), @@ -283,6 +287,10 @@ $.ui.position = { -data.targetWidth, offset = -2 * data.offset[ 0 ]; if ( overLeft < 0 || overRight > 0 ) { + + data.elem + .addClass( "ui-flipped-" + ( overLeft < 0 ? "right" : "left" ) ); + position.left += myOffset + atOffset + offset; } }, @@ -290,6 +298,10 @@ $.ui.position = { if ( data.at[ 1 ] === center ) { return; } + + data.elem + .removeClass( "ui-flipped-top ui-flipped-bottom" ); + var within = data.within, win = $( window ), isWindow = $.isWindow( data.within[0] ), @@ -308,6 +320,10 @@ $.ui.position = { -data.targetHeight, offset = -2 * data.offset[ 1 ]; if ( overTop < 0 || overBottom > 0 ) { + + data.elem + .addClass( "ui-flipped-" + ( overTop < 0 ? "bottom" : "top" ) ); + position.top += myOffset + atOffset + offset; } } -- cgit v1.2.3