sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests Activity

splitpanel update (allow for animation, improve performance)

Browse source
This commit is contained in:
rlx 2011-09-18 21:17:39 +00:00
commit 17d842c64c
7 changed files with 118 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

112
source/Ox.UI/js/Panel/Ox.SplitPanel.js
View file

@ -116,49 +116,68 @@ Ox.SplitPanel = function(options, self) {
return getSize(element) * !element.collapsed;
}
function setSizes(init) {
function setSizes(init, animate) {
self.options.elements.forEach(function(element, i) {
// fixme: maybe we can add a conditional here, since init
// is about elements that are collapsed splitpanels
var edges = [
(init && parseInt(that.$elements[i].css(self.edges[0]))) || 0,
(init && parseInt(that.$elements[i].css(self.edges[1]))) || 0
];
element.size != 'auto' && that.$elements[i].css(self.dimensions[0], element.size + 'px');
var css = {},
edges = [
(init && parseInt(that.$elements[i].css(self.edges[0]))) || 0,
(init && parseInt(that.$elements[i].css(self.edges[1]))) || 0
];
if (element.size != 'auto') {
css[self.dimensions[0]] = element.size + 'px';
}
if (i == 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'
);
css[self.edges[0]] = edges[0] + 'px';
if (element.size == 'auto') {
css[self.edges[1]] = getSize(self.options.elements[1])
+ (
self.length == 3 ? getVisibleSize(self.options.elements[2]) : 0
) + 'px';
}
} else if (i == 1) {
that.$elements[i].css(
self.edges[0], self.options.elements[0].size == 'auto' ? 'auto' :
edges[0] + getSize(self.options.elements[0]) + 'px'
);
(self.options.elements[0].size != 'auto' || element.size != 'auto') && that.$elements[i].css(
self.edges[1], (self.length == 3 ? getSize(self.options.elements[2]) : 0) + 'px'
);
if (self.options.elements[0].size != 'auto') {
css[self.edges[0]] = edges[0] + getSize(self.options.elements[0]) + 'px'
} else {
css[self.edges[0]] = 'auto'; // fixme: why is this needed?
}
css[self.edges[1]] = (
self.length == 3 ? getVisibleSize(self.options.elements[2]) : 0
) + 'px';
} else {
that.$elements[i].css(
self.edges[0], (self.options.elements[1].size == 'auto' || element.size == 'auto') ? 'auto' :
(getVisibleSize(self.options.elements[0]) + getVisibleSize(self.options.elements[1])) + 'px'
);
that.$elements[i].css(
self.edges[1], edges[1] + 'px'
);
if (element.size == 'auto') {
css[self.edges[0]] = getVisibleSize(self.options.elements[0])
+ getSize(self.options.elements[1]) + 'px';
} else {
css[self.edges[0]] = 'auto'; // fixme: why is this needed?
}
css[self.edges[1]] = edges[1] + 'px';
}
if (animate) {
that.$elements[i].animate(css, 250, function() {
i == 0 && Ox.isFunction(animate) && animate();
});
} else {
that.$elements[i].css(css);
}
if (element.collapsible || element.resizable) {
self.$resizebars[i == 0 ? 0 : 1].css(self.edges[i == 0 ? 0 : 1], element.size);
css = {};
css[self.edges[i == 0 ? 0 : 1]] = element.size + 'px'
if (animate) {
self.$resizebars[i == 0 ? 0 : 1].animate(css, 250);
} else {
self.$resizebars[i == 0 ? 0 : 1].css(css);
}
}
});
}
/*@
isCollapsed <f> panel collapsed state
(id) -> <b> id or position of panel, returns collapsed state
id <i> id or position of element
id <i> The element's id or position
@*/
that.isCollapsed = function(id) {
var pos = Ox.isNumber(id) ? id : getPositionById(id);
@ -168,7 +187,7 @@ Ox.SplitPanel = function(options, self) {
/*@
repleaseElement <f> replace panel element
(id, element) -> <f> replace element
id <i> id or position of element
id <s|i> The element's id or position
element <o> new element
@*/
that.replaceElement = function(id, element) {
@ -192,7 +211,7 @@ Ox.SplitPanel = function(options, self) {
};
/*@
repleaseElements <f> replace panel elements
replaceElements <f> replace panel elements
(elements) -> <f> replace elements
elements <a> array of new elements
@*/
@ -223,21 +242,24 @@ Ox.SplitPanel = function(options, self) {
};
/*@
size <f> get or set size
(id) -> <i> get size
(id, size) -> <f> set size
id <i> id or position of panel
size <i> size to set
size <f> Get or set size of an element
(id) -> <i> Returns size
(id, size) -> <o> Sets size, returns SplitPanel
(id, size, animate) -> <o> Sets size with animation, returns SplitPanel
id <i> The element's id or position
size <i> New size, in px
callback <b|f> Callback function (passing true animates w/o callback)
@*/
that.size = function(id, size) {
that.size = function(id, size, callback) {
// one can pass pos instead of id
var pos = Ox.isNumber(id) ? id : getPositionById(id),
element = self.options.elements[pos];
element = self.options.elements[pos],
animate = {};
if (arguments.length == 1) {
return element.element[self.dimensions[0]]() * !that.isCollapsed(pos);
} else {
element.size = size;
setSizes();
element.size = size;
setSizes(false, callback);
return that;
}
};
@ -245,8 +267,9 @@ Ox.SplitPanel = function(options, self) {
/*@
getSize <f> get size of panel
(id) -> <i> id or position of panel, returns size
id <i> id or position of panel
id <s|i> The element's id or position
@*/
// fixme: what is this? there is that.size()
that.getSize = function(id) {
var pos = Ox.isNumber(id) ? id : getPositionById(id),
element = self.options.elements[pos];
@ -254,9 +277,9 @@ Ox.SplitPanel = function(options, self) {
};
/*@
toggle <f> toggle collapsed state of a panel
(id) -> <o> toggle panel
id <i> id or position of panel
toggle <f> Toggles collapsed state of an outer element
(id) -> <o> The SplitPanel
id <s|i> The element's id or position
@*/
that.toggle = function(id) {
// one can pass pos instead of id
@ -267,7 +290,7 @@ Ox.SplitPanel = function(options, self) {
(element.collapsed ? 1 : -1),
animate = {};
animate[self.edges[pos == 0 ? 0 : 1]] = value;
that.animate(animate, 200, function() { // fixme: 250?
that.animate(animate, 250, function() {
element.collapsed = !element.collapsed;
element.element.triggerEvent('toggle', {
'collapsed': element.collapsed
@ -383,7 +406,6 @@ Ox.SplitPanel_ = function(options, self) {
startPos: e[self.clientXY],
startSize: size
};
Ox.print('self.drag', self.drag)
}
}