diff options
| author | Jörn Zaefferer <joern.zaefferer@gmail.com> | 2011-06-09 16:40:50 +0200 |
|---|---|---|
| committer | Jörn Zaefferer <joern.zaefferer@gmail.com> | 2011-06-09 16:40:50 +0200 |
| commit | 433ed6eecf055eba327ced7e7c0ff0ce9b5fc304 (patch) | |
| tree | bc7b781a57a59def551b6713ef50961b3db36b06 | |
| parent | 3dea8f1786e07b17458f4fecff1dbb8b04f79a2d (diff) | |
| parent | 40c008872154965d7572cda7911d42857e9fc3a9 (diff) | |
| download | jquery-ui-433ed6eecf055eba327ced7e7c0ff0ce9b5fc304.tar.gz jquery-ui-433ed6eecf055eba327ced7e7c0ff0ce9b5fc304.zip | |
Merge remote branch 'davidmurdoch/ticket-5645'
| -rw-r--r-- | tests/unit/position/position.html | 61 | ||||
| -rw-r--r-- | tests/unit/position/position_core.js | 5 | ||||
| -rw-r--r-- | tests/unit/position/position_core_within.js | 441 | ||||
| -rw-r--r-- | tests/visual/position/position.html | 2 | ||||
| -rw-r--r-- | tests/visual/position/position_within.html | 189 | ||||
| -rw-r--r-- | ui/jquery.ui.position.js | 112 |
6 files changed, 748 insertions, 62 deletions
diff --git a/tests/unit/position/position.html b/tests/unit/position/position.html index 4f2e87e08..d71bae497 100644 --- a/tests/unit/position/position.html +++ b/tests/unit/position/position.html @@ -16,47 +16,54 @@ <script src="../testsuite.js"></script> <script src="position_core.js"></script> + <script src="position_core_within.js"></script> <script src="../swarminject.js"></script> </head> <body> - -<h1 id="qunit-header">jQuery UI Position Test Suite</h1> -<h2 id="qunit-banner"></h2> -<div id="qunit-testrunner-toolbar"></div> -<h2 id="qunit-userAgent"></h2> -<ol id="qunit-tests"> -</ol> +<div style="position:relative; z-index:2;"> + <h1 id="qunit-header">jQuery UI Position Test Suite</h1> + <h2 id="qunit-banner"></h2> + <div id="qunit-testrunner-toolbar"></div> + <h2 id="qunit-userAgent"></h2> + <ol id="qunit-tests"> + </ol> +</div> <!-- elements smaller than 10px have a line-height set on them to avoid a bug in IE6 .height() returns the greater of the height and line-height --> -<div id="qunit-fixture" style="top: 0; left: 0;"> - <div id="el1" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div> - <div id="el2" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div> - <div id="parent" style="position: absolute; width: 6px; height: 6px; top: 4px; left: 4px; line-height: 6px;"></div> -</div> - -<div style="position: absolute; top: 0px; left: 0px"> - <div id="elx" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div> - <div id="parentx" style="position: absolute; width: 20px; height: 20px; top: 40px; left: 40px;"></div> +<div id="qunit-fixture" style="top: 0; left: 0; z-index:1"> + <div id="within-container"> + <div id="el1" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div> + <div id="el2" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div> + <div id="parent" style="position: absolute; width: 6px; height: 6px; top: 4px; left: 4px; line-height: 6px;"></div> + + <div style="position: absolute; top: 0px; left: 0px"> + <div id="elx" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div> + <div id="parentx" style="position: absolute; width: 20px; height: 20px; top: 40px; left: 40px;"></div> + </div> + + <div style="position: absolute; top: 200px; left: 100px;"> + <div id="el-offset-100-200" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div> + <div style="position: absolute; top: 100px; left: 50px;"> + <div id="el-two-offset-150-300" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div> + <div id="el-fixed" style="position: fixed; top: 200px; left: 200px;"></div> + </div> + </div> + + <div style="position: absolute; height: 5000px; width: 5000px;"></div> + + <div id="bug-5280" style="height: 30px; width: 201px;"> + <div style="width: 50px; height: 10px;"></div> + </div> + </div> </div> -<div style="position: absolute; top: 200px; left: 100px;"> - <div id="el-offset-100-200" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div> - <div style="position: absolute; top: 100px; left: 50px;"> - <div id="el-two-offset-150-300" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div> - <div id="el-fixed" style="position: fixed; top: 200px; left: 200px;"></div> - </div> -</div> -<div style="position: absolute; height: 5000px; width: 5000px;"></div> -<div id="bug-5280" style="height: 30px; width: 201px;"> - <div style="width: 50px; height: 10px;"></div> -</div> </body> </html> diff --git a/tests/unit/position/position_core.js b/tests/unit/position/position_core.js index dbbda8a3b..bd8e58612 100644 --- a/tests/unit/position/position_core.js +++ b/tests/unit/position/position_core.js @@ -64,7 +64,6 @@ test( "positions", function() { center: 3, right: 6, top: 0, - center: 3, bottom: 6 }; var start = { left: 4, top: 4 }; @@ -316,6 +315,7 @@ test( "collision: fit, window scrolled", function() { if ( scrollTopSupport() ) { var win = $( window ); win.scrollTop( 300 ).scrollLeft( 200 ); + collisionTest({ collision: "fit", at: "left-100 top-100" @@ -324,6 +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 ); } }); @@ -351,7 +352,7 @@ test( "collision: flip, with offset", function() { collisionTest2({ collision: "flip", - at: "left-2 top-3", + at: "left-2 top-3" }, { top: $( window ).height() + 3, left: $( window ).width() + 2 }, "right bottom, negative offset" ); }); diff --git a/tests/unit/position/position_core_within.js b/tests/unit/position/position_core_within.js new file mode 100644 index 000000000..567c17192 --- /dev/null +++ b/tests/unit/position/position_core_within.js @@ -0,0 +1,441 @@ +(function( $ ) { + +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(); + + elOffset.top -= offset.top; + elOffset.left -= offset.left; + + return {top: elOffset.top - offset.top, left: elOffset.left - offset.left }; +}; + +test( "my, at, of", function() { + var within = $("#within-container"); + + $( "#elx" ).position({ + my: "left top", + at: "left top", + of: "#parentx", + collision: "none", + within: within + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "left top, left top" ); + + $( "#elx" ).position({ + my: "left top", + at: "left bottom", + of: "#parentx", + collision: "none", + within: within + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 60, left: addLeft + 40 }, "left top, left bottom" ); + + $( "#elx" ).position({ + my: "left", + at: "bottom", + of: "#parentx", + collision: "none", + within: within + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 55, left: addLeft + 50 }, "left, bottom" ); + + $( "#elx" ).position({ + my: "left foo", + at: "bar baz", + of: "#parentx", + collision: "none", + within: within + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 45, left: addLeft +50 }, "left foo, bar baz" ); +}); + +test( "multiple elements", function() { + var elements = $( "#el1, #el2" ); + var result = elements.position({ + my: "left top", + at: "left bottom", + of: "#parent", + collision: "none", + within: $("#within-container") + }); + + same( result, elements ); + var expected = { top: addTop + 10, left: addLeft + 4 }; + elements.each(function() { + same( $( this ).addOffsets(), expected ); + }); +}); + +test( "positions", function() { + var definitions = []; + var offsets = { + left: 0, + center: 3, + right: 6, + top: 0, + bottom: 6 + }; + var start = { left: 4, top: 4 }; + $.each( [ 0, 1 ], function( my ) { + $.each( [ "top", "center", "bottom" ], function( vindex, vertical ) { + $.each( [ "left", "center", "right" ], function( hindex, horizontal ) { + definitions.push({ + my: my ? horizontal + " " + vertical : "left top", + at: !my ? horizontal + " " + vertical : "left top", + result: { + top: addTop + (my ? start.top - offsets[ vertical ] : start.top + offsets[ vertical ]), + left: addLeft + (my ? start.left - offsets[ horizontal ] : start.left + offsets[ horizontal ]) + } + }); + }); + }); + }); + var el = $( "#el1" ); + $.each( definitions, function( index, definition ) { + el.position({ + my: definition.my, + at: definition.at, + of: "#parent", + collision: "none", + within: $("#within-container") + }); + same( el.addOffsets(), definition.result, + "Position via " + QUnit.jsDump.parse({ my:definition.my, at:definition.at }) ); + }); +}); + +test( "of", function() { + var within = $("#within-container"); + + $( "#elx" ).position({ + my: "left top", + at: "left top", + of: "#parentx", + collision: "none", + within: within + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "selector" ); + + $( "#elx" ).position({ + my: "left top", + at: "left bottom", + of: $( "#parentx"), + collision: "none", + within: within + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 60, left: addLeft + 40 }, "jQuery object" ); + + $( "#elx" ).position({ + my: "left top", + at: "left top", + of: $( "#parentx" )[ 0 ], + collision: "none", + within: within + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "DOM element" ); + + var event = $.extend( $.Event( "someEvent" ), { pageX: 200, pageY: 300 } ); + $( "#elx" ).position({ + my: "left top", + at: "left top", + of: event, + collision: "none", + within: within + }); + same( $( "#elx" ).offset(), { + top: 300, + left: 200 + }, "event - left top, left top" ); + + event = $.extend( $.Event( "someEvent" ), { pageX: 400, pageY: 600 } ); + $( "#elx" ).position({ + my: "left top", + at: "right bottom", + of: event, + collision: "none", + within: within + }); + same( $( "#elx" ).offset(), { + top: 600, + left: 400 + }, "event - left top, right bottom" ); +}); + +test( "within:offsets", function() { + var within = $("#within-container"); + + $( "#elx" ).position({ + my: "left top", + at: "left+10 bottom+10", + of: "#parentx", + collision: "none", + within: within + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 70, left: addLeft + 50 }, "offsets in at" ); + + $( "#elx" ).position({ + my: "left+10 top-10", + at: "left bottom", + of: "#parentx", + collision: "none", + within: within + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 50, left: addLeft + 50 }, "offsets in my" ); + + $( "#elx" ).position({ + my: "left top", + at: "left+50% bottom-10%", + of: "#parentx", + collision: "none", + within: within + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 58, left: addLeft + 50 }, "percentage offsets in at" ); + + $( "#elx" ).position({ + my: "left-30% top+50%", + at: "left bottom", + of: "#parentx", + collision: "none", + within: within + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 65, left: addLeft + 37 }, "percentage offsets in my" ); +}); + +test( "using", function() { + expect( 6 ); + + var within = $("#within-container"); + + var count = 0, + elems = $( "#el1, #el2" ), + expectedPosition = { top: addTop + 40, left: addLeft + 40 }, + originalPosition = elems.position({ + my: "right bottom", + at: "rigt bottom", + of: "#parentx", + collision: "none", + within: within + }).addOffsets(); + + elems.position({ + my: "left top", + at: "left top", + of: "#parentx", + using: function( position ) { + 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 + }); + + elems.each(function() { + same( $( this ).addOffsets(), originalPosition, "elements not moved" ); + }); +}); + +function collisionTest( config, result, msg ) { + var within = $("#within-container"); + + var elem = $( "#elx" ).position( $.extend({ + my: "left top", + at: "right bottom", + of: within[0], + within: within + }, config ) ); + + same( elem.addOffsets(), result, msg ); +} + +function collisionTest2( config, result, msg ) { + collisionTest( $.extend({ + my: "right bottom", + at: "left top" + }, config ), result, msg ); +} + +test( "collision: fit, no offset", function() { + var within = $("#within-container"); + + collisionTest({ + collision: "fit" + }, { top: addTop + within.height() - 10 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 10 - $.position.getScrollInfo( within ).width }, "right bottom" ); + + collisionTest2({ + collision: "fit" + }, { top: addTop + 0, left: addLeft + 0 }, "left top" ); +}); + + +test( "collision: fit, with offset", function() { + var within = $("#within-container"); + + collisionTest({ + collision: "fit", + at: "right+2 bottom+3" + }, { top: addTop + within.height() - 10 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 10 - $.position.getScrollInfo( within ).width }, "right bottom"); + + collisionTest2({ + collision: "fit", + at: "left+2 top+3" + }, { top: addTop + 0, left: addLeft + 0 }, "left top, positive offset" ); + + collisionTest2({ + collision: "fit", + at: "left-2 top-3" + }, { top: addTop + 0, left: addLeft + 0 }, "left top, negative offset" ); +}); + +test( "collision: fit, within scrolled", function() { + if ( scrollTopSupport() ) { + var within = $("#within-container").css({"width": "1000px", "height": "800px", "overflow": "auto"}); + within.scrollTop( 300 ).scrollLeft( 150 ); + + collisionTest({ + collision: "fit", + at: "left-100 top-100" + }, { top: addTop, left: addLeft }, "top left" ); + collisionTest2({ + collision: "fit", + at: "right+100 bottom+100" + }, { 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 ); + } +}); + +test( "collision: flip, no offset", function() { + var within = $("#within-container"); + + collisionTest({ + collision: "flip" + }, { top: addTop + -10, left: addLeft + -10 }, "left top" ); + + collisionTest2({ + collision: "flip" + }, { top: addTop + within.height(), left: addLeft + within.width() }, "right bottom" ); +}); + +test( "collision: flip, with offset", function() { + var within = $("#within-container"); + + collisionTest({ + collision: "flip", + at: "right+2 bottom+3" + }, { top: addTop + -13, left: addLeft + -12 }, "left top, with offset added" ); + + collisionTest2({ + collision: "flip", + at: "left+2 top+3" + }, { top: addTop + within.height() - 3, left: addLeft + within.width() - 2 }, "bottom, positive offset" ); + + collisionTest2({ + collision: "flip", + at: "left-2 top-3" + }, { top: addTop + within.height() + 3, left: addLeft + within.width() + 2 }, "right bottom, negative offset" ); +}); + +test( "collision: none, no offset", function() { + var within = $("#within-container"); + + collisionTest({ + collision: "none" + }, { 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( "collision: none, with offset", function() { + var within = $("#within-container"); + + collisionTest({ + collision: "none", + at: "right+2 bottom+3" + }, { top: addTop + within.height() + 3, left: addLeft + within.width() + 2 }, "right bottom, with offset added" ); + + collisionTest2({ + collision: "none", + at: "left+2 top+3" + }, { top: addTop + -7, left: addLeft + -8 }, "left top, positive offset" ); + + collisionTest2({ + collision: "none", + at: "left-2 top-3" + }, { top: addTop + -13, left: addLeft + -12 }, "left top, negative offset" ); +}); + +test( "collision: fit, with margin", function() { + var within = $("#within-container"); + + $( "#elx" ).css( "margin", 10 ); + + collisionTest({ + collision: "fit" + }, { top: addTop + within.height() - 20 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 20 - $.position.getScrollInfo( within ).width }, "right bottom" ); + + collisionTest2({ + collision: "fit" + }, { top: addTop + 10, left: addLeft + 10 }, "left top" ); + + $( "#elx" ).css({ + "margin-left": 5, + "margin-top": 5 + }); + + collisionTest({ + collision: "fit" + }, { top: addTop + within.height() - 20 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 20 - $.position.getScrollInfo( within ).width }, "right bottom" ); + + collisionTest2({ + collision: "fit" + }, { top: addTop + 5, left: addLeft + 5 }, "left top" ); + + $( "#elx" ).css({ + "margin-right": 15, + "margin-bottom": 15 + }); + + collisionTest({ + collision: "fit" + }, { top: addTop + within.height() - 25 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 25 - $.position.getScrollInfo( within ).width }, "right bottom" ); + + collisionTest2({ + collision: "fit" + }, { top: addTop + 5, left: addLeft + 5 }, "left top" ); +}); + +test( "collision: flip, with margin", function() { + var within = $("#within-container"); + + $( "#elx" ).css( "margin", 10 ); + + collisionTest({ + collision: "flip", + at: "left top" + }, { top: addTop + within.height() - 10, left: addLeft + within.width() - 10 }, "left top" ); + + collisionTest2({ + collision: "flip", + at: "right bottom" + }, { top: addTop + 0, left: addLeft + 0 }, "right bottom" ); +}); + +}( jQuery ) ); diff --git a/tests/visual/position/position.html b/tests/visual/position/position.html index da0ff5170..11932da0e 100644 --- a/tests/visual/position/position.html +++ b/tests/visual/position/position.html @@ -35,7 +35,7 @@ <style> input, .ui-menu { position: absolute; } .ui-menu { width: 200px; } - html, body { width: 99%; height: 99% } + html, body { width: 99%; height: 99%; min-height:700px; min-width:700px; } #container { width: 95%; height: 95%; border: 1px solid black; margin: auto; } </style> </head> diff --git a/tests/visual/position/position_within.html b/tests/visual/position/position_within.html new file mode 100644 index 000000000..ac1009d3e --- /dev/null +++ b/tests/visual/position/position_within.html @@ -0,0 +1,189 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Position Visual Test: Containing Element</title> + + <link rel="stylesheet" href="../visual.css" type="text/css" /> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> + + <script type="text/javascript" src="../../../jquery-1.5.1.js"></script> + <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../../ui/jquery.ui.mouse.js"></script> + <script type="text/javascript" src="../../../ui/jquery.ui.draggable.js"></script> + <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> + + <style> + html, body { + height:100%; + width:100%; + margin:0; + /* force scroll bar*/ + min-height:800px; + min-width:800px; + + /* IE6 needs this */ + text-align:center; + } + .demo-description { + text-align:center; + padding:1.5em; + } + .demo-container { + background:#aaa; + width:80%; + height:80%; + + text-align:left; + margin:0 auto; + position:relative; + padding:10px; + } + .demo { + background:#eee; + overflow:hidden; + position:relative; + height:100%; + /* IE6 needs this */ + width:100%; + } + #parent { + width: 60%; + margin: 10px auto; + padding: 5px; + border: 1px solid #777; + background-color: #fbca93; + text-align: center; + cursor:move; + } + .positionable { + width: 75px; + height: 75px; + position: absolute; + display: block; + right: 0; + bottom: 0; + background-color: #bcd5e6; + text-align: center; + border:solid 2px #555; + cursor:move; + } + select, input { + margin-left: 15px; + } + </style> + <script> + $(function() { + function position( using ) { + $( ".positionable" ).position({ + of: $( "#parent" ), + my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(), + at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(), + offset: $( "#offset" ).val(), + using: using, + within: $( ".demo" ), + collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val() + }); + } + $( ".demo" ).append("<div style='width:5000px;height:5000px;' />").css("overflow","auto"); + + $( ".positionable" ).css( "opacity", 0.5 ); + + $( ":input" ).bind( "click keyup change", function() { position(); } ); + + $( "#parent" ).draggable({ + drag: function() { position(); } + }); + + $( ".positionable" ).draggable({ + drag: function( event, ui ) { + // reset offset before calculating it + $( "#offset" ).val( "0" ); + position(function( result ) { + var demo = $( ".demo" ); + $( "#offset" ).val( "" + ( ui.offset.left - result.left - demo.offset().left + demo.scrollLeft() ) + + " " + ( ui.offset.top - result.top - demo.offset().top + demo.scrollTop() ) ); + position(); + }); + } + }); + + position(); + }); + </script> +</head> +<body> + +<div class="demo-description"> + Use the form controls to configure the positioning, or drag the positioned element to modify its offset. + <br/>Drag around the parent element to see collision detection in action. +</div><!-- End demo-description --> + +<div class="demo-container"> +<div class="demo"> + + <div id="parent"> + <p>This is the position parent element.</p> + </div> + + <div class="positionable"> + <p>to position</p> + </div> + + <div class="positionable" style="width:120px; height: 40px;"> + <p>to position 2</p> + </div> + + <div style="padding: 20px; margin-top: 75px;"> + position... + <div style="padding-bottom: 20px;"> + <b>my:</b> + <select id="my_horizontal"> + <option value="left">left</option> + <option value="center">center</option> + <option value="right">right</option> + </select> + <select id="my_vertical"> + <option value="top">top</option> + <option value="middle">center</option> + <option value="bottom">bottom</option> + </select> + </div> + <div style="padding-bottom: 20px;"> + <b>at:</b> + <select id="at_horizontal"> + <option value="left">left</option> + <option value="center">center</option> + <option value="right">right</option> + </select> + <select id="at_vertical"> + <option value="top">top</option> + <option value="middle">center</option> + <option value="bottom">bottom</option> + </select> + </div> + <div style="padding-bottom: 20px;"> + <b>offset:</b> + <input id="offset" type="text" size="15"/> + </div> + <div style="padding-bottom: 20px;"> + <b>collision:</b> + <select id="collision_horizontal"> + <option value="flip">flip</option> + <option value="fit">fit</option> + <option value="none">none</option> + </select> + <select id="collision_vertical"> + <option value="flip">flip</option> + <option value="fit">fit</option> + <option value="none">none</option> + </select> + </div> + </div> + +</div><!-- End demo --> +</div> + +</body> +</html>
\ No newline at end of file diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index 98b8198e2..5ebff5d16 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -19,6 +19,34 @@ var rhorizontal = /left|center|right/, center = "center", _position = $.fn.position; +$.position = { + scrollbarWidth : function() { + var div = $( "<div style='display:block;width:50px;height:50px;overflow:hidden;'><div style='height:100px;width:auto;'></div></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 = $.position.scrollbarWidth(); + return { height : scrollHeight ? scrollbarWidth : 0, width : scrollWidth ? scrollbarWidth : 0 }; + } +}; + $.fn.position = function( options ) { if ( !options || !options.of ) { return _position.apply( this, arguments ); @@ -28,6 +56,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 = {}, @@ -110,7 +139,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() { @@ -119,10 +148,11 @@ $.fn.position = function( options ) { elemHeight = elem.outerHeight(), marginLeft = parseInt( $.curCSS( this, "marginLeft", true ) ) || 0, marginTop = parseInt( $.curCSS( this, "marginTop", true ) ) || 0, + scrollInfo = $.position.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 ) * @@ -168,7 +198,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,32 +214,40 @@ $.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 within = data.within, + win = $( window ), + isWindow = $.isWindow( data.within[0] ), + 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; // element is wider than window or too far left -> align with left edge - if ( data.collisionWidth > win.width() || overLeft > 0 ) { - position.left = position.left + overLeft; + if ( data.collisionWidth > outerWidth || overLeft > 0 ) { + position.left += overLeft; // too far right -> align with right edge } else if ( overRight > 0 ) { - position.left = position.left - overRight; + position.left -= overRight; // adjust based on position and margin } else { position.left = Math.max( position.left - data.collisionPosition.left, position.left ); } }, top: function( position, data ) { - var win = $( window ), - overTop = win.scrollTop() - data.collisionPosition.top, - overBottom = data.collisionPosition.top + data.collisionHeight - win.height() - win.scrollTop(); + var within = data.within, + win = $( window ), + isWindow = $.isWindow( data.within[0] ), + 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; // element is taller than window or too far up -> align with top edge - if ( data.collisionHeight > win.height() || overTop > 0 ) { - position.top = position.top + overTop; + if ( data.collisionHeight > outerHeight || overTop > 0 ) { + position.top += overTop; // too far down -> align with bottom edge } else if ( overBottom > 0 ) { - position.top = position.top - overBottom; + position.top -= overBottom; // adjust based on position and margin } else { position.top = Math.max( position.top - data.collisionPosition.top, position.top ); @@ -220,8 +259,15 @@ $.ui.position = { if ( data.at[ 0 ] === center ) { return; } - var win = $( window ), - over = data.collisionPosition.left + data.collisionWidth - win.width() - win.scrollLeft(), + + 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, + left = data.my[ 0 ] === "left", myOffset = data.my[ 0 ] === "left" ? -data.elemWidth : data.my[ 0 ] === "right" ? @@ -231,19 +277,23 @@ $.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 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, + top = data.my[ 1 ] === "top", + myOffset = top ? -data.elemHeight : data.my[ 1 ] === "bottom" ? data.elemHeight : @@ -252,11 +302,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 +345,4 @@ if ( $.uiBackCompat !== false ) { }( jQuery ) ); } -}( jQuery ) ); +}( jQuery ) );
\ No newline at end of file |