making dialog resizable

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 {
+.OxDialog > .OxButtonsBar > .OxButton.OxLeft {
-    margin-right: 4px;
+    float: left;
+}
+.OxDialog > .OxButtonsBar > .OxButton.OxRight {
+    float: right;
+}
+.OxDialog > .OxButtonsBar > .OxResize {
+    float: right;
+    height: 24px;
+    width: 14px;
+    cursor: se-resize;
 }
 
 /*

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) {
+            .mousedown(drag)
-                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"
-                    });
-                });
-            })
             .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);
+                })
+                .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);