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

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

Browse source
This commit is contained in:
rolux 2011-11-30 15:45:42 +01:00
parent ec4a1c0605
commit a3abf40221
1 changed files with 47 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
source/Ox.UI/js/Form/Ox.ColorPicker.js
View file

@ -18,36 +18,39 @@ Ox.ColorPicker = function(options, self) {
var that = Ox.Element({}, self)
.defaults({
id: '',
value: '0, 0, 0'
mode: 'RGB',
value: options.mode == 'HSL' ? [0, 1, 0.5] : [0, 0, 0]
})
.options(options || {});
//Ox.Log('Form', self)
self.$ranges = [];
self.rgb = ['red', 'green', 'blue'];
self.values = self.options.value.split(', ');
Ox.range(3).forEach(function(i) {
Ox.loop(3, function(i) {
self.$ranges[i] = Ox.Range({
arrows: true,
id: self.options.id + Ox.toTitleCase(self.rgb[i]),
max: 255,
size: 328, // 256 + 16 + 40 + 16
id: self.options.id + i,
max: self.options.mode == 'RGB' ? 255 : i == 0 ? 359 : 1,
size: self.options.mode == 'RGB' ? 328 : 432, // 256|360 + 16 + 40 + 16
step: self.options.mode == 'RGB' || i == 0 ? 1 : 0.01,
thumbSize: 40,
thumbValue: true,
trackColors: getColors(i),
value: self.values[i]
value: self.options.value[i]
})
.css({
position: 'absolute',
top: (i * 15) + 'px'
})
.bindEvent('change', function(data) {
change(i, data.value);
.bindEvent({
change: function(data) {
change(i, data.value);
}
})
.appendTo(that);
// fixme: make self.$ranges[i].children() work
if (i == 0) {
// fixme: this should go into Ox.UI.css
self.$ranges[i].$element.children('input.OxOverlapRight').css({
MozBorderRadius: 0,
WebkitBorderRadius: 0
@ -67,17 +70,16 @@ Ox.ColorPicker = function(options, self) {
that = Ox.Picker({
element: that,
elementHeight: 46,
elementWidth: 328,
elementWidth: self.options.mode == 'RGB' ? 328 : 432,
id: self.options.id
});
function change(index, value) {
self.values[index] = value;
self.options.value = self.values.join(', ');
self.options.value[index] = value;
that.$label.css({
background: 'rgb(' + self.options.value + ')'
background: 'rgb(' + getRGB(self.options.value).join(', ') + ')'
});
Ox.range(3).forEach(function(i) {
Ox.loop(3, function(i) {
if (i != index) {
self.$ranges[i].options({
trackColors: getColors(i)
@ -90,14 +92,36 @@ Ox.ColorPicker = function(options, self) {
}
function getColors(index) {
return [
'rgb(' + Ox.range(3).map(function(v) {
return v == index ? 0 : self.values[v];
}).join(', ') + ')',
'rgb(' + Ox.range(3).map(function(v) {
return v == index ? 255 : self.values[v];
}).join(', ') + ')'
];
return (
self.options.mode == 'RGB' ? [
Ox.range(3).map(function(i) {
return i == index ? 0 : self.options.value[i];
}),
Ox.range(3).map(function(i) {
return i == index ? 255 : self.options.value[i];
})
]
: index == 0 ? Ox.range(7).map(function(i) {
return [i * 60, self.options.value[1], self.options.value[2]];
})
: Ox.range(3).map(function(i) {
return [
self.options.value[0],
index == 1 ? i / 2 : self.options.value[1],
index == 2 ? i / 2 : self.options.value[2]
];
})
).map(function(values) {
return 'rgb(' + getRGB(values).join(', ') + ')';
});
}
function getRGB(values) {
return self.options.mode == 'RGB'
? values
: Ox.rgb(values).map(function(value) {
return Math.round(value);
});
}
return that;