sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests Activity

use new-style themes

Browse source
This commit is contained in:
rolux 2012-12-28 18:52:51 +01:00
commit 4881682b61
1 changed files with 24 additions and 14 deletions
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 = ''; theme = '';
classNames && Ox.forEach(classNames.split(' '), function(className) { classNames && Ox.forEach(classNames.split(' '), function(className) {
if (Ox.startsWith(className, 'OxTheme')) { if (Ox.startsWith(className, 'OxTheme')) {
theme = className.replace('OxTheme', '').toLowerCase(); theme = className.replace('OxTheme', '');
theme = theme[0].toLowerCase() + theme.substr(1);
return false; // break return false; // break
} }
}); });
@ -27,15 +28,15 @@ Ox.Theme = (function() {
} }
function renderElement(value, type) { function renderElement(value, type) {
var $element, background, color, lightness = that[getTheme()].lightness; var $element, background, color, data = that.getThemeData();
if (type == 'hue') { if (type == 'hue') {
background = Ox.rgb(value, 1, lightness.background); background = Ox.rgb(value, 1, data.themeLightnessBackground);
color = Ox.rgb(value, 1, lightness.color); color = Ox.rgb(value, 1, data.themeLightnessColor);
} 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, 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') { } else if (type == 'lightness') {
background = Ox.range(3).map(function() { background = Ox.range(3).map(function() {
return Math.round(value * 255); return Math.round(value * 255);
@ -45,11 +46,11 @@ Ox.Theme = (function() {
}); });
} 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(value, 1, lightness.background).map(function(value) { return Ox.rgb(value, 1, data.themeLightnessBackground).map(function(value) {
return value + (i == 0 ? 16 : -16); return value + (i == 0 ? 16 : -16);
}); });
}); });
color = Ox.rgb(value, 1, lightness.color); color = Ox.rgb(value, 1, data.themeLightnessColor);
} }
$element = $('<div>') $element = $('<div>')
.addClass( .addClass(
@ -84,13 +85,21 @@ Ox.Theme = (function() {
var currentTheme = getTheme(); var currentTheme = getTheme();
if (theme != currentTheme) { if (theme != currentTheme) {
Ox.UI.$body Ox.UI.$body
.addClass('OxTheme' + Ox.toTitleCase(theme)) .addClass(
.removeClass('OxTheme' + Ox.toTitleCase(currentTheme)); 'OxTheme'
+ theme[0].toUpperCase()
+ theme.substr(1)
)
.removeClass(
'OxTheme'
+ currentTheme[0].toUpperCase()
+ currentTheme.substr(1)
);
$('.OxColor').each(function() { $('.OxColor').each(function() {
var $element = $(this); var $element = $(this);
if ($element.hasClass('OxColorName')) { if ($element.hasClass('OxColorName')) {
$element.attr({src: Ox.UI.getImageURL( $element.attr({src: Ox.UI.getImageURL(
$element.data('OxImage'), theme, $element.data('OxColor') $element.data('OxImage'), $element.data('OxColor'), theme
)}); )});
} else { } else {
Ox.forEach(['hue', 'saturation', 'gradient'], function(type) { Ox.forEach(['hue', 'saturation', 'gradient'], function(type) {
@ -108,9 +117,10 @@ Ox.Theme = (function() {
}); });
$('img').add('input[type="image"]').not('.OxColor').not('.OxVideo') $('img').add('input[type="image"]').not('.OxColor').not('.OxVideo')
.each(function(element) { .each(function(element) {
var $element = $(this), src = $element.attr('src'); var $element = $(this),
$element.attr({ data = Ox.UI.getImageData($element.attr('src'));
src: Ox.UI.getImageURL(Ox.UI.getImageName(src), theme) data && $element.attr({
src: Ox.UI.getImageURL(data.name, data.color, theme)
}); });
}); });
} }