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

add themed colored elements

Browse source
This commit is contained in:
rlx 2011-10-26 14:52:03 +00:00
parent fb2ae1dee2
commit 188656bd99
5 changed files with 147 additions and 130 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
source/Ox.UI/css/Ox.UI.css
View file

@ -2173,6 +2173,16 @@ Miscellaneous
================================================================================
*/
.OxColor {
border-radius: 8px;
padding: 0 4px 1px 4px;
overflow: hidden;
text-overflow: ellipsis;
}
.OxLabel.OxColor, .OxSelect.OxColor {
padding: 0;
}
.OxText {
//line-height: 15px;
}

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

@ -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;
}());

15
source/Ox.UI/js/List/Ox.TextList.js
View file

@ -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(', ');
}

21
source/Ox/js/Color.js
View file

@ -97,4 +97,23 @@ Ox.rgb = function(hsl) {
return rgb.map(function(v) {
return v * 255;
});
};
};
/*@
Ox.toHex <f> Format RGB array as hex value
@*/
Ox.toHex = function(rgb) {
return rgb.map(function(val) {
return Ox.pad(val.toString(16).toUpperCase(), 2);
}).join('');
};
/*@
Ox.toRGB <f> Format hex value as RGB array
@*/
Ox.toRGB = function(hex) {
return Ox.range(3).map(function(i) {
return parseInt(hex.substr(i * 2, 2), 16);
});
};

59
source/Ox/js/Format.js
View file

@ -13,65 +13,6 @@ Ox.formatArea = function(num, dec) {
) + ' ' + (km ? 'k' : '') + 'm\u00B2';
};
/*@
Ox.formatColor <f> (strange one)
@*/
// FIXME: implement invert
Ox.formatColor = function(val, type, invert) {
var background, color, element;
if (type == 'hue') {
background = Ox.rgb(val, 1, 0.25).map(function(val) {
return Math.round(val);
});
color = Ox.rgb(val, 1, 0.75).map(function(val) {
return Math.round(val);
});
} else if (type == 'saturation') {
background = Ox.range(7).map(function(i) {
return Ox.rgb(i * 60, val, 0.25).map(function(val) {
return Math.round(val);
});
});
color = Ox.range(3).map(function() {
return Math.round(128 + val * 127);
});
} else if (type == 'lightness') {
background = Ox.range(3).map(function() {
return Math.round(val * 255);
});
color = Ox.range(3).map(function() {
var v = Math.round(val * 255);
return val < 0.5 ? 128 + v : v - 128;
});
}
element = Ox.element('<div>')
.css({
borderRadius: '8px',
padding: '0 4px 1px 4px',
color: 'rgb(' + color.join(', ') + ')',
overflow: 'hidden',
textAlign: 'right',
textOverflow: 'ellipsis',
//textShadow: 'black 1px 1px 1px'
})
.html(Ox.formatNumber(val, 3));
if (Ox.isNumber(background[0])) {
element.css({background: 'rgb(' + background.join(', ') + ')'});
} else {
['moz', 'o', 'webkit'].forEach(function(browser) {
element.css({
background: '-' + browser + '-linear-gradient(left, '
+ background.map(function(rgb, i) {
return 'rgb(' + rgb.join(', ') + ') '
+ Math.round(i * 100 / 6) + '%';
}).join(', ')
+ ')'
});
});
}
return element
};
/*@
Ox.formatCurrency <f> Formats a number with a currency symbol
> Ox.formatCurrency(1000, '$', 2)