resizebars

build/css/ox.ui.css

@@ -55,6 +55,38 @@ Bars
     white-space: nowrap;
 }
 
+.OxResizebar.OxHorizontal {
+    width: 100%;
+    height: 5px;
+    margin: -2px 0 -2px 0;
+    cursor: ns-resize;
+}
+.OxResizebar.OxHorizontal > .OxLine {
+    width: 100%;
+    height: 1px;
+}
+.OxResizebar.OxHorizontal > .OxSpace {
+    width: 100%;
+    height: 2px;
+}
+
+.OxResizebar.OxVertical {
+    width: 5px;
+    height: 100%;
+    margin: 0 -2px 0 -2px;
+    cursor: ew-resize;
+}
+.OxResizebar.OxVertical > .OxLine {
+    float: left;
+    width: 1px;
+    height: 100%;
+}
+.OxResizebar.OxVertical > .OxSpace {
+    float: left;
+    width: 2px;
+    height: 100%;
+}
+
 .OxTabbar > .OxButtonGroup {
     margin: 4px 0 0 4px;
 }
@@ -594,6 +626,7 @@ Lists
 .OxTextList .OxPage {
     position: absolute;
 }
+
 /*
 ================================================================================
 Menus
@@ -661,7 +694,6 @@ Menus
     padding: 2px 8px 0 0;
 }
 
-
 .OxMenu {
     position: absolute;
     display: none;
@@ -847,7 +879,6 @@ Panels
     right: 0;
 }
 
-
 .OxPanel {
     overflow: auto;
 }
@@ -860,6 +891,9 @@ Panels
     bottom: 0;
     overflow: hidden;
 }
+.OxSplitPanel > div {
+    position: absolute;
+}
 
 /*
 ================================================================================

build/css/ox.ui.modern.css

@@ -24,6 +24,10 @@ Bars
     background: -webkit-gradient(linear, left top, left bottom, from(rgb(64, 64, 64)), to(rgb(32, 32, 32)));
 }
 
+.OxThemeModern .OxResizebar > .OxLine {
+    background: rgb(48, 48, 48);
+}
+
 /*
 ================================================================================
 Dialog

build/js/ox.js

@@ -1307,6 +1307,7 @@ Ox.limit = function(num, min, max) {
     >>> Ox.limit(2, 1)
     1
     */
+    Ox.print(num, min, max)
     var len = arguments.length;
     max = arguments[len - 1];
     min = len == 3 ? min : 0;

build/js/ox.ui.js

@@ -920,10 +920,10 @@ requires
                     args, ret;
                 if (length == 0) {
                     // options()
-                    ret = self.options;
+                    ret = self.options || options; // this is silly. make sure self.options get populated with options
                 } else if (length == 1 && typeof arguments[0] == "string") {
                     // options(str)
-                    ret = self.options[arguments[0]]
+                    ret = self.options ? self.options[arguments[0]] : options[arguments[0]];
                 } else {
                     // options (str, val) or options({str: val, ...})
                     // translate (str, val) to ({str: val})
@@ -1209,6 +1209,93 @@ requires
         return that;
     };
 
+    /*
+    ----------------------------------------------------------------------------
+    Ox.Resizebar
+    ----------------------------------------------------------------------------
+    */
+
+    Ox.Resizebar = function(options, self) {
+
+        var self = self || {},
+            that = new Ox.Element({}, self)
+                .defaults({
+                    collapsible: true,
+                    edge: "left",
+                    elements: [],
+                    orientation: "horizontal",
+                    parent: null,
+                    resizable: true,
+                    resize: [],
+                    size: 0
+                })
+                .options(options || {}) // fixme: options function should be able to handle undefined, no need for || {}
+                .addClass("OxResizebar Ox" + Ox.toTitleCase(self.options.orientation))
+                /*
+                .attr({
+                    draggable: "true"
+                })
+                .bind("dragstart", function(e) {
+                    // e.originalEvent.dataTransfer.setDragImage($("<div>")[0], 0, 0);
+                })
+                .bind("drag", function(e) {
+                    Ox.print("dragging", e)
+                })
+                */
+                .mousedown(dragStart)
+                .dblclick(toggle)
+                .append($("<div>").addClass("OxSpace"))
+                .append($("<div>").addClass("OxLine"))
+                .append($("<div>").addClass("OxSpace"));
+
+        $.extend(self, {
+            clientXY: self.options.orientation == "horizontal" ? "clientY" : "clientX",
+            ids: $.map(self.options.elements, function(v, i) {
+                return v.options("id");
+            }),
+            length: self.options.resize.length,
+            startPos: 0,
+            startSize: 0
+        });
+
+        function drag(e) {
+            var d = e[self.clientXY] - self.startPos, i;
+            self.options.size = Ox.limit(self.startSize + d, self.options.resize[0], self.options.resize[self.length - 1]);
+            Ox.print("sS", self.startSize, "d", d, "s.o.s", self.options.size)
+            $.each(self.options.resize, function(i, v) {
+                if (self.options.size > v - 8 && self.options.size < v + 8) {
+                    self.options.size = v;
+                    return false;
+                }
+            });
+            that.css("left", self.options.size + "px");
+            self.options.elements[0].css("width", self.options.size + "px");
+            self.options.elements[1].css("left", (self.options.size + 1) + "px");
+            Ox.Event.trigger("resize_" + self.ids[0], self.options.size);
+            Ox.Event.trigger("resize_" + self.ids[1], self.options.elements[1].width());
+        }
+
+        function dragStart(e) {
+            self.startPos = e[self.clientXY];
+            self.startSize = self.options.size;
+            Ox.print("startSize", self.startSize)
+            $window.mousemove(drag);
+            $window.mouseup(dragStop);
+        }
+
+        function dragStop() {
+            $window.unbind("mousemove");
+            $window.unbind("mouseup");
+        }
+
+        function toggle() {
+            Ox.print("toggle");
+        }
+
+        return that;
+
+    };
+
     /*
     ----------------------------------------------------------------------------
     Ox.Tabbar
@@ -4447,6 +4534,7 @@ requires
     */
 
     Ox.SplitPanel = function(options, self) {
+
         var self = self || {},
             that = new Ox.Element({}, self)
                 .defaults({
@@ -4458,48 +4546,72 @@ requires
             length = self.options.elements.length,
             dimensions = oxui.getDimensions(self.options.orientation),
             edges = oxui.getEdges(self.options.orientation);
-        Ox.print(self.options);
+
+        that.$elements = [];
+
         $.each(self.options.elements, function(i, v) {
-            var element = v.element
+            if (Ox.isUndefined(v.collapsible)) {
-                .css({
+                v.collapsible = false;
-                    position: "absolute" // fixme: this can go into a class
+            }
-                })
+            if (Ox.isUndefined(v.resizable)) {
+                v.resizable = false;
+            }
+            that.$elements[i] = v.element
                 .css(edges[2], 0)
                 .css(edges[3], 0);
-            if (v.size != undefined) {
+            !Ox.isUndefined(v.size) && that.$elements[i].css(dimensions[0], v.size + "px");
-                element.css(dimensions[0], v.size + "px");
-            }
             if (i == 0) {
-                element.css(edges[0], 0);
+                that.$elements[i].css(edges[0], 0);
-                if (v.size == undefined) {
+                !Ox.isUndefined(v.size) && that.$elements[i].css(
-                    element.css(
+                    edges[1], (getSize(self.options.elements[1]) + (length == 3 ? getSize(self.options.elements[2]) : 0)) + "px"
-                        edges[1],
+                );
-                        (self.options.elements[1].size + (length == 3 ? self.options.elements[2].size : 0)) + "px"
-                    );
-                }
             } else if (i == 1) {
-                if (self.options.elements[0].size != undefined) {
+                !Ox.isUndefined(self.options.elements[0].size) && that.$elements[i].css(
-                    element.css(edges[0], self.options.elements[0].size + "px");
+                    edges[0], getSize(self.options.elements[0]) + "px"
-                }
+                );
-                if (self.options.elements[0].size == undefined || v.size == undefined) {
+                (!Ox.isUndefined(self.options.elements[0].size) || !Ox.isUndefined(v.size)) && that.$elements[i].css(
-                    element.css(
+                    edges[1], (length == 3 ? getSize(self.options.elements[2]) : 0) + "px"
-                        edges[1],
+                );
-                        (length == 3 ? self.options.elements[2].size : 0) + "px"
-                    );
-                }
             } else {
-                element.css(edges[1], 0);
+                that.$elements[i].css(edges[1], 0);
-                if (v.size == undefined) {
+                !Ox.isUndefined(v.size) && that.$elements[i].css(
-                    element.css(
+                    edges[0], (getSize(self.options.elements[0]) + getSize(self.options.elements[1])) + "px"
-                        edges[0],
+                );
-                        (self.options.elements[0].size + self.options.elements[1].size) + "px"
+            }
-                    );
+        });
+
+        $.each(self.options.elements, function(i, v) {
+            //that.append(element)
+            that.$elements[i].appendTo(that);
+            if (v.collapsible || v.resizable) {
+                Ox.print("v.size", v.size)
+                $resizebar = new Ox.Resizebar({
+                        collapsible: v.collapsible,
+                        edge: i == 0 ? "left" : "right",
+                        elements: i < 2 ?
+                                [that.$elements[0], that.$elements[1]] :
+                                [that.$elements[1], that.$elements[2]],
+                        orientation: self.options.orientation == "horizontal" ? "vertical" : "horizontal",
+                        parent: that,
+                        resizable: v.resizable,
+                        resize: v.resize,
+                        size: v.size
+                    })
+                    .css(edges[i == 0 ? 0 : 1], v.size);
+                if (i == 0) {
+                    $resizebar.appendTo(that);
+                } else {
+                    $resizebar.prependTo(that);
                 }
             }
-            element.appendTo(that);
-            //that.append(element)
         });
+
+        function getSize(element) {
+            return element.size + !Ox.isUndefined(element.resizable);
+        }
+
         return that;
+
     };
 
     Ox.TabPanel = function(options, self) {