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

tooltips and better cursors for splitpanels

Browse source
This commit is contained in:
rlx 2011-09-04 21:15:16 +00:00
commit 1333a3ecec
7 changed files with 105 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,33 +5,28 @@ Ox.SplitPanel <f:Ox.Element> SpliPanel Object
(options) -> <f> SpliPanel Object
(options, self) -> <f> SpliPanel Object
options <o> Options object
elements <[o]|[]> Array of two or three element objects
collapsible <b|false> If true, can be collapsed (if outer element)
collapsed <b|false> If true, is collapsed (if collapsible)
element <o> Any Ox.Element
If any element is collapsible or resizable, all elements must
have an id.
resizable <b|false> If true, can be resized (if outer element)
resize <[n]|[]> Min size, optional snappy points, and max size
size <n|s|"auto"> Size in px (one element must be "auto")
tooltip <b|s|false> If true, show tooltip, if string, append it
orientation <s|"horizontal"> orientation ("horizontal" or "vertical")
self <o> shared private variable
resize <!> resize
Fires on resize, on both elements being resized
toggle <!> toggle
Fires on collapse or expand, on the element being toggled
@*/
/**
options:
elements: [{ array of one, two or three elements
collapsible: false, collapsible or not (only for outer elements)
collapsed: false, collapsed or not (only for collapsible elements)
element: {}, OxElement (if any element is resizable or
collapsible, all OxElements must have an id)
resizable: false, resizable or not (only for outer elements)
resize: [], array of sizes (only for resizable elements,
first value is min, last value is max,
other values are 'snappy' points in between)
size: 0 size in px (one element must have no size)
}],
orientation: '' 'horizontal' or 'vertical'
events:
resize
toggle
*/
Ox.SplitPanel = function(options, self) {
self = self || {};
var that = Ox.Element({}, self) // fixme: Container
var that = Ox.Element({}, self) // fixme: Container?
.defaults({
elements: [],
orientation: 'horizontal'
@ -64,34 +59,36 @@ Ox.SplitPanel = function(options, self) {
});
// create resizebars
self.options.elements.forEach(function(v, i) {
self.options.elements.forEach(function(element, i) {
//that.append(element)
//Ox.print('V: ', v, that.$elements[i])
var index = i == 0 ? 0 : 1;
that.$elements[i].appendTo(that.$element); // fixme: that.$content
if (v.collapsible || v.resizable) {
if (element.collapsible || element.resizable) {
//Ox.print('v.size', v.size)
self.resizebarElements[index] = i < 2 ? [0, 1] : [1, 2];
self.$resizebars[index] = Ox.Resizebar({
collapsible: v.collapsible,
collapsed: element.collapsed,
collapsible: element.collapsible,
edge: self.edges[index],
elements: [
that.$elements[self.resizebarElements[index][0]],
that.$elements[self.resizebarElements[index][1]]
],
id: v.element.options('id'),
id: element.element.options('id'),
orientation: self.options.orientation == 'horizontal' ? 'vertical' : 'horizontal',
parent: that, // fixme: that.$content
resizable: v.resizable,
resize: v.resize,
size: v.size
resizable: element.resizable,
resize: element.resize,
size: element.size,
tooltip: element.tooltip
});
self.$resizebars[index][i == 0 ? 'insertAfter' : 'insertBefore'](that.$elements[i]);
}
});
self.options.elements.forEach(function(v, i) {
v.collapsed && that.css(
self.options.elements.forEach(function(element, i) {
element.collapsed && that.css(
self.edges[i == 0 ? 0 : 1], -self.options.elements[i].size + 'px'
);
});
@ -120,14 +117,14 @@ Ox.SplitPanel = function(options, self) {
}
function setSizes(init) {
self.options.elements.forEach(function(v, i) {
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
];
v.size != 'auto' && that.$elements[i].css(self.dimensions[0], v.size + 'px');
element.size != 'auto' && that.$elements[i].css(self.dimensions[0], element.size + 'px');
if (i == 0) {
that.$elements[i].css(
self.edges[0], edges[0] + 'px'
@ -140,20 +137,20 @@ Ox.SplitPanel = function(options, self) {
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.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'
);
} else {
that.$elements[i].css(
self.edges[0], (self.options.elements[1].size == 'auto' || v.size == 'auto') ? 'auto' :
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 (v.collapsible || v.resizable) {
self.$resizebars[i == 0 ? 0 : 1].css(self.edges[i == 0 ? 0 : 1], v.size);
if (element.collapsible || element.resizable) {
self.$resizebars[i == 0 ? 0 : 1].css(self.edges[i == 0 ? 0 : 1], element.size);
}
});
}
@ -166,12 +163,9 @@ Ox.SplitPanel = function(options, self) {
that.replaceElement = function(id, element) {
// one can pass pos instead of id
var pos = Ox.isNumber(id) ? id : getPositionById(id);
//Ox.print('replace', pos, element);
//Ox.print('element', self.options.elements[pos].element, element)
that.$elements[pos] = element
.css(self.edges[2], (parseInt(element.css(self.edges[2])) || 0) + 'px')
.css(self.edges[3], (parseInt(element.css(self.edges[3])) || 0) + 'px');
//alert(element.css(self.edges[3]))
self.options.elements[pos].element.replaceWith(element.$element.$element || element.$element);
self.options.elements[pos].element = element;
setSizes();
@ -183,7 +177,6 @@ Ox.SplitPanel = function(options, self) {
]
});
});
//Ox.print(self.options.elements[pos])
return that;
};
@ -263,6 +256,7 @@ Ox.SplitPanel = function(options, self) {
};
// fixme: remove!
Ox.SplitPanel_ = function(options, self) {
self = self || {};