diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css index c6f7e2f9..f74d1bfc 100644 --- a/build/css/ox.ui.css +++ b/build/css/ox.ui.css @@ -55,6 +55,9 @@ Bars white-space: nowrap; } +.OxResizebar { + z-index: 2; +} .OxResizebar.OxHorizontal { width: 100%; height: 5px; diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 8d9d96af..e7801179 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -827,8 +827,8 @@ requires $element = that.$element; } */ - // why does this not work? - // ret = that.$element[v].apply(this, arguments); + // why does this not work? (that?) + // ret = that.$element[fn].apply(this, arguments); if (length == 0) { ret = that.$element[fn](); } else if (length == 1) { @@ -1272,12 +1272,11 @@ requires self.startSize = self.options.size; Ox.print("startSize", self.startSize) $window.mousemove(drag); - $window.mouseup(dragStop); + $window.one("mouseup", dragStop); } function dragStop() { $window.unbind("mousemove"); - $window.unbind("mouseup"); } function toggle() { @@ -2790,11 +2789,7 @@ requires self.$items[pos].addClass("OxSelected"); } Ox.print("addToSelection") - that.triggerEvent("select", { - ids: $.map(self.selected, function(v, i) { - return self.ids[v]; - }) - }); + triggerSelectEvent(); } } @@ -2838,11 +2833,7 @@ requires if (!Ox.isUndefined(self.$items[pos])) { self.$items[pos].removeClass("OxSelected"); } - that.triggerEvent("select", { - ids: $.map(self.selected, function(v, i) { - return self.ids[v]; - }) - }); + triggerSelectEvent(); } } @@ -3129,6 +3120,24 @@ requires } } + function triggerSelectEvent() { + var ids = $.map(self.selected, function(v, i) { + return self.ids[v]; + }); + setTimeout(function() { + var ids_ = $.map(self.selected, function(v, i) { + return self.ids[v]; + }); + if (ids.length == ids_.length && (ids.length == 0 || ids[0] == ids_[0])) { + that.triggerEvent("select", { + ids: ids + }); + } else { + Ox.print("select event not triggered after timeout") + } + }, 100); + } + function unloadPage(page) { if (page < 0 || page >= self.pages) { return; @@ -4606,13 +4615,25 @@ requires ---------------------------------------------------------------------------- Ox.SplitPanel options: - orientation: "" "horizontal" or "vertical" - elements: [{ - element, Ox Element - size: 0, size in px - resizable: false resizable or not - }] - + elements: [{ array of one, two or three elements + collapsible: false, collapsible or not (only for outer elements) + collapsed: false, collapsed or not (only for collapsible elements) + element: {}, OxElement (if any element is resizable or + collapsible, all OxElements must have an id) + resizable: false, resizable or not (only for outer elements) + resize: [], array of sizes (only for resizable elements, + first value is min, last value is max, + other values are "snappy" points in between) + size: 0 size in px (one element must have no size) + }], + orientation: "" "horizontal" or "vertical" + methods: + isCollapsed(id) element is collapsed or not + resize(id, size) resize element to size px + toggle(id) collapse or expand element + events: + resize + toggle ---------------------------------------------------------------------------- */ @@ -4625,51 +4646,52 @@ requires orientation: "horizontal" }) .options(options || {}) - .addClass("OxSplitPanel"), - length = self.options.elements.length, - dimensions = oxui.getDimensions(self.options.orientation), - edges = oxui.getEdges(self.options.orientation); + .addClass("OxSplitPanel"); + + $.extend(self, { + dimensions: oxui.getDimensions(self.options.orientation), + edges: oxui.getEdges(self.options.orientation), + length: self.options.elements.length + }); that.$elements = []; $.each(self.options.elements, function(i, v) { - if (Ox.isUndefined(v.collapsible)) { - v.collapsible = false; - } - if (Ox.isUndefined(v.resizable)) { - v.resizable = false; - } + self.options.elements[i] = $.extend({ + collapsible: false, + collapsed: false, + resizable: false, + resize: [], + size: "auto" + }, v); that.$elements[i] = v.element - .css(edges[2], 0) - .css(edges[3], 0); + .css(self.edges[2], 0) + .css(self.edges[3], 0); }); setSizes(); $.each(self.options.elements, function(i, v) { //that.append(element) + Ox.print("V: ", v) that.$elements[i].appendTo(that); // fixme: that.$content if (v.collapsible || v.resizable) { Ox.print("v.size", v.size) - $resizebar = new Ox.Resizebar({ + var $resizebar = new Ox.Resizebar({ collapsible: v.collapsible, - edge: self.options.orientation == "horizontal" ? - (i == 0 ? "left" : "right") : (i == 0 ? "top" : "bottom"), + edge: self.edges[i == 0 ? 0 : 1], elements: i < 2 ? [that.$elements[0], that.$elements[1]] : [that.$elements[1], that.$elements[2]], + id: v.element.options("id"), orientation: self.options.orientation == "horizontal" ? "vertical" : "horizontal", parent: that, // fixme: that.$content 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); // fixme: that.$content - } + .css(self.edges[i == 0 ? 0 : 1], v.size); + $resizebar[i == 0 ? "insertAfter" : "insertBefore"](that.$elements[i]); } }); @@ -4677,7 +4699,7 @@ requires var position = -1; $.each(self.options.elements, function(i, element) { if (element.element.options("id") == id) { - position = 1; + position = i; return false; } }); @@ -4690,28 +4712,32 @@ requires function setSizes() { $.each(self.options.elements, function(i, v) { - !Ox.isUndefined(v.size) && that.$elements[i].css(dimensions[0], v.size + "px"); + v.size != "auto" && that.$elements[i].css(self.dimensions[0], v.size + "px"); if (i == 0) { - that.$elements[i].css(edges[0], 0); - !Ox.isUndefined(v.size) && that.$elements[i].css( - edges[1], (getSize(self.options.elements[1]) + (length == 3 ? getSize(self.options.elements[2]) : 0)) + "px" + that.$elements[i].css(self.edges[0], 0); + v.size != "auto" && that.$elements[i].css( + self.edges[1], (getSize(self.options.elements[1]) + (length == 3 ? getSize(self.options.elements[2]) : 0)) + "px" ); } else if (i == 1) { - !Ox.isUndefined(self.options.elements[0].size) && that.$elements[i].css( - edges[0], getSize(self.options.elements[0]) + "px" + self.options.elements[0].size != "auto" && that.$elements[i].css( + self.edges[0], getSize(self.options.elements[0]) + "px" ); - (!Ox.isUndefined(self.options.elements[0].size) || !Ox.isUndefined(v.size)) && that.$elements[i].css( - edges[1], (length == 3 ? getSize(self.options.elements[2]) : 0) + "px" + (self.options.elements[0].size != "auto" || v.size != "auto") && that.$elements[i].css( + self.edges[1], (self.length == 3 ? getSize(self.options.elements[2]) : 0) + "px" ); } else { - that.$elements[i].css(edges[1], 0); - !Ox.isUndefined(v.size) && that.$elements[i].css( - edges[0], (getSize(self.options.elements[0]) + getSize(self.options.elements[1])) + "px" + that.$elements[i].css(self.edges[1], 0); + v.size != "auto" && that.$elements[i].css( + self.edges[0], (getSize(self.options.elements[0]) + getSize(self.options.elements[1])) + "px" ); } }); } + that.isCollapsed = function(id) { + return self.options.elements[getPositionById(id)].collapsed; + }; + that.resize = function(id, size) { // one can pass pos instead of id var pos = Ox.isNumber(id) ? id : getPositionById(id); @@ -4721,6 +4747,30 @@ requires return that; }; + that.toggle = function(id) { + Ox.print("toggle", id); + /* + // something like this is needed to load in collapsed state + if (Ox.isUndefined(self.options.position)) { + self.options.position = parseInt(self.options.parent.css(self.options.edge)) + + (self.options.collapsed ? self.options.size : 0); + } + var size = self.options.position - + (self.options.collapsed ? 0 : self.options.size), + animate = {}; + Ox.print("s.o.e", self.options.edge); + */ + var pos = getPositionById(id), + size = self.options.elements[pos].collapsed ? 0 : self.options.elements[pos].size, + animate = {}; + animate[self.edges[pos == 0 ? 0 : 1]] = size; + self.options.parent.animate(animate, 200, function() { + var i = (self.options.edge == "left" || self.options.edge == "top") ? 1 : 0; + Ox.Event.trigger("resize_" + id, self.options.elements[i][self.dimensions[1]]()); + self.options.elements[pos].collapsed = !self.options.elements[pos].collapsed; + }); + }; + return that; };