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

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

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