forked from 0x2620/oxjs
remove unneeded Ox. prefix from path and file names
This commit is contained in:
parent
4138e4e558
commit
51696562f1
1365 changed files with 43 additions and 43 deletions
|
|
@ -1,194 +0,0 @@
|
|||
'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;
|
||||
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue