splitpanel update (allow for animation, improve performance)
This commit is contained in:
parent
6696eb2b43
commit
17d842c64c
7 changed files with 118 additions and 69 deletions
|
@ -3,10 +3,9 @@
|
|||
<head>
|
||||
<title>ox.js SplitPanel Demo</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<link rel="stylesheet" type="text/css" href="../../build/css/ox.ui.css"/>
|
||||
<script type="text/javascript" src="../../build/js/OxUI.js"></script>
|
||||
<script type="text/javascript" src="../../build/Ox.js"></script>
|
||||
<script>
|
||||
Ox.UI(function() {
|
||||
Ox.load('UI', {debug: true}, function() {
|
||||
new Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
|
@ -21,7 +20,23 @@
|
|||
elements: [
|
||||
{
|
||||
collapsible: true,
|
||||
element: new Ox.Element().options({id: 'left'}).css({background: 'red'}).html('left'),
|
||||
element: new Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
collapsible: true,
|
||||
element: new Ox.Element().options({id: 'leftleft'}).css({background: 'red'}),
|
||||
resizable: true,
|
||||
resize: [32, 64, 96],
|
||||
size: 64
|
||||
},
|
||||
{
|
||||
element: new Ox.Element().options({id: 'leftright'}).css({background: 'magenta'}),
|
||||
size: 'auto'
|
||||
}
|
||||
],
|
||||
id: 'right',
|
||||
orientation: 'horizontal'
|
||||
}),
|
||||
resizable: true,
|
||||
resize: [128, 256, 384],
|
||||
size: 256
|
||||
|
@ -35,23 +50,16 @@
|
|||
element: new Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
collapsible: true,
|
||||
element: new Ox.Element().options({id: 'righttop'}).css({background: 'cyan'}),
|
||||
resizable: true,
|
||||
resize: [32, 64, 96],
|
||||
size: 64
|
||||
},
|
||||
{
|
||||
element: new Ox.Element().options({id: 'rightmiddle'}).css({background: 'blue'}),
|
||||
size: 'auto'
|
||||
},
|
||||
{
|
||||
collapsible: true,
|
||||
element: new Ox.Element().options({id: 'rightbottom'}).css({background: 'magenta'}),
|
||||
element: new Ox.Element().options({id: 'rightbottom'}).css({background: 'blue'}),
|
||||
resizable: true,
|
||||
resize: [32, 64, 96],
|
||||
size: 64
|
||||
},
|
||||
}
|
||||
],
|
||||
id: 'right',
|
||||
orientation: 'vertical'
|
||||
|
|
|
@ -3,10 +3,9 @@
|
|||
<head>
|
||||
<title>OxJS SplitPanel Demo</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<link rel="stylesheet" type="text/css" href="../../build/css/ox.ui.css"/>
|
||||
<script type="text/javascript" src="../../build/js/OxUI.js"></script>
|
||||
<script type="text/javascript" src="../../build/Ox.js"></script>
|
||||
<script>
|
||||
Ox.UI(function() {
|
||||
Ox.load('UI', {debug: true}, function() {
|
||||
function element(options, css) {
|
||||
return Ox.extend({
|
||||
element: Ox.Element().html(JSON.stringify(options))
|
||||
|
|
|
@ -116,49 +116,68 @@ Ox.SplitPanel = function(options, self) {
|
|||
return getSize(element) * !element.collapsed;
|
||||
}
|
||||
|
||||
function setSizes(init) {
|
||||
function setSizes(init, animate) {
|
||||
self.options.elements.forEach(function(element, i) {
|
||||
// fixme: maybe we can add a conditional here, since init
|
||||
// is about elements that are collapsed splitpanels
|
||||
var edges = [
|
||||
(init && parseInt(that.$elements[i].css(self.edges[0]))) || 0,
|
||||
(init && parseInt(that.$elements[i].css(self.edges[1]))) || 0
|
||||
];
|
||||
element.size != 'auto' && that.$elements[i].css(self.dimensions[0], element.size + 'px');
|
||||
var css = {},
|
||||
edges = [
|
||||
(init && parseInt(that.$elements[i].css(self.edges[0]))) || 0,
|
||||
(init && parseInt(that.$elements[i].css(self.edges[1]))) || 0
|
||||
];
|
||||
if (element.size != 'auto') {
|
||||
css[self.dimensions[0]] = element.size + 'px';
|
||||
}
|
||||
if (i == 0) {
|
||||
that.$elements[i].css(
|
||||
self.edges[0], edges[0] + 'px'
|
||||
);
|
||||
that.$elements[i].css(
|
||||
self.edges[1], (getSize(self.options.elements[1]) + (length == 3 ? getSize(self.options.elements[2]) : 0)) + 'px'
|
||||
);
|
||||
css[self.edges[0]] = edges[0] + 'px';
|
||||
if (element.size == 'auto') {
|
||||
css[self.edges[1]] = getSize(self.options.elements[1])
|
||||
+ (
|
||||
self.length == 3 ? getVisibleSize(self.options.elements[2]) : 0
|
||||
) + 'px';
|
||||
}
|
||||
} else if (i == 1) {
|
||||
that.$elements[i].css(
|
||||
self.edges[0], self.options.elements[0].size == 'auto' ? 'auto' :
|
||||
edges[0] + getSize(self.options.elements[0]) + 'px'
|
||||
);
|
||||
(self.options.elements[0].size != 'auto' || element.size != 'auto') && that.$elements[i].css(
|
||||
self.edges[1], (self.length == 3 ? getSize(self.options.elements[2]) : 0) + 'px'
|
||||
);
|
||||
if (self.options.elements[0].size != 'auto') {
|
||||
css[self.edges[0]] = edges[0] + getSize(self.options.elements[0]) + 'px'
|
||||
} else {
|
||||
css[self.edges[0]] = 'auto'; // fixme: why is this needed?
|
||||
}
|
||||
css[self.edges[1]] = (
|
||||
self.length == 3 ? getVisibleSize(self.options.elements[2]) : 0
|
||||
) + 'px';
|
||||
} else {
|
||||
that.$elements[i].css(
|
||||
self.edges[0], (self.options.elements[1].size == 'auto' || element.size == 'auto') ? 'auto' :
|
||||
(getVisibleSize(self.options.elements[0]) + getVisibleSize(self.options.elements[1])) + 'px'
|
||||
);
|
||||
that.$elements[i].css(
|
||||
self.edges[1], edges[1] + 'px'
|
||||
);
|
||||
if (element.size == 'auto') {
|
||||
css[self.edges[0]] = getVisibleSize(self.options.elements[0])
|
||||
+ getSize(self.options.elements[1]) + 'px';
|
||||
} else {
|
||||
css[self.edges[0]] = 'auto'; // fixme: why is this needed?
|
||||
}
|
||||
css[self.edges[1]] = edges[1] + 'px';
|
||||
}
|
||||
if (animate) {
|
||||
that.$elements[i].animate(css, 250, function() {
|
||||
i == 0 && Ox.isFunction(animate) && animate();
|
||||
});
|
||||
} else {
|
||||
that.$elements[i].css(css);
|
||||
}
|
||||
if (element.collapsible || element.resizable) {
|
||||
self.$resizebars[i == 0 ? 0 : 1].css(self.edges[i == 0 ? 0 : 1], element.size);
|
||||
css = {};
|
||||
css[self.edges[i == 0 ? 0 : 1]] = element.size + 'px'
|
||||
if (animate) {
|
||||
self.$resizebars[i == 0 ? 0 : 1].animate(css, 250);
|
||||
} else {
|
||||
self.$resizebars[i == 0 ? 0 : 1].css(css);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
/*@
|
||||
isCollapsed <f> panel collapsed state
|
||||
(id) -> <b> id or position of panel, returns collapsed state
|
||||
id <i> id or position of element
|
||||
id <i> The element's id or position
|
||||
@*/
|
||||
that.isCollapsed = function(id) {
|
||||
var pos = Ox.isNumber(id) ? id : getPositionById(id);
|
||||
|
@ -168,7 +187,7 @@ Ox.SplitPanel = function(options, self) {
|
|||
/*@
|
||||
repleaseElement <f> replace panel element
|
||||
(id, element) -> <f> replace element
|
||||
id <i> id or position of element
|
||||
id <s|i> The element's id or position
|
||||
element <o> new element
|
||||
@*/
|
||||
that.replaceElement = function(id, element) {
|
||||
|
@ -192,7 +211,7 @@ Ox.SplitPanel = function(options, self) {
|
|||
};
|
||||
|
||||
/*@
|
||||
repleaseElements <f> replace panel elements
|
||||
replaceElements <f> replace panel elements
|
||||
(elements) -> <f> replace elements
|
||||
elements <a> array of new elements
|
||||
@*/
|
||||
|
@ -223,21 +242,24 @@ Ox.SplitPanel = function(options, self) {
|
|||
};
|
||||
|
||||
/*@
|
||||
size <f> get or set size
|
||||
(id) -> <i> get size
|
||||
(id, size) -> <f> set size
|
||||
id <i> id or position of panel
|
||||
size <i> size to set
|
||||
size <f> Get or set size of an element
|
||||
(id) -> <i> Returns size
|
||||
(id, size) -> <o> Sets size, returns SplitPanel
|
||||
(id, size, animate) -> <o> Sets size with animation, returns SplitPanel
|
||||
id <i> The element's id or position
|
||||
size <i> New size, in px
|
||||
callback <b|f> Callback function (passing true animates w/o callback)
|
||||
@*/
|
||||
that.size = function(id, size) {
|
||||
that.size = function(id, size, callback) {
|
||||
// one can pass pos instead of id
|
||||
var pos = Ox.isNumber(id) ? id : getPositionById(id),
|
||||
element = self.options.elements[pos];
|
||||
element = self.options.elements[pos],
|
||||
animate = {};
|
||||
if (arguments.length == 1) {
|
||||
return element.element[self.dimensions[0]]() * !that.isCollapsed(pos);
|
||||
} else {
|
||||
element.size = size;
|
||||
setSizes();
|
||||
element.size = size;
|
||||
setSizes(false, callback);
|
||||
return that;
|
||||
}
|
||||
};
|
||||
|
@ -245,8 +267,9 @@ Ox.SplitPanel = function(options, self) {
|
|||
/*@
|
||||
getSize <f> get size of panel
|
||||
(id) -> <i> id or position of panel, returns size
|
||||
id <i> id or position of panel
|
||||
id <s|i> The element's id or position
|
||||
@*/
|
||||
// fixme: what is this? there is that.size()
|
||||
that.getSize = function(id) {
|
||||
var pos = Ox.isNumber(id) ? id : getPositionById(id),
|
||||
element = self.options.elements[pos];
|
||||
|
@ -254,9 +277,9 @@ Ox.SplitPanel = function(options, self) {
|
|||
};
|
||||
|
||||
/*@
|
||||
toggle <f> toggle collapsed state of a panel
|
||||
(id) -> <o> toggle panel
|
||||
id <i> id or position of panel
|
||||
toggle <f> Toggles collapsed state of an outer element
|
||||
(id) -> <o> The SplitPanel
|
||||
id <s|i> The element's id or position
|
||||
@*/
|
||||
that.toggle = function(id) {
|
||||
// one can pass pos instead of id
|
||||
|
@ -267,7 +290,7 @@ Ox.SplitPanel = function(options, self) {
|
|||
(element.collapsed ? 1 : -1),
|
||||
animate = {};
|
||||
animate[self.edges[pos == 0 ? 0 : 1]] = value;
|
||||
that.animate(animate, 200, function() { // fixme: 250?
|
||||
that.animate(animate, 250, function() {
|
||||
element.collapsed = !element.collapsed;
|
||||
element.element.triggerEvent('toggle', {
|
||||
'collapsed': element.collapsed
|
||||
|
@ -383,7 +406,6 @@ Ox.SplitPanel_ = function(options, self) {
|
|||
startPos: e[self.clientXY],
|
||||
startSize: size
|
||||
};
|
||||
Ox.print('self.drag', self.drag)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -10,6 +10,7 @@ Ox.VideoPreview = function(options, self) {
|
|||
fps: 25,
|
||||
frameRatio: 16/9,
|
||||
height: 256,
|
||||
scaleToFill: false,
|
||||
timeline: '',
|
||||
width: 256
|
||||
})
|
||||
|
@ -59,14 +60,19 @@ Ox.VideoPreview = function(options, self) {
|
|||
}
|
||||
|
||||
function getFrameCSS() {
|
||||
var height = self.options.height - 16,
|
||||
width = Math.round(height * self.options.frameRatio),
|
||||
marginLeft = Math.round((self.options.width - width) / 2);
|
||||
return {
|
||||
height: height + 'px',
|
||||
width: width + 'px',
|
||||
marginLeft: marginLeft + 'px'
|
||||
var css = {};
|
||||
if (!self.options.scaleToFill) {
|
||||
css.width = self.options.width;
|
||||
css.height = Math.round(css.width / self.options.frameRatio);
|
||||
css.marginTop = Math.floor((self.options.height - 16 - css.height) / 2);
|
||||
} else {
|
||||
css.height = self.options.height - 16;
|
||||
css.width = Math.round(css.height * self.options.frameRatio);
|
||||
css.marginLeft = Math.floor((self.options.width - css.width) / 2);
|
||||
}
|
||||
return Ox.map(css, function(value) {
|
||||
return value + 'px';
|
||||
});
|
||||
}
|
||||
|
||||
function getPosition(x) {
|
||||
|
|
|
@ -63,7 +63,8 @@
|
|||
'volume', 'mount', 'unmount', 'sync',
|
||||
'info', 'warning', 'help',
|
||||
'check', 'embed', 'bracket',
|
||||
'upload', 'download',
|
||||
'upload', 'download',
|
||||
'copyright', 'noCopyright',
|
||||
'click', 'delete', 'edit', 'find', 'flag', 'icon', 'like',
|
||||
'publish', 'set', 'star', 'user', 'view', 'loading'
|
||||
].forEach(function(symbol) {
|
||||
|
|
6
source/Ox.UI/themes/classic/svg/symbolCopyright.svg
Normal file
6
source/Ox.UI/themes/classic/svg/symbolCopyright.svg
Normal file
|
@ -0,0 +1,6 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
|
||||
<g fill="none" stroke="#404040" stroke-width="32">
|
||||
<circle cx="128" cy="128" r="112" fill="none"/>
|
||||
<path d="M 168,168 a 56,56 0 1,1 0,-80"/>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 242 B |
7
source/Ox.UI/themes/classic/svg/symbolNoCopyright.svg
Normal file
7
source/Ox.UI/themes/classic/svg/symbolNoCopyright.svg
Normal file
|
@ -0,0 +1,7 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
|
||||
<g fill="none" stroke="#404040" stroke-width="32">
|
||||
<circle cx="128" cy="128" r="112" fill="none"/>
|
||||
<path d="M 168,168 a 56,56 0 1,1 0,-80"/>
|
||||
<line x1="40" y1="216" x2="216" y2="40"/>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 292 B |
Loading…
Reference in a new issue