92 lines
2.7 KiB
JavaScript
92 lines
2.7 KiB
JavaScript
// vim: et:ts=4:sw=4:sts=4:ft=js
|
|
Ox.ColorPicker = function(options, self) {
|
|
|
|
var self = self || {},
|
|
that = new Ox.Element('div', self)
|
|
.defaults({
|
|
id: '',
|
|
value: '0, 0, 0'
|
|
})
|
|
.options(options || {});
|
|
|
|
//Ox.print(self)
|
|
self.$ranges = [];
|
|
self.rgb = ['red', 'green', 'blue'];
|
|
self.values = self.options.value.split(', ');
|
|
|
|
Ox.range(3).forEach(function(i) {
|
|
self.$ranges[i] = new Ox.Range({
|
|
arrows: true,
|
|
id: self.options.id + Ox.toTitleCase(self.rgb[i]),
|
|
max: 255,
|
|
size: 328, // 256 + 16 + 40 + 16
|
|
thumbSize: 40,
|
|
thumbValue: true,
|
|
trackColors: getColors(i),
|
|
value: self.values[i]
|
|
})
|
|
.css({
|
|
position: 'absolute',
|
|
top: (i * 15) + 'px'
|
|
})
|
|
.bindEvent('change', function(event, data) {
|
|
change(i, data.value);
|
|
})
|
|
.appendTo(that);
|
|
// fixme: make self.$ranges[i].children() work
|
|
if (i == 0) {
|
|
self.$ranges[i].$element.children('input.OxOverlapRight').css({
|
|
MozBorderRadius: 0,
|
|
WebkitBorderRadius: 0
|
|
});
|
|
self.$ranges[i].$element.children('input.OxOverlapLeft').css({
|
|
MozBorderRadius: '0 8px 0 0',
|
|
WebkitBorderRadius: '0 8px 0 0'
|
|
});
|
|
} else {
|
|
self.$ranges[i].$element.children('input').css({
|
|
MozBorderRadius: 0,
|
|
WebkitBorderRadius: 0
|
|
});
|
|
}
|
|
});
|
|
|
|
that = new Ox.Picker({
|
|
element: that,
|
|
elementHeight: 46,
|
|
elementWidth: 328,
|
|
id: self.options.id
|
|
});
|
|
|
|
function change(index, value) {
|
|
self.values[index] = value;
|
|
self.options.value = self.values.join(', ');
|
|
that.$label.css({
|
|
background: 'rgb(' + self.options.value + ')'
|
|
});
|
|
Ox.range(3).forEach(function(i) {
|
|
if (i != index) {
|
|
self.$ranges[i].options({
|
|
trackColors: getColors(i)
|
|
});
|
|
}
|
|
});
|
|
that.triggerEvent('change', {
|
|
value: self.options.value
|
|
});
|
|
}
|
|
|
|
function getColors(index) {
|
|
return [
|
|
'rgb(' + $.map(Ox.range(3), function(v) {
|
|
return v == index ? 0 : self.values[v];
|
|
}).join(', ') + ')',
|
|
'rgb(' + $.map(Ox.range(3), function(v) {
|
|
return v == index ? 255 : self.values[v];
|
|
}).join(', ') + ')'
|
|
]
|
|
}
|
|
|
|
return that;
|
|
|
|
};
|