0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

splitpanel rewrite

Browse source
This commit is contained in:
rolux 2011-03-03 22:02:35 +01:00
parent 62e6c0d84c
commit 1b68e49a2a
3 changed files with 322 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
build/css/ox.ui.css
View file

@ -1240,6 +1240,63 @@ Panels
position: absolute;
}
.OxSplitPanel2 {
display: box;
display: -moz-box;
display: -webkit-box;
overflow: hidden;
box-flex: 0;
-mox-box-flex: 0;
-webkit-box-flex: 0;
}
.OxSplitPanel2.OxHorizontal {
box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
}
.OxSplitPanel2.OxVertical {
box-orient: vertical;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
}
.OxSplitPanel2 > * {
box-flex: 0;
-mox-box-flex: 0;
-webkit-box-flex: 0;
}
.OxSplitPanel2 > .OxSeparator {
display: -webkit-box;
position: relative;
z-index: 2;
}
.OxSplitPanel2 > .OxSeparator > * {
-webkit-box-flex: 0;
}
.OxSplitPanel2 > .OxSeparator > .OxLine {
background-color: black;
}
.OxSplitPanel2.OxHorizontal > .OxSeparator {
width: 5px;
margin: 0 -2px 0 -2px;
cursor: ew-resize;
}
.OxSplitPanel2.OxHorizontal > .OxSeparator > .OxLine {
width: 1px;
}
.OxSplitPanel2.OxHorizontal > .OxSeparator > .OxSpace {
width: 2px;
}
.OxSplitPanel2.OxVertical > .OxSeparator {
height: 5px;
margin: -2px 0 -2px 0;
cursor: ns-resize;
}
.OxSplitPanel2.OxVertical > .OxSeparator > .OxLine {
height: 1px;
}
.OxSplitPanel2.OxVertical > .OxSeparator > .OxSpace {
height: 2px;
}
/*
================================================================================
Requests

36
build/js/ox.js
View file

@ -1,8 +1,29 @@
// todo: check http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/
var Ox = {
version: '0.1.2'
};
/*
(function() {
var methods = {
'array': ['pop', 'push', 'shift', 'unshift'],
'string': [
'charAt', 'charCodeAt', 'concat', 'indexOf', 'lastIndexOf',
'match', 'replace', 'search', 'slice', 'split',
'substr', 'substring', 'toLocaleLowerCase', 'toLocaleUpperCase', 'toLowerCase',
'toString', 'toUpperCase', 'trim', 'trimLeft, 'trimRight',
'valueOf'
]
},
global = this;
return function Ox(val) {
var ret,
type = Ox.typeof(val);
if (type == 'array') {
}
}
})();
*/
Ox = {};
/*
================================================================================
@ -74,6 +95,7 @@ Ox.TYPES = [
'Arguments', 'Array', 'Boolean', 'Date', 'Element', 'Function', 'Infinity',
'NaN', 'Null', 'Number', 'Object', 'RegExp', 'String', 'Undefined'
];
Ox.VERSION = '0.1.2';
Ox.WEEKDAYS = [
'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
];
@ -99,7 +121,7 @@ Ox.getset = function(obj, args, callback, context) {
Ox.getset(obj, [key, val], callback, context)
Ox.getset(obj, [{key: val, ...}], callback, context) sets obj.key to val,
calls callback(key, val)
for any changed value,
for each changed value,
returns context
(for chaining)
@ -2310,7 +2332,7 @@ Ox.endsWith = function(str, sub) {
>>> Ox.endsWith("foobar", "bar")
true
*/
return str.substr(-sub.length) === sub;
return str.toString().substr(-sub.length) === sub;
};
Ox.highlight = function(txt, str) {
@ -2371,7 +2393,7 @@ Ox.reverse = function(str) {
Ox.reverse("foo")
oof
*/
return str.split('').reverse().join('');
return str.toString().split('').reverse().join('');
};
Ox.startsWith = function(str, sub) {
@ -2379,7 +2401,7 @@ Ox.startsWith = function(str, sub) {
>>> Ox.startsWith("foobar", "foo")
true
*/
return str.substr(0, sub.length) === sub;
return str.toString().substr(0, sub.length) === sub;
};
Ox.stripTags = function(str) {

241
build/js/ox.ui.js
View file

@ -772,20 +772,42 @@ requires
};
Ox.UI = (function() {
return {
/*
$(function() {
Ox.extend(Ox.UI, {
$body: $('body'),
$document: $(document),
$window: $(window),
path: function() {
return oxui.path;
$window: $(window)
});
});
*/
return {
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