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

use new-style themes

Browse source
This commit is contained in:
rolux 2012-12-28 18:52:51 +01:00
parent edbcb916fd
commit 4881682b61
1 changed files with 24 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -19,7 +19,8 @@ Ox.Theme = (function() {
theme = '';
classNames && Ox.forEach(classNames.split(' '), function(className) {
if (Ox.startsWith(className, 'OxTheme')) {
theme = className.replace('OxTheme', '').toLowerCase();
theme = className.replace('OxTheme', '');
theme = theme[0].toLowerCase() + theme.substr(1);
return false; // break
}
});
@ -27,15 +28,15 @@ Ox.Theme = (function() {
}
function renderElement(value, type) {
var $element, background, color, lightness = that[getTheme()].lightness;
var $element, background, color, data = that.getThemeData();
if (type == 'hue') {
background = Ox.rgb(value, 1, lightness.background);
color = Ox.rgb(value, 1, lightness.color);
background = Ox.rgb(value, 1, data.themeLightnessBackground);
color = Ox.rgb(value, 1, data.themeLightnessColor);
} else if (type == 'saturation') {
background = Ox.range(7).map(function(i) {
return Ox.rgb(i * 60, value, lightness.background);
return Ox.rgb(i * 60, value, data.themeLightnessBackground);
});
color = Ox.rgb(0, 0, lightness.color);
color = Ox.rgb(0, 0, data.themeLightnessColor);
} else if (type == 'lightness') {
background = Ox.range(3).map(function() {
return Math.round(value * 255);
@ -45,11 +46,11 @@ Ox.Theme = (function() {
});
} else if (type == 'gradient') {
background = Ox.range(2).map(function(i) {
return Ox.rgb(value, 1, lightness.background).map(function(value) {
return Ox.rgb(value, 1, data.themeLightnessBackground).map(function(value) {
return value + (i == 0 ? 16 : -16);
});
});
color = Ox.rgb(value, 1, lightness.color);
color = Ox.rgb(value, 1, data.themeLightnessColor);
}
$element = $('<div>')
.addClass(
@ -84,13 +85,21 @@ Ox.Theme = (function() {
var currentTheme = getTheme();
if (theme != currentTheme) {
Ox.UI.$body
.addClass('OxTheme' + Ox.toTitleCase(theme))
.removeClass('OxTheme' + Ox.toTitleCase(currentTheme));
.addClass(
'OxTheme'
+ theme[0].toUpperCase()
+ theme.substr(1)
)
.removeClass(
'OxTheme'
+ currentTheme[0].toUpperCase()
+ currentTheme.substr(1)
);
$('.OxColor').each(function() {
var $element = $(this);
if ($element.hasClass('OxColorName')) {
$element.attr({src: Ox.UI.getImageURL(
$element.data('OxImage'), theme, $element.data('OxColor')
$element.data('OxImage'), $element.data('OxColor'), theme
)});
} else {
Ox.forEach(['hue', 'saturation', 'gradient'], function(type) {
@ -108,9 +117,10 @@ Ox.Theme = (function() {
});
$('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)
var $element = $(this),
data = Ox.UI.getImageData($element.attr('src'));
data && $element.attr({
src: Ox.UI.getImageURL(data.name, data.color, theme)
});
});
}