0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

allow for themed colored images

Browse source
This commit is contained in:
rolux 2012-06-12 13:15:24 +02:00
parent 15264c188f
commit 963e594397
1 changed files with 52 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
source/Ox.UI/js/Core/Theme.js
View file

@ -25,39 +25,39 @@ Ox.Theme = (function() {
return theme; return theme;
} }
function renderElement(val, type) { function renderElement(value, type) {
var $element, background, color, lightness = that[getTheme()].lightness; var $element, background, color, lightness = that[getTheme()].lightness;
if (type == 'hue') { if (type == 'hue') {
background = Ox.rgb(val, 1, lightness.background).map(function(val) { background = Ox.rgb(value, 1, lightness.background).map(function(value) {
return Math.round(val); return Math.round(value);
}); });
color = Ox.rgb(val, 1, lightness.color).map(function(val) { color = Ox.rgb(value, 1, lightness.color).map(function(value) {
return Math.round(val); return Math.round(value);
}); });
} else if (type == 'saturation') { } else if (type == 'saturation') {
background = Ox.range(7).map(function(i) { background = Ox.range(7).map(function(i) {
return Ox.rgb(i * 60, val, lightness.background).map(function(val) { return Ox.rgb(i * 60, value, lightness.background).map(function(value) {
return Math.round(val); return Math.round(value);
}); });
}); });
color = Ox.rgb(0, 0, lightness.color).map(function(val) { color = Ox.rgb(0, 0, lightness.color).map(function(value) {
return Math.round(val); return Math.round(value);
}); });
} else if (type == 'lightness') { } else if (type == 'lightness') {
background = Ox.range(3).map(function() { background = Ox.range(3).map(function() {
return Math.round(val * 255); return Math.round(value * 255);
}); });
color = Ox.range(3).map(function() { 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') { } else if (type == 'gradient') {
background = Ox.range(2).map(function(i) { background = Ox.range(2).map(function(i) {
return Ox.rgb(val, 1, lightness.background).map(function(val) { return Ox.rgb(value, 1, lightness.background).map(function(value) {
return Math.round(val + (i == 0 ? 16 : -16)); return Math.round(value + (i == 0 ? 16 : -16));
}); });
}); });
color = Ox.rgb(val, 1, lightness.color).map(function(val) { color = Ox.rgb(value, 1, lightness.color).map(function(value) {
return Math.round(val); return Math.round(value);
}); });
} }
$element = $('<div>') $element = $('<div>')
@ -68,7 +68,7 @@ Ox.Theme = (function() {
.css({ .css({
color: 'rgb(' + color.join(', ') + ')' color: 'rgb(' + color.join(', ') + ')'
}) })
.data(type == 'lightness' ? {} : {OxColor: val}); .data(type == 'lightness' ? {} : {OxColor: value});
if (Ox.isNumber(background[0])) { if (Ox.isNumber(background[0])) {
$element.css({ $element.css({
background: 'rgb(' + background.join(', ') + ')' background: 'rgb(' + background.join(', ') + ')'
@ -96,12 +96,17 @@ Ox.Theme = (function() {
.addClass('OxTheme' + Ox.toTitleCase(theme)) .addClass('OxTheme' + Ox.toTitleCase(theme))
.removeClass('OxTheme' + Ox.toTitleCase(currentTheme)); .removeClass('OxTheme' + Ox.toTitleCase(currentTheme));
$('.OxColor').each(function() { $('.OxColor').each(function() {
var element = this; 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) { Ox.forEach(['hue', 'saturation', 'gradient'], function(type) {
if (element.className.indexOf('OxColor' + Ox.toTitleCase(type)) > -1) { if ($element.hasClass('OxColor' + Ox.toTitleCase(type))) {
var $element = $(element), var value = $element.data('OxColor'),
val = $element.data('OxColor'), $element_ = renderElement(value, type);
$element_ = renderElement(val, type);
$element.css({ $element.css({
background: $element_.css('background'), background: $element_.css('background'),
color: $element_.css('color') color: $element_.css('color')
@ -109,10 +114,11 @@ Ox.Theme = (function() {
Ox.Break(); Ox.Break();
} }
}); });
}
}); });
$('img:not(.OxVideo)').add('input[type="image"]:not(.OxVideo)').each(function(element) { $('img').add('input[type="image"]').not('.OxColor').not('.OxVideo')
var $element = $(this), .each(function(element) {
src = $element.attr('src'); var $element = $(this), src = $element.attr('src');
$element.attr({ $element.attr({
src: Ox.UI.getImageURL(Ox.UI.getImageName(src), theme) src: Ox.UI.getImageURL(Ox.UI.getImageName(src), theme)
}); });
@ -123,16 +129,16 @@ Ox.Theme = (function() {
} }
/*@ /*@
formatColor <f> formatColor formatColor <f> Returns a themed colored element
@*/ @*/
that.formatColor = function(val, type) { that.formatColor = function(value, type) {
return renderElement(val, type) return renderElement(value, type)
.css({textAlign: 'center'}) .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) { that.formatColorLevel = function(index, values, hueRange) {
hueRange = hueRange || (Ox.isBoolean(index) ? [0, 120] : [120, 0]); hueRange = hueRange || (Ox.isBoolean(index) ? [0, 120] : [120, 0]);
@ -143,6 +149,16 @@ Ox.Theme = (function() {
.html(values[+index]); .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; return that;
}()); }());