library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ben Hollis 2010-06-06 15:00:49 -07:00 committed by Scott González
parent d8caa61be6
commit 6de9a5368c
2 changed files with 141 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
tests/unit/dialog/dialog_options.js
View File

@ -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');
});

60
ui/jquery.ui.dialog.js vendored
View File

@ -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,16 +461,16 @@ $.widget("ui.dialog", {
}
},
_position: function(position) {
var myAt = [],
offset = [0, 0],
isVisible;
position = position || $.ui.dialog.prototype.options.position;
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' || $.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]];
@ -472,22 +484,17 @@ $.widget("ui.dialog", {
myAt[i] = offsetPosition;
}
});
} 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;
position = {
my: myAt.join(" "),
at: myAt.join(" "),
offset: offset.join(" ")
};
}
if ('top' in position) {
myAt[1] = 'top';
offset[1] = position.top;
} else if ('bottom' in position) {
myAt[1] = 'bottom';
offset[1] = -position.bottom;
}
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();
}