allow for themed colored images
This commit is contained in:
rolux
parent
15264c188f
commit
963e594397
1 changed files with 52 additions and 36 deletions
|
|
@ -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;
|
||||
|
||||
}());
|
||||
|
|
|
|||
Loading…
Reference in a new issue