jquery / jquery-ui

Source
Commits
Network (165)
Graphs
Tree: 6de9a53

The official jQuery user interface library. — Read more

This URL has Read+Write access

Dialog: allow setting position with ui.position arguments. Fixes #5459 - Dialog: 
expose .position() API

bhollis (author)

Sun Jun 06 15:00:49 -0700 2010

scottgonzalez (committer)

Wed Jul 14 13:29:28 -0700 2010

commit 6de9a5368c3e0523f91f
tree c75cb231c521f029692f
parent d8caa61be66db215f74e

M	tests/unit/dialog/dialog_options.js	103 ••••
M	ui/jquery.ui.dialog.js	86 ••••

tests/unit/dialog/dialog_options.js

View file @ 6de9a53

@@ -244,11 +244,110 @@ test("position, default center on window", function() {
   var el = $('<div></div>').dialog();
   var offset = el.parent().offset();
   // use .position() instead to avoid replicating center-logic?
-  same(offset.left, Math.floor($(window).width() / 2 - el.parent().width() / 2));
-  same(offset.top, Math.floor($(window).height() / 2 - el.parent().height() / 2));
+  same(offset.left, Math.floor($(window).width() / 2 - dialog.outerWidth() / 2) + $(window).scrollLeft());
+  same(offset.top, Math.floor($(window).height() / 2 - dialog.outerHeight() / 2) + $(window).scrollTop());
   el.remove();
 });
 
+test("position, top on window", function() {
+  var el = $('<div></div>').dialog({ position: "top" });
+  var dialog = el.closest('.ui-dialog');
+  var offset = dialog.offset();
+  same(offset.left, Math.floor($(window).width() / 2 - dialog.outerWidth() / 2));
+  same(offset.top, $(window).scrollTop());
+  el.remove();
+});
+
+test("position, left on window", function() {
+  var el = $('<div></div>').dialog({ position: "left" });
+  var dialog = el.closest('.ui-dialog');
+  var offset = dialog.offset();
+  same(offset.left, 0);
+  same(offset.top, Math.floor($(window).height() / 2 - dialog.outerHeight() / 2) + $(window).scrollTop());
+  el.remove();
+});
+
+test("position, right bottom on window", function() {
+  var el = $('<div></div>').dialog({ position: "right bottom" });
+  var dialog = el.closest('.ui-dialog');
+  var offset = dialog.offset();
+  same(offset.left, $(window).width() - dialog.outerWidth());
+  same(offset.top, $(window).height() - dialog.outerHeight() + $(window).scrollTop());
+  el.remove();
+});
+
+test("position, right bottom on window w/array", function() {
+  var el = $('<div></div>').dialog({ position: ["right", "bottom"] });
+  var dialog = el.closest('.ui-dialog');
+  var offset = dialog.offset();
+  same(offset.left, $(window).width() - dialog.outerWidth());
+  same(offset.top, $(window).height() - dialog.outerHeight() + $(window).scrollTop());
+  el.remove();
+});
+
+test("position, offset from top left w/array", function() {
+  var el = $('<div></div>').dialog({ position: [10, 10] });
+  var dialog = el.closest('.ui-dialog');
+  var offset = dialog.offset();
+  same(offset.left, 10);
+  same(offset.top, 10 + $(window).scrollTop());
+  el.remove();
+});
+
+test("position, right bottom at right bottom via ui.position args", function() {
+  var el = $('<div></div>').dialog({
+    position: {
+      my: "right bottom",
+      at: "right bottom"
+    }
+  });
+
+  var dialog = el.closest('.ui-dialog');
+  var offset = dialog.offset();
+
+  same(offset.left, $(window).width() - dialog.outerWidth());
+  same(offset.top, $(window).height() - dialog.outerHeight() + $(window).scrollTop());
+  el.remove();
+});
+
+test("position, at another element", function() {
+  var parent = $('<div></div>').css({
+    position: 'absolute',
+    top: 400,
+    left: 600,
+    height: 10,
+    width: 10
+  });
+
+  var el = $('<div></div>').dialog({
+    position: {
+      my: "left top",
+      at: "top left",
+      of: parent
+    }
+  });
+
+  var dialog = el.closest('.ui-dialog');
+  var offset = dialog.offset();
+  var parentOffset = parent.offset();
+
+  same(offset.left, parentOffset.left);
+  same(offset.top, parentOffset.top);
+
+  el.dialog('option', 'position', {
+      my: "left top",
+      at: "right bottom",
+      of: parent
+  });
+
+  same(offset.left, parentOffset.left + parent.outerWidth());
+  same(offset.top, parentOffset.top + parent.outerHeight());
+
+  el.remove();
+  parent.remove();
+});
+
+
 test("position, others", function() {
   ok(false, 'missing test - untested code is broken code');
 });

ui/jquery.ui.dialog.js

View file @ 6de9a53

@@ -39,7 +39,19 @@ $.widget("ui.dialog", {
     minHeight: 150,
     minWidth: 150,
     modal: false,
-    position: 'center',
+    position: {
+      my: 'center',
+      at: 'center',
+      of: window,
+      collision: 'fit',
+      // ensure that the titlebar is never outside the document
+      using: function(pos) {
+        var topOffset = $(this).css(pos).offset().top;
+        if (topOffset < 0) {
+          $(this).css('top', pos.top - topOffset);
+        }
+      }
+    },
     resizable: true,
     show: null,
     stack: true,
@@ -449,45 +461,40 @@ $.widget("ui.dialog", {
     }
   },
 
+
   _position: function(position) {
     var myAt = [],
       offset = [0, 0],
       isVisible;
 
-    position = position || $.ui.dialog.prototype.options.position;
-
-    // deep extending converts arrays to objects in jQuery <= 1.3.2 :-(
-//    if (typeof position == 'string' || $.isArray(position)) {
-//      myAt = $.isArray(position) ? position : position.split(' ');
+    if (position) {
+      // 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 (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;
+      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];
         }
-      });
-    } else if (typeof position === 'object') {
-      if ('left' in position) {
-        myAt[0] = 'left';
-        offset[0] = position.left;
-      } else if ('right' in position) {
-        myAt[0] = 'right';
-        offset[0] = -position.right;
-      }
 
-      if ('top' in position) {
-        myAt[1] = 'top';
-        offset[1] = position.top;
-      } else if ('bottom' in position) {
-        myAt[1] = 'bottom';
-        offset[1] = -position.bottom;
-      }
+        $.each(['left', 'top'], function(i, offsetPosition) {
+          if (+myAt[i] === myAt[i]) {
+            offset[i] = myAt[i];
+            myAt[i] = offsetPosition;
+          }
+        });
+        
+        position = {
+          my: myAt.join(" "),
+          at: myAt.join(" "),
+          offset: offset.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
@@ -498,20 +505,7 @@ $.widget("ui.dialog", {
     this.uiDialog
       // workaround for jQuery bug #5781 http://dev.jquery.com/ticket/5781
       .css({ top: 0, left: 0 })
-      .position({
-        my: myAt.join(' '),
-        at: myAt.join(' '),
-        offset: offset.join(' '),
-        of: window,
-        collision: 'fit',
-        // ensure that the titlebar is never outside the document
-        using: function(pos) {
-          var topOffset = $(this).css(pos).offset().top;
-          if (topOffset < 0) {
-            $(this).css('top', pos.top - topOffset);
-          }
-        }
-      });
+      .position(position);
     if (!isVisible) {
       this.uiDialog.hide();
     }

0 notes on commit `6de9a53` Show line notes below

Please log in to comment.

...	...	@@ -244,11 +244,110 @@ test("position, default center on window", function() {
244	244	var el = $('<div></div>').dialog();
245	245	var offset = el.parent().offset();
246	246	// use .position() instead to avoid replicating center-logic?
247		- same(offset.left, Math.floor($(window).width() / 2 - el.parent().width() / 2));
248		- same(offset.top, Math.floor($(window).height() / 2 - el.parent().height() / 2));
	247	+ same(offset.left, Math.floor($(window).width() / 2 - dialog.outerWidth() / 2) + $(window).scrollLeft());
	248	+ same(offset.top, Math.floor($(window).height() / 2 - dialog.outerHeight() / 2) + $(window).scrollTop());
249	249	el.remove();
250	250	});
251	251
	252	+test("position, top on window", function() {
	253	+ var el = $('<div></div>').dialog({ position: "top" });
	254	+ var dialog = el.closest('.ui-dialog');
	255	+ var offset = dialog.offset();
	256	+ same(offset.left, Math.floor($(window).width() / 2 - dialog.outerWidth() / 2));
	257	+ same(offset.top, $(window).scrollTop());
	258	+ el.remove();
	259	+});
	260	+
	261	+test("position, left on window", function() {
	262	+ var el = $('<div></div>').dialog({ position: "left" });
	263	+ var dialog = el.closest('.ui-dialog');
	264	+ var offset = dialog.offset();
	265	+ same(offset.left, 0);
	266	+ same(offset.top, Math.floor($(window).height() / 2 - dialog.outerHeight() / 2) + $(window).scrollTop());
	267	+ el.remove();
	268	+});
	269	+
	270	+test("position, right bottom on window", function() {
	271	+ var el = $('<div></div>').dialog({ position: "right bottom" });
	272	+ var dialog = el.closest('.ui-dialog');
	273	+ var offset = dialog.offset();
	274	+ same(offset.left, $(window).width() - dialog.outerWidth());
	275	+ same(offset.top, $(window).height() - dialog.outerHeight() + $(window).scrollTop());
	276	+ el.remove();
	277	+});
	278	+
	279	+test("position, right bottom on window w/array", function() {
	280	+ var el = $('<div></div>').dialog({ position: ["right", "bottom"] });
	281	+ var dialog = el.closest('.ui-dialog');
	282	+ var offset = dialog.offset();
	283	+ same(offset.left, $(window).width() - dialog.outerWidth());
	284	+ same(offset.top, $(window).height() - dialog.outerHeight() + $(window).scrollTop());
	285	+ el.remove();
	286	+});
	287	+
	288	+test("position, offset from top left w/array", function() {
	289	+ var el = $('<div></div>').dialog({ position: [10, 10] });
	290	+ var dialog = el.closest('.ui-dialog');
	291	+ var offset = dialog.offset();
	292	+ same(offset.left, 10);
	293	+ same(offset.top, 10 + $(window).scrollTop());
	294	+ el.remove();
	295	+});
	296	+
	297	+test("position, right bottom at right bottom via ui.position args", function() {
	298	+ var el = $('<div></div>').dialog({
	299	+ position: {
	300	+ my: "right bottom",
	301	+ at: "right bottom"
	302	+ }
	303	+ });
	304	+
	305	+ var dialog = el.closest('.ui-dialog');
	306	+ var offset = dialog.offset();
	307	+
	308	+ same(offset.left, $(window).width() - dialog.outerWidth());
	309	+ same(offset.top, $(window).height() - dialog.outerHeight() + $(window).scrollTop());
	310	+ el.remove();
	311	+});
	312	+
	313	+test("position, at another element", function() {
	314	+ var parent = $('<div></div>').css({
	315	+ position: 'absolute',
	316	+ top: 400,
	317	+ left: 600,
	318	+ height: 10,
	319	+ width: 10
	320	+ });
	321	+
	322	+ var el = $('<div></div>').dialog({
	323	+ position: {
	324	+ my: "left top",
	325	+ at: "top left",
	326	+ of: parent
	327	+ }
	328	+ });
	329	+
	330	+ var dialog = el.closest('.ui-dialog');
	331	+ var offset = dialog.offset();
	332	+ var parentOffset = parent.offset();
	333	+
	334	+ same(offset.left, parentOffset.left);
	335	+ same(offset.top, parentOffset.top);
	336	+
	337	+ el.dialog('option', 'position', {
	338	+ my: "left top",
	339	+ at: "right bottom",
	340	+ of: parent
	341	+ });
	342	+
	343	+ same(offset.left, parentOffset.left + parent.outerWidth());
	344	+ same(offset.top, parentOffset.top + parent.outerHeight());
	345	+
	346	+ el.remove();
	347	+ parent.remove();
	348	+});
	349	+
	350	+
252	351	test("position, others", function() {
253	352	ok(false, 'missing test - untested code is broken code');
254	353	});

...	...	@@ -39,7 +39,19 @@ $.widget("ui.dialog", {
39	39	minHeight: 150,
40	40	minWidth: 150,
41	41	modal: false,
42		- position: 'center',
	42	+ position: {
	43	+ my: 'center',
	44	+ at: 'center',
	45	+ of: window,
	46	+ collision: 'fit',
	47	+ // ensure that the titlebar is never outside the document
	48	+ using: function(pos) {
	49	+ var topOffset = $(this).css(pos).offset().top;
	50	+ if (topOffset < 0) {
	51	+ $(this).css('top', pos.top - topOffset);
	52	+ }
	53	+ }
	54	+ },
43	55	resizable: true,
44	56	show: null,
45	57	stack: true,
...	...	@@ -449,45 +461,40 @@ $.widget("ui.dialog", {
449	461	}
450	462	},
451	463
	464	+
452	465	_position: function(position) {
453	466	var myAt = [],
454	467	offset = [0, 0],
455	468	isVisible;
456	469
457		- position = position \|\| $.ui.dialog.prototype.options.position;
458		-
459		- // deep extending converts arrays to objects in jQuery <= 1.3.2 :-(
460		-// if (typeof position == 'string' \|\| $.isArray(position)) {
461		-// myAt = $.isArray(position) ? position : position.split(' ');
	470	+ if (position) {
	471	+ // deep extending converts arrays to objects in jQuery <= 1.3.2 :-(
	472	+ // if (typeof position == 'string' \|\| $.isArray(position)) {
	473	+ // myAt = $.isArray(position) ? position : position.split(' ');
462	474
463		- if (typeof position === 'string' \|\| (typeof position === 'object' && '0' in position)) {
464		- myAt = position.split ? position.split(' ') : [position[0], position[1]];
465		- if (myAt.length === 1) {
466		- myAt[1] = myAt[0];
467		- }
468		-
469		- $.each(['left', 'top'], function(i, offsetPosition) {
470		- if (+myAt[i] === myAt[i]) {
471		- offset[i] = myAt[i];
472		- myAt[i] = offsetPosition;
	475	+ if (typeof position === 'string' \|\| (typeof position === 'object' && '0' in position)) {
	476	+ myAt = position.split ? position.split(' ') : [position[0], position[1]];
	477	+ if (myAt.length === 1) {
	478	+ myAt[1] = myAt[0];
473	479	}
474		- });
475		- } else if (typeof position === 'object') {
476		- if ('left' in position) {
477		- myAt[0] = 'left';
478		- offset[0] = position.left;
479		- } else if ('right' in position) {
480		- myAt[0] = 'right';
481		- offset[0] = -position.right;
482		- }
483	480
484		- if ('top' in position) {
485		- myAt[1] = 'top';
486		- offset[1] = position.top;
487		- } else if ('bottom' in position) {
488		- myAt[1] = 'bottom';
489		- offset[1] = -position.bottom;
490		- }
	481	+ $.each(['left', 'top'], function(i, offsetPosition) {
	482	+ if (+myAt[i] === myAt[i]) {
	483	+ offset[i] = myAt[i];
	484	+ myAt[i] = offsetPosition;
	485	+ }
	486	+ });
	487	+
	488	+ position = {
	489	+ my: myAt.join(" "),
	490	+ at: myAt.join(" "),
	491	+ offset: offset.join(" ")
	492	+ };
	493	+ }
	494	+
	495	+ position = $.extend({}, $.ui.dialog.prototype.options.position, position);
	496	+ } else {
	497	+ position = $.ui.dialog.prototype.options.position;
491	498	}
492	499
493	500	// need to show the dialog to get the actual offset in the position plugin
...	...	@@ -498,20 +505,7 @@ $.widget("ui.dialog", {
498	505	this.uiDialog
499	506	// workaround for jQuery bug #5781 http://dev.jquery.com/ticket/5781
500	507	.css({ top: 0, left: 0 })
501		- .position({
502		- my: myAt.join(' '),
503		- at: myAt.join(' '),
504		- offset: offset.join(' '),
505		- of: window,
506		- collision: 'fit',
507		- // ensure that the titlebar is never outside the document
508		- using: function(pos) {
509		- var topOffset = $(this).css(pos).offset().top;
510		- if (topOffset < 0) {
511		- $(this).css('top', pos.top - topOffset);
512		- }
513		- }
514		- });
	508	+ .position(position);
515	509	if (!isVisible) {
516	510	this.uiDialog.hide();
517	511	}

jquery / jquery-ui

0 notes on commit 6de9a53 Show line notes below

0 notes on commit `6de9a53` Show line notes below