From 963e594397c6488da94824fef5544165b3f176c6 Mon Sep 17 00:00:00 2001
From: rolux <rolux@rolux.org>
Date: Tue, 12 Jun 2012 13:15:24 +0200
Subject: [PATCH] allow for themed colored images

---
 source/Ox.UI/js/Core/Theme.js | 88 +++++++++++++++++++++--------------
 1 file changed, 52 insertions(+), 36 deletions(-)

diff --git a/source/Ox.UI/js/Core/Theme.js b/source/Ox.UI/js/Core/Theme.js
index 9b9f864d..64d17578 100644
--- a/source/Ox.UI/js/Core/Theme.js
+++ b/source/Ox.UI/js/Core/Theme.js
@@ -25,39 +25,39 @@ Ox.Theme = (function() {
         return theme;
     }
 
-    function renderElement(val, type) {
+    function renderElement(value, type) {
         var $element, background, color, lightness = that[getTheme()].lightness;
         if (type == 'hue') {
-            background = Ox.rgb(val, 1, lightness.background).map(function(val) {
-                return Math.round(val);
+            background = Ox.rgb(value, 1, lightness.background).map(function(value) {
+                return Math.round(value);
             });
-            color = Ox.rgb(val, 1, lightness.color).map(function(val) {
-                return Math.round(val);
+            color = Ox.rgb(value, 1, lightness.color).map(function(value) {
+                return Math.round(value);
             });
         } 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);
+                return Ox.rgb(i * 60, value, lightness.background).map(function(value) {
+                    return Math.round(value);
                 });
             });
-            color = Ox.rgb(0, 0, lightness.color).map(function(val) {
-                return Math.round(val);
+            color = Ox.rgb(0, 0, lightness.color).map(function(value) {
+                return Math.round(value);
             });
         } else if (type == 'lightness') {
             background = Ox.range(3).map(function() {
-                return Math.round(val * 255);
+                return Math.round(value * 255);
             });
             color = Ox.range(3).map(function() {
-                return Math.round(val * 255) + (val < 0.5 ? 128 : -128);
+                return Math.round(value * 255) + (value < 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));
+                return Ox.rgb(value, 1, lightness.background).map(function(value) {
+                    return Math.round(value + (i == 0 ? 16 : -16));
                 });
             });
-            color = Ox.rgb(val, 1, lightness.color).map(function(val) {
-                return Math.round(val);
+            color = Ox.rgb(value, 1, lightness.color).map(function(value) {
+                return Math.round(value);
             });
         }
         $element = $('<div>')
@@ -68,7 +68,7 @@ Ox.Theme = (function() {
             .css({
                 color: 'rgb(' + color.join(', ') + ')'
             })
-            .data(type == 'lightness' ? {} : {OxColor: val});
+            .data(type == 'lightness' ? {} : {OxColor: value});
         if (Ox.isNumber(background[0])) {
             $element.css({
                 background: 'rgb(' + background.join(', ') + ')'
@@ -96,43 +96,49 @@ Ox.Theme = (function() {
                 .addClass('OxTheme' + Ox.toTitleCase(theme))
                 .removeClass('OxTheme' + Ox.toTitleCase(currentTheme));
             $('.OxColor').each(function() {
-                var element = this;
-                Ox.forEach(['hue', 'saturation', 'gradient'], function(type) {
-                    if (element.className.indexOf('OxColor' + Ox.toTitleCase(type)) > -1) {
-                        var $element = $(element),
-                            val = $element.data('OxColor'),
-                            $element_ = renderElement(val, type);
+                var $element = $(this);
+                if ($element.hasClass('OxColorName')) {
+                    Ox.print($element.data('OxImage'), theme, $element.data('OxColor'))
+                    $element.attr({src: Ox.UI.getImageURL(
+                        $element.data('OxImage'), theme, $element.data('OxColor')
+                    )});
+                } else {
+                    Ox.forEach(['hue', 'saturation', 'gradient'], function(type) {
+                        if ($element.hasClass('OxColor' + Ox.toTitleCase(type))) {
+                            var value = $element.data('OxColor'),
+                                $element_ = renderElement(value, type);
                             $element.css({
                                 background: $element_.css('background'),
                                 color: $element_.css('color')
                             });
-                        Ox.Break();
-                    }
-                });
+                            Ox.Break();
+                        }
+                    });
+                }
             });
-            $('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)
+            $('img').add('input[type="image"]').not('.OxColor').not('.OxVideo')
+                .each(function(element) {
+                    var $element = $(this), src = $element.attr('src');
+                    $element.attr({
+                        src: Ox.UI.getImageURL(Ox.UI.getImageName(src), theme)
+                    });
                 });
-            });
         }
         Ox.localStorage('Ox')('theme', theme);
         return that;
     }
 
     /*@
-    formatColor <f> formatColor
+    formatColor <f> Returns a themed colored element
     @*/
-    that.formatColor = function(val, type) {
-        return renderElement(val, type)
+    that.formatColor = function(value, type) {
+        return renderElement(value, type)
             .css({textAlign: 'center'})
-            .html(Ox.formatNumber(val, 3));
+            .html(Ox.formatNumber(value, 3));
     };
 
     /*@
-    formatColorLevel <f> formatColorLevel
+    formatColorLevel <f> Returns a themed colored element
     @*/
     that.formatColorLevel = function(index, values, hueRange) {
         hueRange = hueRange || (Ox.isBoolean(index) ? [0, 120] : [120, 0]);
@@ -143,6 +149,16 @@ Ox.Theme = (function() {
             .html(values[+index]);
     };
 
+    /*@
+    getColorImage <f> Returns a themed colored image
+    @*/
+    that.getColorImage = function(name, value, tooltip) {
+        return (tooltip ? Ox.Element({element: '<img>', tooltip: tooltip}) : $('<img>')) 
+            .addClass('OxColor OxColorName')
+            .attr({src: Ox.UI.getImageURL(name, null, value)})
+            .data({OxColor: value, OxImage: name});
+    };
+
     return that;
 
 }());