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

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

@ -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;