oxjs/source/Ox.UI/js/Bar/Resizebar.js

210 lines
7.4 KiB
JavaScript
Raw Normal View History

2011-11-05 16:46:53 +00:00
'use strict';
2011-05-16 08:24:46 +00:00
/*@
2012-05-31 10:32:54 +00:00
Ox.Resizebar <f> Resizebar
2011-05-16 08:24:46 +00:00
options <o> Options object
collapsed <b|false> Inital collapse state
collapsible <b|true> If true, can be collapsed/expanded
edge <s|left> Edge
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 resized
resize <a|[]> Array of sizes
size <n|0> Default size
tooltip <b|s|false> If true, display tooltip, if string, append it
self <o> Shared private variable
([options[, self]]) -> <o:Ox.Element> Resizebar object
2011-05-16 08:24:46 +00:00
@*/
2011-04-22 22:03:10 +00:00
Ox.Resizebar = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
2011-04-22 22:03:10 +00:00
.defaults({
collapsed: false,
collapsible: true,
edge: 'left',
elements: [],
orientation: 'horizontal',
parent: null,
resizable: true,
resize: [],
size: 0,
tooltip: false
2011-04-22 22:03:10 +00:00
})
2012-05-28 19:35:41 +00:00
.options(options || {})
.update({
collapsed: function() {
that.css({cursor: getCursor()});
self.$tooltip && self.$tooltip.options({title: getTitle()});
}
})
2011-04-22 22:03:10 +00:00
.addClass('OxResizebar Ox' + Ox.toTitleCase(self.options.orientation))
.bindEvent({
// singleclick: toggle,
// doubleclick: reset,
2011-04-22 22:03:10 +00:00
anyclick: toggle,
dragstart: dragstart,
drag: drag,
dragend: dragend,
mousedown: function() {
triggerEvents('resizestart');
},
mouseup: function() {
triggerEvents('resizeend');
}
2011-04-22 22:03:10 +00:00
})
.append($('<div>').addClass('OxSpace'))
.append($('<div>').addClass('OxLine'))
.append($('<div>').addClass('OxSpace'));
if (self.options.tooltip) {
2012-05-28 14:06:22 +00:00
// FIXME: Use Ox.Element's tooltip
self.$tooltip = Ox.Tooltip({title: getTitle()});
2012-05-28 14:06:22 +00:00
that.on({
mouseenter: self.$tooltip.show,
mouseleave: self.$tooltip.hide
});
}
Ox.extend(self, {
2011-04-22 22:03:10 +00:00
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'
2011-04-22 22:03:10 +00:00
});
that.css({cursor: getCursor()});
2011-09-17 11:49:29 +00:00
function dragstart(data) {
2011-04-22 22:03:10 +00:00
if (self.options.resizable && !self.options.collapsed) {
Ox.$body.addClass('OxDragging');
self.drag = {
startPos: data[self.clientXY],
2011-04-22 22:03:10 +00:00
startSize: self.options.size
}
}
2011-04-22 22:03:10 +00:00
}
2011-09-17 11:49:29 +00:00
function drag(data) {
2011-04-22 22:03:10 +00:00
if (self.options.resizable && !self.options.collapsed) {
2011-09-17 11:49:29 +00:00
var d = data[self.clientXY] - self.drag.startPos,
2011-04-22 22:03:10 +00:00
size = self.options.size;
self.options.size = Ox.limit(
self.drag.startSize + d * (self.isLeftOrTop ? 1 : -1),
2011-04-22 22:03:10 +00:00
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;
2012-07-05 08:58:08 +00:00
return false; // break
2011-04-22 22:03:10 +00:00
}
});
if (self.options.size != size) {
that.css(self.edges[self.isLeftOrTop ? 2 : 3], self.options.size + 'px');
2011-04-22 22:03:10 +00:00
// fixme: send {size: x}, not x
if (self.isLeftOrTop) {
2011-04-22 22:03:10 +00:00
self.options.elements[0]
.css(self.dimensions[1], self.options.size + 'px');
2011-04-22 22:03:10 +00:00
self.options.elements[1]
.css(self.edges[2], (self.options.size + 1) + 'px');
2011-04-22 22:03:10 +00:00
} else {
self.options.elements[0]
.css(self.edges[3], (self.options.size + 1) + 'px');
2011-04-22 22:03:10 +00:00
self.options.elements[1]
.css(self.dimensions[1], self.options.size + 'px');
2011-04-22 22:03:10 +00:00
}
triggerEvents('resize');
self.options.parent.updateSize(self.isLeftOrTop ? 0 : 1, self.options.size); // fixme: listen to event instead?
2011-04-22 22:03:10 +00:00
}
}
}
function dragend() {
if (self.options.resizable && !self.options.collapsed) {
Ox.$body.removeClass('OxDragging');
2011-04-22 22:03:10 +00:00
self.options.size != self.drag.startSize && triggerEvents('resizeend');
}
}
function getCursor() {
var cursor = '';
if (self.options.collapsed) {
cursor = self.options.orientation == 'horizontal'
? (self.isLeftOrTop ? 's' : 'n')
: (self.isLeftOrTop ? 'e' : 'w');
} else {
if (self.options.resizable) {
cursor = self.options.orientation == 'horizontal'
? 'ns' : 'ew';
} else if (self.options.collapsible) {
cursor = self.options.orientation == 'horizontal'
? (self.isLeftOrTop ? 'n' : 's')
: (self.isLeftOrTop ? 'w' : 'e');
}
}
return cursor + '-resize';
}
function getTitle() {
var title = '';
if (self.options.collapsed) {
2013-05-09 13:03:33 +00:00
title = Ox._('Click to show');
} else {
if (self.options.resizable) {
2013-05-09 13:03:33 +00:00
title = Ox._('Drag to resize');
}
if (self.options.collapsible) {
2014-02-14 15:47:30 +00:00
title = title
? Ox._('{0} or click to hide', [title])
: Ox._('Click to hide');
}
}
if (title && Ox.isString(self.options.tooltip)) {
title += ' ' + self.options.tooltip;
}
return title;
}
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
);
}
}
2011-04-22 22:03:10 +00:00
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()});
});
2011-04-22 22:03:10 +00:00
}
}
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
2011-11-03 15:42:41 +00:00
});
2011-04-22 22:03:10 +00:00
}
return that;
};