making dialog resizable
This commit is contained in:
Rolux
parent
41b5fb5408
commit
40f8576c3a
2 changed files with 99 additions and 35 deletions
|
|
@ -100,7 +100,7 @@ Dialog
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
height: 24px;
|
||||
text-align: right;
|
||||
//text-align: right;
|
||||
-moz-border-radius-bottomleft: 8px;
|
||||
-moz-border-radius-bottomright: 8px;
|
||||
-webkit-border-bottom-left-radius: 8px;
|
||||
|
|
@ -110,8 +110,17 @@ Dialog
|
|||
.OxDialog > .OxButtonsBar > .OxButton {
|
||||
margin: 4px 2px 0 2px;
|
||||
}
|
||||
.OxDialog > .OxButtonsBar > .OxButton:last-child {
|
||||
margin-right: 4px;
|
||||
.OxDialog > .OxButtonsBar > .OxButton.OxLeft {
|
||||
float: left;
|
||||
}
|
||||
.OxDialog > .OxButtonsBar > .OxButton.OxRight {
|
||||
float: right;
|
||||
}
|
||||
.OxDialog > .OxButtonsBar > .OxResize {
|
||||
float: right;
|
||||
height: 24px;
|
||||
width: 14px;
|
||||
cursor: se-resize;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -1244,8 +1244,10 @@ requires
|
|||
.defaults({
|
||||
title: "",
|
||||
buttons: [],
|
||||
width: 384,
|
||||
height: 128
|
||||
height: 128,
|
||||
minHeight: 128,
|
||||
minWidth: 192,
|
||||
width: 384
|
||||
})
|
||||
.options(options || {})
|
||||
.addClass("OxDialog")
|
||||
|
|
@ -1256,37 +1258,16 @@ requires
|
|||
height: (self.options.height + 80) + "px"
|
||||
});
|
||||
|
||||
if (!Ox.isArray(self.options.buttons[0])) {
|
||||
self.options.buttons = [[], self.options.buttons];
|
||||
}
|
||||
|
||||
that.$titlebar = new Ox.Bar({
|
||||
size: "medium"
|
||||
})
|
||||
.addClass("OxTitleBar")
|
||||
//.html(self.options.title)
|
||||
.mousedown(function(e) {
|
||||
var offset = that.offset(),
|
||||
//maxLeft = $(document).width() - that.width(),
|
||||
//maxTop = $(document).height() - that.height(),
|
||||
x = e.clientX,
|
||||
y = e.clientY,
|
||||
documentWidth = $document.width();
|
||||
documentHeight = $document.height();
|
||||
$(window).mousemove(function(e) {
|
||||
$("*").css({
|
||||
WebkitUserSelect: "none"
|
||||
});
|
||||
var left = Ox.limit(offset.left - x + e.clientX, 24 - self.options.width, documentWidth - 24),
|
||||
top = Ox.limit(offset.top - y + e.clientY, 24, documentHeight - 24);
|
||||
that.css({
|
||||
left: left + "px",
|
||||
top: top + "px"
|
||||
});
|
||||
});
|
||||
$window.one("mouseup", function() {
|
||||
$window.unbind("mousemove");
|
||||
$("*").css({
|
||||
WebkitUserSelect: "auto"
|
||||
});
|
||||
});
|
||||
})
|
||||
.mousedown(drag)
|
||||
.appendTo(that);
|
||||
that.$title = new Ox.Element()
|
||||
.addClass("OxTitle")
|
||||
|
|
@ -1302,16 +1283,90 @@ requires
|
|||
.addClass("OxButtonsBar")
|
||||
.appendTo(that);
|
||||
that.$buttons = [];
|
||||
$.each(self.options.buttons, function(i, button) {
|
||||
$.each(self.options.buttons[0], function(i, button) {
|
||||
that.$buttons[i] = new Ox.Button({
|
||||
size: "medium",
|
||||
value: button.value
|
||||
}).click(button.click).appendTo(that.$buttonsbar);
|
||||
size: "medium",
|
||||
value: button.value
|
||||
})
|
||||
.addClass("OxLeft")
|
||||
.click(button.click) // fixme: rather use event?
|
||||
.appendTo(that.$buttonsbar);
|
||||
});
|
||||
that.$resize = new Ox.Element()
|
||||
.addClass("OxResize")
|
||||
.mousedown(resize)
|
||||
.appendTo(that.$buttonsbar);
|
||||
$.each(self.options.buttons[1].reverse(), function(i, button) {
|
||||
that.$buttons[that.$buttons.length] = new Ox.Button({
|
||||
size: "medium",
|
||||
value: button.value
|
||||
})
|
||||
.addClass("OxRight")
|
||||
.click(button.click) // fixme: rather use event?
|
||||
.appendTo(that.$buttonsbar);
|
||||
});
|
||||
that.$buttons[0].focus();
|
||||
that.$layer = new Ox.Element()
|
||||
.addClass("OxLayer");
|
||||
|
||||
function drag(event) {
|
||||
var documentWidth = $document.width(),
|
||||
documentHeight = $document.height(),
|
||||
offset = that.offset(),
|
||||
x = event.clientX,
|
||||
y = event.clientY;
|
||||
$window.mousemove(function(event) {
|
||||
$("*").css({
|
||||
WebkitUserSelect: "none"
|
||||
});
|
||||
var left = Ox.limit(
|
||||
offset.left - x + event.clientX,
|
||||
24 - self.options.width, documentWidth - 24
|
||||
),
|
||||
top = Ox.limit(
|
||||
offset.top - y + event.clientY,
|
||||
24, documentHeight - 24
|
||||
);
|
||||
that.css({
|
||||
left: left + "px",
|
||||
top: top + "px"
|
||||
});
|
||||
});
|
||||
$window.one("mouseup", function() {
|
||||
$window.unbind("mousemove");
|
||||
$("*").css({
|
||||
WebkitUserSelect: "auto"
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function resize(event) {
|
||||
var contentHeight = that.$content.height(),
|
||||
documentWidth = $document.width(),
|
||||
documentHeight = $document.height(),
|
||||
elementWidth = that.width(),
|
||||
elementHeight = that.height(),
|
||||
x = event.clientX,
|
||||
y = event.clientY;
|
||||
$window.mousemove(function(event) {
|
||||
var width = Ox.limit(
|
||||
elementWidth - x + event.clientX,
|
||||
self.options.minWidth, documentWidth
|
||||
),
|
||||
height = Ox.limit(
|
||||
elementHeight - y + event.clientY,
|
||||
self.options.minHeight, documentHeight
|
||||
);
|
||||
that.width(width);
|
||||
that.height(height);
|
||||
that.$content.height(height - 80);
|
||||
});
|
||||
$window.one("mouseup", function() {
|
||||
$window.unbind("mousemove");
|
||||
});
|
||||
}
|
||||
|
||||
self.onChange = function(key, value) {
|
||||
if (key == "title") {
|
||||
that.$title.html(value);
|
||||
|
|
|
|||
Loading…
Reference in a new issue