diff options
| -rw-r--r-- | demos/position/default.html | 12 | ||||
| -rw-r--r-- | tests/unit/position/position_core.js | 81 | ||||
| -rw-r--r-- | tests/unit/position/position_core_within.js | 95 | ||||
| -rw-r--r-- | ui/jquery.ui.position.js | 18 |
4 files changed, 205 insertions, 1 deletions
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; } } |