oxjs/source/UI/js/Core/Theme.js

193 lines
6.9 KiB
JavaScript
Raw Normal View History

2011-11-05 16:46:53 +00:00
'use strict';
2011-05-16 08:24:46 +00:00
/*@
Ox.Theme <f> get/set theme
() -> <s> Get current theme
(theme) -> <s> Set current theme
theme <s> name of theme
@*/
2011-04-22 22:03:10 +00:00
2011-10-26 14:52:03 +00:00
Ox.Theme = (function() {
2011-04-23 16:45:50 +00:00
2012-06-17 14:42:27 +00:00
var localStorage = Ox.localStorage('Ox'),
that = function(theme) {
return theme ? setTheme(theme) : getTheme();
};
2011-04-23 16:45:50 +00:00
function getTheme() {
var classNames = Ox.$body.attr('class'),
2012-05-25 21:42:10 +00:00
theme = '';
classNames && Ox.forEach(classNames.split(' '), function(className) {
2011-04-23 16:45:50 +00:00
if (Ox.startsWith(className, 'OxTheme')) {
2012-12-28 17:52:51 +00:00
theme = className.replace('OxTheme', '');
2014-01-05 10:01:33 +00:00
theme = theme[0].toLowerCase() + theme.slice(1);
2012-07-05 08:58:08 +00:00
return false; // break
2011-04-23 16:45:50 +00:00
}
});
return theme;
}
2012-06-12 11:15:24 +00:00
function renderElement(value, type) {
var $element, background, color, data = that.getThemeData(), saturation;
2011-10-26 14:52:03 +00:00
if (type == 'hue') {
2012-12-29 12:58:24 +00:00
background = Ox.rgb(value, 1, data.themeBackgroundLightness);
color = Ox.rgb(value, 1, data.themeColorLightness);
2011-10-26 14:52:03 +00:00
} else if (type == 'saturation') {
background = Ox.range(7).map(function(i) {
2012-12-29 12:58:24 +00:00
return Ox.rgb(i * 60, value, data.themeBackgroundLightness);
2011-10-26 14:52:03 +00:00
});
2012-12-29 12:58:24 +00:00
color = Ox.rgb(0, 0, data.themeColorLightness);
2011-10-26 14:52:03 +00:00
} else if (type == 'lightness') {
background = Ox.range(3).map(function() {
2012-06-12 11:15:24 +00:00
return Math.round(value * 255);
2011-10-26 14:52:03 +00:00
});
color = Ox.range(3).map(function() {
2012-06-12 11:15:24 +00:00
return Math.round(value * 255) + (value < 0.5 ? 128 : -128);
2011-10-26 14:52:03 +00:00
});
} else if (type == 'gradient') {
saturation = value === null ? 0 : 1;
2011-10-26 14:52:03 +00:00
background = Ox.range(2).map(function(i) {
return Ox.rgb(value || 0, saturation, data.themeBackgroundLightness).map(function(value) {
return (value || 0) + (i == 0 ? 16 : -16);
2011-10-26 14:52:03 +00:00
});
});
color = Ox.rgb(value || 0, saturation, data.themeColorLightness);
2011-10-26 14:52:03 +00:00
}
$element = $('<div>')
.addClass(
'OxColor'
+ (type == 'lightness' ? '' : ' OxColor' + Ox.toTitleCase(type))
)
.css({
color: 'rgb(' + color.join(', ') + ')'
})
2012-06-12 11:15:24 +00:00
.data(type == 'lightness' ? {} : {OxColor: value});
2011-10-26 14:52:03 +00:00
if (Ox.isNumber(background[0])) {
$element.css({
background: 'rgb(' + background.join(', ') + ')'
});
} else {
['moz', 'o', 'webkit'].forEach(function(browser) {
$element.css({
background: '-' + browser + '-linear-gradient('
+ (background.length == 2 ? 'top' : 'left') + ', '
+ background.map(function(rgb, i) {
return 'rgb(' + rgb.join(', ') + ') '
+ Math.round(i * 100 / (background.length - 1)) + '%';
}).join(', ')
+ ')'
});
});
}
return $element;
};
2011-04-23 16:45:50 +00:00
function setTheme(theme) {
var currentTheme = getTheme();
if (theme != currentTheme && Ox.contains(that.getThemes(), theme)) {
Ox.$body
2012-12-28 17:52:51 +00:00
.addClass(
'OxTheme'
+ theme[0].toUpperCase()
+ theme.substr(1)
)
.removeClass(
'OxTheme'
+ currentTheme[0].toUpperCase()
+ currentTheme.substr(1)
);
2011-10-26 14:52:03 +00:00
$('.OxColor').each(function() {
2012-06-12 11:15:24 +00:00
var $element = $(this);
if ($element.hasClass('OxColorName')) {
2014-09-26 12:31:20 +00:00
$element.attr({src: Ox.UI.getImageURL(
2012-12-28 17:52:51 +00:00
$element.data('OxImage'), $element.data('OxColor'), theme
2012-06-12 11:15:24 +00:00
)});
} else {
Ox.forEach(['hue', 'saturation', 'gradient'], function(type) {
if ($element.hasClass('OxColor' + Ox.toTitleCase(type))) {
var value = $element.data('OxColor'),
$element_ = renderElement(value, type);
2011-10-26 14:52:03 +00:00
$element.css({
background: $element_.css('background'),
color: $element_.css('color')
});
2012-07-05 08:58:08 +00:00
return false; // break
2012-06-12 11:15:24 +00:00
}
});
}
2011-10-26 14:52:03 +00:00
});
$('img').add('input[type="image"]').not('.OxColor')
2012-06-12 11:15:24 +00:00
.each(function(element) {
2012-12-28 17:52:51 +00:00
var $element = $(this),
2014-09-26 12:31:20 +00:00
data = Ox.UI.getImageData($element.attr('src'));
2012-12-28 17:52:51 +00:00
data && $element.attr({
2014-09-26 12:31:20 +00:00
src: Ox.UI.getImageURL(data.name, data.color, theme)
2012-06-12 11:15:24 +00:00
});
2011-04-23 16:45:50 +00:00
});
}
2012-06-17 14:42:27 +00:00
localStorage({theme: theme});
2011-10-26 14:52:03 +00:00
return that;
2011-04-23 16:45:50 +00:00
}
/*@
getThemes <f> Returns the names of all available themes
2014-09-26 13:04:34 +00:00
() -> <[s]> Theme names
@*/
that.getThemes = function() {
2014-09-26 12:31:20 +00:00
return Object.keys(Ox.UI.THEMES);
};
/*@
getThemeData <f> Returns data for a given theme, or for the current theme
([theme]) -> <o> Theme data
theme <s> Theme name
@*/
that.getThemeData = function(theme) {
2014-09-26 12:31:20 +00:00
return Ox.UI.THEMES[theme || Ox.Theme()];
};
2012-05-21 10:38:18 +00:00
/*@
2012-06-12 11:15:24 +00:00
formatColor <f> Returns a themed colored element
2012-05-21 10:38:18 +00:00
@*/
2012-06-12 11:15:24 +00:00
that.formatColor = function(value, type) {
return renderElement(value, type)
2011-10-26 14:52:03 +00:00
.css({textAlign: 'center'})
.html(value === null ? '' : Ox.formatNumber(value, 3));
2011-10-26 14:52:03 +00:00
};
2011-04-23 16:45:50 +00:00
2012-05-21 10:38:18 +00:00
/*@
2012-06-12 11:15:24 +00:00
formatColorLevel <f> Returns a themed colored element
2012-05-21 10:38:18 +00:00
@*/
2011-10-26 14:52:03 +00:00
that.formatColorLevel = function(index, values, hueRange) {
hueRange = hueRange || (Ox.isBoolean(index) ? [0, 120] : [120, 0]);
var step = (hueRange[1] - hueRange[0]) / (values.length - 1),
hue = hueRange[0] + index * step;
return renderElement(hue, 'gradient')
.css({textAlign: 'center'})
.html(values[+index]);
2011-04-22 22:03:10 +00:00
};
2012-10-05 12:14:58 +00:00
/*@
formatColorPercent <f> Returns a themed colored element
@*/
that.formatColorPercent = function(value, decimals, sqrt) {
var hue = (sqrt ? Math.sqrt(value) * 10 : value) * 1.2;
return renderElement(hue, 'gradient')
.css({textAlign: 'center'})
.html(Ox.formatNumber(value, decimals) + '%')
};
2012-06-12 11:15:24 +00:00
/*@
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')
2014-09-26 12:31:20 +00:00
.attr({src: Ox.UI.getImageURL(name, value)})
2012-06-12 11:15:24 +00:00
.data({OxColor: value, OxImage: name});
};
2011-10-26 14:52:03 +00:00
return that;
2011-04-22 22:03:10 +00:00
2011-11-04 16:04:46 +00:00
}());