add themed colored elements

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

@@ -2173,6 +2173,16 @@ Miscellaneous
 ================================================================================
 */
 
+.OxColor {
+    border-radius: 8px;
+    padding: 0 4px 1px 4px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.OxLabel.OxColor, .OxSelect.OxColor {
+    padding: 0;
+}
+
 .OxText {
     //line-height: 15px;
 }

source/Ox.UI/js/Core/Ox.Theme.js

@@ -5,15 +5,13 @@ Ox.Theme <f> get/set theme
     ()      -> <s>  Get current theme
     (theme) -> <s>  Set current theme
     theme <s>   name of theme
-    > Ox.Theme()
-    'classic'
-    > Ox.Theme('modern')
-    'modern'
 @*/
 
-Ox.Theme = function(theme) {
+Ox.Theme = (function() {
 
-    return theme ? setTheme(theme) : getTheme();
+    var that = function(theme) {
+        return theme ? setTheme(theme) : getTheme();
+    };
 
     function getTheme() {
         var theme = '';
@@ -26,78 +24,122 @@ Ox.Theme = function(theme) {
         return theme;
     }
 
+    function renderElement(val, type) {
+        var $element, background, color, lightness = that.lightness[getTheme()];
+        if (type == 'hue') {
+            background = Ox.rgb(val, 1, lightness.background).map(function(val) {
+                return Math.round(val);
+            });
+            color = Ox.rgb(val, 1, lightness.color).map(function(val) {
+                return Math.round(val);
+            });
+        } else if (type == 'saturation') {
+            background = Ox.range(7).map(function(i) {
+                return Ox.rgb(i * 60, val, lightness.background).map(function(val) {
+                    return Math.round(val);
+                });
+            });
+            color = Ox.rgb(0, 0, lightness.color).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 Math.round(val * 255) + (val < 0.5 ? 128 : -128);
+            });
+        } else if (type == 'gradient') {
+            background = Ox.range(2).map(function(i) {
+                return Ox.rgb(val, 1, lightness.background).map(function(val) {
+                    return Math.round(val + (i == 0 ? 16 : -16));
+                });
+            });
+            color = Ox.rgb(val, 1, lightness.color).map(function(val) {
+                return Math.round(val);
+            });
+        }
+        $element = $('<div>')
+            .addClass(
+                'OxColor'
+                + (type == 'lightness' ? '' : ' OxColor' + Ox.toTitleCase(type))
+            )
+            .css({
+                color: 'rgb(' + color.join(', ') + ')'
+            })
+            .data(type == 'lightness' ? {} : {OxColor: val});
+        if (Ox.isNumber(background[0])) {
+            $element.css({
+                background: 'rgb(' + background.join(', ') + ')'
+            });
+        } else {
+            ['moz', 'o', 'webkit'].forEach(function(browser) {
+                $element.css({
+                    background: '-' + browser + '-linear-gradient('
+                        + (background.length == 2 ? 'top' : 'left') + ', '
+                        + background.map(function(rgb, i) {
+                            return 'rgb(' + rgb.join(', ') + ') '
+                                + Math.round(i * 100 / (background.length - 1)) + '%';
+                        }).join(', ')
+                        + ')'
+                });
+            });
+        }
+        return $element;
+    };
+
     function setTheme(theme) {
         var currentTheme = getTheme();
         if (theme != currentTheme) {
             Ox.UI.$body
                 .addClass('OxTheme' + Ox.toTitleCase(theme))
                 .removeClass('OxTheme' + Ox.toTitleCase(currentTheme));
-            $('img:not(.OxVideo)').add('input[type="image"]:not(.OxVideo)').each(function() {
+            $('.OxColor').each(function() {
-                var $this = $(this),
+                var element = this;
-                    src = $this.attr('src');
+                Ox.forEach(['hue', 'saturation', 'gradient'], function(type) {
-                $this.attr({
+                    if (element.className.indexOf('OxColor' + Ox.toTitleCase(type)) > -1) {
+                        var $element = $(element),
+                            val = $element.data('OxColor'),
+                            $element_ = renderElement(val, type);
+                            $element.css({
+                                background: $element_.css('background'),
+                                color: $element_.css('color')
+                            });
+                        return false;
+                    }
+                });
+            });
+            $('img:not(.OxVideo)').add('input[type="image"]:not(.OxVideo)').each(function(element) {
+                var $element = $(this),
+                    src = $element.attr('src');
+                $element.attr({
                     src: Ox.UI.getImageURL(Ox.UI.getImageName(src), theme)
                 });
-                //Ox.print(Ox.UI.getImageName(src), Ox.UI.getImageURL(Ox.UI.getImageName(src), theme))
             });
         }
-        return theme;
+        return that;
     }
 
-};
+    that.formatColor = function(val, type) {
-
+        return renderElement(val, type)
-/*
+            .css({textAlign: 'center'})
-Ox.UI.ready(function() {
+            .html(Ox.formatNumber(val, 3));
-    
-    Ox.theme = function() {
-        var length = arguments.length,
-            classes = Ox.UI.$body.attr('class').split(' '),
-            arg, theme;
-        Ox.forEach(classes, function(v) {
-            if (Ox.startsWith(v, 'OxTheme')) {
-                theme = v.replace('OxTheme', '').toLowerCase();
-                if (length == 1) {
-                    Ox.UI.$body.removeClass(v);
-                }
-                return false;
-            }
-        });
-        if (length == 1) {
-            arg = arguments[0]
-            Ox.UI.$body.addClass('OxTheme' + Ox.toTitleCase(arg));
-            if (theme) {
-                $('img').each(function() {
-                    var $this = $(this);
-                    if (!$this.attr('src')) return; // fixme: remove, should't be neccessary
-                    $this.attr({
-                        src: $this.attr('src').replace(
-                            '/ox.ui.' + theme + '/', '/ox.ui.' + arg + '/'
-                        )
-                    });
-                });
-                $('input[type=image]').each(function() {
-                    var $this = $(this);
-                    $this.attr({
-                        src: $this.attr('src').replace(
-                            '/ox.ui.' + theme + '/', '/ox.ui.' + arg + '/'
-                        )
-                    });
-                });
-                $('.OxLoadingIcon').each(function() {
-                    var $this = $(this);
-                    $this.attr({
-                        src: $this.attr('src').replace(
-                            '/ox.ui.' + theme + '/', '/ox.ui.' + arg + '/'
-                        )
-                    });
-                })
-            }
-        }
-        return theme;
     };
 
-    Ox.theme(Ox.UI.DEFAULT_THEME);
+    that.formatColorLevel = function(index, values, hueRange) {
+        hueRange = hueRange || (Ox.isBoolean(index) ? [0, 120] : [120, 0]);
+        var step = (hueRange[1] - hueRange[0]) / (values.length - 1),
+            hue = hueRange[0] + index * step;
+        return renderElement(hue, 'gradient')
+            .css({textAlign: 'center'})
+            .html(values[+index]);
+    };
 
+    that.lightness = {
+        classic: {background: 0.75, color: 0.25},
+        modern: {background: 0.25, color: 0.75}
+    };
 
-});
+    return that;
-*/
+
+}());

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

@@ -555,14 +555,19 @@ Ox.TextList = function(options, self) {
         // fixme: this may be obscure...
         // since the format of a value may depend on another value,
         // we pass all data as a second parameter to the supplied format function
-        var format = self.format[key];
+        var format = self.format[key], formatFunction;
         if (value === null) {
             value = '';
         } else if (format) {
-            value = Ox.isObject(format)
+            if (Ox.isObject(format)) {
-                ? Ox['format' + Ox.toTitleCase(format.type)]
+                value = (
-                    .apply(this, Ox.merge([value], format.args || []))
+                    /^color/.test(format.type.toLowerCase()) ? Ox.Theme : Ox
-                : format(value, data);
+                )['format' + Ox.toTitleCase(format.type)].apply(
+                    this, Ox.merge([value], format.args || [])
+                );
+            } else {
+                value = format(value, data);
+            }
         } else if (Ox.isArray(value)) {
             value = value.join(', ');
         }

source/Ox/js/Color.js

@@ -98,3 +98,22 @@ Ox.rgb = function(hsl) {
         return v * 255;
     });
 };
+
+/*@
+Ox.toHex <f> Format RGB array as hex value
+@*/
+Ox.toHex = function(rgb) {
+    return rgb.map(function(val) {
+        return Ox.pad(val.toString(16).toUpperCase(), 2);
+    }).join('');
+};
+
+/*@
+Ox.toRGB <f> Format hex value as RGB array
+@*/
+Ox.toRGB = function(hex) {
+    return Ox.range(3).map(function(i) {
+        return parseInt(hex.substr(i * 2, 2), 16);
+    });
+};
+

source/Ox/js/Format.js

@@ -13,65 +13,6 @@ Ox.formatArea = function(num, dec) {
     ) + ' ' + (km ? 'k' : '') + 'm\u00B2';
 };
 
-/*@
-Ox.formatColor <f> (strange one)
-@*/
-// FIXME: implement invert
-Ox.formatColor = function(val, type, invert) {
-    var background, color, element;
-    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 = Ox.range(3).map(function() {
-            return Math.round(128 + val * 127);
-        });
-    } else if (type == 'lightness') {
-        background = Ox.range(3).map(function() {
-            return Math.round(val * 255);
-        });
-        color = Ox.range(3).map(function() {
-            var v = Math.round(val * 255);
-            return val < 0.5 ? 128 + v : v - 128;
-        });
-    }
-    element = Ox.element('<div>')
-        .css({
-            borderRadius: '8px',
-            padding: '0 4px 1px 4px',
-            color: 'rgb(' + color.join(', ') + ')',
-            overflow: 'hidden',
-            textAlign: 'right',
-            textOverflow: 'ellipsis',
-            //textShadow: 'black 1px 1px 1px'
-        })
-        .html(Ox.formatNumber(val, 3));
-    if (Ox.isNumber(background[0])) {
-        element.css({background: 'rgb(' + background.join(', ') + ')'});
-    } else {
-        ['moz', 'o', 'webkit'].forEach(function(browser) {
-            element.css({
-                background: '-' + browser + '-linear-gradient(left, '
-                    + background.map(function(rgb, i) {
-                        return 'rgb(' + rgb.join(', ') + ') '
-                            + Math.round(i * 100 / 6) + '%';
-                    }).join(', ')
-                    + ')'
-            });
-        });
-    }
-    return element
-};
-
 /*@
 Ox.formatCurrency <f> Formats a number with a currency symbol
     > Ox.formatCurrency(1000, '$', 2)