cleanup Ox.SplitPanel
This commit is contained in:
parent
caa897c698
commit
d87effda96
1 changed files with 83 additions and 65 deletions
|
@ -6,6 +6,7 @@ Ox.SplitPanel <f> SpliPanel Object
|
||||||
elements <[o]|[]> Array of two or three element objects
|
elements <[o]|[]> Array of two or three element objects
|
||||||
collapsible <b|false> If true, can be collapsed (if outer element)
|
collapsible <b|false> If true, can be collapsed (if outer element)
|
||||||
collapsed <b|false> If true, is collapsed (if collapsible)
|
collapsed <b|false> If true, is collapsed (if collapsible)
|
||||||
|
defaultSize <n|s|auto> Default size in px (restorable via reset)
|
||||||
element <o> Any Ox.Element
|
element <o> Any Ox.Element
|
||||||
If any element is collapsible or resizable, all elements must
|
If any element is collapsible or resizable, all elements must
|
||||||
have an id.
|
have an id.
|
||||||
|
@ -25,9 +26,10 @@ Ox.SplitPanel <f> SpliPanel Object
|
||||||
Ox.SplitPanel = function(options, self) {
|
Ox.SplitPanel = function(options, self) {
|
||||||
|
|
||||||
// fixme: doubleclick on resizebar should reset to initial size
|
// fixme: doubleclick on resizebar should reset to initial size
|
||||||
|
// (but anyclick would become singleclick, i.e. less responsive)
|
||||||
|
|
||||||
self = self || {};
|
self = self || {};
|
||||||
var that = Ox.Element({}, self) // fixme: Container?
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
elements: [],
|
elements: [],
|
||||||
orientation: 'horizontal'
|
orientation: 'horizontal'
|
||||||
|
@ -48,8 +50,8 @@ Ox.SplitPanel = function(options, self) {
|
||||||
});
|
});
|
||||||
|
|
||||||
// create elements
|
// create elements
|
||||||
that.$elements = [];
|
// fixme: attach to self instead?
|
||||||
self.options.elements.forEach(function(element, i) {
|
that.$elements = Ox.map(self.options.elements, function(element, i) {
|
||||||
self.options.elements[i] = Ox.extend({
|
self.options.elements[i] = Ox.extend({
|
||||||
collapsible: false,
|
collapsible: false,
|
||||||
collapsed: false,
|
collapsed: false,
|
||||||
|
@ -57,9 +59,11 @@ Ox.SplitPanel = function(options, self) {
|
||||||
resize: [],
|
resize: [],
|
||||||
size: 'auto'
|
size: 'auto'
|
||||||
}, element);
|
}, element);
|
||||||
that.$elements[i] = element.element
|
// top and bottom (horizontal) or left and right (vertical)
|
||||||
.css(self.edges[2], (parseInt(element.element.css(self.edges[2]), 10) || 0) + 'px')
|
self.edges.slice(2).forEach(function(edge) {
|
||||||
.css(self.edges[3], (parseInt(element.element.css(self.edges[3]), 10) || 0) + 'px');
|
element.element.css(edge, (parseInt(element.element.css(edge)) || 0) + 'px')
|
||||||
|
});
|
||||||
|
return element.element;
|
||||||
});
|
});
|
||||||
|
|
||||||
// create resizebars
|
// create resizebars
|
||||||
|
@ -77,14 +81,17 @@ Ox.SplitPanel = function(options, self) {
|
||||||
that.$elements[self.resizebarElements[index][1]]
|
that.$elements[self.resizebarElements[index][1]]
|
||||||
],
|
],
|
||||||
id: element.element.options('id'),
|
id: element.element.options('id'),
|
||||||
orientation: self.options.orientation == 'horizontal' ? 'vertical' : 'horizontal',
|
orientation: self.options.orientation == 'horizontal'
|
||||||
|
? 'vertical' : 'horizontal',
|
||||||
parent: that, // fixme: that.$content
|
parent: that, // fixme: that.$content
|
||||||
resizable: element.resizable,
|
resizable: element.resizable,
|
||||||
resize: element.resize,
|
resize: element.resize,
|
||||||
size: element.size,
|
size: element.size,
|
||||||
tooltip: element.tooltip
|
tooltip: element.tooltip
|
||||||
});
|
});
|
||||||
self.$resizebars[index][i == 0 ? 'insertAfter' : 'insertBefore'](that.$elements[i]);
|
self.$resizebars[index][
|
||||||
|
i == 0 ? 'insertAfter' : 'insertBefore'
|
||||||
|
](that.$elements[i]);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -96,23 +103,24 @@ Ox.SplitPanel = function(options, self) {
|
||||||
|
|
||||||
setSizes(true);
|
setSizes(true);
|
||||||
|
|
||||||
function getPositionById(id) {
|
function getIndexById(id) {
|
||||||
var position = -1;
|
var index = -1;
|
||||||
Ox.forEach(self.options.elements, function(element, i) {
|
Ox.forEach(self.options.elements, function(element, i) {
|
||||||
if (element.element.options('id') == id) {
|
if (element.element.options('id') == id) {
|
||||||
position = i;
|
index = i;
|
||||||
return false; // break
|
return false; // break
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
return position;
|
return index;
|
||||||
}
|
}
|
||||||
|
|
||||||
function getSize(element) {
|
function getSize(index) {
|
||||||
|
var element = self.options.elements[index];
|
||||||
return element.size + (element.collapsible || element.resizable);
|
return element.size + (element.collapsible || element.resizable);
|
||||||
//return (element.size + (element.collapsible || element.resizable)) * !element.collapsed;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function getVisibleSize(element) {
|
function getVisibleSize(index) {
|
||||||
|
var element = self.options.elements[index];
|
||||||
return getSize(element) * !element.collapsed;
|
return getSize(element) * !element.collapsed;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -122,37 +130,44 @@ Ox.SplitPanel = function(options, self) {
|
||||||
// fixme: maybe we can add a conditional here, since init
|
// fixme: maybe we can add a conditional here, since init
|
||||||
// is about elements that are collapsed splitpanels
|
// is about elements that are collapsed splitpanels
|
||||||
var css = {},
|
var css = {},
|
||||||
edges = [
|
edges = self.edges.slice(0, 2).map(function(edge) {
|
||||||
(init && parseInt(that.$elements[i].css(self.edges[0]), 10)) || 0,
|
// left/right (horizontal) or top/bottom (vertical)
|
||||||
(init && parseInt(that.$elements[i].css(self.edges[1]), 10)) || 0
|
return init && parseInt(that.$elements[i].css(edge)) || 0;
|
||||||
];
|
});
|
||||||
if (element.size != 'auto') {
|
if (element.size != 'auto') {
|
||||||
|
// width (horizontal) or height (vertical)
|
||||||
css[self.dimensions[0]] = element.size + 'px';
|
css[self.dimensions[0]] = element.size + 'px';
|
||||||
}
|
}
|
||||||
if (i == 0) {
|
if (i == 0) {
|
||||||
|
// left (horizontal) or top (vertical)
|
||||||
css[self.edges[0]] = edges[0] + 'px';
|
css[self.edges[0]] = edges[0] + 'px';
|
||||||
|
// right (horizontal) or bottom (vertical)
|
||||||
if (element.size == 'auto') {
|
if (element.size == 'auto') {
|
||||||
css[self.edges[1]] = getSize(self.options.elements[1])
|
css[self.edges[1]] = getSize(1)
|
||||||
+ (
|
+ (
|
||||||
self.length == 3 ? getVisibleSize(self.options.elements[2]) : 0
|
self.length == 3 ? getVisibleSize(2) : 0
|
||||||
) + 'px';
|
) + 'px';
|
||||||
}
|
}
|
||||||
} else if (i == 1) {
|
} else if (i == 1) {
|
||||||
|
// left (horizontal) or top (vertical)
|
||||||
if (self.options.elements[0].size != 'auto') {
|
if (self.options.elements[0].size != 'auto') {
|
||||||
css[self.edges[0]] = edges[0] + getSize(self.options.elements[0]) + 'px'
|
css[self.edges[0]] = edges[0] + getSize(0) + 'px'
|
||||||
} else {
|
} else {
|
||||||
css[self.edges[0]] = 'auto'; // fixme: why is this needed?
|
css[self.edges[0]] = 'auto'; // fixme: why is this needed?
|
||||||
}
|
}
|
||||||
|
// right (horizontal) or bottom (vertical)
|
||||||
css[self.edges[1]] = (
|
css[self.edges[1]] = (
|
||||||
self.length == 3 ? getSize(self.options.elements[2]) : 0
|
self.length == 3 ? getSize(2) : 0
|
||||||
) + 'px';
|
) + 'px';
|
||||||
} else {
|
} else {
|
||||||
|
// left (horizontal) or top (vertical)
|
||||||
if (element.size == 'auto') {
|
if (element.size == 'auto') {
|
||||||
css[self.edges[0]] = getVisibleSize(self.options.elements[0])
|
css[self.edges[0]] = getVisibleSize(self.options.elements[0])
|
||||||
+ getSize(self.options.elements[1]) + 'px';
|
+ getSize(1) + 'px';
|
||||||
} else {
|
} else {
|
||||||
css[self.edges[0]] = 'auto'; // fixme: why is this needed?
|
css[self.edges[0]] = 'auto'; // fixme: why is this needed?
|
||||||
}
|
}
|
||||||
|
// right (horizontal) or bottom (vertical)
|
||||||
css[self.edges[1]] = edges[1] + 'px';
|
css[self.edges[1]] = edges[1] + 'px';
|
||||||
}
|
}
|
||||||
if (animate) {
|
if (animate) {
|
||||||
|
@ -164,6 +179,7 @@ Ox.SplitPanel = function(options, self) {
|
||||||
}
|
}
|
||||||
if (element.collapsible || element.resizable) {
|
if (element.collapsible || element.resizable) {
|
||||||
css = {};
|
css = {};
|
||||||
|
// left or right (horizontal) or top or bottom (vertical)
|
||||||
css[self.edges[i == 0 ? 0 : 1]] = element.size + 'px'
|
css[self.edges[i == 0 ? 0 : 1]] = element.size + 'px'
|
||||||
if (animate) {
|
if (animate) {
|
||||||
self.$resizebars[i == 0 ? 0 : 1].animate(css, 250);
|
self.$resizebars[i == 0 ? 0 : 1].animate(css, 250);
|
||||||
|
@ -177,40 +193,42 @@ Ox.SplitPanel = function(options, self) {
|
||||||
|
|
||||||
/*@
|
/*@
|
||||||
getSize <f> get size of panel
|
getSize <f> get size of panel
|
||||||
(id) -> <i> id or position of panel, returns size
|
(id) -> <i> id or index of element, returns size
|
||||||
id <s|i> The element's id or position
|
id <s|i> The element's id or index
|
||||||
@*/
|
@*/
|
||||||
// fixme: what is this? there is that.size()
|
// fixme: what is this? there is that.size()
|
||||||
that.getSize = function(id) {
|
that.getSize = function(id) {
|
||||||
var pos = Ox.isNumber(id) ? id : getPositionById(id),
|
var index = Ox.isNumber(id) ? id : getIndexById(id),
|
||||||
element = self.options.elements[pos];
|
element = self.options.elements[index];
|
||||||
return element.element[self.dimensions[0]]() * !that.isCollapsed(pos);
|
return element.element[self.dimensions[0]]() * !that.isCollapsed(index);
|
||||||
};
|
};
|
||||||
|
|
||||||
/*@
|
/*@
|
||||||
isCollapsed <f> panel collapsed state
|
isCollapsed <f> panel collapsed state
|
||||||
(id) -> <b> id or position of panel, returns collapsed state
|
(id) -> <b> id or index of element, returns collapsed state
|
||||||
id <i> The element's id or position
|
id <i> The element's id or index
|
||||||
@*/
|
@*/
|
||||||
that.isCollapsed = function(id) {
|
that.isCollapsed = function(id) {
|
||||||
var pos = Ox.isNumber(id) ? id : getPositionById(id);
|
var index = Ox.isNumber(id) ? id : getIndexById(id);
|
||||||
return self.options.elements[pos].collapsed;
|
return self.options.elements[index].collapsed;
|
||||||
};
|
};
|
||||||
|
|
||||||
/*@
|
/*@
|
||||||
replaceElement <f> Replace panel element
|
replaceElement <f> Replace panel element
|
||||||
(id, element) -> <f> replace element
|
(id, element) -> <f> replace element
|
||||||
id <s|n> The element's id or position
|
id <s|n> The element's id or index
|
||||||
element <o> new element
|
element <o> New element
|
||||||
@*/
|
@*/
|
||||||
that.replaceElement = function(id, element) {
|
that.replaceElement = function(id, element) {
|
||||||
// one can pass pos instead of id
|
// one can pass index instead of id
|
||||||
var pos = Ox.isNumber(id) ? id : getPositionById(id);
|
var index = Ox.isNumber(id) ? id : getIndexById(id);
|
||||||
that.$elements[pos] = element
|
// top and bottom (horizontal) or left and right (vertical)
|
||||||
.css(self.edges[2], (parseInt(element.css(self.edges[2]), 10) || 0) + 'px')
|
self.edges.slice(2).forEach(function(edge) {
|
||||||
.css(self.edges[3], (parseInt(element.css(self.edges[3]), 10) || 0) + 'px');
|
element.css(edge, (parseInt(element.css(self.edges[2])) || 0) + 'px');
|
||||||
self.options.elements[pos].element.replaceWith(
|
});
|
||||||
self.options.elements[pos].element = element
|
that.$elements[index] = element;
|
||||||
|
self.options.elements[index].element.replaceWith(
|
||||||
|
self.options.elements[index].element = element
|
||||||
);
|
);
|
||||||
setSizes();
|
setSizes();
|
||||||
self.$resizebars.forEach(function($resizebar, i) {
|
self.$resizebars.forEach(function($resizebar, i) {
|
||||||
|
@ -259,15 +277,15 @@ Ox.SplitPanel = function(options, self) {
|
||||||
reset <f> Reset an outer element to its initial size
|
reset <f> Reset an outer element to its initial size
|
||||||
@*/
|
@*/
|
||||||
that.reset = function(id) {
|
that.reset = function(id) {
|
||||||
// one can pass pos instead of id
|
// one can pass index instead of id
|
||||||
var pos = Ox.isNumber(id) ? id : getPositionById(id),
|
var index = Ox.isNumber(id) ? id : getIndexById(id),
|
||||||
element = self.options.elements[pos];
|
element = self.options.elements[index];
|
||||||
element.size = self.defaultSize[pos];
|
element.size = self.defaultSize[index];
|
||||||
setSizes(false, function() {
|
setSizes(false, function() {
|
||||||
element.element.triggerEvent('resize', {
|
element.element.triggerEvent('resize', {
|
||||||
size: element.size
|
size: element.size
|
||||||
});
|
});
|
||||||
element = self.options.elements[pos == 0 ? 1 : pos - 1];
|
element = self.options.elements[index == 0 ? 1 : index - 1];
|
||||||
element.element.triggerEvent('resize', {
|
element.element.triggerEvent('resize', {
|
||||||
size: element.element[self.dimensions[0]]()
|
size: element.element[self.dimensions[0]]()
|
||||||
});
|
});
|
||||||
|
@ -279,17 +297,17 @@ Ox.SplitPanel = function(options, self) {
|
||||||
(id) -> <i> Returns size
|
(id) -> <i> Returns size
|
||||||
(id, size) -> <o> Sets size, returns SplitPanel
|
(id, size) -> <o> Sets size, returns SplitPanel
|
||||||
(id, size, callback) -> <o> Sets size with animation, returns SplitPanel
|
(id, size, callback) -> <o> Sets size with animation, returns SplitPanel
|
||||||
id <i> The element's id or position
|
id <i> The element's id or index
|
||||||
size <i> New size, in px
|
size <i> New size, in px
|
||||||
callback <b|f> Callback function (passing true animates w/o callback)
|
callback <b|f> Callback function (passing true animates w/o callback)
|
||||||
@*/
|
@*/
|
||||||
that.size = function(id, size, callback) {
|
that.size = function(id, size, callback) {
|
||||||
// one can pass pos instead of id
|
// one can pass index instead of id
|
||||||
var pos = Ox.isNumber(id) ? id : getPositionById(id),
|
var index = Ox.isNumber(id) ? id : getIndexById(id),
|
||||||
element = self.options.elements[pos],
|
element = self.options.elements[index],
|
||||||
animate = {};
|
animate = {};
|
||||||
if (arguments.length == 1) {
|
if (arguments.length == 1) {
|
||||||
return element.element[self.dimensions[0]]() * !that.isCollapsed(pos);
|
return element.element[self.dimensions[0]]() * !that.isCollapsed(index);
|
||||||
} else {
|
} else {
|
||||||
element.size = size;
|
element.size = size;
|
||||||
setSizes(false, callback);
|
setSizes(false, callback);
|
||||||
|
@ -300,28 +318,28 @@ Ox.SplitPanel = function(options, self) {
|
||||||
/*@
|
/*@
|
||||||
toggle <f> Toggles collapsed state of an outer element
|
toggle <f> Toggles collapsed state of an outer element
|
||||||
(id) -> <o> The SplitPanel
|
(id) -> <o> The SplitPanel
|
||||||
id <s|i> The element's id or position
|
id <s|i> The element's id or index
|
||||||
@*/
|
@*/
|
||||||
// FIXME: isn't 'toggle' reserved by jQuery?
|
// FIXME: isn't 'toggle' reserved by jQuery?
|
||||||
that.toggle = function(id) {
|
that.toggle = function(id) {
|
||||||
// one can pass pos instead of id
|
// one can pass index instead of id
|
||||||
if (self.toggling) {
|
if (self.toggling) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
var pos = Ox.isNumber(id) ? id : getPositionById(id),
|
var index = Ox.isNumber(id) ? id : getIndexById(id),
|
||||||
element = self.options.elements[pos],
|
element = self.options.elements[index],
|
||||||
value = parseInt(that.css(self.edges[pos == 0 ? 0 : 1]), 10)
|
value = parseInt(that.css(self.edges[index == 0 ? 0 : 1]), 10)
|
||||||
+ element.element[self.dimensions[0]]() * (element.collapsed ? 1 : -1),
|
+ element.element[self.dimensions[0]]() * (element.collapsed ? 1 : -1),
|
||||||
animate = {};
|
animate = {};
|
||||||
self.toggling = true;
|
self.toggling = true;
|
||||||
animate[self.edges[pos == 0 ? 0 : 1]] = value;
|
animate[self.edges[index == 0 ? 0 : 1]] = value;
|
||||||
that.animate(animate, 250, function() {
|
that.animate(animate, 250, function() {
|
||||||
element.collapsed = !element.collapsed;
|
element.collapsed = !element.collapsed;
|
||||||
element.element.triggerEvent('toggle', {
|
element.element.triggerEvent('toggle', {
|
||||||
collapsed: element.collapsed
|
collapsed: element.collapsed
|
||||||
});
|
});
|
||||||
self.$resizebars[pos == 0 ? 0 : 1].options({collapsed: element.collapsed});
|
self.$resizebars[index == 0 ? 0 : 1].options({collapsed: element.collapsed});
|
||||||
element = self.options.elements[pos == 0 ? 1 : pos - 1];
|
element = self.options.elements[index == 0 ? 1 : index - 1];
|
||||||
element.element.triggerEvent('resize', {
|
element.element.triggerEvent('resize', {
|
||||||
size: element.element[self.dimensions[0]]()
|
size: element.element[self.dimensions[0]]()
|
||||||
});
|
});
|
||||||
|
@ -331,14 +349,14 @@ Ox.SplitPanel = function(options, self) {
|
||||||
|
|
||||||
/*@
|
/*@
|
||||||
updateSize <f> update size of element
|
updateSize <f> update size of element
|
||||||
(pos, size) -> <o> update size of element
|
(index, size) -> <o> update size of element
|
||||||
pos <i> position of element
|
index <i> index of element
|
||||||
size <n> new size
|
size <n> new size
|
||||||
@*/
|
@*/
|
||||||
that.updateSize = function(pos, size) {
|
that.updateSize = function(index, size) {
|
||||||
// this is called from resizebar
|
// this is called from resizebar
|
||||||
pos = pos == 0 ? 0 : self.options.elements.length - 1; // fixme: silly that 0 or 1 is passed, and not pos
|
index = index == 0 ? 0 : self.options.elements.length - 1; // fixme: silly that 0 or 1 is passed, and not index
|
||||||
self.options.elements[pos].size = size;
|
self.options.elements[index].size = size;
|
||||||
};
|
};
|
||||||
|
|
||||||
return that;
|
return that;
|
||||||
|
|
Loading…
Reference in a new issue