CAMP/oxjstmp
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

making dialog resizable

Browse Source
This commit is contained in:
Rolux 2010-02-21 10:50:39 +05:30
parent a98e4cc144
commit b6c01e27ea
2 changed files with 99 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
build/css/ox.ui.css
View File

@ -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;
}
/*

119
build/js/ox.ui.js
View File

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