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') 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') 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') 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') 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') 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') 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') 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') 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(-) (limited to 'ui') 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(-) (limited to 'ui') 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(-) (limited to 'ui') 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(-) (limited to 'ui') 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') 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') 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(-) (limited to 'ui') 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(-) (limited to 'ui') 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(-) (limited to 'ui') 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(-) (limited to 'ui') 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(-) (limited to 'ui') 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 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(-) (limited to 'ui') 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(-) (limited to 'ui') 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 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') 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(-) (limited to 'ui') 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 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(+) (limited to 'ui') 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 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(-) (limited to 'ui') 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(-) (limited to 'ui') 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