tooltips and better cursors for splitpanels

source/Ox.UI/css/Ox.UI.css

@@ -131,7 +131,6 @@ Bars
     width: 100%;
     height: 5px;
     margin: -2px 0 -2px 0;
-    cursor: ns-resize;
 }
 .OxResizebar.OxHorizontal > .OxLine {
     width: 100%;
@@ -146,7 +145,6 @@ Bars
     width: 5px;
     height: 100%;
     margin: 0 -2px 0 -2px;
-    cursor: ew-resize;
 }
 .OxResizebar.OxVertical > .OxLine {
     float: left;

source/Ox.UI/js/Bar/Ox.Resizebar.js

@@ -14,6 +14,7 @@ Ox.Resizebar <f:Ox.Element> Resizebar
         resizeable  <b|true> can bar be resized
         resize      <a|[]> array with possible sizes
         size        <n|0> default size
+        tooltop     <b|s|false> tooltip or not
     self    <o> Shared private variable
 @*/
 /**
@@ -35,17 +36,6 @@ Ox.Resizebar = function(options, self) {
             })
             .options(options || {}) // fixme: options function should be able to handle undefined, no need for || {}
             .addClass('OxResizebar Ox' + Ox.toTitleCase(self.options.orientation))
-            /*
-            .attr({
-                draggable: 'true'
-            })
-            .bind('dragstart', function(e) {
-                // e.originalEvent.dataTransfer.setDragImage($('<div>')[0], 0, 0);
-            })
-            .bind('drag', function(e) {
-                Ox.print('dragging', e)
-            })
-            */
             .bindEvent({
                 anyclick: toggle,
                 dragstart: dragstart,
@@ -56,13 +46,23 @@ Ox.Resizebar = function(options, self) {
             .append($('<div>').addClass('OxLine'))
             .append($('<div>').addClass('OxSpace'));
 
+    if (self.options.tooltip) {
+        self.$tooltip = Ox.Tooltip({title: getTitle()});
+        that.bind({
+            mouseenter: self.$tooltip.show,
+            mouseleave: self.$tooltip.hide
+        });
+    }
+
     $.extend(self, {
         clientXY: self.options.orientation == 'horizontal' ? 'clientY' : 'clientX',
         dimensions: Ox.UI.DIMENSIONS[self.options.orientation], // fixme: should orientation be the opposite orientation here?
         edges: Ox.UI.EDGES[self.options.orientation],
-        leftOrTop: self.options.edge == 'left' || self.options.edge == 'top'
+        isLeftOrTop: self.options.edge == 'left' || self.options.edge == 'top'
     });
 
+    that.css({cursor: getCursor()});
+
     function dragstart(event, e) {
         if (self.options.resizable && !self.options.collapsed) {
             Ox.print('DRAGSTART')
@@ -78,7 +78,7 @@ Ox.Resizebar = function(options, self) {
             var d = e[self.clientXY] - self.drag.startPos,
                 size = self.options.size;
             self.options.size = Ox.limit(
-                self.drag.startSize + d * (self.leftOrTop ? 1 : -1),
+                self.drag.startSize + d * (self.isLeftOrTop ? 1 : -1),
                 self.options.resize[0],
                 self.options.resize[self.options.resize.length - 1]
             );
@@ -89,9 +89,9 @@ Ox.Resizebar = function(options, self) {
                 }
             });
             if (self.options.size != size) {
-                that.css(self.edges[self.leftOrTop ? 2 : 3], self.options.size + 'px');
+                that.css(self.edges[self.isLeftOrTop ? 2 : 3], self.options.size + 'px');
                 // fixme: send {size: x}, not x
-                if (self.leftOrTop) {
+                if (self.isLeftOrTop) {
                     self.options.elements[0]
                         .css(self.dimensions[1], self.options.size + 'px')
                     self.options.elements[1]
@@ -103,7 +103,7 @@ Ox.Resizebar = function(options, self) {
                         .css(self.dimensions[1], self.options.size + 'px')
                 }
                 triggerEvents('resize');
-                self.options.parent.updateSize(self.leftOrTop ? 0 : 1, self.options.size); // fixme: listen to event instead?
+                self.options.parent.updateSize(self.isLeftOrTop ? 0 : 1, self.options.size); // fixme: listen to event instead?
             }
         }
     }
@@ -114,14 +114,54 @@ Ox.Resizebar = function(options, self) {
         }
     }
 
+    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 getTitle() {
+        var title = '';
+        if (self.options.collapsed) {
+            title = 'Click to show';
+        } else {
+            if (self.options.resizable) {
+                title = 'Drag to resize'
+            }
+            if (self.options.collapsible) {
+                title = (title ? title + ' or c' : 'C') + 'lick to hide'
+            }
+        }
+        if (title && Ox.isString(self.options.tooltip)) {
+            title += ' ' + self.options.tooltip;
+        }
+        return title;
+    }
+
     function toggle() {
         if (self.options.collapsible) {
             // fixme: silly, pass a parameter
 			self.options.parent.toggle(
-			    self.leftOrTop ? 0 :
+			    self.isLeftOrTop ? 0
-			    self.options.parent.options('elements').length - 1
+			    : self.options.parent.options('elements').length - 1
 			);
 			self.options.collapsed = !self.options.collapsed;
+			that.css({cursor: getCursor()});
+			self.$tooltip.options({title: getTitle()});
         }
 		/*
         //Ox.print('toggle');
@@ -145,12 +185,12 @@ Ox.Resizebar = function(options, self) {
 
     function triggerEvents(event) {
         self.options.elements[0].triggerEvent(event,
-            self.leftOrTop ?
+            self.isLeftOrTop ?
             self.options.size :
             self.options.elements[0][self.dimensions[1]]()
         );
         self.options.elements[1].triggerEvent(event,
-            self.leftOrTop ?
+            self.isLeftOrTop ?
             self.options.elements[1][self.dimensions[1]]() :
             self.options.size
         );            

source/Ox.UI/js/List/Ox.List.js

@@ -1658,7 +1658,7 @@ Ox.List = function(options, self) {
         value <s> value, can be whatever that property is
     @*/
     that.value = function(id, key, value) {
-        Ox.print('that.value', id, getPositionById(id))
+        //Ox.print('that.value', id, getPositionById(id))
         var pos = getPositionById(id),
             $item = self.$items[pos],
             data = $item.options('data'),

source/Ox.UI/js/Panel/Ox.SplitPanel.js

@@ -5,33 +5,28 @@ Ox.SplitPanel <f:Ox.Element> SpliPanel Object
     (options) ->       <f> SpliPanel Object
     (options, self) -> <f> SpliPanel Object
     options <o> Options object
+        elements <[o]|[]> Array of two or three element objects
+            collapsible <b|false> If true, can be collapsed (if outer element)
+            collapsed <b|false> If true, is collapsed (if collapsible)
+            element <o> Any Ox.Element
+                If any element is collapsible or resizable, all elements must
+                have an id.
+            resizable <b|false> If true, can be resized (if outer element)
+            resize <[n]|[]> Min size, optional snappy points, and max size
+            size <n|s|"auto"> Size in px (one element must be "auto")
+            tooltip <b|s|false> If true, show tooltip, if string, append it
+        orientation <s|"horizontal"> orientation ("horizontal" or "vertical")
     self    <o> shared private variable
     resize <!> resize
+        Fires on resize, on both elements being resized
     toggle <!> toggle
+        Fires on collapse or expand, on the element being toggled
 @*/
 
-/**
-    options:
-        elements: [{            array of one, two or three elements
-            collapsible: false, collapsible or not (only for outer elements)
-            collapsed: false,   collapsed or not (only for collapsible elements)
-            element: {},        OxElement (if any element is resizable or
-                                collapsible, all OxElements must have an id)
-            resizable: false,   resizable or not (only for outer elements)
-            resize: [],         array of sizes (only for resizable elements,
-                                first value is min, last value is max,
-                                other values are 'snappy' points in between)
-            size: 0             size in px (one element must have no size)
-        }],
-        orientation: ''         'horizontal' or 'vertical'
-    events:
-        resize
-        toggle
-*/
 Ox.SplitPanel = function(options, self) {
 
     self = self || {};
-    var that = Ox.Element({}, self) // fixme: Container
+    var that = Ox.Element({}, self) // fixme: Container?
             .defaults({
                 elements: [],
                 orientation: 'horizontal'
@@ -64,34 +59,36 @@ Ox.SplitPanel = function(options, self) {
     });
 
     // create resizebars
-    self.options.elements.forEach(function(v, i) {
+    self.options.elements.forEach(function(element, i) {
         //that.append(element)
         //Ox.print('V: ', v, that.$elements[i])
         var index = i == 0 ? 0 : 1;
         that.$elements[i].appendTo(that.$element); // fixme: that.$content
-        if (v.collapsible || v.resizable) {
+        if (element.collapsible || element.resizable) {
             //Ox.print('v.size', v.size)
             self.resizebarElements[index] = i < 2 ? [0, 1] : [1, 2];
             self.$resizebars[index] = Ox.Resizebar({
-                collapsible: v.collapsible,
+                collapsed: element.collapsed,
+                collapsible: element.collapsible,
                 edge: self.edges[index],
                 elements: [
                     that.$elements[self.resizebarElements[index][0]],
                     that.$elements[self.resizebarElements[index][1]]
                 ],
-                id: v.element.options('id'),
+                id: element.element.options('id'),
                 orientation: self.options.orientation == 'horizontal' ? 'vertical' : 'horizontal',
                 parent: that, // fixme: that.$content
-                resizable: v.resizable,
+                resizable: element.resizable,
-                resize: v.resize,
+                resize: element.resize,
-                size: v.size
+                size: element.size,
+                tooltip: element.tooltip
             });
             self.$resizebars[index][i == 0 ? 'insertAfter' : 'insertBefore'](that.$elements[i]);
         }
     });
 
-    self.options.elements.forEach(function(v, i) {
+    self.options.elements.forEach(function(element, i) {
-        v.collapsed && that.css(
+        element.collapsed && that.css(
             self.edges[i == 0 ? 0 : 1], -self.options.elements[i].size + 'px'
         );
     });
@@ -120,14 +117,14 @@ Ox.SplitPanel = function(options, self) {
     }
 
     function setSizes(init) {
-        self.options.elements.forEach(function(v, i) {
+        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
             ];
-            v.size != 'auto' && that.$elements[i].css(self.dimensions[0], v.size + 'px');
+            element.size != 'auto' && that.$elements[i].css(self.dimensions[0], element.size + 'px');
             if (i == 0) {
                 that.$elements[i].css(
                     self.edges[0], edges[0] + 'px'
@@ -140,20 +137,20 @@ Ox.SplitPanel = function(options, self) {
                     self.edges[0], self.options.elements[0].size == 'auto' ? 'auto' :
                     edges[0] + getSize(self.options.elements[0]) + 'px'
                 );
-                (self.options.elements[0].size != 'auto' || v.size != 'auto') && that.$elements[i].css(
+                (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'
                 );
             } else {
                 that.$elements[i].css(
-                    self.edges[0], (self.options.elements[1].size == 'auto' || v.size == 'auto') ? 'auto' :
+                    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 (v.collapsible || v.resizable) {
+            if (element.collapsible || element.resizable) {
-                self.$resizebars[i == 0 ? 0 : 1].css(self.edges[i == 0 ? 0 : 1], v.size);
+                self.$resizebars[i == 0 ? 0 : 1].css(self.edges[i == 0 ? 0 : 1], element.size);
             }
         });
     }
@@ -166,12 +163,9 @@ Ox.SplitPanel = function(options, self) {
     that.replaceElement = function(id, element) {
         // one can pass pos instead of id
         var pos = Ox.isNumber(id) ? id : getPositionById(id);
-        //Ox.print('replace', pos, element);
-        //Ox.print('element', self.options.elements[pos].element, element)
         that.$elements[pos] = element
             .css(self.edges[2], (parseInt(element.css(self.edges[2])) || 0) + 'px')
             .css(self.edges[3], (parseInt(element.css(self.edges[3])) || 0) + 'px');
-        //alert(element.css(self.edges[3]))
         self.options.elements[pos].element.replaceWith(element.$element.$element || element.$element);
         self.options.elements[pos].element = element;
         setSizes();
@@ -183,7 +177,6 @@ Ox.SplitPanel = function(options, self) {
                 ]
             });
         });
-        //Ox.print(self.options.elements[pos])
         return that;
     };
 
@@ -263,6 +256,7 @@ Ox.SplitPanel = function(options, self) {
 
 };
 
+// fixme: remove!
 Ox.SplitPanel_ = function(options, self) {
 
     self = self || {};

source/Ox.UI/js/Video/Ox.VideoEditor.js

@@ -31,6 +31,7 @@ Ox.VideoEditor = function(options, self) {
                 showAnnotations: false,
                 showLargeTimeline: true,
                 subtitles: [],
+                tooltips: false,
                 videoRatio: 16/9,
                 videoSize: 'small',
                 video: '',
@@ -641,7 +642,8 @@ Ox.VideoEditor = function(options, self) {
                 }),
                 resizable: true,
                 resize: [192, 256, 320, 384],
-                size: self.options.annotationsSize
+                size: self.options.annotationsSize,
+                tooltip: self.options.tooltips ? 'annotations' : false
             }
         ],
         orientation: 'horizontal'

source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js

@@ -28,6 +28,7 @@ Ox.VideoPanelPlayer = function(options, self) {
                 showAnnotations: true,
                 showControls: true,
                 subtitles: [],
+                tooltips: false,
                 video: '',
                 volume: 1,
                 width: 0
@@ -121,7 +122,8 @@ Ox.VideoPanelPlayer = function(options, self) {
                     collapsed: !self.options.showControls,
                     collapsible: true,
                     element: self.$controls,
-                    size: 80
+                    size: 80,
+                    tooltip: self.options.tooltips ? 'timeline' : false
                 }
             ],
             orientation: 'vertical'
@@ -148,7 +150,8 @@ Ox.VideoPanelPlayer = function(options, self) {
                     element: self.$annotations,
                     resizable: true,
                     resize: [192, 256, 320, 384],
-                    size: self.options.annotationsSize
+                    size: self.options.annotationsSize,
+                    tooltip: self.options.tooltips ? 'annotations' : false
                 }
             ],
             orientation: 'horizontal'

source/Ox.js

@@ -2311,21 +2311,16 @@ Ox.formatColor = function(val, type) {
                 return Math.round(val);
             });
         });
-        color = [255, 255, 255];
+        color = Ox.range(3).map(function() {
-        /*
+            return Math.round(128 + val * 127);
-        background = Ox.rgb(0, val, 0.25).map(function(val) {
-            return Math.round(val);
         });
-        color = Ox.rgb(0, val, 0.75).map(function(val) {
-            return Math.round(val);
-        });
-        */
     } else if (type == 'lightness') {
         background = Ox.range(3).map(function() {
             return Math.round(val * 255);
         });
         color = Ox.range(3).map(function() {
-            return val < 0.5 ? 255 : 0;
+            var v = val * 255;
+            return val < 0.5 ? 128 + v : 255 - v;
         });
     }
     return Ox.element('<div>')