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 From 1c1a3b1a361d90a73755fbd038b3cdfb0960c29f Mon Sep 17 00:00:00 2001 From: gnarf Date: Tue, 21 Jun 2011 00:23:52 -0500 Subject: Effects.*: Updating Effect Method API to avoid duplicating the queue call - Fixes #7318 - Add the queue functions to $.fn.effect() --- ui/jquery.effects.blind.js | 112 +++++------ ui/jquery.effects.bounce.js | 184 +++++++++-------- ui/jquery.effects.clip.js | 93 ++++----- ui/jquery.effects.core.js | 7 +- ui/jquery.effects.drop.js | 84 ++++---- ui/jquery.effects.explode.js | 142 +++++++------ ui/jquery.effects.fade.js | 40 ++-- ui/jquery.effects.fold.js | 94 +++++---- ui/jquery.effects.highlight.js | 62 +++--- ui/jquery.effects.pulsate.js | 78 ++++--- ui/jquery.effects.scale.js | 447 +++++++++++++++++++++-------------------- ui/jquery.effects.shake.js | 103 +++++----- ui/jquery.effects.slide.js | 90 ++++----- ui/jquery.effects.transfer.js | 63 +++--- 14 files changed, 785 insertions(+), 814 deletions(-) (limited to 'ui') diff --git a/ui/jquery.effects.blind.js b/ui/jquery.effects.blind.js index b6485b641..8c536be78 100644 --- a/ui/jquery.effects.blind.js +++ b/ui/jquery.effects.blind.js @@ -12,73 +12,69 @@ */ (function( $, undefined ) { -var rvertical = /up|down|vertical/; -var rpositivemotion = /up|left|vertical|horizontal/; +var rvertical = /up|down|vertical/, + rpositivemotion = /up|left|vertical|horizontal/; -$.effects.effect.blind = function( o ) { +$.effects.effect.blind = function( o, next ) { + // Create element + var el = $( this ), + props = [ "position", "top", "bottom", "left", "right", "height", "width" ], + mode = $.effects.setMode( el, o.mode || "hide" ), + direction = o.direction || "up", + vertical = rvertical.test( direction ), + ref = vertical ? "height" : "width", + ref2 = vertical ? "top" : "left", + motion = rpositivemotion.test( direction ), + animation = {}, + show = mode === "show", + wrapper, distance; - return this.queue( function() { - - // Create element - var el = $( this ), - props = [ "position", "top", "bottom", "left", "right", "height", "width" ], - mode = $.effects.setMode( el, o.mode || "hide" ), - direction = o.direction || "up", - vertical = rvertical.test( direction ), - ref = vertical ? "height" : "width", - ref2 = vertical ? "top" : "left", - motion = rpositivemotion.test( direction ), - animation = {}, - wrapper, distance; + // if already wrapped, the wrapper's properties are my property. #6245 + if ( el.parent().is( ".ui-effects-wrapper" ) ) { + $.effects.save( el.parent(), props ); + } else { + $.effects.save( el, props ); + } + el.show(); + wrapper = $.effects.createWrapper( el ).css({ + overflow: "hidden" + }); - // if already wrapped, the wrapper's properties are my property. #6245 - if ( el.parent().is( ".ui-effects-wrapper" ) ) { - $.effects.save( el.parent(), props ); - } else { - $.effects.save( el, props ); - } - el.show(); - wrapper = $.effects.createWrapper( el ).css({ - overflow: "hidden" - }); + distance = wrapper[ ref ](); - distance = wrapper[ ref ](); + animation[ ref ] = ( mode === "show" ? distance : 0 ); + if ( !motion ) { + el + .css( vertical ? "bottom" : "right", 0 ) + .css( vertical ? "top" : "left", "" ) + .css({ position: "absolute" }); + animation[ ref2 ] = ( mode === "show" ) ? 0 : distance; + } - animation[ ref ] = ( mode === "show" ? distance : 0 ); - if ( !motion ) { - el - .css( vertical ? "bottom" : "right", 0 ) - .css( vertical ? "top" : "left", "" ) - .css({ position: "absolute" }); - animation[ ref2 ] = ( mode === "show" ) ? 0 : distance; + // start at 0 if we are showing + if ( mode === "show" ) { + wrapper.css( ref, 0 ); + if ( ! motion ) { + wrapper.css( ref2, distance ); } + } - // start at 0 if we are showing - if ( mode == "show" ) { - wrapper.css( ref, 0 ); - if ( ! motion ) { - wrapper.css( ref2, distance ); + // Animate + wrapper.animate( animation, { + duration: o.duration, + easing: o.easing, + queue: false, + complete: function() { + if ( mode == "hide" ) { + el.hide(); } - } - - // Animate - wrapper.animate( animation, { - duration: o.duration, - easing: o.easing, - queue: false, - complete: function() { - if ( mode == "hide" ) { - el.hide(); - } - $.effects.restore( el, props ); - $.effects.removeWrapper( el ); - if ( $.isFunction( o.complete ) ) { - o.complete.apply( el[ 0 ], arguments ); - } - el.dequeue(); + $.effects.restore( el, props ); + $.effects.removeWrapper( el ); + if ( $.isFunction( o.complete ) ) { + o.complete.apply( el[ 0 ], arguments ); } - }); - + next(); + } }); }; diff --git a/ui/jquery.effects.bounce.js b/ui/jquery.effects.bounce.js index 78fedb0ce..f6cf5bb02 100644 --- a/ui/jquery.effects.bounce.js +++ b/ui/jquery.effects.bounce.js @@ -12,108 +12,104 @@ */ (function( $, undefined ) { -$.effects.effect.bounce = function(o) { - - return this.queue( function( next ) { - var el = $( this ), - props = [ "position", "top", "bottom", "left", "right", "height", "width" ], - - // defaults: - mode = $.effects.setMode( el, o.mode || "effect" ), - hide = mode === "hide", - show = mode === "show", - direction = o.direction || "up", - distance = o.distance, - times = o.times || 5, - - // number of internal animations - anims = times * 2 + ( show || hide ? 1 : 0 ), - speed = o.duration / anims, - easing = o.easing, - - // utility: - ref = ( direction === "up" || direction === "down" ) ? "top" : "left", - motion = ( direction === "up" || direction === "left" ), - i, - upAnim, - downAnim, - - // we will need to re-assemble the queue to stack our animations in place - queue = el.queue(), - queuelen = queue.length; - - // Avoid touching opacity to prevent clearType and PNG issues in IE - if ( show || hide ) { - props.push( "opacity" ); - } - - $.effects.save( el, props ); - el.show(); - $.effects.createWrapper( el ); // Create Wrapper - - // default distance for the BIGGEST bounce is the outer Distance / 3 - if ( !distance ) { - distance = el[ ref === "top" ? "outerHeight" : "outerWidth" ]() / 3; - } - - if ( show ) { - downAnim = { opacity: 1 }; - downAnim[ ref ] = 0; - - // if we are showing, force opacity 0 and set the initial position - // then do the "first" animation - el.css( "opacity", 0 ) - .css( ref, motion ? -distance*2 : distance*2 ) - .animate( downAnim, speed, easing ); - } - - // start at the smallest distance if we are hiding - if ( hide ) { - distance = distance / Math.pow( 2, times - 1 ); - } - - downAnim = {}; +$.effects.effect.bounce = function( o, next ) { + var el = $( this ), + props = [ "position", "top", "bottom", "left", "right", "height", "width" ], + + // defaults: + mode = $.effects.setMode( el, o.mode || "effect" ), + hide = mode === "hide", + show = mode === "show", + direction = o.direction || "up", + distance = o.distance, + times = o.times || 5, + + // number of internal animations + anims = times * 2 + ( show || hide ? 1 : 0 ), + speed = o.duration / anims, + easing = o.easing, + + // utility: + ref = ( direction === "up" || direction === "down" ) ? "top" : "left", + motion = ( direction === "up" || direction === "left" ), + i, + upAnim, + downAnim, + + // we will need to re-assemble the queue to stack our animations in place + queue = el.queue(), + queuelen = queue.length; + + // Avoid touching opacity to prevent clearType and PNG issues in IE + if ( show || hide ) { + props.push( "opacity" ); + } + + $.effects.save( el, props ); + el.show(); + $.effects.createWrapper( el ); // Create Wrapper + + // default distance for the BIGGEST bounce is the outer Distance / 3 + if ( !distance ) { + distance = el[ ref === "top" ? "outerHeight" : "outerWidth" ]() / 3; + } + + if ( show ) { + downAnim = { opacity: 1 }; downAnim[ ref ] = 0; - // Bounces up/down/left/right then back to 0 -- times * 2 animations happen here - for ( i = 0; i < times; i++ ) { - upAnim = {}; - upAnim[ ref ] = ( motion ? "-=" : "+=" ) + distance; - - el.animate( upAnim, speed, easing ) - .animate( downAnim, speed, easing ); - - distance = hide ? distance * 2 : distance / 2; - } - // Last Bounce when Hiding + // if we are showing, force opacity 0 and set the initial position + // then do the "first" animation + el.css( "opacity", 0 ) + .css( ref, motion ? -distance*2 : distance*2 ) + .animate( downAnim, speed, easing ); + } + + // start at the smallest distance if we are hiding + if ( hide ) { + distance = distance / Math.pow( 2, times - 1 ); + } + + downAnim = {}; + downAnim[ ref ] = 0; + // Bounces up/down/left/right then back to 0 -- times * 2 animations happen here + for ( i = 0; i < times; i++ ) { + upAnim = {}; + upAnim[ ref ] = ( motion ? "-=" : "+=" ) + distance; + + el.animate( upAnim, speed, easing ) + .animate( downAnim, speed, easing ); + + distance = hide ? distance * 2 : distance / 2; + } + + // Last Bounce when Hiding + if ( hide ) { + upAnim = { opacity: 0 }; + upAnim[ ref ] = ( motion ? "-=" : "+=" ) + distance; + + el.animate( upAnim, speed, easing ); + } + + el.queue( function( next ) { if ( hide ) { - upAnim = { opacity: 0 }; - upAnim[ ref ] = ( motion ? "-=" : "+=" ) + distance; - - el.animate( upAnim, speed, easing ); + el.hide(); } - - el.queue( function( next ) { - if ( hide ) { - el.hide(); - } - $.effects.restore( el, props ); - $.effects.removeWrapper( el ); - if ( o.complete ) { - o.complete.apply( el[ 0 ] ); - } - next(); - }); - - // inject all the animations we just queued to be first in line (after "inprogress") - if ( queuelen > 1) { - queue.splice.apply( queue, - [ 1, 0 ].concat( queue.splice( queuelen, anims + 1 ) ) ); + $.effects.restore( el, props ); + $.effects.removeWrapper( el ); + if ( o.complete ) { + o.complete.apply( el[ 0 ] ); } next(); - }); + // inject all the animations we just queued to be first in line (after "inprogress") + if ( queuelen > 1) { + queue.splice.apply( queue, + [ 1, 0 ].concat( queue.splice( queuelen, anims + 1 ) ) ); + } + next(); + }; })(jQuery); diff --git a/ui/jquery.effects.clip.js b/ui/jquery.effects.clip.js index dbf0d36c9..8c5c76e8c 100644 --- a/ui/jquery.effects.clip.js +++ b/ui/jquery.effects.clip.js @@ -12,61 +12,56 @@ */ (function( $, undefined ) { -$.effects.effect.clip = function( o ) { +$.effects.effect.clip = function( o, next ) { + // Create element + var el = $( this ), + props = [ "position", "top", "bottom", "left", "right", "height", "width" ], + mode = $.effects.setMode( el, o.mode || "hide" ), + show = mode === "show", + direction = o.direction || "vertical", + vert = direction === "vertical", + size = vert ? "height" : "width", + position = vert ? "top" : "left", + animation = {}, + wrapper, animate, distance; - return this.queue( function() { + // Save & Show + $.effects.save( el, props ); + el.show(); - // Create element - var el = $( this ), - props = [ "position", "top", "bottom", "left", "right", "height", "width" ], - mode = $.effects.setMode( el, o.mode || "hide" ), - show = mode === "show", - direction = o.direction || "vertical", - vert = direction === "vertical", - size = vert ? "height" : "width", - position = vert ? "top" : "left", - animation = {}, - wrapper, animate, distance; - - // Save & Show - $.effects.save( el, props ); - el.show(); - - // Create Wrapper - wrapper = $.effects.createWrapper( el ).css({ - overflow: "hidden" - }); - animate = ( el[0].tagName === "IMG" ) ? wrapper : el; - distance = animate[ size ](); + // Create Wrapper + wrapper = $.effects.createWrapper( el ).css({ + overflow: "hidden" + }); + animate = ( el[0].tagName === "IMG" ) ? wrapper : el; + distance = animate[ size ](); - // Shift - if ( show ) { - animate.css( size, 0 ); - animate.css( position, distance / 2 ); - } + // Shift + if ( show ) { + animate.css( size, 0 ); + animate.css( position, distance / 2 ); + } - // Create Animation Object: - animation[ size ] = show ? distance : 0; - animation[ position ] = show ? 0 : distance / 2; + // Create Animation Object: + animation[ size ] = show ? distance : 0; + animation[ position ] = show ? 0 : distance / 2; - // Animate - animate.animate( animation, { - queue: false, - duration: o.duration, - easing: o.easing, - complete: function() { - if ( !show ) { - el.hide(); - } - $.effects.restore( el, props ); - $.effects.removeWrapper( el ); - if ( $.isFunction( o.complete ) ) { - o.complete.apply( el[ 0 ], arguments ); - } - el.dequeue(); + // Animate + animate.animate( animation, { + queue: false, + duration: o.duration, + easing: o.easing, + complete: function() { + if ( !show ) { + el.hide(); } - }); - + $.effects.restore( el, props ); + $.effects.removeWrapper( el ); + if ( $.isFunction( o.complete ) ) { + o.complete.apply( el[ 0 ], arguments ); + } + el.dequeue(); + } }); }; diff --git a/ui/jquery.effects.core.js b/ui/jquery.effects.core.js index 00a803360..87fc5a074 100644 --- a/ui/jquery.effects.core.js +++ b/ui/jquery.effects.core.js @@ -536,6 +536,7 @@ $.fn.extend({ effect: function( effect, options, speed, callback ) { var args = _normalizeArguments.apply( this, arguments ), mode = args.mode, + queue = args.queue, effectMethod = $.effects.effect[ args.effect ], // DEPRECATED: remove in 2.0 (#7115) @@ -554,9 +555,13 @@ $.fn.extend({ } } + function run( next ) { + effectMethod.call( this, args, $.isFunction( next ) ? next : $.noop ); + } + // TODO: remove this check in 2.0, effectMethod will always be true if ( effectMethod ) { - return effectMethod.call( this, args ); + return queue === false ? this.each( run ) : this.queue( queue || "fx", run ); } else { // DEPRECATED: remove in 2.0 (#7115) return oldEffectMethod.call(this, { diff --git a/ui/jquery.effects.drop.js b/ui/jquery.effects.drop.js index 4265b737b..a0bdc7d4d 100644 --- a/ui/jquery.effects.drop.js +++ b/ui/jquery.effects.drop.js @@ -12,51 +12,47 @@ */ (function( $, undefined ) { -$.effects.effect.drop = function( o ) { - - return this.queue( function() { - - var el = $( this ), - 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', - motion = ( direction == 'up' || direction == 'left' ) ? 'pos' : 'neg', - animation = { - opacity: mode == 'show' ? 1 : 0 - }, - distance; - - // Adjust - $.effects.save( el, props ); - el.show(); - $.effects.createWrapper( el ); - - distance = o.distance || el[ ref == 'top' ? 'outerHeight': 'outerWidth' ]({ margin: true }) / 2; - - if ( mode == 'show' ) { - el - .css( 'opacity', 0 ) - .css( ref, motion == 'pos' ? -distance : distance ); +$.effects.effect.drop = function( o, next ) { + + var el = $( this ), + 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", + motion = ( direction == "up" || direction == "left" ) ? "pos" : "neg", + animation = { + opacity: mode == "show" ? 1 : 0 + }, + distance; + + // Adjust + $.effects.save( el, props ); + el.show(); + $.effects.createWrapper( el ); + + distance = o.distance || el[ ref == "top" ? "outerHeight": "outerWidth" ]({ margin: true }) / 2; + + if ( mode == "show" ) { + el + .css( "opacity", 0 ) + .css( ref, motion == "pos" ? -distance : distance ); + } + + // Animation + animation[ ref ] = ((mode == "show") ? (motion == "pos" ? "+=" : "-=") : (motion == "pos" ? "-=" : "+=")) + distance; + + // Animate + el.animate( animation, { + queue: false, + duration: o.duration, + easing: o.easing, + complete: function() { + mode == "hide" && el.hide(); + $.effects.restore( el, props ); + $.effects.removeWrapper( el ); + $.isFunction( o.complete ) && o.complete.apply(this, arguments); + next(); } - - // Animation - animation[ ref ] = ((mode == 'show') ? (motion == 'pos' ? '+=' : '-=') : (motion == 'pos' ? '-=' : '+=')) + distance; - - // Animate - el.animate( animation, { - queue: false, - duration: o.duration, - easing: o.easing, - complete: function() { - mode == 'hide' && el.hide(); - $.effects.restore( el, props ); - $.effects.removeWrapper( el ); - $.isFunction( o.complete ) && o.complete.apply(this, arguments); - el.dequeue(); - } - }); - }); }; diff --git a/ui/jquery.effects.explode.js b/ui/jquery.effects.explode.js index f5217ecb5..76711c6f2 100644 --- a/ui/jquery.effects.explode.js +++ b/ui/jquery.effects.explode.js @@ -12,92 +12,88 @@ */ (function( $, undefined ) { -$.effects.effect.explode = function( o ) { +$.effects.effect.explode = function( o, next ) { - return this.queue( function( next ) { + var rows = o.pieces ? Math.round(Math.sqrt(o.pieces)) : 3, + cells = rows, + el = $( this ), + mode = $.effects.setMode( el, o.mode || "hide" ), + show = ( mode == "show" ), - var rows = o.pieces ? Math.round(Math.sqrt(o.pieces)) : 3, - cells = rows, - el = $( this ), - mode = $.effects.setMode( el, o.mode || 'hide' ), - show = ( mode == 'show' ), + // show and then visibility:hidden the element before calculating offset + offset = el.show().css( "visibility", "hidden" ).offset(), - // show and then visibility:hidden the element before calculating offset - offset = el.show().css( 'visibility', 'hidden' ).offset(), + // width and height of a piece + width = Math.ceil( el.outerWidth() / cells ), + height = Math.ceil( el.outerHeight() / rows ), + pieces = [], - // width and height of a piece - width = Math.ceil( el.outerWidth() / cells ), - height = Math.ceil( el.outerHeight() / rows ), - pieces = [], + // loop + i, j, left, top, mx, my; - // loop - i, j, left, top, mx, my; + // clone the element for each row and cell. + for( i = 0; i < rows ; i++ ) { // ===> + top = offset.top + i * height; + my = i - ( rows - 1 ) / 2 ; - // clone the element for each row and cell. - for( i = 0; i < rows ; i++ ) { // ===> - top = offset.top + i * height; - my = i - ( rows - 1 ) / 2 ; + for( j = 0; j < cells ; j++ ) { // ||| + left = offset.left + j * width; + mx = j - ( cells - 1 ) / 2 ; - for( j = 0; j < cells ; j++ ) { // ||| - left = offset.left + j * width; - mx = j - ( cells - 1 ) / 2 ; + // Create a clone of the now hidden main element that will be absolute positioned + // within a wrapper div off the -left and -top equal to size of our pieces + el + .clone() + .appendTo( "body" ) + .wrap( "
    " ) + .css({ + position: "absolute", + visibility: "visible", + left: -j * width, + top: -i * height + }) - // Create a clone of the now hidden main element that will be absolute positioned - // within a wrapper div off the -left and -top equal to size of our pieces - el - .clone() - .appendTo( 'body' ) - .wrap( '
    ' ) - .css({ - position: 'absolute', - visibility: 'visible', - left: -j * width, - top: -i * height - }) - - // select the wrapper - make it overflow: hidden and absolute positioned based on - // where the original was located +left and +top equal to the size of pieces - .parent() - .addClass( 'ui-effects-explode' ) - .css({ - position: 'absolute', - overflow: 'hidden', - width: width, - height: height, - left: left + ( show ? mx * width : 0 ), - top: top + ( show ? my * height : 0 ), - opacity: show ? 0 : 1 - }).animate({ - left: left + ( show ? 0 : mx * width ), - top: top + ( show ? 0 : my * height ), - opacity: show ? 1 : 0 - }, o.duration || 500, o.easing, childComplete ); - } + // select the wrapper - make it overflow: hidden and absolute positioned based on + // where the original was located +left and +top equal to the size of pieces + .parent() + .addClass( "ui-effects-explode" ) + .css({ + position: "absolute", + overflow: "hidden", + width: width, + height: height, + left: left + ( show ? mx * width : 0 ), + top: top + ( show ? my * height : 0 ), + opacity: show ? 0 : 1 + }).animate({ + left: left + ( show ? 0 : mx * width ), + top: top + ( show ? 0 : my * height ), + opacity: show ? 1 : 0 + }, o.duration || 500, o.easing, childComplete ); } + } - // children animate complete: - function childComplete() { - pieces.push( this ); - if ( pieces.length == rows * cells ) { - animComplete(); - } + // children animate complete: + function childComplete() { + pieces.push( this ); + if ( pieces.length == rows * cells ) { + animComplete(); } + } - function animComplete() { - el.css({ - visibility: 'visible' - }); - $( pieces ).remove(); - if ( !show ) { - el.hide(); - } - if ( $.isFunction( o.complete ) ) { - o.complete.apply( el[ 0 ] ); - } - next(); + function animComplete() { + el.css({ + visibility: "visible" + }); + $( pieces ).remove(); + if ( !show ) { + el.hide(); } - }); - + if ( $.isFunction( o.complete ) ) { + o.complete.apply( el[ 0 ] ); + } + next(); + } }; })(jQuery); diff --git a/ui/jquery.effects.fade.js b/ui/jquery.effects.fade.js index ff1cba5f8..8f2d956dc 100644 --- a/ui/jquery.effects.fade.js +++ b/ui/jquery.effects.fade.js @@ -12,29 +12,27 @@ */ (function( $, undefined ) { -$.effects.effect.fade = function( o ) { - return this.queue( function( next ) { - var el = $( this ), - mode = $.effects.setMode( el, o.mode || 'toggle' ), - hide = mode === "hide"; +$.effects.effect.fade = function( o, next ) { + var el = $( this ), + mode = $.effects.setMode( el, o.mode || "toggle" ), + hide = mode === "hide"; - el.show(); - el.animate({ - opacity: hide ? 0 : 1 - }, { - queue: false, - duration: o.duration, - easing: o.easing, - complete: function() { - if ( hide ) { - el.hide(); - } - if ( o.complete ) { - o.complete.call( this ); - } - next(); + el.show(); + el.animate({ + opacity: hide ? 0 : 1 + }, { + queue: false, + duration: o.duration, + easing: o.easing, + complete: function() { + if ( hide ) { + el.hide(); } - }); + if ( o.complete ) { + o.complete.call( this ); + } + next(); + } }); }; diff --git a/ui/jquery.effects.fold.js b/ui/jquery.effects.fold.js index 6100c33a1..de7530bf0 100644 --- a/ui/jquery.effects.fold.js +++ b/ui/jquery.effects.fold.js @@ -12,61 +12,57 @@ */ (function( $, undefined ) { -$.effects.effect.fold = function( o ) { +$.effects.effect.fold = function( o, next ) { - return this.queue( function() { + // Create element + var el = $( this ), + props = ["position","top","bottom","left","right","height","width"], + mode = $.effects.setMode(el, o.mode || "hide"), + size = o.size || 15, + percent = /([0-9]+)%/.exec(size), + horizFirst = !!o.horizFirst, + widthFirst = ((mode == "show") != horizFirst), + ref = widthFirst ? ["width", "height"] : ["height", "width"], + duration = o.duration / 2, + wrapper, distance; - // Create element - var el = $( this ), - props = ['position','top','bottom','left','right','height','width'], - mode = $.effects.setMode(el, o.mode || 'hide'), - size = o.size || 15, - percent = /([0-9]+)%/.exec(size), - horizFirst = !!o.horizFirst, - widthFirst = ((mode == 'show') != horizFirst), - ref = widthFirst ? ['width', 'height'] : ['height', 'width'], - duration = o.duration / 2, - wrapper, distance; + $.effects.save( el, props ); + el.show(); - $.effects.save( el, props ); - el.show(); - - // Create Wrapper - wrapper = $.effects.createWrapper( el ).css({ - overflow: 'hidden' - }); - distance = widthFirst ? - [ wrapper.width(), wrapper.height() ] : - [ wrapper.height(), wrapper.width() ]; - - if ( percent ) { - size = parseInt( percent[ 1 ], 10 ) / 100 * distance[ ( mode == 'hide') ? 0 : 1 ]; - } - mode == 'show' && wrapper.css( horizFirst ? { - height: 0, - width: size - } : { - height: size, - width: 0 - }); + // Create Wrapper + wrapper = $.effects.createWrapper( el ).css({ + overflow: "hidden" + }); + distance = widthFirst ? + [ wrapper.width(), wrapper.height() ] : + [ wrapper.height(), wrapper.width() ]; - // Animation - var animation1 = {}, animation2 = {}; - animation1[ ref[ 0 ] ] = mode == 'show' ? distance[ 0 ] : size; - animation2[ ref[ 1 ] ] = mode == 'show' ? distance[ 1 ] : 0; + if ( percent ) { + size = parseInt( percent[ 1 ], 10 ) / 100 * distance[ ( mode == "hide") ? 0 : 1 ]; + } + mode == "show" && wrapper.css( horizFirst ? { + height: 0, + width: size + } : { + height: size, + width: 0 + }); - // Animate - wrapper - .animate( animation1, duration, o.easing ) - .animate( animation2, duration, o.easing, function() { - (mode == 'hide') && el.hide(); - $.effects.restore( el, props ); - $.effects.removeWrapper( el ); - jQuery.isFunction(o.complete) && o.complete.apply( el[ 0 ], arguments ); - el.dequeue(); - }); + // Animation + var animation1 = {}, animation2 = {}; + animation1[ ref[ 0 ] ] = mode == "show" ? distance[ 0 ] : size; + animation2[ ref[ 1 ] ] = mode == "show" ? distance[ 1 ] : 0; - }); + // Animate + wrapper + .animate( animation1, duration, o.easing ) + .animate( animation2, duration, o.easing, function() { + (mode == "hide") && el.hide(); + $.effects.restore( el, props ); + $.effects.removeWrapper( el ); + jQuery.isFunction(o.complete) && o.complete.apply( el[ 0 ], arguments ); + next(); + }); }; diff --git a/ui/jquery.effects.highlight.js b/ui/jquery.effects.highlight.js index cd4f0705a..61826e696 100644 --- a/ui/jquery.effects.highlight.js +++ b/ui/jquery.effects.highlight.js @@ -12,40 +12,38 @@ */ (function( $, undefined ) { -$.effects.effect.highlight = function( o ) { - return this.queue( function() { - var elem = $( this ), - props = [ 'backgroundImage', 'backgroundColor', 'opacity' ], - mode = $.effects.setMode( elem, o.mode || 'show' ), - animation = { - backgroundColor: elem.css( 'backgroundColor' ) - }; +$.effects.effect.highlight = function( o, next ) { + var elem = $( this ), + props = [ "backgroundImage", "backgroundColor", "opacity" ], + mode = $.effects.setMode( elem, o.mode || "show" ), + animation = { + backgroundColor: elem.css( "backgroundColor" ) + }; - if (mode == 'hide') { - animation.opacity = 0; - } + if (mode == "hide") { + animation.opacity = 0; + } - $.effects.save( elem, props ); - - elem - .show() - .css({ - backgroundImage: 'none', - backgroundColor: o.color || '#ffff99' - }) - .animate( animation, { - queue: false, - duration: o.duration, - easing: o.easing, - complete: function() { - (mode == 'hide' && elem.hide()); - $.effects.restore( elem, props ); - (mode == 'show' && !$.support.opacity && this.style.removeAttribute( 'filter' )); - jQuery.isFunction(o.complete) && o.complete.apply(this, arguments); - elem.dequeue(); - } - }); - }); + $.effects.save( elem, props ); + + elem + .show() + .css({ + backgroundImage: "none", + backgroundColor: o.color || "#ffff99" + }) + .animate( animation, { + queue: false, + duration: o.duration, + easing: o.easing, + complete: function() { + (mode == "hide" && elem.hide()); + $.effects.restore( elem, props ); + (mode == "show" && !$.support.opacity && this.style.removeAttribute( "filter" )); + jQuery.isFunction(o.complete) && o.complete.apply(this, arguments); + next(); + } + }); }; })(jQuery); diff --git a/ui/jquery.effects.pulsate.js b/ui/jquery.effects.pulsate.js index a0ddf51fd..bc257f624 100644 --- a/ui/jquery.effects.pulsate.js +++ b/ui/jquery.effects.pulsate.js @@ -12,56 +12,54 @@ */ (function( $, undefined ) { -$.effects.effect.pulsate = function( o ) { - return this.queue( function( next ) { - var elem = $( this ), - mode = $.effects.setMode( elem, o.mode || "show" ), - show = mode === "show", - hide = mode === "hide", - showhide = ( show || mode === "hide" ), +$.effects.effect.pulsate = function( o, next ) { + var elem = $( this ), + mode = $.effects.setMode( elem, o.mode || "show" ), + show = mode === "show", + hide = mode === "hide", + showhide = ( show || mode === "hide" ), - // showing or hiding leaves of the "last" animation - anims = ( ( o.times || 5 ) * 2 ) + ( showhide ? 1 : 0 ), - duration = o.duration / anims, - animateTo = 0, - queue = elem.queue(), - queuelen = queue.length, - i; + // showing or hiding leaves of the "last" animation + anims = ( ( o.times || 5 ) * 2 ) + ( showhide ? 1 : 0 ), + duration = o.duration / anims, + animateTo = 0, + queue = elem.queue(), + queuelen = queue.length, + i; - if ( show || !elem.is(':visible')) { - elem.css( "opacity", 0 ).show(); - animateTo = 1; - } - - // anims - 1 opacity "toggles" - for ( i = 1; i < anims; i++ ) { - elem.animate({ - opacity: animateTo - }, duration, o.easing ); - animateTo = 1 - animateTo; - } + if ( show || !elem.is(":visible")) { + elem.css( "opacity", 0 ).show(); + animateTo = 1; + } + // anims - 1 opacity "toggles" + for ( i = 1; i < anims; i++ ) { elem.animate({ opacity: animateTo - }, duration, o.easing); + }, duration, o.easing ); + animateTo = 1 - animateTo; + } - elem.queue( function( next ) { - if ( hide ) { - elem.hide(); - } - if ( o.complete ) { - o.complete.apply( this ); - } - next(); - }); + elem.animate({ + opacity: animateTo + }, duration, o.easing); - // We just queued up "anims" animations, we need to put them next in the queue - if ( queuelen > 1) { - queue.splice.apply( queue, - [ 1, 0 ].concat( queue.splice( queuelen, anims + 1 ) ) ); + elem.queue( function( next ) { + if ( hide ) { + elem.hide(); + } + if ( o.complete ) { + o.complete.apply( this ); } next(); }); + + // We just queued up "anims" animations, we need to put them next in the queue + if ( queuelen > 1 ) { + queue.splice.apply( queue, + [ 1, 0 ].concat( queue.splice( queuelen, anims + 1 ) ) ); + } + next(); }; })(jQuery); diff --git a/ui/jquery.effects.scale.js b/ui/jquery.effects.scale.js index e00d82497..614943cfb 100644 --- a/ui/jquery.effects.scale.js +++ b/ui/jquery.effects.scale.js @@ -12,249 +12,255 @@ */ (function( $, undefined ) { -$.effects.effect.puff = function( o ) { - return this.queue( function() { - var elem = $( this ), - mode = $.effects.setMode( elem, o.mode || 'hide' ), - percent = parseInt( o.percent, 10 ) || 150, - factor = percent / 100, - original = { - height: elem.height(), - width: elem.width() - }; - - $.extend(o, { - effect: 'scale', - queue: false, - fade: true, - mode: mode, - percent: mode == 'hide' ? percent : 100, - from: mode == 'hide' - ? original - : { - height: original.height * factor, - width: original.width * factor - } - }); - - elem.effect( o ); - }); -}; - -$.effects.effect.scale = function( o ) { - - return this[ o.queue === false ? "each" : "queue" ]( function() { - - // Create element - var el = $( this ), - options = $.extend( true, {}, o ), - mode = $.effects.setMode( el, o.mode || 'effect' ), - percent = parseInt( o.percent, 10 ) || ( parseInt( o.percent, 10 ) == 0 ? 0 : ( mode == 'hide' ? 0 : 100 ) ), - direction = o.direction || 'both', - origin = o.origin, - original = { - height: el.height(), - width: el.width(), - outerHeight: el.outerHeight(), - outerWidth: el.outerWidth() - }, - factor = { - y: direction != 'horizontal' ? (percent / 100) : 1, - x: direction != 'vertical' ? (percent / 100) : 1 - }; - - // We are going to pass this effect to the size effect: - options.effect = "size"; - options.queue = false; - - // Set default origin and restore for show/hide - if ( mode != 'effect' ) { - options.origin = origin || ['middle','center']; - options.restore = true; +function compFunction( el, complete, next ) { + return function() { + if ( $.isFunction( complete ) ) { + complete.apply( el ); } + next(); + }; +}; - options.from = o.from || ( mode == 'show' ? { height: 0, width: 0 } : original ); - options.to = { - height: original.height * factor.y, - width: original.width * factor.x, - outerHeight: original.outerHeight * factor.y, - outerWidth: original.outerWidth * factor.x - }; - - if ( options.fade ) { // Fade option to support puff - if ( mode == 'show' ) { - options.from.opacity = 0; - options.to.opacity = 1; - } - if ( mode == 'hide' ) { - options.from.opacity = 1; - options.to.opacity = 0; - } +$.effects.effect.puff = function( o, next ) { + var elem = $( this ), + mode = $.effects.setMode( elem, o.mode || "hide" ), + percent = parseInt( o.percent, 10 ) || 150, + factor = percent / 100, + original = { + height: elem.height(), + width: elem.width() }; - // Animate - el.effect(options); + $.extend( o, { + effect: "scale", + queue: false, + fade: true, + mode: mode, + complete: compFunction( this, o.complete, next ), + percent: mode == "hide" ? percent : 100, + from: mode == "hide" + ? original + : { + height: original.height * factor, + width: original.width * factor + } }); + elem.effect( o ); }; -$.effects.effect.size = function( o ) { - - return this[ o.queue === false ? "each" : "queue" ]( function() { - // Create element - var el = $( this ), - props = [ 'position', 'top', 'bottom', 'left', 'right', 'width', 'height', 'overflow', 'opacity' ], - - // Always restore - props1 = [ 'position', 'top', 'bottom', 'left', 'right', 'overflow', 'opacity' ], - - // Copy for children - props2 = [ 'width', 'height', 'overflow' ], - cProps = [ 'fontSize' ], - vProps = [ 'borderTopWidth', 'borderBottomWidth', 'paddingTop', 'paddingBottom' ], - hProps = [ 'borderLeftWidth', 'borderRightWidth', 'paddingLeft', 'paddingRight' ], - - // Set options - mode = $.effects.setMode( el, o.mode || 'effect' ), - restore = o.restore || mode !== "effect", - scale = o.scale || 'both', - 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(); - } - original = { +$.effects.effect.scale = function( o, next ) { + + // Create element + var el = $( this ), + options = $.extend( true, {}, o ), + mode = $.effects.setMode( el, o.mode || "effect" ), + percent = parseInt( o.percent, 10 ) || ( parseInt( o.percent, 10 ) == 0 ? 0 : ( mode == "hide" ? 0 : 100 ) ), + direction = o.direction || "both", + origin = o.origin, + original = { height: el.height(), width: el.width(), outerHeight: el.outerHeight(), outerWidth: el.outerWidth() - }; + }, + factor = { + y: direction != "horizontal" ? (percent / 100) : 1, + x: direction != "vertical" ? (percent / 100) : 1 + }; - el.from = o.from || original; - el.to = o.to || original; + // We are going to pass this effect to the size effect: + options.effect = "size"; + options.queue = false; + options.complete = compFunction( this, options.complete, next ); + + // Set default origin and restore for show/hide + if ( mode != "effect" ) { + options.origin = origin || ["middle","center"]; + options.restore = true; + } + + options.from = o.from || ( mode == "show" ? { height: 0, width: 0 } : original ); + options.to = { + height: original.height * factor.y, + width: original.width * factor.x, + outerHeight: original.outerHeight * factor.y, + outerWidth: original.outerWidth * factor.x + }; + + if ( options.fade ) { // Fade option to support puff + if ( mode == "show" ) { + options.from.opacity = 0; + options.to.opacity = 1; + } + if ( mode == "hide" ) { + options.from.opacity = 1; + options.to.opacity = 0; + } + }; - // Set scaling factor - factor = { - from: { - y: el.from.height / original.height, - x: el.from.width / original.width - }, - to: { - y: el.to.height / original.height, - x: el.to.width / original.width - } - }; + // Animate + el.effect( options ); - // Scale the css box - if ( scale == 'box' || scale == 'both' ) { +}; - // Vertical props scaling - if ( factor.from.y !== factor.to.y ) { - props = props.concat( vProps ); - el.from = $.effects.setTransition( el, vProps, factor.from.y, el.from ); - el.to = $.effects.setTransition( el, vProps, factor.to.y, el.to ); - }; +$.effects.effect.size = function( o, next ) { + + // Create element + var el = $( this ), + props = [ "position", "top", "bottom", "left", "right", "width", "height", "overflow", "opacity" ], + + // Always restore + props1 = [ "position", "top", "bottom", "left", "right", "overflow", "opacity" ], + + // Copy for children + props2 = [ "width", "height", "overflow" ], + cProps = [ "fontSize" ], + vProps = [ "borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom" ], + hProps = [ "borderLeftWidth", "borderRightWidth", "paddingLeft", "paddingRight" ], + + // Set options + mode = $.effects.setMode( el, o.mode || "effect" ), + restore = o.restore || mode !== "effect", + scale = o.scale || "both", + 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(); + } + original = { + height: el.height(), + width: el.width(), + outerHeight: el.outerHeight(), + outerWidth: el.outerWidth() + }; + + el.from = o.from || original; + el.to = o.to || original; + + // Set scaling factor + factor = { + from: { + y: el.from.height / original.height, + x: el.from.width / original.width + }, + to: { + y: el.to.height / original.height, + x: el.to.width / original.width + } + }; - // Horizontal props scaling - if ( factor.from.x !== factor.to.x ) { - props = props.concat( hProps ); - el.from = $.effects.setTransition( el, hProps, factor.from.x, el.from ); - el.to = $.effects.setTransition( el, hProps, factor.to.x, el.to ); - }; + // Scale the css box + if ( scale == "box" || scale == "both" ) { + + // Vertical props scaling + if ( factor.from.y !== factor.to.y ) { + props = props.concat( vProps ); + el.from = $.effects.setTransition( el, vProps, factor.from.y, el.from ); + el.to = $.effects.setTransition( el, vProps, factor.to.y, el.to ); }; - // Scale the content - if ( scale == 'content' || scale == 'both' ) { + // Horizontal props scaling + if ( factor.from.x !== factor.to.x ) { + props = props.concat( hProps ); + el.from = $.effects.setTransition( el, hProps, factor.from.x, el.from ); + el.to = $.effects.setTransition( el, hProps, factor.to.x, el.to ); + }; + }; - // Vertical props scaling - if ( factor.from.y !== factor.to.y ) { - props = props.concat( cProps ); - el.from = $.effects.setTransition( el, cProps, factor.from.y, el.from ); - el.to = $.effects.setTransition( el, cProps, factor.to.y, el.to ); - }; + // Scale the content + if ( scale == "content" || scale == "both" ) { + + // Vertical props scaling + if ( factor.from.y !== factor.to.y ) { + props = props.concat( cProps ); + el.from = $.effects.setTransition( el, cProps, factor.from.y, el.from ); + el.to = $.effects.setTransition( el, cProps, factor.to.y, el.to ); }; - - $.effects.save( el, restore ? props : props1 ); - el.show(); - $.effects.createWrapper( el ); - el.css( 'overflow', 'hidden' ).css( el.from ); - - // Adjust - if (origin) { // Calculate baseline shifts - baseline = $.effects.getBaseline( origin, original ); - el.from.top = ( original.outerHeight - el.outerHeight() ) * baseline.y; - el.from.left = ( original.outerWidth - el.outerWidth() ) * baseline.x; - el.to.top = ( original.outerHeight - el.to.outerHeight ) * baseline.y; - el.to.left = ( original.outerWidth - el.to.outerWidth ) * baseline.x; - } - el.css( el.from ); // set top & left - - // Animate - if ( scale == 'content' || scale == 'both' ) { // Scale the children - - // Add margins/font-size - vProps = vProps.concat([ 'marginTop', 'marginBottom' ]).concat(cProps); - hProps = hProps.concat([ 'marginLeft', 'marginRight' ]); - props2 = props.concat(vProps).concat(hProps); - - el.find( "*[width]" ).each( function(){ - var child = $( this ), - c_original = { - height: child.height(), - width: child.width() - }; - if (restore) $.effects.save(child, props2); - - child.from = { - height: c_original.height * factor.from.y, - width: c_original.width * factor.from.x - }; - child.to = { - height: c_original.height * factor.to.y, - width: c_original.width * factor.to.x + }; + + $.effects.save( el, restore ? props : props1 ); + el.show(); + $.effects.createWrapper( el ); + el.css( "overflow", "hidden" ).css( el.from ); + + // Adjust + if (origin) { // Calculate baseline shifts + baseline = $.effects.getBaseline( origin, original ); + el.from.top = ( original.outerHeight - el.outerHeight() ) * baseline.y; + el.from.left = ( original.outerWidth - el.outerWidth() ) * baseline.x; + el.to.top = ( original.outerHeight - el.to.outerHeight ) * baseline.y; + el.to.left = ( original.outerWidth - el.to.outerWidth ) * baseline.x; + } + el.css( el.from ); // set top & left + + // Animate + if ( scale == "content" || scale == "both" ) { // Scale the children + + // Add margins/font-size + vProps = vProps.concat([ "marginTop", "marginBottom" ]).concat(cProps); + hProps = hProps.concat([ "marginLeft", "marginRight" ]); + props2 = props.concat(vProps).concat(hProps); + + el.find( "*[width]" ).each( function(){ + var child = $( this ), + c_original = { + height: child.height(), + width: child.width() }; + if (restore) $.effects.save(child, props2); + + child.from = { + height: c_original.height * factor.from.y, + width: c_original.width * factor.from.x + }; + child.to = { + height: c_original.height * factor.to.y, + width: c_original.width * factor.to.x + }; - // Vertical props scaling - if ( factor.from.y != factor.to.y ) { - child.from = $.effects.setTransition( child, vProps, factor.from.y, child.from ); - child.to = $.effects.setTransition( child, vProps, factor.to.y, child.to ); - }; + // Vertical props scaling + if ( factor.from.y != factor.to.y ) { + child.from = $.effects.setTransition( child, vProps, factor.from.y, child.from ); + child.to = $.effects.setTransition( child, vProps, factor.to.y, child.to ); + }; - // Horizontal props scaling - if ( factor.from.x != factor.to.x ) { - child.from = $.effects.setTransition( child, hProps, factor.from.x, child.from ); - child.to = $.effects.setTransition( child, hProps, factor.to.x, child.to ); - }; + // Horizontal props scaling + if ( factor.from.x != factor.to.x ) { + child.from = $.effects.setTransition( child, hProps, factor.from.x, child.from ); + child.to = $.effects.setTransition( child, hProps, factor.to.x, child.to ); + }; - // Animate children - child.css( child.from ); - child.animate( child.to, o.duration, o.easing, function() { + // Animate children + child.css( child.from ); + child.animate( child.to, o.duration, o.easing, function() { - // Restore children - if (restore) $.effects.restore( child, props2 ); - }); + // Restore children + if (restore) $.effects.restore( child, props2 ); }); - }; - - // Animate - el.animate( el.to, { - queue: false, - duration: o.duration, - easing: o.easing, - complete: function() { - if ( el.to.opacity === 0 ) { - el.css( 'opacity', el.from.opacity ); - } - if( mode == 'hide' ) { - el.hide(); - } - $.effects.restore( el, restore ? props : props1 ); + }); + }; + + // Animate + el.animate( el.to, { + queue: false, + duration: o.duration, + easing: o.easing, + complete: function() { + if ( el.to.opacity === 0 ) { + el.css( "opacity", el.from.opacity ); + } + if( mode == "hide" ) { + el.hide(); + } + $.effects.restore( el, restore ? props : props1 ); + if ( !restore ) { - // we need to recalculate our positioning based on the new scaling + // we need to calculate our new positioning based on the scaling if ( position === "static" ) { el.css({ position: "relative", @@ -292,13 +298,14 @@ $.effects.effect.size = function( o ) { }); }); } - - $.effects.removeWrapper( el ); - $.isFunction( o.complete ) && o.complete.apply( this, arguments ); // Callback - el.dequeue(); } - }); + $.effects.removeWrapper( el ); + if ( $.isFunction( o.complete ) ) { + o.complete.apply( this, arguments ); + } + next(); + } }); }; diff --git a/ui/jquery.effects.shake.js b/ui/jquery.effects.shake.js index 52ab331e8..82d7ae97e 100644 --- a/ui/jquery.effects.shake.js +++ b/ui/jquery.effects.shake.js @@ -12,66 +12,63 @@ */ (function( $, undefined ) { -$.effects.effect.shake = function( o ) { +$.effects.effect.shake = function( o, next ) { - return this.queue( function() { + var el = $( this ), + props = [ "position", "top", "bottom", "left", "right", "height", "width" ], + mode = $.effects.setMode( el, o.mode || "effect" ), + direction = o.direction || "left", + distance = o.distance || 20, + times = o.times || 3, + anims = times * 2 + 1, + speed = o.duration, + ref = (direction == "up" || direction == "down") ? "top" : "left", + motion = (direction == "up" || direction == "left") ? "pos" : "neg", + animation = {}, + animation1 = {}, + animation2 = {}, + i, - var el = $( this ), - props = [ "position", "top", "bottom", "left", "right", "height", "width" ], - mode = $.effects.setMode( el, o.mode || "effect" ), - direction = o.direction || "left", - distance = o.distance || 20, - times = o.times || 3, - anims = times * 2 + 1, - speed = o.duration, - ref = (direction == "up" || direction == "down") ? "top" : "left", - motion = (direction == "up" || direction == "left") ? "pos" : "neg", - animation = {}, - animation1 = {}, - animation2 = {}, - i, + // we will need to re-assemble the queue to stack our animations in place + queue = el.queue(), + queuelen = queue.length; + - // we will need to re-assemble the queue to stack our animations in place - queue = el.queue(), - queuelen = queue.length; - + $.effects.save( el, props ); + el.show(); + $.effects.createWrapper( el ); - $.effects.save( el, props ); - el.show(); - $.effects.createWrapper( el ); + // Animation + animation[ ref ] = ( motion == "pos" ? "-=" : "+=" ) + distance; + animation1[ ref ] = ( motion == "pos" ? "+=" : "-=" ) + distance * 2; + animation2[ ref ] = ( motion == "pos" ? "-=" : "+=" ) + distance * 2; - // Animation - animation[ ref ] = ( motion == "pos" ? "-=" : "+=" ) + distance; - animation1[ ref ] = ( motion == "pos" ? "+=" : "-=" ) + distance * 2; - animation2[ ref ] = ( motion == "pos" ? "-=" : "+=" ) + distance * 2; + // Animate + el.animate( animation, speed, o.easing ); - // Animate - el.animate( animation, speed, o.easing ); + // Shakes + for ( i = 1; i < times; i++ ) { + el.animate( animation1, speed, o.easing ).animate( animation2, speed, o.easing ); + }; + el + .animate( animation1, speed, o.easing ) + .animate( animation, speed / 2, o.easing ) + .queue( function( next ) { + if ( mode === "hide" ) { + el.hide(); + } + $.effects.restore( el, props ); + $.effects.removeWrapper( el ); + $.isFunction( o.complete ) && o.complete.apply( this, arguments ); + next(); + }); - // Shakes - for ( i = 1; i < times; i++ ) { - el.animate( animation1, speed, o.easing ).animate( animation2, speed, o.easing ); - }; - el - .animate( animation1, speed, o.easing ) - .animate( animation, speed / 2, o.easing ) - .queue( function( next ) { - if ( mode === "hide" ) { - el.hide(); - } - $.effects.restore( el, props ); - $.effects.removeWrapper( el ); - $.isFunction( o.complete ) && o.complete.apply( this, arguments ); - next(); - }); - - // inject all the animations we just queued to be first in line (after "inprogress") - if ( queuelen > 1) { - queue.splice.apply( queue, - [ 1, 0 ].concat( queue.splice( queuelen, anims + 1 ) ) ); - } - el.dequeue(); - }); + // inject all the animations we just queued to be first in line (after "inprogress") + if ( queuelen > 1) { + queue.splice.apply( queue, + [ 1, 0 ].concat( queue.splice( queuelen, anims + 1 ) ) ); + } + next(); }; diff --git a/ui/jquery.effects.slide.js b/ui/jquery.effects.slide.js index ccb13fa1b..7ed744284 100644 --- a/ui/jquery.effects.slide.js +++ b/ui/jquery.effects.slide.js @@ -12,58 +12,54 @@ */ (function( $, undefined ) { -$.effects.effect.slide = function( o ) { +$.effects.effect.slide = function( o, next ) { - return this.queue( function() { + // Create element + var el = $( this ), + 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 = {}, + size; - // Create element - var el = $( this ), - 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 = {}, - size; - - // Adjust - $.effects.save( el, props ); - el.show(); - distance = o.distance || el[ ref == 'top' ? "outerHeight" : "outerWidth" ]({ - margin: true - }); - - $.effects.createWrapper( el ).css({ - overflow: 'hidden' - }); - - if (mode == 'show') { - el.css( ref, motion == 'pos' ? (isNaN(distance) ? "-" + distance : -distance) : distance ); - } + // Adjust + $.effects.save( el, props ); + el.show(); + distance = o.distance || el[ ref == "top" ? "outerHeight" : "outerWidth" ]({ + margin: true + }); + + $.effects.createWrapper( el ).css({ + overflow: "hidden" + }); + + if (mode == "show") { + el.css( ref, motion == "pos" ? (isNaN(distance) ? "-" + distance : -distance) : distance ); + } - // Animation - animation[ ref ] = ( mode == 'show' ? - (motion == 'pos' ? '+=' : '-=') : - (motion == 'pos' ? '-=' : '+=')) - + distance; + // Animation + animation[ ref ] = ( mode == "show" ? + (motion == "pos" ? "+=" : "-=") : + (motion == "pos" ? "-=" : "+=")) + + distance; - // Animate - el.animate( animation, { - queue: false, - duration: o.duration, - easing: o.easing, - complete: function() { - if ( mode == 'hide' ) { - el.hide(); - } - $.effects.restore( el, props ); - $.effects.removeWrapper( el ); - $.isFunction(o.complete) && o.complete.apply( this, arguments ); - el.dequeue(); + // Animate + el.animate( animation, { + queue: false, + duration: o.duration, + easing: o.easing, + complete: function() { + if ( mode == "hide" ) { + el.hide(); } - }); - + $.effects.restore( el, props ); + $.effects.removeWrapper( el ); + $.isFunction(o.complete) && o.complete.apply( this, arguments ); + next(); + } }); }; diff --git a/ui/jquery.effects.transfer.js b/ui/jquery.effects.transfer.js index f0f9d9fd4..061882fec 100644 --- a/ui/jquery.effects.transfer.js +++ b/ui/jquery.effects.transfer.js @@ -12,39 +12,36 @@ */ (function( $, undefined ) { -$.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 - fixTop , - left: endPosition.left - fixLeft , - height: target.innerHeight(), - width: target.innerWidth() - }, - startPosition = elem.offset(), - transfer = $( '
    ' ) - .appendTo( document.body ) - .addClass( o.className ) - .css({ - top: startPosition.top - fixTop , - left: startPosition.left - fixLeft , - height: elem.innerHeight(), - width: elem.innerWidth(), - position: targetFixed ? "fixed" : "absolute" - }) - .animate( animation, o.duration, o.easing, function() { - transfer.remove(); - $.isFunction( o.complete ) && o.complete.apply(elem[0], arguments); - elem.dequeue(); - }); - }); +$.effects.effect.transfer = function( o, next ) { + 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 - fixTop , + left: endPosition.left - fixLeft , + height: target.innerHeight(), + width: target.innerWidth() + }, + startPosition = elem.offset(), + transfer = $( '
    ' ) + .appendTo( document.body ) + .addClass( o.className ) + .css({ + top: startPosition.top - fixTop , + left: startPosition.left - fixLeft , + height: elem.innerHeight(), + width: elem.innerWidth(), + position: targetFixed ? "fixed" : "absolute" + }) + .animate( animation, o.duration, o.easing, function() { + transfer.remove(); + $.isFunction( o.complete ) && o.complete.apply(elem[0], arguments); + next(); + }); }; })(jQuery); -- cgit v1.2.3 From 65a6c46e5568c43a9df9505e23da6a766814557e Mon Sep 17 00:00:00 2001 From: gnarf Date: Tue, 21 Jun 2011 01:15:42 -0500 Subject: Effects.*: Style Guidance --- ui/jquery.effects.blind.js | 16 ++++++++-------- ui/jquery.effects.bounce.js | 2 +- ui/jquery.effects.drop.js | 16 ++++++++++------ ui/jquery.effects.explode.js | 4 ++-- ui/jquery.effects.fold.js | 34 +++++++++++++++++++++------------- ui/jquery.effects.highlight.js | 11 +++++++---- ui/jquery.effects.scale.js | 5 +++-- ui/jquery.effects.shake.js | 12 +++++++----- ui/jquery.effects.slide.js | 21 ++++++++++++--------- ui/jquery.effects.transfer.js | 4 +++- 10 files changed, 74 insertions(+), 51 deletions(-) (limited to 'ui') diff --git a/ui/jquery.effects.blind.js b/ui/jquery.effects.blind.js index 8c536be78..09d6a9e57 100644 --- a/ui/jquery.effects.blind.js +++ b/ui/jquery.effects.blind.js @@ -11,7 +11,7 @@ * jquery.effects.core.js */ (function( $, undefined ) { - + var rvertical = /up|down|vertical/, rpositivemotion = /up|left|vertical|horizontal/; @@ -35,24 +35,24 @@ $.effects.effect.blind = function( o, next ) { } else { $.effects.save( el, props ); } - el.show(); - wrapper = $.effects.createWrapper( el ).css({ + el.show(); + wrapper = $.effects.createWrapper( el ).css({ overflow: "hidden" }); distance = wrapper[ ref ](); - animation[ ref ] = ( mode === "show" ? distance : 0 ); + animation[ ref ] = show ? distance : 0; if ( !motion ) { el .css( vertical ? "bottom" : "right", 0 ) .css( vertical ? "top" : "left", "" ) .css({ position: "absolute" }); - animation[ ref2 ] = ( mode === "show" ) ? 0 : distance; + animation[ ref2 ] = show ? 0 : distance; } // start at 0 if we are showing - if ( mode === "show" ) { + if ( show ) { wrapper.css( ref, 0 ); if ( ! motion ) { wrapper.css( ref2, distance ); @@ -65,10 +65,10 @@ $.effects.effect.blind = function( o, next ) { easing: o.easing, queue: false, complete: function() { - if ( mode == "hide" ) { + if ( mode === "hide" ) { el.hide(); } - $.effects.restore( el, props ); + $.effects.restore( el, props ); $.effects.removeWrapper( el ); if ( $.isFunction( o.complete ) ) { o.complete.apply( el[ 0 ], arguments ); diff --git a/ui/jquery.effects.bounce.js b/ui/jquery.effects.bounce.js index f6cf5bb02..38171c32e 100644 --- a/ui/jquery.effects.bounce.js +++ b/ui/jquery.effects.bounce.js @@ -61,7 +61,7 @@ $.effects.effect.bounce = function( o, next ) { // if we are showing, force opacity 0 and set the initial position // then do the "first" animation el.css( "opacity", 0 ) - .css( ref, motion ? -distance*2 : distance*2 ) + .css( ref, motion ? -distance * 2 : distance * 2 ) .animate( downAnim, speed, easing ); } diff --git a/ui/jquery.effects.drop.js b/ui/jquery.effects.drop.js index a0bdc7d4d..2fba49d92 100644 --- a/ui/jquery.effects.drop.js +++ b/ui/jquery.effects.drop.js @@ -17,11 +17,12 @@ $.effects.effect.drop = function( o, next ) { var el = $( this ), props = [ "position", "top", "bottom", "left", "right", "opacity", "height", "width" ], mode = $.effects.setMode( el, o.mode || "hide" ), + show = mode === "show", direction = o.direction || "left", - ref = ( direction == "up" || direction == "down" ) ? "top" : "left", - motion = ( direction == "up" || direction == "left" ) ? "pos" : "neg", + ref = ( direction === "up" || direction === "down" ) ? "top" : "left", + motion = ( direction === "up" || direction === "left" ) ? "pos" : "neg", animation = { - opacity: mode == "show" ? 1 : 0 + opacity: show ? 1 : 0 }, distance; @@ -32,14 +33,17 @@ $.effects.effect.drop = function( o, next ) { distance = o.distance || el[ ref == "top" ? "outerHeight": "outerWidth" ]({ margin: true }) / 2; - if ( mode == "show" ) { + if ( show ) { el .css( "opacity", 0 ) .css( ref, motion == "pos" ? -distance : distance ); } // Animation - animation[ ref ] = ((mode == "show") ? (motion == "pos" ? "+=" : "-=") : (motion == "pos" ? "-=" : "+=")) + distance; + animation[ ref ] = ( show ? + ( motion === "pos" ? "+=" : "-=" ) : + ( motion === "pos" ? "-=" : "+=" ) ) + + distance; // Animate el.animate( animation, { @@ -50,7 +54,7 @@ $.effects.effect.drop = function( o, next ) { mode == "hide" && el.hide(); $.effects.restore( el, props ); $.effects.removeWrapper( el ); - $.isFunction( o.complete ) && o.complete.apply(this, arguments); + $.isFunction( o.complete ) && o.complete.apply( this, arguments ); next(); } }); diff --git a/ui/jquery.effects.explode.js b/ui/jquery.effects.explode.js index 76711c6f2..0deb2be9f 100644 --- a/ui/jquery.effects.explode.js +++ b/ui/jquery.effects.explode.js @@ -14,11 +14,11 @@ $.effects.effect.explode = function( o, next ) { - var rows = o.pieces ? Math.round(Math.sqrt(o.pieces)) : 3, + var rows = o.pieces ? Math.round( Math.sqrt( o.pieces ) ) : 3, cells = rows, el = $( this ), mode = $.effects.setMode( el, o.mode || "hide" ), - show = ( mode == "show" ), + show = mode === "show", // show and then visibility:hidden the element before calculating offset offset = el.show().css( "visibility", "hidden" ).offset(), diff --git a/ui/jquery.effects.fold.js b/ui/jquery.effects.fold.js index de7530bf0..b2a02ba78 100644 --- a/ui/jquery.effects.fold.js +++ b/ui/jquery.effects.fold.js @@ -16,15 +16,18 @@ $.effects.effect.fold = function( o, next ) { // Create element var el = $( this ), - props = ["position","top","bottom","left","right","height","width"], - mode = $.effects.setMode(el, o.mode || "hide"), + props = [ "position", "top", "bottom", "left", "right", "height", "width" ], + mode = $.effects.setMode( el, o.mode || "hide" ), + show = mode === "show", + hide = mode === "hide", size = o.size || 15, - percent = /([0-9]+)%/.exec(size), + percent = /([0-9]+)%/.exec( size ), horizFirst = !!o.horizFirst, - widthFirst = ((mode == "show") != horizFirst), - ref = widthFirst ? ["width", "height"] : ["height", "width"], + widthFirst = show != horizFirst, + ref = widthFirst ? [ "width", "height" ] : [ "height", "width" ], duration = o.duration / 2, - wrapper, distance; + wrapper, distance, + animation1 = {}, animation2 = {}; $.effects.save( el, props ); el.show(); @@ -38,29 +41,34 @@ $.effects.effect.fold = function( o, next ) { [ wrapper.height(), wrapper.width() ]; if ( percent ) { - size = parseInt( percent[ 1 ], 10 ) / 100 * distance[ ( mode == "hide") ? 0 : 1 ]; + size = parseInt( percent[ 1 ], 10 ) / 100 * distance[ hide ? 0 : 1 ]; } - mode == "show" && wrapper.css( horizFirst ? { + if ( show ) { + wrapper.css( horizFirst ? { height: 0, width: size } : { height: size, width: 0 }); + } // Animation - var animation1 = {}, animation2 = {}; - animation1[ ref[ 0 ] ] = mode == "show" ? distance[ 0 ] : size; - animation2[ ref[ 1 ] ] = mode == "show" ? distance[ 1 ] : 0; + animation1[ ref[ 0 ] ] = show ? distance[ 0 ] : size; + animation2[ ref[ 1 ] ] = show ? distance[ 1 ] : 0; // Animate wrapper .animate( animation1, duration, o.easing ) .animate( animation2, duration, o.easing, function() { - (mode == "hide") && el.hide(); + if ( hide ) { + el.hide(); + } $.effects.restore( el, props ); $.effects.removeWrapper( el ); - jQuery.isFunction(o.complete) && o.complete.apply( el[ 0 ], arguments ); + if ( $.isFunction( o.complete ) ) { + o.complete.apply( el[ 0 ], arguments ); + } next(); }); diff --git a/ui/jquery.effects.highlight.js b/ui/jquery.effects.highlight.js index 61826e696..709e93a3c 100644 --- a/ui/jquery.effects.highlight.js +++ b/ui/jquery.effects.highlight.js @@ -20,7 +20,7 @@ $.effects.effect.highlight = function( o, next ) { backgroundColor: elem.css( "backgroundColor" ) }; - if (mode == "hide") { + if (mode === "hide") { animation.opacity = 0; } @@ -37,10 +37,13 @@ $.effects.effect.highlight = function( o, next ) { duration: o.duration, easing: o.easing, complete: function() { - (mode == "hide" && elem.hide()); + if ( mode === "hide" ) { + elem.hide(); + } $.effects.restore( elem, props ); - (mode == "show" && !$.support.opacity && this.style.removeAttribute( "filter" )); - jQuery.isFunction(o.complete) && o.complete.apply(this, arguments); + if ( $.isFunction( o.complete) ) { + o.complete.apply( this, arguments ); + } next(); } }); diff --git a/ui/jquery.effects.scale.js b/ui/jquery.effects.scale.js index 614943cfb..2642c6c1d 100644 --- a/ui/jquery.effects.scale.js +++ b/ui/jquery.effects.scale.js @@ -24,6 +24,7 @@ function compFunction( el, complete, next ) { $.effects.effect.puff = function( o, next ) { var elem = $( this ), mode = $.effects.setMode( elem, o.mode || "hide" ), + hide = mode === "hide", percent = parseInt( o.percent, 10 ) || 150, factor = percent / 100, original = { @@ -37,8 +38,8 @@ $.effects.effect.puff = function( o, next ) { fade: true, mode: mode, complete: compFunction( this, o.complete, next ), - percent: mode == "hide" ? percent : 100, - from: mode == "hide" + percent: hide ? percent : 100, + from: hide ? original : { height: original.height * factor, diff --git a/ui/jquery.effects.shake.js b/ui/jquery.effects.shake.js index 82d7ae97e..311edced0 100644 --- a/ui/jquery.effects.shake.js +++ b/ui/jquery.effects.shake.js @@ -23,7 +23,7 @@ $.effects.effect.shake = function( o, next ) { anims = times * 2 + 1, speed = o.duration, ref = (direction == "up" || direction == "down") ? "top" : "left", - motion = (direction == "up" || direction == "left") ? "pos" : "neg", + positiveMotion = (direction == "up" || direction == "left"), animation = {}, animation1 = {}, animation2 = {}, @@ -39,9 +39,9 @@ $.effects.effect.shake = function( o, next ) { $.effects.createWrapper( el ); // Animation - animation[ ref ] = ( motion == "pos" ? "-=" : "+=" ) + distance; - animation1[ ref ] = ( motion == "pos" ? "+=" : "-=" ) + distance * 2; - animation2[ ref ] = ( motion == "pos" ? "-=" : "+=" ) + distance * 2; + animation[ ref ] = ( positiveMotion ? "-=" : "+=" ) + distance; + animation1[ ref ] = ( positiveMotion ? "+=" : "-=" ) + distance * 2; + animation2[ ref ] = ( positiveMotion ? "-=" : "+=" ) + distance * 2; // Animate el.animate( animation, speed, o.easing ); @@ -59,7 +59,9 @@ $.effects.effect.shake = function( o, next ) { } $.effects.restore( el, props ); $.effects.removeWrapper( el ); - $.isFunction( o.complete ) && o.complete.apply( this, arguments ); + if ( $.isFunction( o.complete ) ) { + o.complete.apply( this, arguments ); + } next(); }); diff --git a/ui/jquery.effects.slide.js b/ui/jquery.effects.slide.js index 7ed744284..3be28d91b 100644 --- a/ui/jquery.effects.slide.js +++ b/ui/jquery.effects.slide.js @@ -18,9 +18,10 @@ $.effects.effect.slide = function( o, next ) { var el = $( this ), props = [ "position", "top", "bottom", "left", "right", "width", "height" ], mode = $.effects.setMode( el, o.mode || "show" ), + show = mode === "show", direction = o.direction || "left", ref = (direction == "up" || direction == "down") ? "top" : "left", - motion = (direction == "up" || direction == "left") ? "pos" : "neg", + positiveMotion = (direction == "up" || direction == "left"), distance, animation = {}, size; @@ -28,7 +29,7 @@ $.effects.effect.slide = function( o, next ) { // Adjust $.effects.save( el, props ); el.show(); - distance = o.distance || el[ ref == "top" ? "outerHeight" : "outerWidth" ]({ + distance = o.distance || el[ ref === "top" ? "outerHeight" : "outerWidth" ]({ margin: true }); @@ -36,14 +37,14 @@ $.effects.effect.slide = function( o, next ) { overflow: "hidden" }); - if (mode == "show") { - el.css( ref, motion == "pos" ? (isNaN(distance) ? "-" + distance : -distance) : distance ); + if ( show ) { + el.css( ref, positiveMotion ? (isNaN(distance) ? "-" + distance : -distance) : distance ); } // Animation - animation[ ref ] = ( mode == "show" ? - (motion == "pos" ? "+=" : "-=") : - (motion == "pos" ? "-=" : "+=")) + animation[ ref ] = ( show ? + ( positiveMotion ? "+=" : "-=") : + ( positiveMotion ? "-=" : "+=")) + distance; // Animate @@ -52,12 +53,14 @@ $.effects.effect.slide = function( o, next ) { duration: o.duration, easing: o.easing, complete: function() { - if ( mode == "hide" ) { + if ( mode === "hide" ) { el.hide(); } $.effects.restore( el, props ); $.effects.removeWrapper( el ); - $.isFunction(o.complete) && o.complete.apply( this, arguments ); + if ( $.isFunction( o.complete ) ) { + o.complete.apply( this, arguments ); + } next(); } }); diff --git a/ui/jquery.effects.transfer.js b/ui/jquery.effects.transfer.js index 061882fec..0c840c35c 100644 --- a/ui/jquery.effects.transfer.js +++ b/ui/jquery.effects.transfer.js @@ -39,7 +39,9 @@ $.effects.effect.transfer = function( o, next ) { }) .animate( animation, o.duration, o.easing, function() { transfer.remove(); - $.isFunction( o.complete ) && o.complete.apply(elem[0], arguments); + if ( $.isFunction( o.complete ) ) { + o.complete.apply( elem[0], arguments ); + } next(); }); }; -- cgit v1.2.3 From ab627e03a6a37cbf3291e9600f5482bd50991360 Mon Sep 17 00:00:00 2001 From: gnarf Date: Tue, 21 Jun 2011 01:11:46 -0500 Subject: Effects.*: DRY the complete callback execution into the 'done' callback passed into an effect --- ui/jquery.effects.blind.js | 7 ++----- ui/jquery.effects.bounce.js | 11 ++++------- ui/jquery.effects.clip.js | 7 ++----- ui/jquery.effects.core.js | 14 +++++++++++++- ui/jquery.effects.drop.js | 5 ++--- ui/jquery.effects.explode.js | 7 ++----- ui/jquery.effects.fade.js | 7 ++----- ui/jquery.effects.fold.js | 7 ++----- ui/jquery.effects.highlight.js | 7 ++----- ui/jquery.effects.pulsate.js | 11 ++++------- ui/jquery.effects.scale.js | 24 ++++++------------------ ui/jquery.effects.shake.js | 11 ++++------- ui/jquery.effects.slide.js | 7 ++----- ui/jquery.effects.transfer.js | 7 ++----- 14 files changed, 49 insertions(+), 83 deletions(-) (limited to 'ui') diff --git a/ui/jquery.effects.blind.js b/ui/jquery.effects.blind.js index 09d6a9e57..5f86bed7b 100644 --- a/ui/jquery.effects.blind.js +++ b/ui/jquery.effects.blind.js @@ -15,7 +15,7 @@ var rvertical = /up|down|vertical/, rpositivemotion = /up|left|vertical|horizontal/; -$.effects.effect.blind = function( o, next ) { +$.effects.effect.blind = function( o, done ) { // Create element var el = $( this ), props = [ "position", "top", "bottom", "left", "right", "height", "width" ], @@ -70,10 +70,7 @@ $.effects.effect.blind = function( o, next ) { } $.effects.restore( el, props ); $.effects.removeWrapper( el ); - if ( $.isFunction( o.complete ) ) { - o.complete.apply( el[ 0 ], arguments ); - } - next(); + done(); } }); diff --git a/ui/jquery.effects.bounce.js b/ui/jquery.effects.bounce.js index 38171c32e..41ee34f64 100644 --- a/ui/jquery.effects.bounce.js +++ b/ui/jquery.effects.bounce.js @@ -12,7 +12,7 @@ */ (function( $, undefined ) { -$.effects.effect.bounce = function( o, next ) { +$.effects.effect.bounce = function( o, done ) { var el = $( this ), props = [ "position", "top", "bottom", "left", "right", "height", "width" ], @@ -91,16 +91,13 @@ $.effects.effect.bounce = function( o, next ) { el.animate( upAnim, speed, easing ); } - el.queue( function( next ) { + el.queue(function() { if ( hide ) { el.hide(); } $.effects.restore( el, props ); $.effects.removeWrapper( el ); - if ( o.complete ) { - o.complete.apply( el[ 0 ] ); - } - next(); + done(); }); // inject all the animations we just queued to be first in line (after "inprogress") @@ -108,7 +105,7 @@ $.effects.effect.bounce = function( o, next ) { queue.splice.apply( queue, [ 1, 0 ].concat( queue.splice( queuelen, anims + 1 ) ) ); } - next(); + el.dequeue(); }; diff --git a/ui/jquery.effects.clip.js b/ui/jquery.effects.clip.js index 8c5c76e8c..c6eecc671 100644 --- a/ui/jquery.effects.clip.js +++ b/ui/jquery.effects.clip.js @@ -12,7 +12,7 @@ */ (function( $, undefined ) { -$.effects.effect.clip = function( o, next ) { +$.effects.effect.clip = function( o, done ) { // Create element var el = $( this ), props = [ "position", "top", "bottom", "left", "right", "height", "width" ], @@ -57,10 +57,7 @@ $.effects.effect.clip = function( o, next ) { } $.effects.restore( el, props ); $.effects.removeWrapper( el ); - if ( $.isFunction( o.complete ) ) { - o.complete.apply( el[ 0 ], arguments ); - } - el.dequeue(); + done(); } }); diff --git a/ui/jquery.effects.core.js b/ui/jquery.effects.core.js index 87fc5a074..330ddd83c 100644 --- a/ui/jquery.effects.core.js +++ b/ui/jquery.effects.core.js @@ -556,7 +556,19 @@ $.fn.extend({ } function run( next ) { - effectMethod.call( this, args, $.isFunction( next ) ? next : $.noop ); + var elem = this, + complete = args.complete; + + function done() { + if ( $.isFunction( complete ) ) { + complete.call( elem ); + } + if ( $.isFunction( next ) ) { + next(); + } + } + + effectMethod.call( elem, args, done ); } // TODO: remove this check in 2.0, effectMethod will always be true diff --git a/ui/jquery.effects.drop.js b/ui/jquery.effects.drop.js index 2fba49d92..2e7a6ec0f 100644 --- a/ui/jquery.effects.drop.js +++ b/ui/jquery.effects.drop.js @@ -12,7 +12,7 @@ */ (function( $, undefined ) { -$.effects.effect.drop = function( o, next ) { +$.effects.effect.drop = function( o, done ) { var el = $( this ), props = [ "position", "top", "bottom", "left", "right", "opacity", "height", "width" ], @@ -54,8 +54,7 @@ $.effects.effect.drop = function( o, next ) { mode == "hide" && el.hide(); $.effects.restore( el, props ); $.effects.removeWrapper( el ); - $.isFunction( o.complete ) && o.complete.apply( this, arguments ); - next(); + done(); } }); diff --git a/ui/jquery.effects.explode.js b/ui/jquery.effects.explode.js index 0deb2be9f..22f506045 100644 --- a/ui/jquery.effects.explode.js +++ b/ui/jquery.effects.explode.js @@ -12,7 +12,7 @@ */ (function( $, undefined ) { -$.effects.effect.explode = function( o, next ) { +$.effects.effect.explode = function( o, done ) { var rows = o.pieces ? Math.round( Math.sqrt( o.pieces ) ) : 3, cells = rows, @@ -89,10 +89,7 @@ $.effects.effect.explode = function( o, next ) { if ( !show ) { el.hide(); } - if ( $.isFunction( o.complete ) ) { - o.complete.apply( el[ 0 ] ); - } - next(); + done(); } }; diff --git a/ui/jquery.effects.fade.js b/ui/jquery.effects.fade.js index 8f2d956dc..9b79ad3bc 100644 --- a/ui/jquery.effects.fade.js +++ b/ui/jquery.effects.fade.js @@ -12,7 +12,7 @@ */ (function( $, undefined ) { -$.effects.effect.fade = function( o, next ) { +$.effects.effect.fade = function( o, done ) { var el = $( this ), mode = $.effects.setMode( el, o.mode || "toggle" ), hide = mode === "hide"; @@ -28,10 +28,7 @@ $.effects.effect.fade = function( o, next ) { if ( hide ) { el.hide(); } - if ( o.complete ) { - o.complete.call( this ); - } - next(); + done(); } }); }; diff --git a/ui/jquery.effects.fold.js b/ui/jquery.effects.fold.js index b2a02ba78..7c4f583c1 100644 --- a/ui/jquery.effects.fold.js +++ b/ui/jquery.effects.fold.js @@ -12,7 +12,7 @@ */ (function( $, undefined ) { -$.effects.effect.fold = function( o, next ) { +$.effects.effect.fold = function( o, done ) { // Create element var el = $( this ), @@ -66,10 +66,7 @@ $.effects.effect.fold = function( o, next ) { } $.effects.restore( el, props ); $.effects.removeWrapper( el ); - if ( $.isFunction( o.complete ) ) { - o.complete.apply( el[ 0 ], arguments ); - } - next(); + done(); }); }; diff --git a/ui/jquery.effects.highlight.js b/ui/jquery.effects.highlight.js index 709e93a3c..edde845a3 100644 --- a/ui/jquery.effects.highlight.js +++ b/ui/jquery.effects.highlight.js @@ -12,7 +12,7 @@ */ (function( $, undefined ) { -$.effects.effect.highlight = function( o, next ) { +$.effects.effect.highlight = function( o, done ) { var elem = $( this ), props = [ "backgroundImage", "backgroundColor", "opacity" ], mode = $.effects.setMode( elem, o.mode || "show" ), @@ -41,10 +41,7 @@ $.effects.effect.highlight = function( o, next ) { elem.hide(); } $.effects.restore( elem, props ); - if ( $.isFunction( o.complete) ) { - o.complete.apply( this, arguments ); - } - next(); + done(); } }); }; diff --git a/ui/jquery.effects.pulsate.js b/ui/jquery.effects.pulsate.js index bc257f624..7d6e9328f 100644 --- a/ui/jquery.effects.pulsate.js +++ b/ui/jquery.effects.pulsate.js @@ -12,7 +12,7 @@ */ (function( $, undefined ) { -$.effects.effect.pulsate = function( o, next ) { +$.effects.effect.pulsate = function( o, done ) { var elem = $( this ), mode = $.effects.setMode( elem, o.mode || "show" ), show = mode === "show", @@ -44,14 +44,11 @@ $.effects.effect.pulsate = function( o, next ) { opacity: animateTo }, duration, o.easing); - elem.queue( function( next ) { + elem.queue(function() { if ( hide ) { elem.hide(); } - if ( o.complete ) { - o.complete.apply( this ); - } - next(); + done(); }); // We just queued up "anims" animations, we need to put them next in the queue @@ -59,7 +56,7 @@ $.effects.effect.pulsate = function( o, next ) { queue.splice.apply( queue, [ 1, 0 ].concat( queue.splice( queuelen, anims + 1 ) ) ); } - next(); + elem.dequeue(); }; })(jQuery); diff --git a/ui/jquery.effects.scale.js b/ui/jquery.effects.scale.js index 2642c6c1d..000fdee28 100644 --- a/ui/jquery.effects.scale.js +++ b/ui/jquery.effects.scale.js @@ -12,16 +12,7 @@ */ (function( $, undefined ) { -function compFunction( el, complete, next ) { - return function() { - if ( $.isFunction( complete ) ) { - complete.apply( el ); - } - next(); - }; -}; - -$.effects.effect.puff = function( o, next ) { +$.effects.effect.puff = function( o, done ) { var elem = $( this ), mode = $.effects.setMode( elem, o.mode || "hide" ), hide = mode === "hide", @@ -37,7 +28,7 @@ $.effects.effect.puff = function( o, next ) { queue: false, fade: true, mode: mode, - complete: compFunction( this, o.complete, next ), + complete: done, percent: hide ? percent : 100, from: hide ? original @@ -50,7 +41,7 @@ $.effects.effect.puff = function( o, next ) { elem.effect( o ); }; -$.effects.effect.scale = function( o, next ) { +$.effects.effect.scale = function( o, done ) { // Create element var el = $( this ), @@ -73,7 +64,7 @@ $.effects.effect.scale = function( o, next ) { // We are going to pass this effect to the size effect: options.effect = "size"; options.queue = false; - options.complete = compFunction( this, options.complete, next ); + options.complete = done; // Set default origin and restore for show/hide if ( mode != "effect" ) { @@ -105,7 +96,7 @@ $.effects.effect.scale = function( o, next ) { }; -$.effects.effect.size = function( o, next ) { +$.effects.effect.size = function( o, done ) { // Create element var el = $( this ), @@ -302,10 +293,7 @@ $.effects.effect.size = function( o, next ) { } $.effects.removeWrapper( el ); - if ( $.isFunction( o.complete ) ) { - o.complete.apply( this, arguments ); - } - next(); + done(); } }); diff --git a/ui/jquery.effects.shake.js b/ui/jquery.effects.shake.js index 311edced0..7d83a9bb8 100644 --- a/ui/jquery.effects.shake.js +++ b/ui/jquery.effects.shake.js @@ -12,7 +12,7 @@ */ (function( $, undefined ) { -$.effects.effect.shake = function( o, next ) { +$.effects.effect.shake = function( o, done ) { var el = $( this ), props = [ "position", "top", "bottom", "left", "right", "height", "width" ], @@ -53,16 +53,13 @@ $.effects.effect.shake = function( o, next ) { el .animate( animation1, speed, o.easing ) .animate( animation, speed / 2, o.easing ) - .queue( function( next ) { + .queue(function() { if ( mode === "hide" ) { el.hide(); } $.effects.restore( el, props ); $.effects.removeWrapper( el ); - if ( $.isFunction( o.complete ) ) { - o.complete.apply( this, arguments ); - } - next(); + done(); }); // inject all the animations we just queued to be first in line (after "inprogress") @@ -70,7 +67,7 @@ $.effects.effect.shake = function( o, next ) { queue.splice.apply( queue, [ 1, 0 ].concat( queue.splice( queuelen, anims + 1 ) ) ); } - next(); + el.dequeue(); }; diff --git a/ui/jquery.effects.slide.js b/ui/jquery.effects.slide.js index 3be28d91b..de393c779 100644 --- a/ui/jquery.effects.slide.js +++ b/ui/jquery.effects.slide.js @@ -12,7 +12,7 @@ */ (function( $, undefined ) { -$.effects.effect.slide = function( o, next ) { +$.effects.effect.slide = function( o, done ) { // Create element var el = $( this ), @@ -58,10 +58,7 @@ $.effects.effect.slide = function( o, next ) { } $.effects.restore( el, props ); $.effects.removeWrapper( el ); - if ( $.isFunction( o.complete ) ) { - o.complete.apply( this, arguments ); - } - next(); + done(); } }); diff --git a/ui/jquery.effects.transfer.js b/ui/jquery.effects.transfer.js index 0c840c35c..1fa291228 100644 --- a/ui/jquery.effects.transfer.js +++ b/ui/jquery.effects.transfer.js @@ -12,7 +12,7 @@ */ (function( $, undefined ) { -$.effects.effect.transfer = function( o, next ) { +$.effects.effect.transfer = function( o, done ) { var elem = $( this ), target = $( o.to ), targetFixed = target.css( "position" ) === "fixed", @@ -39,10 +39,7 @@ $.effects.effect.transfer = function( o, next ) { }) .animate( animation, o.duration, o.easing, function() { transfer.remove(); - if ( $.isFunction( o.complete ) ) { - o.complete.apply( elem[0], arguments ); - } - next(); + done(); }); }; -- cgit v1.2.3 From 5f0a2f01c4609315ab66158191d3f9bd420f827f Mon Sep 17 00:00:00 2001 From: marcneuwirth Date: Wed, 22 Jun 2011 04:03:55 -0500 Subject: Datepicker: Removing unnessecary typeof check. Fixed #6669 - Datepicker: _selectDate restores focus to non-object --- ui/jquery.ui.datepicker.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'ui') diff --git a/ui/jquery.ui.datepicker.js b/ui/jquery.ui.datepicker.js index ee0a86338..1d3de7740 100644 --- a/ui/jquery.ui.datepicker.js +++ b/ui/jquery.ui.datepicker.js @@ -932,8 +932,7 @@ $.extend(Datepicker.prototype, { else { this._hideDatepicker(); this._lastInput = inst.input[0]; - if (typeof(inst.input[0]) != 'object') - inst.input.focus(); // restore focus + inst.input.focus(); // restore focus this._lastInput = null; } }, -- cgit v1.2.3 From d18cd7ed0f41213aca9f29ae67c360ca6b21abfa Mon Sep 17 00:00:00 2001 From: Corey Frang Date: Thu, 23 Jun 2011 07:22:34 -0500 Subject: Effects.core: Check Visibility vs 'hide' and 'show' modes, finish immediately if neccessary - Fixes #6715 - Hide and Show try to affect hidden and showing elements --- tests/unit/effects/effects_core.js | 12 ++++++++++++ ui/jquery.effects.core.js | 15 +++++++++++---- 2 files changed, 23 insertions(+), 4 deletions(-) (limited to 'ui') diff --git a/tests/unit/effects/effects_core.js b/tests/unit/effects/effects_core.js index fd6b4d378..f78aea304 100644 --- a/tests/unit/effects/effects_core.js +++ b/tests/unit/effects/effects_core.js @@ -19,6 +19,18 @@ var minDuration = 15, module( "effects.core" ); +test( "Immediate Return Conditions", function() { + var hidden = $( "div.hidden" ), + count = 0; + expect( 6 ); + hidden.hide( "blind", function() { + equal( ++count, 1, "Hide on hidden returned immediately" ); + }).show().show( "blind", function() { + equal( ++count, 2, "Show on shown returned immediately" ); + }); + equal( ++count, 3, "Both Functions worked properly" ); +}); + $.each( $.effects.effect, function( effect ) { if ( effect === "transfer" ) { return; diff --git a/ui/jquery.effects.core.js b/ui/jquery.effects.core.js index 330ddd83c..b08cd6cf4 100644 --- a/ui/jquery.effects.core.js +++ b/ui/jquery.effects.core.js @@ -556,19 +556,26 @@ $.fn.extend({ } function run( next ) { - var elem = this, - complete = args.complete; + var elem = $( this ), + complete = args.complete, + mode = args.mode; function done() { if ( $.isFunction( complete ) ) { - complete.call( elem ); + complete.call( elem[0] ); } if ( $.isFunction( next ) ) { next(); } } - effectMethod.call( elem, args, done ); + // if the element is hiddden and mode is hide, + // or element is visible and mode is show + if ( elem.is( ":hidden" ) ? mode === "hide" : mode === "show" ) { + done(); + } else { + effectMethod.call( elem[0], args, done ); + } } // TODO: remove this check in 2.0, effectMethod will always be true -- cgit v1.2.3 From a56aa861b1deb6d71ec74a77647d12d50570ea57 Mon Sep 17 00:00:00 2001 From: marcneuwirth Date: Tue, 28 Jun 2011 10:49:47 -0500 Subject: Datepicker: Added onSelect.apply() call to _doKeyDown method when enter button pushed if onSelect is defined. Fixed #7124 - Datepicker: onSelect does not fire when enter button is pushed --- tests/unit/datepicker/datepicker_events.js | 5 +++++ ui/jquery.ui.datepicker.js | 7 +++++++ 2 files changed, 12 insertions(+) (limited to 'ui') diff --git a/tests/unit/datepicker/datepicker_events.js b/tests/unit/datepicker/datepicker_events.js index bf48c9c8a..c7c16b610 100644 --- a/tests/unit/datepicker/datepicker_events.js +++ b/tests/unit/datepicker/datepicker_events.js @@ -41,6 +41,11 @@ test('events', function() { simulate('keydown', {keyCode: $.simulate.VK_ESC}); equals(selectedDate, $.datepicker.formatDate('mm/dd/yy', date), 'Callback selected date - esc'); + var dateStr = '02/04/2008'; + inp.val(dateStr).datepicker('show'). + simulate('keydown', {keyCode: $.simulate.VK_ENTER}); + equals(dateStr, selectedDate, + 'onSelect is called after enter keydown'); // onChangeMonthYear inp.datepicker('option', {onChangeMonthYear: callback2, onSelect: null}). val('').datepicker('show'); diff --git a/ui/jquery.ui.datepicker.js b/ui/jquery.ui.datepicker.js index 1d3de7740..442621e0d 100644 --- a/ui/jquery.ui.datepicker.js +++ b/ui/jquery.ui.datepicker.js @@ -529,6 +529,13 @@ $.extend(Datepicker.prototype, { $.datepicker._currentClass + ')', inst.dpDiv); if (sel[0]) $.datepicker._selectDay(event.target, inst.selectedMonth, inst.selectedYear, sel[0]); + var onSelect = $.datepicker._get(inst, 'onSelect'); + if (onSelect) { + var dateStr = $.datepicker._formatDate(inst); + + // trigger custom callback + onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]); + } else $.datepicker._hideDatepicker(); return false; // don't submit the form -- cgit v1.2.3 From effdd5d19c534f8445ebafe4212278c4366b0041 Mon Sep 17 00:00:00 2001 From: marcneuwirth Date: Tue, 28 Jun 2011 10:59:08 -0500 Subject: Datepicker: Added onSelect.apply() call to _setDate method if onSelect is defined. Fixed #6264 - Datepicker: onSelect does not fire when setDate is called --- tests/unit/datepicker/datepicker_options.js | 10 ++++++++++ ui/jquery.ui.datepicker.js | 8 ++++++++ 2 files changed, 18 insertions(+) (limited to 'ui') diff --git a/tests/unit/datepicker/datepicker_options.js b/tests/unit/datepicker/datepicker_options.js index a10d1ea45..107609174 100644 --- a/tests/unit/datepicker/datepicker_options.js +++ b/tests/unit/datepicker/datepicker_options.js @@ -469,6 +469,16 @@ test('setDate', function() { var dateAndTimeClone = new Date(2008, 3 - 1, 28, 1, 11, 0); inp.datepicker('setDate', dateAndTimeToSet); equals(dateAndTimeToSet.getTime(), dateAndTimeClone.getTime(), 'Date object passed should not be changed by setDate'); + // Test onSelect callback is executed when using setDate + inp.datepicker('destroy'); + var testDate = null; + inp.datepicker({ + onSelect: function(dateText, inst) { + testDate = new Date(dateText); + } + }); + inp.datepicker('setDate', date2); + equals(date2.getTime(), testDate.getTime(), 'onSelect is called after setDate'); }); test('altField', function() { diff --git a/ui/jquery.ui.datepicker.js b/ui/jquery.ui.datepicker.js index 442621e0d..dda8585fd 100644 --- a/ui/jquery.ui.datepicker.js +++ b/ui/jquery.ui.datepicker.js @@ -1399,6 +1399,14 @@ $.extend(Datepicker.prototype, { if (inst.input) { inst.input.val(clear ? '' : this._formatDate(inst)); } + + var onSelect = this._get(inst, 'onSelect'); + if (onSelect) { + var dateStr = this._formatDate(inst); + + // trigger custom callback + onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]); + } }, /* Retrieve the date(s) directly. */ -- cgit v1.2.3 From 76e2b98a312cfab3d754aac5068ad965e544840c Mon Sep 17 00:00:00 2001 From: Philip Graham Date: Tue, 28 Jun 2011 16:40:28 +0000 Subject: Updated guard against unparsed characters to allow extra characters as long as they are separated from the date by whitespace. This maintains compatibility with timepicker extensions. Fixes #7244 - Datepicker: parseDate() does not throw an exception for long years --- tests/unit/datepicker/datepicker_tickets.js | 14 ++++++++++++-- ui/jquery.ui.datepicker.js | 5 ++++- 2 files changed, 16 insertions(+), 3 deletions(-) (limited to 'ui') diff --git a/tests/unit/datepicker/datepicker_tickets.js b/tests/unit/datepicker/datepicker_tickets.js index d5249f905..10647eb13 100644 --- a/tests/unit/datepicker/datepicker_tickets.js +++ b/tests/unit/datepicker/datepicker_tickets.js @@ -30,12 +30,22 @@ test('Ticket 6827: formatDate day of year calculation is wrong during day lights }); test('Ticket #7244: date parser does not fail when too many numbers are passed into the date function', function() { - expect(1); + var date; try{ - var date = $.datepicker.parseDate('dd/mm/yy', '18/04/19881'); + date = $.datepicker.parseDate('dd/mm/yy', '18/04/19881'); + ok(false, "Did not properly detect an invalid date"); }catch(e){ ok("invalid date detected"); } + + try { + date = $.datepicker.parseDate('dd/mm/yy', '18/04/1988 @ 2:43 pm'); + equal(date.getDate(), 18); + equal(date.getMonth(), 3); + equal(date.getFullYear(), 1988); + } catch(e) { + ok(false, "Did not properly parse date with extra text separated by whitespace"); + } }); })(jQuery); diff --git a/ui/jquery.ui.datepicker.js b/ui/jquery.ui.datepicker.js index 1d3de7740..45107c969 100644 --- a/ui/jquery.ui.datepicker.js +++ b/ui/jquery.ui.datepicker.js @@ -1095,7 +1095,10 @@ $.extend(Datepicker.prototype, { } } if (iValue < value.length){ - throw "Extra/unparsed characters found in date: " + value.substring(iValue); + var extra = value.substr(iValue); + if (!/^\s+/.test(extra)) { + throw "Extra/unparsed characters found in date: " + extra; + } } if (year == -1) year = new Date().getFullYear(); -- cgit v1.2.3 From 5d2b6837612c0cf6195092c9b223a3a982e67fb5 Mon Sep 17 00:00:00 2001 From: kborchers Date: Tue, 5 Jul 2011 10:02:33 -0500 Subject: Menu: Changed left and right methods to collapse and expand respectively. --- ui/jquery.ui.menu.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'ui') diff --git a/ui/jquery.ui.menu.js b/ui/jquery.ui.menu.js index 7dd1a9ce0..b93c95531 100644 --- a/ui/jquery.ui.menu.js +++ b/ui/jquery.ui.menu.js @@ -98,20 +98,20 @@ $.widget( "ui.menu", { event.stopImmediatePropagation(); break; case $.ui.keyCode.LEFT: - if (self.left( event )) { + if (self.collapse( event )) { event.stopImmediatePropagation(); } event.preventDefault(); break; case $.ui.keyCode.RIGHT: - if (self.right( event )) { + if (self.expand( event )) { event.stopImmediatePropagation(); } event.preventDefault(); break; case $.ui.keyCode.ENTER: if ( self.active.children( "a[aria-haspopup='true']" ).length ) { - if ( self.right( event ) ) { + if ( self.expand( event ) ) { event.stopImmediatePropagation(); } } @@ -122,7 +122,7 @@ $.widget( "ui.menu", { event.preventDefault(); break; case $.ui.keyCode.ESCAPE: - if ( self.left( event ) ) { + if ( self.collapse( event ) ) { event.stopImmediatePropagation(); } event.preventDefault(); @@ -344,7 +344,7 @@ $.widget( "ui.menu", { .removeClass( "ui-state-active" ); }, - left: function( event ) { + collapse: function( event ) { var newItem = this.active && this.active.parents("li:not(.ui-menubar-item)").first(); if ( newItem && newItem.length ) { this.active.parent() @@ -356,7 +356,7 @@ $.widget( "ui.menu", { } }, - right: function( event ) { + expand: function( event ) { var self = this, newItem = this.active && this.active.children("ul").children("li").first(); -- cgit v1.2.3 From 40aa8f57151b0a01f33389482e5676725fd50ae7 Mon Sep 17 00:00:00 2001 From: kborchers Date: Thu, 7 Jul 2011 09:29:50 -0500 Subject: Menubar: Added the autoExpand option and modified the default demo to show functionality --- demos/menubar/default.html | 1 + ui/jquery.ui.menubar.js | 23 ++++++++++++++++++++++- 2 files changed, 23 insertions(+), 1 deletion(-) (limited to 'ui') diff --git a/demos/menubar/default.html b/demos/menubar/default.html index 57a3209ce..6bd67b64a 100644 --- a/demos/menubar/default.html +++ b/demos/menubar/default.html @@ -23,6 +23,7 @@ }); $(".menubar-icons").menubar({ + autoExpand: true, menuIcon: true, buttons: true, position: { diff --git a/ui/jquery.ui.menubar.js b/ui/jquery.ui.menubar.js index 39e75924e..3df6d9a53 100644 --- a/ui/jquery.ui.menubar.js +++ b/ui/jquery.ui.menubar.js @@ -20,6 +20,7 @@ $.widget( "ui.menubar", { version: "@VERSION", options: { + autoExpand: false, buttons: false, menuIcon: false, position: { @@ -89,7 +90,11 @@ $.widget( "ui.menubar", { that._close(); return; } - if ( ( that.open && event.type == "mouseenter" ) || event.type == "click" ) { + if ( ( that.open && event.type == "mouseenter" ) || event.type == "click" || that.options.autoExpand ) { + if( that.options.autoExpand ) { + clearTimeout( that.timer ); + } + that._open( event, menu ); } }) @@ -115,6 +120,22 @@ $.widget( "ui.menubar", { .attr( "role", "menuitem" ) .attr( "aria-haspopup", "true" ) .wrapInner( "" ); + + if ( that.options.autoExpand ) { + input.bind( "mouseleave.menubar", function( event ) { + that.timer = setTimeout( function() { + that._close(); + }, 150 ); + }); + menu.bind( "mouseleave.menubar", function( event ) { + that.timer = setTimeout( function() { + that._close(); + }, 150 ); + }) + .bind( "mouseenter.menubar", function( event ) { + clearTimeout( that.timer ); + }); + } // TODO review if these options are a good choice, maybe they can be merged if ( that.options.menuIcon ) { -- cgit v1.2.3 From d5452c0ec27219c3564522b852f83ca9757bed84 Mon Sep 17 00:00:00 2001 From: Benjamin Sterling Date: Mon, 11 Jul 2011 19:49:56 -0400 Subject: Position: Add flip-classes. Fixes #5937 - Position: Add ability to determine if the element is flipped via css --- demos/position/default.html | 12 ++++ tests/unit/position/position_core.js | 81 ++++++++++++++++++++++++ tests/unit/position/position_core_within.js | 95 +++++++++++++++++++++++++++++ ui/jquery.ui.position.js | 18 +++++- 4 files changed, 205 insertions(+), 1 deletion(-) (limited to 'ui') diff --git a/demos/position/default.html b/demos/position/default.html index 87fc8e38a..60b8b39f9 100644 --- a/demos/position/default.html +++ b/demos/position/default.html @@ -30,6 +30,18 @@ background-color: #bcd5e6; text-align: center; } + div.ui-flipped-top { + border-top: 3px solid #000000; + } + div.ui-flipped-bottom { + border-bottom: 3px solid #000000; + } + div.ui-flipped-left { + border-left: 3px solid #000000; + } + div.ui-flipped-right { + border-right: 3px solid #000000; + } select, input { margin-left: 15px; } diff --git a/tests/unit/position/position_core.js b/tests/unit/position/position_core.js index bd8e58612..fd6e643e9 100644 --- a/tests/unit/position/position_core.js +++ b/tests/unit/position/position_core.js @@ -435,6 +435,87 @@ test( "collision: flip, with margin", function() { }, { top: 0, left: 0 }, "right bottom" ); }); +test( "addClass: flipped left", function() { + var elem = $( "#elx" ).position( { + my: "left center", + of: window, + collision: "flip", + at: "right center" + }); + + same( elem.hasClass( 'ui-flipped-left' ), true, 'Has ui-flipped-left class' ); + + elem.position( { + my: "right center", + of: window, + collision: "flip", + at: "left center" + }) + + same( elem.hasClass( 'ui-flipped-left' ), false, 'Removed ui-flipped-left class' ); +}); + +test( "addClass: flipped top", function() { + var elem = $( "#elx" ).position( { + my: "left top", + of: window, + collision: "flip", + at: "right bottom" + }); + + same( elem.hasClass( 'ui-flipped-top' ), true, 'Has ui-flipped-top class' ); + + elem.position( { + my: "left bottom", + of: window, + collision: "flip", + at: "right top" + }); + + same( elem.hasClass( 'ui-flipped-top' ), false, 'Removed ui-flipped-top class' ); +}); + +test( "addClass: flipped right", function() { + var elem = $( "#elx" ).position( { + my: "right center", + of: window, + collision: "flip", + at: "left center" + }); + + same( elem.hasClass( 'ui-flipped-right' ), true, 'Has ui-flipped-right class' ); + + elem.position( { + my: "left center", + of: window, + collision: "flip", + at: "right center" + }); + + same( elem.hasClass( 'ui-flipped-right' ), false, 'Removed ui-flipped-right class' ); + +}); + +test( "addClass: flipped bottom", function() { + var elem = $( "#elx" ).position( { + my: "left bottom", + of: window, + collision: "flip", + at: "right top" + }); + + same( elem.hasClass( 'ui-flipped-bottom' ), true, 'Has ui-flipped-bottom class' ); + + elem.position( { + my: "left top", + of: window, + collision: "flip", + at: "right bottom" + }); + + same( elem.hasClass( 'ui-flipped-bottom' ), false, 'Removed ui-flipped-bottom class' ); +}); + //test( "bug #5280: consistent results (avoid fractional values)", function() { // var wrapper = $( "#bug-5280" ), // elem = wrapper.children(), diff --git a/tests/unit/position/position_core_within.js b/tests/unit/position/position_core_within.js index 567c17192..bfb913335 100644 --- a/tests/unit/position/position_core_within.js +++ b/tests/unit/position/position_core_within.js @@ -438,4 +438,99 @@ test( "collision: flip, with margin", function() { }, { top: addTop + 0, left: addLeft + 0 }, "right bottom" ); }); +test( "addClass: flipped left", function() { + var within = $("#within-container"); + + var elem = $( "#elx" ).position( { + my: "left center", + of: within[0], + within: within, + collision: "flip", + at: "right center" + }); + + same( elem.hasClass( 'ui-flipped-left' ), true, 'Has ui-flipped-left class' ); + + elem.position( { + my: "right center", + of: within[0], + within: within, + collision: "flip", + at: "left center" + }) + + same( elem.hasClass( 'ui-flipped-left' ), false, 'Removed ui-flipped-left class' ); +}); + +test( "addClass: flipped top", function() { + var within = $("#within-container"); + + var elem = $( "#elx" ).position( { + my: "left top", + of: within[0], + within: within, + collision: "flip", + at: "right bottom" + }); + + same( elem.hasClass( 'ui-flipped-top' ), true, 'Has ui-flipped-top class' ); + + elem.position( { + my: "left bottom", + of: within[0], + within: within, + collision: "flip", + at: "right top" + }); + + same( elem.hasClass( 'ui-flipped-top' ), false, 'Removed ui-flipped-top class' ); +}); + +test( "addClass: flipped right", function() { + var within = $("#within-container"); + + var elem = $( "#elx" ).position( { + my: "right center", + of: within[0], + within: within, + collision: "flip", + at: "left center" + }); + + same( elem.hasClass( 'ui-flipped-right' ), true, 'Has ui-flipped-right class' ); + + elem.position( { + my: "left center", + of: within[0], + within: within, + collision: "flip", + at: "right center" + }); + + same( elem.hasClass( 'ui-flipped-right' ), false, 'Removed ui-flipped-right class' ); + +}); + +test( "addClass: flipped bottom", function() { + var within = $("#within-container"); + + var elem = $( "#elx" ).position( { + my: "left bottom", + of: window, + collision: "flip", + at: "right top" + }); + + same( elem.hasClass( 'ui-flipped-bottom' ), true, 'Has ui-flipped-bottom class' ); + + elem.position( { + my: "left top", + of: window, + collision: "flip", + at: "right bottom" + }); + + same( elem.hasClass( 'ui-flipped-bottom' ), false, 'Removed ui-flipped-bottom class' ); +}); + }( jQuery ) ); diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index 3bae0d010..23a98b491 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -204,7 +204,8 @@ $.fn.position = function( options ) { offset: [ atOffset[ 0 ] + myOffset[ 0 ], atOffset [ 1 ] + myOffset[ 1 ] ], my: options.my, at: options.at, - within: within + within: within, + elem : elem }); } }); @@ -265,6 +266,9 @@ $.ui.position = { return; } + data.elem + .removeClass( "ui-flipped-left ui-flipped-right" ); + var within = data.within, win = $( window ), isWindow = $.isWindow( data.within[0] ), @@ -283,6 +287,10 @@ $.ui.position = { -data.targetWidth, offset = -2 * data.offset[ 0 ]; if ( overLeft < 0 || overRight > 0 ) { + + data.elem + .addClass( "ui-flipped-" + ( overLeft < 0 ? "right" : "left" ) ); + position.left += myOffset + atOffset + offset; } }, @@ -290,6 +298,10 @@ $.ui.position = { if ( data.at[ 1 ] === center ) { return; } + + data.elem + .removeClass( "ui-flipped-top ui-flipped-bottom" ); + var within = data.within, win = $( window ), isWindow = $.isWindow( data.within[0] ), @@ -308,6 +320,10 @@ $.ui.position = { -data.targetHeight, offset = -2 * data.offset[ 1 ]; if ( overTop < 0 || overBottom > 0 ) { + + data.elem + .addClass( "ui-flipped-" + ( overTop < 0 ? "bottom" : "top" ) ); + position.top += myOffset + atOffset + offset; } } -- cgit v1.2.3 From 0dc4a487628c674868f786db73db7f0c0c2b02b2 Mon Sep 17 00:00:00 2001 From: Scott González Date: Tue, 12 Jul 2011 09:16:03 -0400 Subject: Dialog: Append the dialog to the body early to make sure styles from the classes get applied. --- ui/jquery.ui.dialog.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'ui') diff --git a/ui/jquery.ui.dialog.js b/ui/jquery.ui.dialog.js index 0eba39842..e9cf67540 100644 --- a/ui/jquery.ui.dialog.js +++ b/ui/jquery.ui.dialog.js @@ -108,7 +108,8 @@ $.widget("ui.dialog", { }) .mousedown(function( event ) { self.moveToTop( false, event ); - }), + }) + .appendTo( "body" ), uiDialogContent = self.element .show() @@ -155,8 +156,6 @@ $.widget("ui.dialog", { self._createButtons( options.buttons ); self._isOpen = false; - uiDialog.appendTo( document.body ); - if ( $.fn.bgiframe ) { uiDialog.bgiframe(); } -- cgit v1.2.3 From 9f5050ee063ed4c9e6191fc58ef151254cf54e76 Mon Sep 17 00:00:00 2001 From: kborchers Date: Sat, 9 Jul 2011 23:30:35 -0500 Subject: Menu: Added close on click outside using technique from popup --- ui/jquery.ui.menu.js | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'ui') diff --git a/ui/jquery.ui.menu.js b/ui/jquery.ui.menu.js index b93c95531..770e0252a 100644 --- a/ui/jquery.ui.menu.js +++ b/ui/jquery.ui.menu.js @@ -170,6 +170,14 @@ $.widget( "ui.menu", { } } }); + + this._bind( document, { + click: function( event ) { + if ( !$( event.target ).closest( ".ui-menu" ).length ) { + this.closeAll(); + } + } + }); }, _destroy: function() { -- cgit v1.2.3 From 06676f46966d43b6ba169363d751074645c8c303 Mon Sep 17 00:00:00 2001 From: Scott González Date: Tue, 12 Jul 2011 20:50:24 -0400 Subject: Accordion: Fixed key handling. --- ui/jquery.ui.accordion.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) (limited to 'ui') diff --git a/ui/jquery.ui.accordion.js b/ui/jquery.ui.accordion.js index 7602ae9bc..acd19c981 100644 --- a/ui/jquery.ui.accordion.js +++ b/ui/jquery.ui.accordion.js @@ -162,6 +162,13 @@ $.widget( "ui.accordion", { return; } + if ( key === "event" ) { + if ( this.options.event ) { + this.headers.unbind( this.options.event + ".accordion", this._eventHandler ); + } + this._setupEvents( value ); + } + this._super( "_setOption", key, value ); // setting collapsible: false while collapsed; open first panel @@ -169,10 +176,6 @@ $.widget( "ui.accordion", { this._activate( 0 ); } - if ( key === "event" ) { - this._setupEvents( value ); - } - if ( key === "icons" ) { this._destroyIcons(); if ( value ) { @@ -294,7 +297,6 @@ $.widget( "ui.accordion", { }, _setupEvents: function( event ) { - this.headers.unbind( ".accordion" ); if ( event ) { this.headers.bind( event.split( " " ).join( ".accordion " ) + ".accordion", $.proxy( this, "_eventHandler" ) ); -- cgit v1.2.3 From 7856b264a297d78762f599611580804b92afd1c0 Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Wed, 13 Jul 2011 11:03:25 -0400 Subject: Menubar: Trigger select event after running all other methods. Allows the select-handler to destroy the widget without errors. --- demos/menubar/default.html | 14 ++++++++------ ui/jquery.ui.menubar.js | 6 +++--- 2 files changed, 11 insertions(+), 9 deletions(-) (limited to 'ui') diff --git a/demos/menubar/default.html b/demos/menubar/default.html index 6bd67b64a..adee4afc9 100644 --- a/demos/menubar/default.html +++ b/demos/menubar/default.html @@ -13,13 +13,17 @@ diff --git a/ui/jquery.ui.menubar.js b/ui/jquery.ui.menubar.js index 3df6d9a53..e28ea3e3c 100644 --- a/ui/jquery.ui.menubar.js +++ b/ui/jquery.ui.menubar.js @@ -49,10 +49,10 @@ $.widget( "ui.menubar", { }, select: function( event, ui ) { ui.item.parents( "ul.ui-menu:last" ).hide(); - that._trigger( "select", event, ui ); that._close(); // TODO what is this targetting? there's probably a better way to access it $(event.target).prev().focus(); + that._trigger( "select", event, ui ); } }) .hide() @@ -94,7 +94,7 @@ $.widget( "ui.menubar", { if( that.options.autoExpand ) { clearTimeout( that.timer ); } - + that._open( event, menu ); } }) @@ -120,7 +120,7 @@ $.widget( "ui.menubar", { .attr( "role", "menuitem" ) .attr( "aria-haspopup", "true" ) .wrapInner( "" ); - + if ( that.options.autoExpand ) { input.bind( "mouseleave.menubar", function( event ) { that.timer = setTimeout( function() { -- cgit v1.2.3 From bc93b3ff080160e4e8e7a035e2e4421d1521e224 Mon Sep 17 00:00:00 2001 From: kborchers Date: Wed, 13 Jul 2011 15:33:17 -0500 Subject: Menu: Remove the ui-state-active class from the siblings of the newly activated menu item without a delay to fix a bug where mouseover of a menu item directly adjacent to the active item would cause a 1 pixel jump due to both items having a class with a border (ui-state-active and ui-state-focus) --- ui/jquery.ui.menu.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'ui') diff --git a/ui/jquery.ui.menu.js b/ui/jquery.ui.menu.js index 770e0252a..5f9de6134 100644 --- a/ui/jquery.ui.menu.js +++ b/ui/jquery.ui.menu.js @@ -58,6 +58,8 @@ $.widget( "ui.menu", { } var target = $( event.target ).closest( ".ui-menu-item" ); if ( target.length ) { + //Remove ui-state-active class from siblings of the newly focused menu item to avoid a jump caused by adjacent elements both having a class with a border + target.siblings().children( ".ui-state-active" ).removeClass( "ui-state-active" ); self.focus( event, target ); } }) -- cgit v1.2.3 From 2803417dc44c6147cee14f46ba0ccfa29218a257 Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Wed, 13 Jul 2011 18:06:16 -0400 Subject: Tooltip: Handle ESCAPE key event to close tooltip when target has focus. --- ui/jquery.ui.tooltip.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) (limited to 'ui') diff --git a/ui/jquery.ui.tooltip.js b/ui/jquery.ui.tooltip.js index f19061bc3..5e32459fc 100644 --- a/ui/jquery.ui.tooltip.js +++ b/ui/jquery.ui.tooltip.js @@ -148,7 +148,14 @@ $.widget( "ui.tooltip", { this._bind( target, { mouseleave: "close", - blur: "close" + blur: "close", + keyup: function( event ) { + if ( event.keyCode == $.ui.keyCode.ESCAPE ) { + var fakeEvent = $.Event(event); + fakeEvent.currentTarget = target[0]; + this.close( fakeEvent, true ); + } + } }); }, @@ -176,7 +183,7 @@ $.widget( "ui.tooltip", { delete that.tooltips[ this.id ]; }); - target.unbind( "mouseleave.tooltip blur.tooltip" ); + target.unbind( "mouseleave.tooltip blur.tooltip keyup.tooltip" ); this._trigger( "close", event, { tooltip: tooltip } ); }, -- cgit v1.2.3 From f41d2378f95bc88165833487a923f90061d3f138 Mon Sep 17 00:00:00 2001 From: kborchers Date: Wed, 13 Jul 2011 18:19:02 -0500 Subject: Menu: Check if submenu is already open and if so, don't call open again. Fixes Firefox bug where a mouseover of an icon adjusted the position of a submenu by a half pixel --- ui/jquery.ui.menu.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'ui') diff --git a/ui/jquery.ui.menu.js b/ui/jquery.ui.menu.js index 5f9de6134..83ff1b949 100644 --- a/ui/jquery.ui.menu.js +++ b/ui/jquery.ui.menu.js @@ -301,6 +301,10 @@ $.widget( "ui.menu", { _startOpening: function( submenu ) { clearTimeout( this.timer ); + + //Don't open if already open fixes a Firefox bug that caused a .5 pixel shift in the submenu position when mousing over the carat icon + if ( submenu.attr( "aria-hidden" ) !== "true" ) return; + var self = this; self.timer = setTimeout( function() { self._close(); -- cgit v1.2.3 From 11d24ee84cc29adf7349b08031146936cf4dd9a9 Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Thu, 14 Jul 2011 11:10:28 -0400 Subject: Menu: Fix formatting and whitespace (was supposed to update previous commit) --- ui/jquery.ui.menu.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) (limited to 'ui') diff --git a/ui/jquery.ui.menu.js b/ui/jquery.ui.menu.js index 83ff1b949..66601ef38 100644 --- a/ui/jquery.ui.menu.js +++ b/ui/jquery.ui.menu.js @@ -301,10 +301,13 @@ $.widget( "ui.menu", { _startOpening: function( submenu ) { clearTimeout( this.timer ); - - //Don't open if already open fixes a Firefox bug that caused a .5 pixel shift in the submenu position when mousing over the carat icon - if ( submenu.attr( "aria-hidden" ) !== "true" ) return; - + + // Don't open if already open fixes a Firefox bug that caused a .5 pixel + // shift in the submenu position when mousing over the carat icon + if ( submenu.attr( "aria-hidden" ) !== "true" ) { + return; + } + var self = this; self.timer = setTimeout( function() { self._close(); -- cgit v1.2.3 From 6d0859f71600c3776913f90a39e9cfe086454e11 Mon Sep 17 00:00:00 2001 From: kborchers Date: Thu, 14 Jul 2011 10:20:47 -0500 Subject: Menu: Changed closeAll to collapseAll and updated in Menubar, also updated a reference to left in Menubar to collapse. --- ui/jquery.ui.menu.js | 8 ++++---- ui/jquery.ui.menubar.js | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) (limited to 'ui') diff --git a/ui/jquery.ui.menu.js b/ui/jquery.ui.menu.js index 66601ef38..f6012de4f 100644 --- a/ui/jquery.ui.menu.js +++ b/ui/jquery.ui.menu.js @@ -176,7 +176,7 @@ $.widget( "ui.menu", { this._bind( document, { click: function( event ) { if ( !$( event.target ).closest( ".ui-menu" ).length ) { - this.closeAll(); + this.collapseAll(); } } }); @@ -336,7 +336,7 @@ $.widget( "ui.menu", { .position( position ); }, - closeAll: function() { + collapseAll: function() { this.element .find( "ul" ) .hide() @@ -466,11 +466,11 @@ $.widget( "ui.menu", { }, select: function( event ) { - // save active reference before closeAll triggers blur + // save active reference before collapseAll triggers blur var ui = { item: this.active }; - this.closeAll(); + this.collapseAll(); this._trigger( "select", event, ui ); } }); diff --git a/ui/jquery.ui.menubar.js b/ui/jquery.ui.menubar.js index e28ea3e3c..fd6d92d6b 100644 --- a/ui/jquery.ui.menubar.js +++ b/ui/jquery.ui.menubar.js @@ -151,7 +151,7 @@ $.widget( "ui.menubar", { }); that._bind( { keydown: function( event ) { - if ( event.keyCode == $.ui.keyCode.ESCAPE && that.active && that.active.menu( "left", event ) !== true ) { + if ( event.keyCode == $.ui.keyCode.ESCAPE && that.active && that.active.menu( "collapse", event ) !== true ) { var active = that.active; that.active.blur(); that._close( event ); @@ -206,7 +206,7 @@ $.widget( "ui.menubar", { if ( !this.active || !this.active.length ) return; this.active - .menu( "closeAll" ) + .menu( "collapseAll" ) .hide() .attr( "aria-hidden", "true" ) .attr( "aria-expanded", "false" ); @@ -226,7 +226,7 @@ $.widget( "ui.menubar", { // TODO refactor, almost the same as _close above, but don't remove tabIndex if ( this.active ) { this.active - .menu( "closeAll" ) + .menu( "collapseAll" ) .hide() .attr( "aria-hidden", "true" ) .attr( "aria-expanded", "false" ); -- cgit v1.2.3 From b8af0d1f7505dd5e56319a11bbd14f1e381b36b9 Mon Sep 17 00:00:00 2001 From: "Richard D. Worth" Date: Tue, 19 Jul 2011 07:59:21 -0400 Subject: Datepicker: show inline datepicker setting explicit display:block instead of using .show() in case it is disconnected. Fixed #7552 - A Datepicker created on a detached div has zero height --- .../visual/datepicker/datepicker_ticket_7552.html | 23 ++++++++++++++++++++++ ui/jquery.ui.datepicker.js | 4 +++- 2 files changed, 26 insertions(+), 1 deletion(-) create mode 100644 tests/visual/datepicker/datepicker_ticket_7552.html (limited to 'ui') diff --git a/tests/visual/datepicker/datepicker_ticket_7552.html b/tests/visual/datepicker/datepicker_ticket_7552.html new file mode 100644 index 000000000..a78a84818 --- /dev/null +++ b/tests/visual/datepicker/datepicker_ticket_7552.html @@ -0,0 +1,23 @@ + + + + + Datepicker Visual Test : Datepicker ticket #7552 + + + + + + + + + + +

    #7552 - A Datepicker created on a detached div has zero height

    + + + diff --git a/ui/jquery.ui.datepicker.js b/ui/jquery.ui.datepicker.js index aeadde4ee..87f9bd950 100644 --- a/ui/jquery.ui.datepicker.js +++ b/ui/jquery.ui.datepicker.js @@ -285,7 +285,9 @@ $.extend(Datepicker.prototype, { if( inst.settings.disabled ) { this._disableDatepicker( target ); } - inst.dpDiv.show(); + // Set display:block in place of inst.dpDiv.show() which won't work on disconnected elements + // http://bugs.jqueryui.com/ticket/7552 - A Datepicker created on a detached div has zero height + inst.dpDiv.css( "display", "block" ); }, /* Pop-up the date picker in a "dialog" box. -- cgit v1.2.3 From 5002bf61855ffe365f759f0b2c484188bfe4e1d6 Mon Sep 17 00:00:00 2001 From: "Richard D. Worth" Date: Tue, 19 Jul 2011 11:03:22 -0400 Subject: Datepicker i18n: Corrected Dutch abbreviation of month name March. Fixed #7566 - Dutch march name translation --- ui/i18n/jquery.ui.datepicker-nl.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui') diff --git a/ui/i18n/jquery.ui.datepicker-nl.js b/ui/i18n/jquery.ui.datepicker-nl.js index 09634088b..781fe6191 100644 --- a/ui/i18n/jquery.ui.datepicker-nl.js +++ b/ui/i18n/jquery.ui.datepicker-nl.js @@ -8,7 +8,7 @@ jQuery(function($){ currentText: 'Vandaag', monthNames: ['januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december'], - monthNamesShort: ['jan', 'feb', 'maa', 'apr', 'mei', 'jun', + monthNamesShort: ['jan', 'feb', 'mrt', 'apr', 'mei', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'dec'], dayNames: ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'], dayNamesShort: ['zon', 'maa', 'din', 'woe', 'don', 'vri', 'zat'], -- cgit v1.2.3 From 8224c675e19bf5cb9ed0b00159dc572715ad7727 Mon Sep 17 00:00:00 2001 From: kborchers Date: Tue, 19 Jul 2011 16:15:59 -0500 Subject: Menu: Passed the original event that causes a blur through collapseAll to blur, then trigger a blur on the menu. Fixes failing unit test provided by @rwaldron which has been included in this commit --- tests/unit/menu/menu_events.js | 21 +++++++++++++++++++++ ui/jquery.ui.menu.js | 12 +++++++----- 2 files changed, 28 insertions(+), 5 deletions(-) (limited to 'ui') diff --git a/tests/unit/menu/menu_events.js b/tests/unit/menu/menu_events.js index a03bec3f6..2f713acf8 100644 --- a/tests/unit/menu/menu_events.js +++ b/tests/unit/menu/menu_events.js @@ -21,4 +21,25 @@ test("handle click on menu", function() { equals( $("#log").html(), "1,3,2,afterclick,1,click,", "Click order not valid."); }); +test( "handle blur: click", function() { + expect( 4 ); + var $menu = $( "#menu1" ).menu({ + focus: function( event, ui ) { + equal( event.originalEvent.type, "click", "focus triggered 'click'" ); + equal( event.type, "menufocus", "focus event.type is 'menufocus'" ); + + }, + blur: function( event, ui ) { + console.log( event, ui ); + equal( event.originalEvent.type, "click", "blur triggered 'click'" ); + equal( event.type, "menublur", "blur event.type is 'menublur'" ); + } + }); + + $menu.find( "li a:first" ).trigger( "click" ); + $( "", { id: "remove"} ).appendTo("body").trigger( "click" ); + + $("#remove").remove(); +}); + })(jQuery); diff --git a/ui/jquery.ui.menu.js b/ui/jquery.ui.menu.js index f6012de4f..4717946f1 100644 --- a/ui/jquery.ui.menu.js +++ b/ui/jquery.ui.menu.js @@ -176,7 +176,7 @@ $.widget( "ui.menu", { this._bind( document, { click: function( event ) { if ( !$( event.target ).closest( ".ui-menu" ).length ) { - this.collapseAll(); + this.collapseAll( event ); } } }); @@ -249,7 +249,7 @@ $.widget( "ui.menu", { var nested, self = this; - this.blur(); + this.blur( event ); if ( this._hasScroll() ) { var borderTop = parseFloat( $.curCSS( this.element[0], "borderTopWidth", true ) ) || 0, @@ -297,6 +297,8 @@ $.widget( "ui.menu", { this.active.children( "a" ).removeClass( "ui-state-focus" ); this.active = null; + + this._trigger( "blur", event, { item: this.active } ); }, _startOpening: function( submenu ) { @@ -336,7 +338,7 @@ $.widget( "ui.menu", { .position( position ); }, - collapseAll: function() { + collapseAll: function( event ) { this.element .find( "ul" ) .hide() @@ -346,7 +348,7 @@ $.widget( "ui.menu", { .find( "a.ui-state-active" ) .removeClass( "ui-state-active" ); - this.blur(); + this.blur( event ); this.activeMenu = this.element; }, @@ -470,7 +472,7 @@ $.widget( "ui.menu", { var ui = { item: this.active }; - this.collapseAll(); + this.collapseAll( event ); this._trigger( "select", event, ui ); } }); -- cgit v1.2.3 From 5f02a8ff1fb7947c40003208886214203b834ce1 Mon Sep 17 00:00:00 2001 From: kborchers Date: Wed, 20 Jul 2011 08:19:01 -0500 Subject: Accordion: Stop current hide animation, jump to last animation and calculate percentages for padding in addition to height. Fixes #3532 - Accordion: Activating a panel during animation fails --- ui/jquery.ui.accordion.js | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) (limited to 'ui') diff --git a/ui/jquery.ui.accordion.js b/ui/jquery.ui.accordion.js index 7602ae9bc..97dad0b8b 100644 --- a/ui/jquery.ui.accordion.js +++ b/ui/jquery.ui.accordion.js @@ -12,6 +12,8 @@ * jquery.ui.widget.js */ (function( $, undefined ) { + +var lastToggle = {}; // TODO: use ui-accordion-header-active class and fix styling $.widget( "ui.accordion", { @@ -37,8 +39,6 @@ $.widget( "ui.accordion", { var self = this, options = self.options; - self.running = false; - self.element.addClass( "ui-accordion ui-widget ui-helper-reset" ); self.headers = self.element.find( options.header ) @@ -319,8 +319,6 @@ $.widget( "ui.accordion", { event.preventDefault(); if ( options.disabled || - // can't switch during an animation - this.running || // click on active header, but not collapsible ( clickedIsActive && !options.collapsible ) || // allow canceling activation @@ -361,7 +359,6 @@ $.widget( "ui.accordion", { toShow = data.newContent, toHide = data.oldContent; - self.running = true; function complete() { self._completed( data ); } @@ -382,6 +379,8 @@ $.widget( "ui.accordion", { animations[ animation ]({ toShow: toShow, toHide: toHide, + prevShow: lastToggle.toShow, + prevHide: lastToggle.toHide, complete: complete, down: toShow.length && ( !toHide.length || ( toShow.index() < toHide.index() ) ) }, additional ); @@ -412,8 +411,6 @@ $.widget( "ui.accordion", { var toShow = data.newContent, toHide = data.oldContent; - this.running = false; - if ( this.options.heightStyle === "content" ) { toShow.add( toHide ).css({ height: "", @@ -435,6 +432,11 @@ $.widget( "ui.accordion", { $.extend( $.ui.accordion, { animations: { slide: function( options, additions ) { + if ( options.prevShow || options.prevHide ) { + options.prevHide.stop( true, true ); + options.toHide = options.prevShow; + } + var showOverflow = options.toShow.css( "overflow" ), hideOverflow = options.toHide.css( "overflow" ), percentDone = 0, @@ -446,6 +448,9 @@ $.extend( $.ui.accordion, { easing: "swing", duration: 300 }, options, additions ); + + lastToggle = options; + if ( !options.toHide.size() ) { originalWidth = options.toShow[0].style.width; options.toShow @@ -502,10 +507,7 @@ $.extend( $.ui.accordion, { .filter( ":visible" ) .animate( hideProps, { step: function( now, settings ) { - // only calculate the percent when animating height - // IE gets very inconsistent results when animating elements - // with small values, which is common for padding - if ( settings.prop == "height" ) { + if ( settings.prop == "height" || settings.prop == "paddingTop" || settings.prop == "paddingBottom" ) { percentDone = ( settings.end - settings.start === 0 ) ? 0 : ( settings.now - settings.start ) / ( settings.end - settings.start ); } -- cgit v1.2.3