Position: Add flip-classes. Fixes #5937 - Position: Add ability to determine if the...

diff --git a/demos/position/default.html b/demos/position/default.html
index 87fc8e38a1f157e566245ca02e160c298912a31b..60b8b39f9358f55d0454979d6b19cf96b7a9a0fe 100644 (file)
--- 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 bd8e586123bec8d8515c5bc9f3203056fd8d34f8..fd6e643e9046c99106491621822c67a75397631b 100644 (file)
--- 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 567c17192534f73c50f202313bba2d643b292743..bfb913335dcb1c3396ad322aea4d1a70626ed5db 100644 (file)
--- 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 3bae0d010b05cf6bce0ce6e4f134ed0236eea48b..23a98b491079ccae8d9125d600bf23caa5860faf 100644 (file)
--- 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;
                        }
                }