use new-style themes
This commit is contained in:
parent
edbcb916fd
commit
4881682b61
1 changed files with 24 additions and 14 deletions
|
@ -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)
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue