add formatColor()

source/Ox.UI/js/Form/Ox.Button.js

@@ -180,6 +180,8 @@ Ox.Button = function(options, self) {
     that.toggleTitle = function() {
         self.selectedTitle = 1 - self.selectedTitle;
         setTitle(self.titles[self.selectedTitle].title);
+        // fixme: if the tooltip is visible
+        // we also need to call show()
         self.$tooltip && self.$tooltip.options({
             title: self.tooltips[self.selectedTitle]
         });

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

@@ -390,7 +390,6 @@ Ox.TextList = function(options, self) {
                     width: getItemWidth(true) + 'px'
                 });
         self.visibleColumns.forEach(function(v, i) {
-            //Ox.print(data[v.id], '(--value--)')
             var clickable = Ox.isBoolean(v.clickable) ? v.clickable : v.clickable(data),
                 editable = Ox.isBoolean(v.editable) ? v.editable : v.editable(data),
                 $cell = Ox.Element({

source/Ox.js

@@ -1154,15 +1154,22 @@ Ox.walk = function(obj, fn) {
 /*@
 Ox.hsl <f> Takes RGB values and returns HSL values
     (rgb) <[n]> HSL values
+    (r, g, b) <[n]> HSL values
     rgb <[n]> RGB values
+    r <n> red
+    g <n> green
+    b <n> blue
     > Ox.hsl([0, 0, 0])
     [0, 0, 0]
     > Ox.hsl([255, 255, 255])
     [0, 0, 1]
-    > Ox.hsl([0, 255, 0])
+    > Ox.hsl(0, 255, 0)
     [120, 1, 0.5]
 @*/
 Ox.hsl = function(rgb) {
+    if (arguments.length == 3) {
+        rgb = Ox.makeArray(arguments);
+    }
     rgb = rgb.map(function(val) {
         return val / 255;
     });
@@ -1193,16 +1200,23 @@ Ox.hsl = function(rgb) {
 /*@
 Ox.rgb <f> Takes HSL values and returns RGB values
     (hsl) <[n]> RGB values
+    (h, s, l) <[n]> RGB values
     hsl <[n]> HSL values
+    h <n> hue
+    s <n> saturation
+    l <n> lightness
     > Ox.rgb([0, 0, 0])
     [0, 0, 0]
     > Ox.rgb([0, 0, 1])
     [255, 255, 255]
-    > Ox.rgb([120, 1, 0.5])
+    > Ox.rgb(120, 1, 0.5)
     [0, 255, 0]
 @*/
 
 Ox.rgb = function(hsl) {
+    if (arguments.length == 3) {
+        hsl = Ox.makeArray(arguments);
+    }
     hsl[0] /= 360;
     var rgb = [0, 0, 0],
         v1, v2, v3;
@@ -2280,10 +2294,68 @@ Ox.formatArea = function(num, dec) {
 }
 
 /*@
-Ox.formatColor <f> (not implemented)
+Ox.formatColor <f> (strange one)
 @*/
-Ox.formatColor = function() {
-    
+Ox.formatColor = function(val, type) {
+    var background, color;
+    if (type == 'hue') {
+        background = Ox.rgb(val, 1, 0.25).map(function(val) {
+            return Math.round(val);
+        });
+        color = Ox.rgb(val, 1, 0.75).map(function(val) {
+            return Math.round(val);
+        });
+    } else if (type == 'saturation') {
+        background = Ox.range(7).map(function(i) {
+            return Ox.rgb(i * 60, val, 0.25).map(function(val) {
+                return Math.round(val);
+            });
+        });
+        color = [255, 255, 255];
+        /*
+        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;
+        });
+    }
+    return Ox.element('<div>')
+        .css({
+            borderRadius: '4px',
+            padding: '0 3px 1px 3px',
+            background: Ox.isNumber(background[0])
+                ? 'rgb(' + background.join(', ') + ')'
+                : Ox.print([/*'moz', 'o', */'webkit'].map(function(browser) {
+                    return '-' + browser + '-linear-gradient(left, '
+                        + background.map(function(rgb, i) {
+                            return 'rgb(' + rgb.join(', ') + ') '
+                                + Math.round(i * 100 / 6) + '%';
+                        }).join(', ')
+                        + ')';
+                }).join(', ')) &&
+                [/*'moz', 'o', */'webkit'].map(function(browser) {
+                    return '-' + browser + '-linear-gradient(left, '
+                        + background.map(function(rgb, i) {
+                            return 'rgb(' + rgb.join(', ') + ') '
+                                + Math.round(i * 100 / 6) + '%';
+                        }).join(', ')
+                        + ')';
+                }).join(', '),
+            color: 'rgb(' + color.join(', ') + ')',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            //textShadow: 'black 1px 1px 1px'
+        })
+        .html(Ox.formatNumber(val, 3));
 };
 
 /*@