Position: Add flip-classes. Fixes #5937 - Position: Add ability to determine if the element is flipped via css

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;
 			}
 		}