forked from 0x2620/oxjs
splitpanel rewrite
This commit is contained in:
rolux
parent
62e6c0d84c
commit
1b68e49a2a
3 changed files with 322 additions and 14 deletions
|
|
@ -772,20 +772,42 @@ requires
|
|||
};
|
||||
|
||||
Ox.UI = (function() {
|
||||
/*
|
||||
$(function() {
|
||||
Ox.extend(Ox.UI, {
|
||||
$body: $('body'),
|
||||
$document: $(document),
|
||||
$window: $(window)
|
||||
});
|
||||
});
|
||||
*/
|
||||
return {
|
||||
$body: $('body'),
|
||||
$document: $(document),
|
||||
$window: $(window),
|
||||
path: function() {
|
||||
return oxui.path;
|
||||
getDimensions: function(orientation) {
|
||||
return orientation == 'horizontal' ?
|
||||
['width', 'height'] : ['height', 'width'];
|
||||
},
|
||||
getEdges: function(orientation) {
|
||||
return orientation == 'horizontal' ?
|
||||
['left', 'right', 'top', 'bottom'] :
|
||||
['top', 'bottom', 'left', 'right'];
|
||||
},
|
||||
DIMENSIONS: {
|
||||
horizontal: ['width', 'height'],
|
||||
vertical: ['height', 'width']
|
||||
},
|
||||
EDGES: {
|
||||
horizontal: [['left', 'right'], ['top', 'bottom']],
|
||||
vertical: [['top', 'bottom'], ['left', 'right']]
|
||||
},
|
||||
PATH: $('script[src*="ox.ui.js"]')
|
||||
.attr('src').replace('js/ox.ui.js', ''),
|
||||
theme: function() {
|
||||
|
||||
},
|
||||
themePath: function() {
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
}());
|
||||
|
||||
/***
|
||||
|
|
@ -881,7 +903,7 @@ requires
|
|||
element: self.options
|
||||
};
|
||||
}
|
||||
that.ox = Ox.version;
|
||||
that.ox = Ox.VERSION;
|
||||
that.id = Ox.uid();
|
||||
that.$element = $('<' + (self.options.element || 'div') + '/>', {
|
||||
data: {
|
||||
|
|
@ -11142,6 +11164,213 @@ requires
|
|||
return that;
|
||||
};
|
||||
|
||||
Ox.SplitPanel2 = function(options, self) {
|
||||
|
||||
var self = self || {},
|
||||
that = new Ox.Element('div', self)
|
||||
.defaults({
|
||||
elements: [],
|
||||
orientation: 'horizontal'
|
||||
})
|
||||
.options(options)
|
||||
.addClass(
|
||||
'OxSplitPanel2 Ox' + Ox.toTitleCase(self.options.orientation)
|
||||
);
|
||||
|
||||
Ox.extend(self, {
|
||||
$separators: [],
|
||||
clientXY: self.options.orientation == 'horizontal' ? 'clientX' : 'clientY',
|
||||
dimensions: Ox.UI.DIMENSIONS[self.options.orientation],
|
||||
edges: Ox.UI.EDGES[self.options.orientation]
|
||||
});
|
||||
|
||||
self.options.elements.forEach(function(element, i) {
|
||||
self.options.elements[i] = Ox.extend({
|
||||
collapsible: false,
|
||||
collapsed: false,
|
||||
resizable: false,
|
||||
resize: [],
|
||||
size: 'auto'
|
||||
}, element);
|
||||
});
|
||||
|
||||
self.autoPercent = (100 - self.options.elements.reduce(function(val, element) {
|
||||
return val + (Ox.endsWith(element.size, '%') ? parseFloat(element.size) : 0);
|
||||
}, 0)) / self.options.elements.filter(function(element) {
|
||||
return element.size == 'auto';
|
||||
}).length + '%';
|
||||
|
||||
self.options.elements.forEach(function(element, i) {
|
||||
var flex, index = i == 0 ? 0 : 1;
|
||||
if (Ox.isNumber(element.size)) {
|
||||
element.element.css(self.dimensions[0], element.size + 'px');
|
||||
} else {
|
||||
flex = (
|
||||
element.size == 'auto' ? self.autoPercent : element.size
|
||||
).replace('%', '');
|
||||
element.element.css({
|
||||
boxFlex: flex,
|
||||
MozBoxFlex: flex,
|
||||
WebkitBoxFlex: flex
|
||||
});
|
||||
}
|
||||
element.element.appendTo(that);
|
||||
if (element.collapsible || element.resizable) {
|
||||
self.$separators.push(
|
||||
Ox.Element()
|
||||
.addClass('OxSeparator')
|
||||
.bindEvent({
|
||||
anyclick: function() {
|
||||
that.toggle(i);
|
||||
},
|
||||
dragstart: function(event, e) {
|
||||
dragstart(i, e);
|
||||
},
|
||||
drag: function(event, e) {
|
||||
drag(i, e);
|
||||
},
|
||||
dragend: function(event, e) {
|
||||
dragend(i, e);
|
||||
},
|
||||
})
|
||||
.append($('<div>').addClass('OxSpace'))
|
||||
.append($('<div>').addClass('OxLine'))
|
||||
.append($('<div>').addClass('OxSpace'))
|
||||
['insert' + (index ? 'Before' : 'After')](element.element)
|
||||
);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
function dragstart(pos, e) {
|
||||
var element = self.options.elements[pos],
|
||||
size = element.element[self.dimensions[0]]();
|
||||
if (element.resizable && !element.collapsed) {
|
||||
Ox.isString(element.size) && setPixels(pos);
|
||||
self.drag = {
|
||||
resize: Ox.isNumber(element.size) ?
|
||||
element.resize : element.resize.map(function(v) {
|
||||
return getPixelsByPercent(v);
|
||||
}),
|
||||
size: size,
|
||||
startPos: e[self.clientXY],
|
||||
startSize: size
|
||||
};
|
||||
Ox.print('self.drag', self.drag)
|
||||
}
|
||||
}
|
||||
|
||||
function drag(pos, e) {
|
||||
var data = {},
|
||||
element = self.options.elements[pos],
|
||||
index = pos == 0 ? 0 : 1;
|
||||
if (element.resizable && !element.collapsed) {
|
||||
var d = e[self.clientXY] - self.drag.startPos,
|
||||
size = Ox.limit(
|
||||
self.drag.startSize + d * (index ? -1 : 1),
|
||||
self.drag.resize[0],
|
||||
self.drag.resize[element.resize.length - 1]
|
||||
);
|
||||
self.drag.resize.forEach(function(v) {
|
||||
if (size >= v - 8 && size <= v + 8) {
|
||||
size = v;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
if (size != self.drag.size) {
|
||||
self.drag.size = size;
|
||||
data[self.dimensions[0]] = size;
|
||||
element.element
|
||||
.css(self.dimensions[0], size + 'px')
|
||||
.triggerEvent('resize', data);
|
||||
triggerEvents('resize', pos);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function dragend(pos, e) {
|
||||
var data = {},
|
||||
element = self.options.elements[pos];
|
||||
if (element.resizable && !element.collapsed) {
|
||||
Ox.isString(element.size) && setPercent(pos);
|
||||
data[self.dimensions[0]] = self.drag.size
|
||||
element.element.triggerEvent('resizeend', data);
|
||||
triggerEvents('resizeend', pos);
|
||||
}
|
||||
}
|
||||
|
||||
function getPixelsByPercent(percent) {
|
||||
return Math.round((
|
||||
that[self.dimensions[0]]() -
|
||||
self.options.elements.reduce(function(val, element) {
|
||||
return val + Ox.isNumber(element.size) ?
|
||||
element.element[self.dimensions[0]]() : 0;
|
||||
}, 0) - self.$separators.length
|
||||
) * parseFloat(percent) / 100);
|
||||
}
|
||||
|
||||
function setPercent(pos) {
|
||||
var element = self.options.elements[pos],
|
||||
flex = element.size.replace('%', ''),
|
||||
css = {
|
||||
boxFlex: flex,
|
||||
MozBoxFlex: flex,
|
||||
WebkitBoxFlex: flex
|
||||
};
|
||||
css[self.dimensions[0]] = '';
|
||||
element.element.css(css);
|
||||
}
|
||||
|
||||
function setPixels(pos) {
|
||||
var css = {
|
||||
boxFlex: '',
|
||||
MozBoxFlex: '',
|
||||
WebkitBoxFlex: ''
|
||||
},
|
||||
element = self.options.elements[pos];
|
||||
css[self.dimensions[0]] = element.element[self.dimensions[0]]() + 'px';
|
||||
element.element.css(css);
|
||||
}
|
||||
|
||||
function triggerEvents(event, pos) {
|
||||
var data = {};
|
||||
self.options.elements.forEach(function(element, i) {
|
||||
if (i != pos && Ox.isString(element.size)) {
|
||||
data[self.dimensions[0]] = element.element[self.dimensions[0]]();
|
||||
element.element.triggerEvent(event, data);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
that.toggle = function(pos) {
|
||||
var css = {},
|
||||
element = self.options.elements[pos],
|
||||
flex,
|
||||
index = pos == 0 ? 0 : 1,
|
||||
size = element.element[self.dimensions[0]]();
|
||||
if (element.collapsible) {
|
||||
element.collapsed = !element.collapsed;
|
||||
if (Ox.isString(element.size) && element.collapsed) {
|
||||
setPixels(pos);
|
||||
}
|
||||
css['margin' + Ox.toTitleCase(self.edges[0][index])] =
|
||||
element.collapsed ? -size : 0;
|
||||
Ox.print('css', css);
|
||||
that.animate(css, 250, function() {
|
||||
if (Ox.isString(element.size) && !element.collapsed) {
|
||||
setPercent(pos);
|
||||
}
|
||||
element.element.triggerEvent('toggle', {collapsed: element.collapsed});
|
||||
triggerEvents('resize', pos);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
options:
|
||||
elements: [{ array of one, two or three elements
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue