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

195 lines
6.2 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
2014-08-21 10:14:30 +00:00
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
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)
2014-08-21 10:14:30 +00:00
.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'));
2011-04-22 22:03:10 +00:00
2014-08-21 10:14:30 +00:00
if (Ox.isString(self.options.tooltip)) {
2012-05-28 14:06:22 +00:00
// FIXME: Use Ox.Element's tooltip
2014-08-21 10:14:30 +00:00
self.$tooltip = Ox.Tooltip({title: getTooltipTitle()});
2012-05-28 14:06:22 +00:00
that.on({
mouseenter: self.$tooltip.show,
mouseleave: self.$tooltip.hide
});
}
2014-08-21 10:14:30 +00:00
self.clientXY = self.options.orientation == 'horizontal'
? 'clientY' : 'clientX';
2014-09-26 12:18:11 +00:00
self.dimensions = Ox.UI.DIMENSIONS[self.options.orientation];
self.edges = Ox.UI.EDGES[self.options.orientation];
2014-08-21 10:14:30 +00:00
self.isLeftOrTop = self.options.edge == 'left' || self.options.edge == 'top';
2011-04-22 22:03:10 +00:00
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';
}
2014-08-21 10:14:30 +00:00
function getTooltipTitle() {
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
2014-08-21 10:14:30 +00:00
? Ox._('{0}{1} click to hide', [
title, self.options.resettable ? ',' : ' or'
])
2014-02-14 15:47:30 +00:00
: Ox._('Click to hide');
}
2014-08-21 10:14:30 +00:00
if (self.options.resettable) {
title += ' or doubleclick to reset'
}
}
2014-08-21 10:14:30 +00:00
if (title && self.options.tooltip) {
title += ' ' + self.options.tooltip;
}
return title;
}
2014-08-21 10:14:30 +00:00
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) {
2014-08-21 10:14:30 +00:00
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]
);
2014-08-21 10:14:30 +00:00
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');
}
}
2011-04-22 22:03:10 +00:00
function toggle() {
if (self.options.collapsible) {
self.options.collapsed = !self.options.collapsed;
that.css({cursor: getCursor()});
self.$tooltip && self.$tooltip.hide(function() {
2014-08-21 10:14:30 +00:00
self.$tooltip.options({title: getTooltipTitle()});
});
2014-08-21 10:14:30 +00:00
that.triggerEvent('toggle', {collapsed: self.options.collapsed});
2011-04-22 22:03:10 +00:00
}
}
return that;
};