0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

allow for splitpanels to load with elements in collapsed state, and for splitpanel elements to be replaced with splitpanels that have collapsed elements

Browse source
This commit is contained in:
rlx 2011-01-03 18:52:18 +00:00
parent 699ff332fd
commit b96ce6bf98
1 changed files with 44 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
build/js/ox.ui.js
View file

@ -1451,6 +1451,7 @@ requires
}); });
if (self.options.size != size) { if (self.options.size != size) {
that.css(self.edges[self.leftOrTop ? 2 : 3], self.options.size + 'px'); that.css(self.edges[self.leftOrTop ? 2 : 3], self.options.size + 'px');
// fixme: send {size: x}, not x
if (self.leftOrTop) { if (self.leftOrTop) {
self.options.elements[0] self.options.elements[0]
.css(self.dimensions[1], self.options.size + 'px') .css(self.dimensions[1], self.options.size + 'px')
@ -1458,7 +1459,7 @@ requires
self.options.elements[1] self.options.elements[1]
.css(self.edges[2], (self.options.size + 1) + 'px') .css(self.edges[2], (self.options.size + 1) + 'px')
.triggerEvent('resize', self.options.elements[1][self.dimensions[1]]()); .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 { } else {
self.options.elements[0] self.options.elements[0]
.css(self.edges[3], (self.options.size + 1) + 'px') .css(self.edges[3], (self.options.size + 1) + 'px')
@ -1466,7 +1467,7 @@ requires
self.options.elements[1] self.options.elements[1]
.css(self.dimensions[1], self.options.size + 'px') .css(self.dimensions[1], self.options.size + 'px')
.triggerEvent('resize', self.options.size); .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: [] $resizebars: []
}); });
// create elements
that.$elements = []; that.$elements = [];
self.options.elements.forEach(function(v, i) {
$.each(self.options.elements, function(i, v) {
Ox.print('$$$$ v', v)
self.options.elements[i] = $.extend({ self.options.elements[i] = $.extend({
collapsible: false, collapsible: false,
collapsed: false, collapsed: false,
@ -9117,11 +9117,12 @@ requires
size: 'auto' size: 'auto'
}, v); }, v);
that.$elements[i] = v.element that.$elements[i] = v.element
.css(self.edges[2], 0) .css(self.edges[2], (parseInt(v.element.css(self.edges[2])) || 0) + 'px')
.css(self.edges[3], 0); .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) //that.append(element)
//Ox.print('V: ', v, that.$elements[i]) //Ox.print('V: ', v, that.$elements[i])
var index = i == 0 ? 0 : 1; 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) { function getPositionById(id) {
var position = -1; var position = -1;
@ -9162,34 +9169,43 @@ requires
} }
function getSize(element) { 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() { function getVisibleSize(element) {
$.each(self.options.elements, function(i, v) { 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'); v.size != 'auto' && that.$elements[i].css(self.dimensions[0], v.size + 'px');
if (i == 0) { 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( that.$elements[i].css(
self.edges[1], (getSize(self.options.elements[1]) + (length == 3 ? getSize(self.options.elements[2]) : 0)) + 'px' self.edges[1], (getSize(self.options.elements[1]) + (length == 3 ? getSize(self.options.elements[2]) : 0)) + 'px'
); );
} else if (i == 1) { } else if (i == 1) {
that.$elements[i].css( that.$elements[i].css(
self.edges[0], 'auto' self.edges[0], self.options.elements[0].size == 'auto' ? 'auto' :
); 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'
); );
(self.options.elements[0].size != 'auto' || v.size != 'auto') && that.$elements[i].css( (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' self.edges[1], (self.length == 3 ? getSize(self.options.elements[2]) : 0) + 'px'
); );
} else { } else {
that.$elements[i].css( that.$elements[i].css(
self.edges[0], 'auto' 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); that.$elements[i].css(
v.size != 'auto' && that.$elements[i].css( self.edges[1], edges[1] + 'px'
self.edges[0], (getSize(self.options.elements[0]) + getSize(self.options.elements[1])) + 'px'
); );
} }
if (v.collapsible || v.resizable) { 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.replaceWith(element.$element.$element || element.$element);
self.options.elements[pos].element = element; self.options.elements[pos].element = element;
that.$elements[pos] = element that.$elements[pos] = element
.css(self.edges[2], 0) .css(self.edges[2], (parseInt(element.css(self.edges[2])) || 0) + 'px')
.css(self.edges[3], 0); .css(self.edges[3], (parseInt(element.css(self.edges[3])) || 0) + 'px');
setSizes(); setSizes();
self.$resizebars.forEach(function($resizebar, i) { self.$resizebars.forEach(function($resizebar, i) {
$resizebar.options({ $resizebar.options({
@ -9256,12 +9272,9 @@ requires
// one can pass pos instead of id // one can pass pos instead of id
var pos = Ox.isNumber(id) ? id : getPositionById(id), var pos = Ox.isNumber(id) ? id : getPositionById(id),
element = self.options.elements[pos]; element = self.options.elements[pos];
Ox.print('pos', pos, 'size', size);
if (arguments.length == 1) { 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); return element.element[self.dimensions[0]]() * !that.isCollapsed(pos);
} else { } else {
Ox.print('set size', self.options.id, id, size)
element.size = size; element.size = size;
setSizes(); setSizes();
return that; return that;
@ -9271,17 +9284,6 @@ requires
that.toggle = function(id) { that.toggle = function(id) {
// one can pass pos instead of id // one can pass pos instead of id
Ox.print('toggle', 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), var pos = Ox.isNumber(id) ? id : getPositionById(id),
element = self.options.elements[pos], element = self.options.elements[pos],
value = parseInt(that.css(self.edges[pos == 0 ? 0 : 1])) + value = parseInt(that.css(self.edges[pos == 0 ? 0 : 1])) +
@ -9289,7 +9291,7 @@ requires
(element.collapsed ? 1 : -1), (element.collapsed ? 1 : -1),
animate = {}; animate = {};
animate[self.edges[pos == 0 ? 0 : 1]] = value; animate[self.edges[pos == 0 ? 0 : 1]] = value;
Ox.print('animate', animate, 'value', value) Ox.print('animate', animate)
that.animate(animate, 200, function() { that.animate(animate, 200, function() {
element.collapsed = !element.collapsed; element.collapsed = !element.collapsed;
element.element.triggerEvent('toggle', { element.element.triggerEvent('toggle', {
@ -9303,11 +9305,9 @@ requires
}); });
}; };
that.updateSize = function(id, size) { that.updateSize = function(pos, size) {
// this is called from resizebar // this is called from resizebar
// one can pass pos instead of id var pos = pos == 0 ? 0 : self.options.elements.length - 1; // fixme: silly that 0 or 1 is passed, and not pos
Ox.print('updateSize', self.options.id, id, size);
var pos = Ox.isNumber(id) ? id : getPositionById(id);
self.options.elements[pos].size = size; self.options.elements[pos].size = size;
} }
@ -9371,7 +9371,7 @@ requires
that.animate({ that.animate({
opacity: 0 opacity: 0
}, 250, function() { }, 250, function() {
!self.isRunning && clear(); self.isRunning && clear();
self.isRunning = false; self.isRunning = false;
}); });
return that; return that;