forked from 0x2620/oxjs
new SplitPanel implementation
This commit is contained in:
rolux
parent
9001a45aa1
commit
835c4c92b7
2 changed files with 249 additions and 311 deletions
|
|
@ -8,6 +8,7 @@ Ox.Resizebar <f> Resizebar
|
|||
elements <a|[]> Elements of the bar
|
||||
orientation <s|horizontal> Orientation ('horizontal' or 'vertical')
|
||||
panel <o|null> Panel object
|
||||
resizeable <b|true> If true, can be resetted to default or original size
|
||||
resizeable <b|true> If true, can be resized
|
||||
resize <a|[]> Array of sizes
|
||||
size <n|0> Default size
|
||||
|
|
@ -19,114 +20,58 @@ Ox.Resizebar = function(options, self) {
|
|||
|
||||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
collapsed: false,
|
||||
collapsible: true,
|
||||
edge: 'left',
|
||||
elements: [],
|
||||
orientation: 'horizontal',
|
||||
parent: null,
|
||||
resizable: true,
|
||||
resize: [],
|
||||
size: 0,
|
||||
tooltip: false
|
||||
})
|
||||
.options(options || {})
|
||||
.update({
|
||||
collapsed: function() {
|
||||
that.css({cursor: getCursor()});
|
||||
self.$tooltip && self.$tooltip.options({title: getTitle()});
|
||||
}
|
||||
})
|
||||
.addClass('OxResizebar Ox' + Ox.toTitleCase(self.options.orientation))
|
||||
.bindEvent({
|
||||
// singleclick: toggle,
|
||||
// doubleclick: reset,
|
||||
anyclick: toggle,
|
||||
dragstart: dragstart,
|
||||
drag: drag,
|
||||
dragend: dragend,
|
||||
mousedown: function() {
|
||||
triggerEvents('resizestart');
|
||||
},
|
||||
mouseup: function() {
|
||||
triggerEvents('resizeend');
|
||||
}
|
||||
})
|
||||
.append($('<div>').addClass('OxSpace'))
|
||||
.append($('<div>').addClass('OxLine'))
|
||||
.append($('<div>').addClass('OxSpace'));
|
||||
.defaults({
|
||||
collapsed: false,
|
||||
collapsible: false,
|
||||
defaultSize: null,
|
||||
edge: 'left',
|
||||
orientation: 'horizontal',
|
||||
resettable: false,
|
||||
resizable: false,
|
||||
resize: [],
|
||||
size: 0,
|
||||
tooltip: false
|
||||
})
|
||||
.options(options || {})
|
||||
.update({
|
||||
collapsed: function() {
|
||||
that.css({cursor: getCursor()});
|
||||
self.$tooltip && self.$tooltip.options({title: getTooltipTitle()});
|
||||
}
|
||||
})
|
||||
.addClass('OxResizebar Ox' + Ox.toTitleCase(self.options.orientation))
|
||||
.bindEvent(Ox.extend({
|
||||
dragstart: onDragstart,
|
||||
drag: onDrag,
|
||||
dragpause: onDragpause,
|
||||
dragend: onDragend
|
||||
}, self.options.resettable ? {
|
||||
doubleclick: reset,
|
||||
singleclick: toggle
|
||||
} : {
|
||||
anyclick: toggle
|
||||
}))
|
||||
.append(Ox.$('<div>').addClass('OxSpace'))
|
||||
.append(Ox.$('<div>').addClass('OxLine'))
|
||||
.append(Ox.$('<div>').addClass('OxSpace'));
|
||||
|
||||
if (self.options.tooltip) {
|
||||
if (Ox.isString(self.options.tooltip)) {
|
||||
// FIXME: Use Ox.Element's tooltip
|
||||
self.$tooltip = Ox.Tooltip({title: getTitle()});
|
||||
self.$tooltip = Ox.Tooltip({title: getTooltipTitle()});
|
||||
that.on({
|
||||
mouseenter: self.$tooltip.show,
|
||||
mouseleave: self.$tooltip.hide
|
||||
});
|
||||
}
|
||||
|
||||
Ox.extend(self, {
|
||||
clientXY: self.options.orientation == 'horizontal' ? 'clientY' : 'clientX',
|
||||
dimensions: Ox.UI.DIMENSIONS[self.options.orientation], // fixme: should orientation be the opposite orientation here?
|
||||
edges: Ox.UI.EDGES[self.options.orientation],
|
||||
isLeftOrTop: self.options.edge == 'left' || self.options.edge == 'top'
|
||||
});
|
||||
self.clientXY = self.options.orientation == 'horizontal'
|
||||
? 'clientY' : 'clientX';
|
||||
self.dimensions = Ox.UI.DIMENSIONS[self.options.orientation];
|
||||
self.edges = Ox.UI.EDGES[self.options.orientation];
|
||||
self.isLeftOrTop = self.options.edge == 'left' || self.options.edge == 'top';
|
||||
|
||||
that.css({cursor: getCursor()});
|
||||
|
||||
function dragstart(data) {
|
||||
if (self.options.resizable && !self.options.collapsed) {
|
||||
Ox.$body.addClass('OxDragging');
|
||||
self.drag = {
|
||||
startPos: data[self.clientXY],
|
||||
startSize: self.options.size
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function drag(data) {
|
||||
if (self.options.resizable && !self.options.collapsed) {
|
||||
var d = data[self.clientXY] - self.drag.startPos,
|
||||
size = self.options.size;
|
||||
self.options.size = Ox.limit(
|
||||
self.drag.startSize + d * (self.isLeftOrTop ? 1 : -1),
|
||||
self.options.resize[0],
|
||||
self.options.resize[self.options.resize.length - 1]
|
||||
);
|
||||
Ox.forEach(self.options.resize, function(v) {
|
||||
if (self.options.size >= v - 8 && self.options.size <= v + 8) {
|
||||
self.options.size = v;
|
||||
return false; // break
|
||||
}
|
||||
});
|
||||
if (self.options.size != size) {
|
||||
that.css(self.edges[self.isLeftOrTop ? 2 : 3], self.options.size + 'px');
|
||||
// fixme: send {size: x}, not x
|
||||
if (self.isLeftOrTop) {
|
||||
self.options.elements[0]
|
||||
.css(self.dimensions[1], self.options.size + 'px');
|
||||
self.options.elements[1]
|
||||
.css(self.edges[2], (self.options.size + 1) + 'px');
|
||||
} else {
|
||||
self.options.elements[0]
|
||||
.css(self.edges[3], (self.options.size + 1) + 'px');
|
||||
self.options.elements[1]
|
||||
.css(self.dimensions[1], self.options.size + 'px');
|
||||
}
|
||||
triggerEvents('resize');
|
||||
self.options.parent.updateSize(self.isLeftOrTop ? 0 : 1, self.options.size); // fixme: listen to event instead?
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function dragend() {
|
||||
if (self.options.resizable && !self.options.collapsed) {
|
||||
Ox.$body.removeClass('OxDragging');
|
||||
self.options.size != self.drag.startSize && triggerEvents('resizeend');
|
||||
}
|
||||
}
|
||||
|
||||
function getCursor() {
|
||||
var cursor = '';
|
||||
if (self.options.collapsed) {
|
||||
|
|
@ -146,7 +91,7 @@ Ox.Resizebar = function(options, self) {
|
|||
return cursor + '-resize';
|
||||
}
|
||||
|
||||
function getTitle() {
|
||||
function getTooltipTitle() {
|
||||
var title = '';
|
||||
if (self.options.collapsed) {
|
||||
title = Ox._('Click to show');
|
||||
|
|
@ -156,54 +101,94 @@ Ox.Resizebar = function(options, self) {
|
|||
}
|
||||
if (self.options.collapsible) {
|
||||
title = title
|
||||
? Ox._('{0} or click to hide', [title])
|
||||
? Ox._('{0}{1} click to hide', [
|
||||
title, self.options.resettable ? ',' : ' or'
|
||||
])
|
||||
: Ox._('Click to hide');
|
||||
}
|
||||
if (self.options.resettable) {
|
||||
title += ' or doubleclick to reset'
|
||||
}
|
||||
}
|
||||
if (title && Ox.isString(self.options.tooltip)) {
|
||||
if (title && self.options.tooltip) {
|
||||
title += ' ' + self.options.tooltip;
|
||||
}
|
||||
return title;
|
||||
}
|
||||
|
||||
function onDragstart(data) {
|
||||
if (self.options.resizable && !self.options.collapsed) {
|
||||
Ox.$body.addClass('OxDragging');
|
||||
self.drag = {
|
||||
startPos: data[self.clientXY],
|
||||
startSize: self.options.size
|
||||
}
|
||||
}
|
||||
that.triggerEvent('resizestart', {size: self.options.size});
|
||||
}
|
||||
|
||||
function onDrag(data) {
|
||||
if (self.options.resizable && !self.options.collapsed) {
|
||||
var delta = data[self.clientXY] - self.drag.startPos,
|
||||
size = self.options.size;
|
||||
self.options.size = Ox.limit(
|
||||
self.drag.startSize + delta * (self.isLeftOrTop ? 1 : -1),
|
||||
self.options.resize[0],
|
||||
self.options.resize[self.options.resize.length - 1]
|
||||
);
|
||||
Ox.forEach(self.options.resize, function(value) {
|
||||
if (
|
||||
self.options.size >= value - 8
|
||||
&& self.options.size <= value + 8
|
||||
) {
|
||||
self.options.size = value;
|
||||
return false; // break
|
||||
}
|
||||
});
|
||||
if (self.options.size != size) {
|
||||
that.css(
|
||||
self.edges[self.isLeftOrTop ? 2 : 3],
|
||||
self.options.size + 'px'
|
||||
)
|
||||
.triggerEvent('resize', {size: self.options.size});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onDragpause() {
|
||||
if (self.options.resizable && !self.options.collapsed) {
|
||||
if (self.options.size != self.drag.startSize) {
|
||||
that.triggerEvent('resizepause', {size: self.options.size});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onDragend() {
|
||||
if (self.options.resizable && !self.options.collapsed) {
|
||||
Ox.$body.removeClass('OxDragging');
|
||||
if (self.options.size != self.drag.startSize) {
|
||||
that.triggerEvent('resizeend', {size: self.options.size});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function reset() {
|
||||
if (self.options.resizable && !self.options.collapsed) {
|
||||
// fixme: silly, pass an option
|
||||
self.options.parent.reset(
|
||||
self.isLeftOrTop ? 0
|
||||
: self.options.parent.options('elements').length - 1
|
||||
);
|
||||
that.triggerEvent('reset');
|
||||
}
|
||||
}
|
||||
|
||||
function toggle() {
|
||||
if (self.options.collapsible) {
|
||||
// fixme: silly, pass an option
|
||||
self.options.parent.toggle(
|
||||
self.isLeftOrTop ? 0
|
||||
: self.options.parent.options('elements').length - 1
|
||||
);
|
||||
self.options.collapsed = !self.options.collapsed;
|
||||
that.css({cursor: getCursor()});
|
||||
self.$tooltip && self.$tooltip.hide(function() {
|
||||
self.$tooltip.options({title: getTitle()});
|
||||
self.$tooltip.options({title: getTooltipTitle()});
|
||||
});
|
||||
that.triggerEvent('toggle', {collapsed: self.options.collapsed});
|
||||
}
|
||||
}
|
||||
|
||||
function triggerEvents(event) {
|
||||
self.options.elements[0].triggerEvent(event, {
|
||||
size: self.isLeftOrTop
|
||||
? self.options.size
|
||||
: self.options.elements[0][self.dimensions[1]]()
|
||||
});
|
||||
self.options.elements[1].triggerEvent(event, {
|
||||
size: self.isLeftOrTop
|
||||
? self.options.elements[1][self.dimensions[1]]()
|
||||
: self.options.size
|
||||
});
|
||||
}
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue