Dialog: Move array notation support for position option to backCompat…

… check. Fixes #8824 - Deprecate array notation for position option.
jquery · Nov 26, 2012 · a0310eb · a0310eb
1 parent 0be97bf
commit a0310eb
Show file tree

Hide file tree

Showing 7 changed files with 147 additions and 43 deletions.
diff --git a/build/tasks/testswarm.js b/build/tasks/testswarm.js
@@ -15,6 +15,7 @@ var versions = {
 		"Core": "core/core.html",
 		"Datepicker": "datepicker/datepicker.html",
 		"Dialog": "dialog/dialog.html",
+		"Dialog_deprecated": "dialog/dialog_deprecated.html",
 		"Draggable": "draggable/draggable.html",
 		"Droppable": "droppable/droppable.html",
 		"Effects": "effects/effects.html",

diff --git a/tests/unit/all.html b/tests/unit/all.html
@@ -22,6 +22,7 @@
 			"core/core.html",
 			"datepicker/datepicker.html",
 			"dialog/dialog.html",
+			"dialog/dialog_deprecated.html",
 			"draggable/draggable.html",
 			"droppable/droppable.html",
 			"effects/effects.html",

diff --git a/tests/unit/dialog/dialog.html b/tests/unit/dialog/dialog.html
@@ -5,6 +5,9 @@
 	<title>jQuery UI Dialog Test Suite</title>
 
 	<script src="../../jquery.js"></script>
+	<script>
+	$.uiBackCompat = false;
+	</script>
 	<link rel="stylesheet" href="../../../external/qunit.css">
 	<script src="../../../external/qunit.js"></script>
 	<script src="../../jquery.simulate.js"></script>

diff --git a/tests/unit/dialog/dialog_deprecated.html b/tests/unit/dialog/dialog_deprecated.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Dialog Test Suite</title>
+
+	<script src="../../jquery.js"></script>
+	<link rel="stylesheet" href="../../../external/qunit.css">
+	<script src="../../../external/qunit.js"></script>
+	<script src="../../jquery.simulate.js"></script>
+	<script src="../testsuite.js"></script>
+	<script>
+	TestHelpers.loadResources({
+		css: [ "ui.core", "ui.dialog" ],
+		js: [
+			"ui/jquery.ui.core.js",
+			"ui/jquery.ui.widget.js",
+			"ui/jquery.ui.position.js",
+			"ui/jquery.ui.mouse.js",
+			"ui/jquery.ui.draggable.js",
+			"ui/jquery.ui.resizable.js",
+			"ui/jquery.ui.button.js",
+			"ui/jquery.ui.dialog.js"
+		]
+	});
+	</script>
+
+	<script src="dialog_common.js"></script>
+	<script src="dialog_core.js"></script>
+	<script src="dialog_events.js"></script>
+	<script src="dialog_methods.js"></script>
+	<script src="dialog_options.js"></script>
+	<script src="dialog_test_helpers.js"></script>
+	<script src="dialog_tickets.js"></script>
+	<script src="dialog_deprecated.js"></script>
+
+	<script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery UI Dialog 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 id="qunit-fixture">
+	<div id="dialog1"></div>
+	<div id="dialog2"></div>
+	<div id="form-dialog" title="Profile Information">
+		<fieldset>
+			<legend>Please share some personal information</legend>
+			<label for="favorite-animal">Your favorite animal</label><input id="favorite-animal">
+			<label for="favorite-color">Your favorite color</label><input id="favorite-color">
+		</fieldset>
+		<div role="group" aria-describedby="section2">
+			<p id="section2">Some more (optional) information</p>
+			<label for="favorite-food">Favorite food</label><input id="favorite-food">
+		</div>
+	</div>
+</div>
+</body>
+</html>
diff --git a/tests/unit/dialog/dialog_deprecated.js b/tests/unit/dialog/dialog_deprecated.js
@@ -0,0 +1,23 @@
+module("dialog (deprecated): position opton with array");
+
+if ( !$.ui.ie ) {
+	test("position, right bottom on window w/array", function() {
+		expect( 2 );
+		var el = $('<div></div>').dialog({ position: ["right", "bottom"] }),
+			dialog = el.dialog('widget'),
+			offset = dialog.offset();
+		closeEnough(offset.left, $(window).width() - dialog.outerWidth() + $(window).scrollLeft(), 1);
+		closeEnough(offset.top, $(window).height() - dialog.outerHeight() + $(window).scrollTop(), 1);
+		el.remove();
+	});
+}
+
+test("position, offset from top left w/array", function() {
+	expect( 2 );
+	var el = $('<div></div>').dialog({ position: [10, 10] }),
+		dialog = el.dialog('widget'),
+		offset = dialog.offset();
+	closeEnough(offset.left, 10 + $(window).scrollLeft(), 1);
+	closeEnough(offset.top, 10 + $(window).scrollTop(), 1);
+	el.remove();
+});
diff --git a/tests/unit/dialog/dialog_options.js b/tests/unit/dialog/dialog_options.js
@@ -331,16 +331,6 @@ if ( !$.ui.ie ) {
 		el.remove();
 	});
 
-	test("position, right bottom on window w/array", function() {
-		expect( 2 );
-		var el = $('<div></div>').dialog({ position: ["right", "bottom"] }),
-			dialog = el.dialog('widget'),
-			offset = dialog.offset();
-		closeEnough(offset.left, $(window).width() - dialog.outerWidth() + $(window).scrollLeft(), 1);
-		closeEnough(offset.top, $(window).height() - dialog.outerHeight() + $(window).scrollTop(), 1);
-		el.remove();
-	});
-
 	test("position, right bottom at right bottom via ui.position args", function() {
 		expect( 2 );
 		var el = $('<div></div>').dialog({
@@ -359,16 +349,6 @@ if ( !$.ui.ie ) {
 
 }
 
-test("position, offset from top left w/array", function() {
-	expect( 2 );
-	var el = $('<div></div>').dialog({ position: [10, 10] }),
-		dialog = el.dialog('widget'),
-		offset = dialog.offset();
-	closeEnough(offset.left, 10 + $(window).scrollLeft(), 1);
-	closeEnough(offset.top, 10 + $(window).scrollTop(), 1);
-	el.remove();
-});
-
 test("position, at another element", function() {
 	expect( 4 );
 	var parent = $('<div></div>').css({

diff --git a/ui/jquery.ui.dialog.js b/ui/jquery.ui.dialog.js
@@ -211,7 +211,7 @@ $.widget("ui.dialog", {
 		this.opener = $( this.document[ 0 ].activeElement );
 
 		this._size();
-		this._position( this.options.position );
+		this._position();
 		if ( this.options.modal ) {
 			this.overlay = new $.ui.dialog.overlay( this );
 		}
@@ -500,38 +500,24 @@ $.widget("ui.dialog", {
 		}
 	},
 
-	_position: function( position ) {
-		var myAt = [],
-			offset = [ 0, 0 ],
+	_position: function() {
+		var position = this.options.position,
+			myAt = [],
 			isVisible;
 
 		if ( position ) {
-			// TODO we don't support 1.3.2 anymore, clean this mess up
-			// deep extending converts arrays to objects in jQuery <= 1.3.2 :-(
-	//		if (typeof position == 'string' || $.isArray(position)) {
-	//			myAt = $.isArray(position) ? position : position.split(' ');
-
-			if ( typeof position === "string" || (typeof position === "object" && "0" in position ) ) {
-				myAt = position.split ? position.split( " " ) : [ position[ 0 ], position[ 1 ] ];
+			if ( typeof position === "string" ) {
+				myAt = position.split( " " );
 				if ( myAt.length === 1 ) {
 					myAt[ 1 ] = myAt[ 0 ];
 				}
-
-				$.each( [ "left", "top" ], function( i, offsetPosition ) {
-					if ( +myAt[ i ] === myAt[ i ] ) {
-						offset[ i ] = myAt[ i ];
-						myAt[ i ] = offsetPosition;
-					}
-				});
-
 				position = {
-					my: myAt[0] + (offset[0] < 0 ? offset[0] : "+" + offset[0]) + " " +
-						myAt[1] + (offset[1] < 0 ? offset[1] : "+" + offset[1]),
+					my: myAt[0] + " " + myAt[1],
 					at: myAt.join( " " )
 				};
+				position = $.extend( {}, $.ui.dialog.prototype.options.position, position );
 			}
 
-			position = $.extend( {}, $.ui.dialog.prototype.options.position, position );
 		} else {
 			position = $.ui.dialog.prototype.options.position;
 		}
@@ -610,7 +596,7 @@ $.widget("ui.dialog", {
 		}
 
 		if ( key === "position" ) {
-			this._position( value );
+			this._position();
 		}
 
 		if ( key === "resizable" ) {
@@ -744,4 +730,52 @@ $.extend( $.ui.dialog.overlay.prototype, {
 	}
 });
 
+// DEPRECATED
+if ( $.uiBackCompat !== false ) {
+	// position option with array notation
+	// just override with old implementation
+	$.ui.dialog.prototype._position = function() {
+		var position = this.options.position,
+			myAt = [],
+			offset = [ 0, 0 ],
+			isVisible;
+
+		if ( position ) {
+			if ( typeof position === "string" || (typeof position === "object" && "0" in position ) ) {
+				myAt = position.split ? position.split( " " ) : [ position[ 0 ], position[ 1 ] ];
+				if ( myAt.length === 1 ) {
+					myAt[ 1 ] = myAt[ 0 ];
+				}
+
+				$.each( [ "left", "top" ], function( i, offsetPosition ) {
+					if ( +myAt[ i ] === myAt[ i ] ) {
+						offset[ i ] = myAt[ i ];
+						myAt[ i ] = offsetPosition;
+					}
+				});
+
+				position = {
+					my: myAt[0] + (offset[0] < 0 ? offset[0] : "+" + offset[0]) + " " +
+						myAt[1] + (offset[1] < 0 ? offset[1] : "+" + offset[1]),
+					at: myAt.join( " " )
+				};
+			}
+
+			position = $.extend( {}, $.ui.dialog.prototype.options.position, position );
+		} else {
+			position = $.ui.dialog.prototype.options.position;
+		}
+
+		// need to show the dialog to get the actual offset in the position plugin
+		isVisible = this.uiDialog.is( ":visible" );
+		if ( !isVisible ) {
+			this.uiDialog.show();
+		}
+		this.uiDialog.position( position );
+		if ( !isVisible ) {
+			this.uiDialog.hide();
+		}
+	};
+}
+
 }( jQuery ) );