tooltips and better cursors for splitpanels

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.options.parent.options('elements').length - 1
+			    self.isLeftOrTop ? 0
+			    : 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
         );