From 17d842c64cf9a3ce101d433435ab3c2f9cdfa275 Mon Sep 17 00:00:00 2001
From: rlx <0x0073@0x2620.org>
Date: Sun, 18 Sep 2011 21:17:39 +0000
Subject: [PATCH] splitpanel update (allow for animation, improve performance)

---
 demos/splitpanel/index.html                   |  34 ++++--
 demos/splitpanel2/index.html                  |   5 +-
 source/Ox.UI/js/Panel/Ox.SplitPanel.js        | 112 +++++++++++-------
 source/Ox.UI/js/Video/Ox.VideoPreview.js      |  20 ++--
 source/Ox.UI/themes/classic/_index.html       |   3 +-
 .../themes/classic/svg/symbolCopyright.svg    |   6 +
 .../themes/classic/svg/symbolNoCopyright.svg  |   7 ++
 7 files changed, 118 insertions(+), 69 deletions(-)
 create mode 100644 source/Ox.UI/themes/classic/svg/symbolCopyright.svg
 create mode 100644 source/Ox.UI/themes/classic/svg/symbolNoCopyright.svg
diff --git a/demos/splitpanel/index.html b/demos/splitpanel/index.html
index d4b74932..625b317f 100644
--- a/demos/splitpanel/index.html
+++ b/demos/splitpanel/index.html
@@ -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'
diff --git a/demos/splitpanel2/index.html b/demos/splitpanel2/index.html
index 7da3090a..37102556 100644
--- a/demos/splitpanel2/index.html
+++ b/demos/splitpanel2/index.html
@@ -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))
diff --git a/source/Ox.UI/js/Panel/Ox.SplitPanel.js b/source/Ox.UI/js/Panel/Ox.SplitPanel.js
index 9229be40..0b92d599 100644
--- a/source/Ox.UI/js/Panel/Ox.SplitPanel.js
+++ b/source/Ox.UI/js/Panel/Ox.SplitPanel.js
@@ -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)
 		}
     }
 
diff --git a/source/Ox.UI/js/Video/Ox.VideoPreview.js b/source/Ox.UI/js/Video/Ox.VideoPreview.js
index b5ea63a8..61784441 100644
--- a/source/Ox.UI/js/Video/Ox.VideoPreview.js
+++ b/source/Ox.UI/js/Video/Ox.VideoPreview.js
@@ -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) {
diff --git a/source/Ox.UI/themes/classic/_index.html b/source/Ox.UI/themes/classic/_index.html
index 079d1b68..39253964 100644
--- a/source/Ox.UI/themes/classic/_index.html
+++ b/source/Ox.UI/themes/classic/_index.html
@@ -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) {
diff --git a/source/Ox.UI/themes/classic/svg/symbolCopyright.svg b/source/Ox.UI/themes/classic/svg/symbolCopyright.svg
new file mode 100644
index 00000000..abcf2a3a
--- /dev/null
+++ b/source/Ox.UI/themes/classic/svg/symbolCopyright.svg
@@ -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>
\ No newline at end of file
diff --git a/source/Ox.UI/themes/classic/svg/symbolNoCopyright.svg b/source/Ox.UI/themes/classic/svg/symbolNoCopyright.svg
new file mode 100644
index 00000000..9ba9ffad
--- /dev/null
+++ b/source/Ox.UI/themes/classic/svg/symbolNoCopyright.svg
@@ -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>
\ No newline at end of file
