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

add mode option to ColorInput ('RGB' or 'HSL')

Browse source
This commit is contained in:
rolux 2011-11-30 15:46:29 +01:00
parent a3abf40221
commit a6264a472d
1 changed files with 34 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
source/Ox.UI/js/Form/Ox.ColorInput.js
View file

@ -15,42 +15,44 @@ Ox.ColorInput = function(options, self) {
self = Ox.extend(self || {}, {
options: Ox.extend({
id: '',
value: '0, 0, 0'
mode: 'RGB',
value: options.mode == 'HSL' ? [0, 1, 0.5] : [0, 0, 0]
}, options)
});
var that;
self.values = self.options.value.split(', ');
self.$inputs = [];
['red', 'green', 'blue'].forEach(function(v, i) {
Ox.loop(3, function(i) {
self.$inputs[i] = Ox.Input({
id: v,
max: 255,
type: 'integer',
value: self.values[i],
width: 36
id: self.options.id + i,
max: self.options.mode == 'RGB' ? 255 : i == 0 ? 360 : 1,
type: self.options.mode == 'RGB' || i == 0 ? 'int' : 'float',
value: self.options.value[i],
width: 40
})
.bindEvent('autovalidate', change);
});
self.$inputs[3] = Ox.Label({
id: 'color',
width: 36
width: 40
})
.css({
background: 'rgb(' + self.options.value + ')'
background: 'rgb(' + getRGB() + ')'
});
self.$inputs[4] = Ox.ColorPicker({
id: 'picker'
id: 'picker',
mode: self.options.mode
})
.bindEvent('change', function(data) {
.bindEvent({
change: function(data) {
//Ox.Log('Form', 'change function called');
self.options.value = data.value;
self.values = data.value.split(', ');
Ox.range(3).forEach(function(i) {
Ox.loop(3, function(i) {
self.$inputs[i].options({
value: self.values[i]
value: self.options.value[i]
});
});
}
})
.options({
width: 16 // this is just a hack to make the InputGroup layout work
@ -65,16 +67,24 @@ Ox.ColorInput = function(options, self) {
{title: '', width: 8},
{title: '', width: 8}
],
value: self.options.value // fixme: it'd be nicer if this would be taken care of by passing self
}, self)
value: self.options.value // fixme: it'd be nicer if this would be taken care of by passing self <-- but we're passing self!
})
.bindEvent('change', change);
function change() {
self.options.value = self.$inputs.map(function(v) {
return v.options('value');
}).join(', ');
});
self.$inputs[3].css({
background: 'rgb(' + self.options.value + ')'
background: 'rgb(' + getRGB() + ')'
});
}
function getRGB() {
return self.options.mode == 'RGB'
? self.options.value
: Ox.rgb(self.options.value).map(function(value) {
return Math.round(value);
});
}