forked from 0x2620/oxjs
add themed colored elements
This commit is contained in:
rlx
parent
fb2ae1dee2
commit
188656bd99
5 changed files with 147 additions and 130 deletions
|
|
@ -5,15 +5,13 @@ Ox.Theme <f> get/set theme
|
|||
() -> <s> Get current theme
|
||||
(theme) -> <s> Set current theme
|
||||
theme <s> name of theme
|
||||
> Ox.Theme()
|
||||
'classic'
|
||||
> Ox.Theme('modern')
|
||||
'modern'
|
||||
@*/
|
||||
|
||||
Ox.Theme = function(theme) {
|
||||
Ox.Theme = (function() {
|
||||
|
||||
return theme ? setTheme(theme) : getTheme();
|
||||
var that = function(theme) {
|
||||
return theme ? setTheme(theme) : getTheme();
|
||||
};
|
||||
|
||||
function getTheme() {
|
||||
var theme = '';
|
||||
|
|
@ -26,78 +24,122 @@ Ox.Theme = function(theme) {
|
|||
return theme;
|
||||
}
|
||||
|
||||
function renderElement(val, type) {
|
||||
var $element, background, color, lightness = that.lightness[getTheme()];
|
||||
if (type == 'hue') {
|
||||
background = Ox.rgb(val, 1, lightness.background).map(function(val) {
|
||||
return Math.round(val);
|
||||
});
|
||||
color = Ox.rgb(val, 1, lightness.color).map(function(val) {
|
||||
return Math.round(val);
|
||||
});
|
||||
} 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);
|
||||
});
|
||||
});
|
||||
color = Ox.rgb(0, 0, lightness.color).map(function(val) {
|
||||
return Math.round(val);
|
||||
});
|
||||
} else if (type == 'lightness') {
|
||||
background = Ox.range(3).map(function() {
|
||||
return Math.round(val * 255);
|
||||
});
|
||||
color = Ox.range(3).map(function() {
|
||||
return Math.round(val * 255) + (val < 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));
|
||||
});
|
||||
});
|
||||
color = Ox.rgb(val, 1, lightness.color).map(function(val) {
|
||||
return Math.round(val);
|
||||
});
|
||||
}
|
||||
$element = $('<div>')
|
||||
.addClass(
|
||||
'OxColor'
|
||||
+ (type == 'lightness' ? '' : ' OxColor' + Ox.toTitleCase(type))
|
||||
)
|
||||
.css({
|
||||
color: 'rgb(' + color.join(', ') + ')'
|
||||
})
|
||||
.data(type == 'lightness' ? {} : {OxColor: val});
|
||||
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;
|
||||
};
|
||||
|
||||
function setTheme(theme) {
|
||||
var currentTheme = getTheme();
|
||||
if (theme != currentTheme) {
|
||||
Ox.UI.$body
|
||||
.addClass('OxTheme' + Ox.toTitleCase(theme))
|
||||
.removeClass('OxTheme' + Ox.toTitleCase(currentTheme));
|
||||
$('img:not(.OxVideo)').add('input[type="image"]:not(.OxVideo)').each(function() {
|
||||
var $this = $(this),
|
||||
src = $this.attr('src');
|
||||
$this.attr({
|
||||
$('.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);
|
||||
$element.css({
|
||||
background: $element_.css('background'),
|
||||
color: $element_.css('color')
|
||||
});
|
||||
return false;
|
||||
}
|
||||
});
|
||||
});
|
||||
$('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)
|
||||
});
|
||||
//Ox.print(Ox.UI.getImageName(src), Ox.UI.getImageURL(Ox.UI.getImageName(src), theme))
|
||||
});
|
||||
}
|
||||
return theme;
|
||||
return that;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/*
|
||||
Ox.UI.ready(function() {
|
||||
|
||||
Ox.theme = function() {
|
||||
var length = arguments.length,
|
||||
classes = Ox.UI.$body.attr('class').split(' '),
|
||||
arg, theme;
|
||||
Ox.forEach(classes, function(v) {
|
||||
if (Ox.startsWith(v, 'OxTheme')) {
|
||||
theme = v.replace('OxTheme', '').toLowerCase();
|
||||
if (length == 1) {
|
||||
Ox.UI.$body.removeClass(v);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
});
|
||||
if (length == 1) {
|
||||
arg = arguments[0]
|
||||
Ox.UI.$body.addClass('OxTheme' + Ox.toTitleCase(arg));
|
||||
if (theme) {
|
||||
$('img').each(function() {
|
||||
var $this = $(this);
|
||||
if (!$this.attr('src')) return; // fixme: remove, should't be neccessary
|
||||
$this.attr({
|
||||
src: $this.attr('src').replace(
|
||||
'/ox.ui.' + theme + '/', '/ox.ui.' + arg + '/'
|
||||
)
|
||||
});
|
||||
});
|
||||
$('input[type=image]').each(function() {
|
||||
var $this = $(this);
|
||||
$this.attr({
|
||||
src: $this.attr('src').replace(
|
||||
'/ox.ui.' + theme + '/', '/ox.ui.' + arg + '/'
|
||||
)
|
||||
});
|
||||
});
|
||||
$('.OxLoadingIcon').each(function() {
|
||||
var $this = $(this);
|
||||
$this.attr({
|
||||
src: $this.attr('src').replace(
|
||||
'/ox.ui.' + theme + '/', '/ox.ui.' + arg + '/'
|
||||
)
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
return theme;
|
||||
that.formatColor = function(val, type) {
|
||||
return renderElement(val, type)
|
||||
.css({textAlign: 'center'})
|
||||
.html(Ox.formatNumber(val, 3));
|
||||
};
|
||||
|
||||
Ox.theme(Ox.UI.DEFAULT_THEME);
|
||||
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]);
|
||||
};
|
||||
|
||||
that.lightness = {
|
||||
classic: {background: 0.75, color: 0.25},
|
||||
modern: {background: 0.25, color: 0.75}
|
||||
};
|
||||
|
||||
});
|
||||
*/
|
||||
return that;
|
||||
|
||||
}());
|
||||
|
|
@ -555,14 +555,19 @@ Ox.TextList = function(options, self) {
|
|||
// fixme: this may be obscure...
|
||||
// since the format of a value may depend on another value,
|
||||
// we pass all data as a second parameter to the supplied format function
|
||||
var format = self.format[key];
|
||||
var format = self.format[key], formatFunction;
|
||||
if (value === null) {
|
||||
value = '';
|
||||
} else if (format) {
|
||||
value = Ox.isObject(format)
|
||||
? Ox['format' + Ox.toTitleCase(format.type)]
|
||||
.apply(this, Ox.merge([value], format.args || []))
|
||||
: format(value, data);
|
||||
if (Ox.isObject(format)) {
|
||||
value = (
|
||||
/^color/.test(format.type.toLowerCase()) ? Ox.Theme : Ox
|
||||
)['format' + Ox.toTitleCase(format.type)].apply(
|
||||
this, Ox.merge([value], format.args || [])
|
||||
);
|
||||
} else {
|
||||
value = format(value, data);
|
||||
}
|
||||
} else if (Ox.isArray(value)) {
|
||||
value = value.join(', ');
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue