oxjs/source/Ox.UI/js/Bar/Resizebar.js
2014-08-21 12:14:30 +02:00

194 lines
6.2 KiB
JavaScript

'use strict';
/*@
Ox.Resizebar <f> Resizebar
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 resetted to default or original size
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
@*/
Ox.Resizebar = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.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 (Ox.isString(self.options.tooltip)) {
// FIXME: Use Ox.Element's tooltip
self.$tooltip = Ox.Tooltip({title: getTooltipTitle()});
that.on({
mouseenter: self.$tooltip.show,
mouseleave: self.$tooltip.hide
});
}
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 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 getTooltipTitle() {
var title = '';
if (self.options.collapsed) {
title = Ox._('Click to show');
} else {
if (self.options.resizable) {
title = Ox._('Drag to resize');
}
if (self.options.collapsible) {
title = 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 && 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) {
that.triggerEvent('reset');
}
}
function toggle() {
if (self.options.collapsible) {
self.options.collapsed = !self.options.collapsed;
that.css({cursor: getCursor()});
self.$tooltip && self.$tooltip.hide(function() {
self.$tooltip.options({title: getTooltipTitle()});
});
that.triggerEvent('toggle', {collapsed: self.options.collapsed});
}
}
return that;
};