From b6c01e27ea2aab44a8005d02a90b30fa1636a02c Mon Sep 17 00:00:00 2001 From: Rolux Date: Sun, 21 Feb 2010 10:50:39 +0530 Subject: [PATCH] making dialog resizable --- build/css/ox.ui.css | 15 ++++-- build/js/ox.ui.js | 119 ++++++++++++++++++++++++++++++++------------ 2 files changed, 99 insertions(+), 35 deletions(-) diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css index d747ed2..cc2ff29 100644 --- a/build/css/ox.ui.css +++ b/build/css/ox.ui.css @@ -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; } /* diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 24e205d..a0cde86 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -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);