From b96ce6bf981181ca8cf6b7fc78acfb79b4f23ca4 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Mon, 3 Jan 2011 18:52:18 +0000 Subject: [PATCH] allow for splitpanels to load with elements in collapsed state, and for splitpanel elements to be replaced with splitpanels that have collapsed elements --- build/js/ox.ui.js | 88 +++++++++++++++++++++++------------------------ 1 file changed, 44 insertions(+), 44 deletions(-) diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 12b4ebeb..c06edf93 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -1451,6 +1451,7 @@ requires }); if (self.options.size != size) { that.css(self.edges[self.leftOrTop ? 2 : 3], self.options.size + 'px'); + // fixme: send {size: x}, not x if (self.leftOrTop) { self.options.elements[0] .css(self.dimensions[1], self.options.size + 'px') @@ -1458,7 +1459,7 @@ requires self.options.elements[1] .css(self.edges[2], (self.options.size + 1) + 'px') .triggerEvent('resize', self.options.elements[1][self.dimensions[1]]()); - self.options.parent.updateSize(self.ids[0], self.options.size); + self.options.parent.updateSize(0, self.options.size); } else { self.options.elements[0] .css(self.edges[3], (self.options.size + 1) + 'px') @@ -1466,7 +1467,7 @@ requires self.options.elements[1] .css(self.dimensions[1], self.options.size + 'px') .triggerEvent('resize', self.options.size); - self.options.parent.updateSize(self.ids[1], self.options.size); // fixme: listen to event instead? + self.options.parent.updateSize(1, self.options.size); // fixme: listen to event instead? } } } @@ -9105,10 +9106,9 @@ requires $resizebars: [] }); + // create elements that.$elements = []; - - $.each(self.options.elements, function(i, v) { - Ox.print('$$$$ v', v) + self.options.elements.forEach(function(v, i) { self.options.elements[i] = $.extend({ collapsible: false, collapsed: false, @@ -9117,11 +9117,12 @@ requires size: 'auto' }, v); that.$elements[i] = v.element - .css(self.edges[2], 0) - .css(self.edges[3], 0); + .css(self.edges[2], (parseInt(v.element.css(self.edges[2])) || 0) + 'px') + .css(self.edges[3], (parseInt(v.element.css(self.edges[3])) || 0) + 'px'); }); - $.each(self.options.elements, function(i, v) { + // create resizebars + self.options.elements.forEach(function(v, i) { //that.append(element) //Ox.print('V: ', v, that.$elements[i]) var index = i == 0 ? 0 : 1; @@ -9147,7 +9148,13 @@ requires } }); - setSizes(); + self.options.elements.forEach(function(v, i) { + v.collapsed && that.css( + self.edges[i == 0 ? 0 : 1], -self.options.elements[i].size + 'px' + ); + }); + + setSizes(true); function getPositionById(id) { var position = -1; @@ -9162,34 +9169,43 @@ requires } function getSize(element) { - return element.size + element.resizable; + return element.size + (element.collapsible || element.resizable); + //return (element.size + (element.collapsible || element.resizable)) * !element.collapsed; } - function setSizes() { - $.each(self.options.elements, function(i, v) { + function getVisibleSize(element) { + return getSize(element) * !element.collapsed; + } + + function setSizes(init) { + self.options.elements.forEach(function(v, i) { + var edges = [ + (init && parseInt(that.$elements[i].css(self.edges[0]))) || 0, + (init && parseInt(that.$elements[i].css(self.edges[1]))) || 0 + ]; v.size != 'auto' && that.$elements[i].css(self.dimensions[0], v.size + 'px'); if (i == 0) { - that.$elements[i].css(self.edges[0], 0); + that.$elements[i].css( + self.edges[0], edges[0] + 'px' + ); 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) { that.$elements[i].css( - self.edges[0], 'auto' - ); - self.options.elements[0].size != 'auto' && that.$elements[i].css( - self.edges[0], getSize(self.options.elements[0]) + 'px' + self.edges[0], self.options.elements[0].size == 'auto' ? 'auto' : + edges[0] + getSize(self.options.elements[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( - self.edges[0], 'auto' + that.$elements[i].css( + self.edges[0], v.size == 'auto' ? 'auto' : + (getVisibleSize(self.options.elements[0]) + getVisibleSize(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.$elements[i].css( + self.edges[1], edges[1] + 'px' ); } if (v.collapsible || v.resizable) { @@ -9211,8 +9227,8 @@ requires self.options.elements[pos].element.replaceWith(element.$element.$element || element.$element); self.options.elements[pos].element = element; that.$elements[pos] = element - .css(self.edges[2], 0) - .css(self.edges[3], 0); + .css(self.edges[2], (parseInt(element.css(self.edges[2])) || 0) + 'px') + .css(self.edges[3], (parseInt(element.css(self.edges[3])) || 0) + 'px'); setSizes(); self.$resizebars.forEach(function($resizebar, i) { $resizebar.options({ @@ -9256,12 +9272,9 @@ requires // one can pass pos instead of id var pos = Ox.isNumber(id) ? id : getPositionById(id), element = self.options.elements[pos]; - Ox.print('pos', pos, 'size', size); if (arguments.length == 1) { - Ox.print('get size', self.options.id, id, element.element[self.dimensions[0]]() * !that.isCollapsed(pos)) return element.element[self.dimensions[0]]() * !that.isCollapsed(pos); } else { - Ox.print('set size', self.options.id, id, size) element.size = size; setSizes(); return that; @@ -9271,17 +9284,6 @@ requires that.toggle = function(id) { // one can pass pos instead of 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 = Ox.isNumber(id) ? id : getPositionById(id), element = self.options.elements[pos], value = parseInt(that.css(self.edges[pos == 0 ? 0 : 1])) + @@ -9289,7 +9291,7 @@ requires (element.collapsed ? 1 : -1), animate = {}; animate[self.edges[pos == 0 ? 0 : 1]] = value; - Ox.print('animate', animate, 'value', value) + Ox.print('animate', animate) that.animate(animate, 200, function() { element.collapsed = !element.collapsed; element.element.triggerEvent('toggle', { @@ -9303,11 +9305,9 @@ requires }); }; - that.updateSize = function(id, size) { + that.updateSize = function(pos, size) { // this is called from resizebar - // one can pass pos instead of id - Ox.print('updateSize', self.options.id, id, size); - var pos = Ox.isNumber(id) ? id : getPositionById(id); + var pos = pos == 0 ? 0 : self.options.elements.length - 1; // fixme: silly that 0 or 1 is passed, and not pos self.options.elements[pos].size = size; } @@ -9371,7 +9371,7 @@ requires that.animate({ opacity: 0 }, 250, function() { - !self.isRunning && clear(); + self.isRunning && clear(); self.isRunning = false; }); return that;