update ColorInput, ColorPicker and Picker
This commit is contained in:
rolux
parent
41f061335f
commit
64c3d3457b
3 changed files with 45 additions and 56 deletions
|
|
@ -4,49 +4,45 @@
|
|||
Ox.ColorInput <f> ColorInput Element
|
||||
([options[, self]]) -> <o:Ox.InputGroup> ColorInput Element
|
||||
options <o> Options object
|
||||
id <s> element id
|
||||
value <s|0, 0, 0> rgb value
|
||||
self <o> Shared private variable
|
||||
mode <s|'rgb'> Mode ('rgb' or 'hsl')
|
||||
value <[n]|[0, 0, 0]> Value
|
||||
self <o> Shared private variable
|
||||
@*/
|
||||
Ox.ColorInput = function(options, self) {
|
||||
|
||||
self = Ox.extend(self || {}, {
|
||||
options: Ox.extend({
|
||||
id: '',
|
||||
mode: 'RGB',
|
||||
value: options.mode == 'HSL' ? [0, 1, 0.5] : [0, 0, 0]
|
||||
}, options)
|
||||
});
|
||||
var that;
|
||||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
mode: 'rgb',
|
||||
value: options.mode == 'hsl' ? [0, 1, 0.5] : [0, 0, 0]
|
||||
})
|
||||
.options(options || {});
|
||||
|
||||
self.$inputs = [];
|
||||
Ox.loop(3, function(i) {
|
||||
self.$inputs[i] = Ox.Input({
|
||||
id: self.options.id + i,
|
||||
max: self.options.mode == 'RGB' ? 255 : i == 0 ? 360 : 1,
|
||||
type: self.options.mode == 'RGB' || i == 0 ? 'int' : 'float',
|
||||
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: 40
|
||||
})
|
||||
.css({
|
||||
background: 'rgb(' + getRGB().join(', ') + ')'
|
||||
});
|
||||
self.$inputs[4] = Ox.ColorPicker({
|
||||
id: 'picker',
|
||||
mode: self.options.mode
|
||||
mode: self.options.mode,
|
||||
width: 16
|
||||
})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
//Ox.Log('Form', 'change function called');
|
||||
self.options.value = data.value;
|
||||
Ox.loop(3, function(i) {
|
||||
self.$inputs[i].value(self.options.value[i]);
|
||||
self.$inputs[i].options({value: self.options.value[i]});
|
||||
});
|
||||
self.$inputs[3].css({
|
||||
background: 'rgb(' + getRGB().join(', ') + ')'
|
||||
|
|
@ -57,8 +53,7 @@ Ox.ColorInput = function(options, self) {
|
|||
width: 16 // this is just a hack to make the InputGroup layout work
|
||||
});
|
||||
|
||||
that = Ox.InputGroup({
|
||||
id: self.options.id,
|
||||
that.setElement(Ox.InputGroup({
|
||||
inputs: self.$inputs,
|
||||
separators: [
|
||||
{title: ',', width: 8},
|
||||
|
|
@ -66,21 +61,23 @@ Ox.ColorInput = function(options, self) {
|
|||
{title: '', width: 8},
|
||||
{title: '', width: 8}
|
||||
],
|
||||
value: self.options.value
|
||||
value: Ox.clone(self.options.value)
|
||||
})
|
||||
.bindEvent('change', change);
|
||||
.bindEvent('change', change)
|
||||
);
|
||||
|
||||
function change() {
|
||||
self.options.value = self.$inputs.map(function(input, i) {
|
||||
return i < 3 ? input.value() : null;
|
||||
});
|
||||
self.options.value = Ox.range(3).map(function(i) {
|
||||
return self.$inputs[i].options('value');
|
||||
})
|
||||
self.$inputs[3].css({
|
||||
background: 'rgb(' + getRGB().join(', ') + ')'
|
||||
});
|
||||
that.triggerEvent('change', {value: self.options.value});
|
||||
}
|
||||
|
||||
function getRGB() {
|
||||
return self.options.mode == 'RGB'
|
||||
return self.options.mode == 'rgb'
|
||||
? self.options.value
|
||||
: Ox.rgb(self.options.value).map(function(value) {
|
||||
return Math.round(value);
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
Ox.ColorPicker <f> ColorPicker Element
|
||||
([options[, self]]) -> <o:Ox.Picker> ColorPicker Element
|
||||
options <o> Options object
|
||||
id <s> element id
|
||||
value <s|0, 0, 0> rgb value
|
||||
mode <s|'rgb'> Mode ('rgb' or 'hsl')
|
||||
value <[n]|[0, 0, 0]> Value
|
||||
self <o> Shared private variable
|
||||
change <!> triggered on change of value
|
||||
@*/
|
||||
|
|
@ -15,9 +15,8 @@ Ox.ColorPicker = function(options, self) {
|
|||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
id: '',
|
||||
mode: 'RGB',
|
||||
value: options.mode == 'HSL' ? [0, 1, 0.5] : [0, 0, 0]
|
||||
mode: 'rgb',
|
||||
value: options && options.mode == 'hsl' ? [0, 1, 0.5] : [0, 0, 0]
|
||||
})
|
||||
.options(options || {});
|
||||
|
||||
|
|
@ -29,9 +28,9 @@ Ox.ColorPicker = function(options, self) {
|
|||
arrows: true,
|
||||
changeOnDrag: true,
|
||||
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,
|
||||
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),
|
||||
|
|
@ -51,17 +50,14 @@ Ox.ColorPicker = function(options, self) {
|
|||
if (i == 0) {
|
||||
// fixme: this should go into Ox.UI.css
|
||||
self.$ranges[i].children('input.OxOverlapRight').css({
|
||||
MozBorderRadius: 0,
|
||||
WebkitBorderRadius: 0
|
||||
borderRadius: 0
|
||||
});
|
||||
self.$ranges[i].children('input.OxOverlapLeft').css({
|
||||
MozBorderRadius: '0 8px 0 0',
|
||||
WebkitBorderRadius: '0 8px 0 0'
|
||||
borderRadius: '0 8px 0 0'
|
||||
});
|
||||
} else {
|
||||
self.$ranges[i].children('input').css({
|
||||
MozBorderRadius: 0,
|
||||
WebkitBorderRadius: 0
|
||||
borderRadius: 0
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -69,8 +65,7 @@ Ox.ColorPicker = function(options, self) {
|
|||
that = Ox.Picker({
|
||||
element: that,
|
||||
elementHeight: 46,
|
||||
elementWidth: self.options.mode == 'RGB' ? 328 : 432,
|
||||
id: self.options.id
|
||||
elementWidth: self.options.mode == 'rgb' ? 328 : 432
|
||||
});
|
||||
|
||||
function change(index, value) {
|
||||
|
|
@ -85,14 +80,12 @@ Ox.ColorPicker = function(options, self) {
|
|||
});
|
||||
}
|
||||
});
|
||||
that.triggerEvent('change', {
|
||||
value: self.options.value
|
||||
});
|
||||
that.triggerEvent('change', {value: self.options.value});
|
||||
}
|
||||
|
||||
function getColors(index) {
|
||||
return (
|
||||
self.options.mode == 'RGB' ? [
|
||||
self.options.mode == 'rgb' ? [
|
||||
Ox.range(3).map(function(i) {
|
||||
return i == index ? 0 : self.options.value[i];
|
||||
}),
|
||||
|
|
@ -116,7 +109,7 @@ Ox.ColorPicker = function(options, self) {
|
|||
}
|
||||
|
||||
function getRGB(values) {
|
||||
return self.options.mode == 'RGB'
|
||||
return self.options.mode == 'rgb'
|
||||
? values
|
||||
: Ox.rgb(values).map(function(value) {
|
||||
return Math.round(value);
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@ Ox.Picker = function(options, self) {
|
|||
element: null,
|
||||
elementHeight: 128,
|
||||
elementWidth: 256,
|
||||
id: '',
|
||||
overlap: 'none'
|
||||
})
|
||||
.options(options || {});
|
||||
|
|
@ -31,7 +30,9 @@ Ox.Picker = function(options, self) {
|
|||
title: 'select',
|
||||
type: 'image'
|
||||
})
|
||||
.click(showMenu)
|
||||
.bindEvent({
|
||||
click: showMenu
|
||||
})
|
||||
.appendTo(that);
|
||||
|
||||
self.$menu = Ox.Element()
|
||||
|
|
@ -76,8 +77,7 @@ Ox.Picker = function(options, self) {
|
|||
self.$selectButton
|
||||
.removeClass('OxSelected')
|
||||
.css({
|
||||
MozBorderRadius: '8px',
|
||||
WebkitBorderRadius: '8px'
|
||||
borderRadius: '8px'
|
||||
});
|
||||
that.triggerEvent('hide');
|
||||
}
|
||||
|
|
@ -89,16 +89,15 @@ Ox.Picker = function(options, self) {
|
|||
self.$selectButton
|
||||
.addClass('OxSelected')
|
||||
.css({
|
||||
MozBorderRadius: '8px 8px 0 0',
|
||||
WebkitBorderRadius: '8px 8px 0 0'
|
||||
borderRadius: '8px 8px 0 0'
|
||||
});
|
||||
self.$layer.appendTo(Ox.UI.$body);
|
||||
self.$layer.appendTo(Ox.$body);
|
||||
self.$menu
|
||||
.css({
|
||||
left: left + 'px',
|
||||
top: top + 'px'
|
||||
})
|
||||
.appendTo(Ox.UI.$body);
|
||||
.appendTo(Ox.$body);
|
||||
that.triggerEvent('show');
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue