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

update ColorInput, ColorPicker and Picker

Browse source
This commit is contained in:
rolux 2012-06-15 11:43:11 +02:00
parent 41f061335f
commit 64c3d3457b
3 changed files with 45 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,49 +4,45 @@
Ox.ColorInput <f> ColorInput Element Ox.ColorInput <f> ColorInput Element
([options[, self]]) -> <o:Ox.InputGroup> ColorInput Element ([options[, self]]) -> <o:Ox.InputGroup> ColorInput Element
options <o> Options object options <o> Options object
id <s> element id mode <s|'rgb'> Mode ('rgb' or 'hsl')
value <s|0, 0, 0> rgb value value <[n]|[0, 0, 0]> Value
self <o> Shared private variable self <o> Shared private variable
@*/ @*/
Ox.ColorInput = function(options, self) { Ox.ColorInput = function(options, self) {
self = Ox.extend(self || {}, { self = self || {};
options: Ox.extend({ var that = Ox.Element({}, self)
id: '', .defaults({
mode: 'RGB', mode: 'rgb',
value: options.mode == 'HSL' ? [0, 1, 0.5] : [0, 0, 0] value: options.mode == 'hsl' ? [0, 1, 0.5] : [0, 0, 0]
}, options) })
}); .options(options || {});
var that;
self.$inputs = []; self.$inputs = [];
Ox.loop(3, function(i) { Ox.loop(3, function(i) {
self.$inputs[i] = Ox.Input({ self.$inputs[i] = Ox.Input({
id: self.options.id + i, max: self.options.mode == 'rgb' ? 255 : i == 0 ? 360 : 1,
max: self.options.mode == 'RGB' ? 255 : i == 0 ? 360 : 1, type: self.options.mode == 'rgb' || i == 0 ? 'int' : 'float',
type: self.options.mode == 'RGB' || i == 0 ? 'int' : 'float',
value: self.options.value[i], value: self.options.value[i],
width: 40 width: 40
}) })
.bindEvent('autovalidate', change); .bindEvent('autovalidate', change);
}); });
self.$inputs[3] = Ox.Label({ self.$inputs[3] = Ox.Label({
id: 'color',
width: 40 width: 40
}) })
.css({ .css({
background: 'rgb(' + getRGB().join(', ') + ')' background: 'rgb(' + getRGB().join(', ') + ')'
}); });
self.$inputs[4] = Ox.ColorPicker({ self.$inputs[4] = Ox.ColorPicker({
id: 'picker', mode: self.options.mode,
mode: self.options.mode width: 16
}) })
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {
//Ox.Log('Form', 'change function called');
self.options.value = data.value; self.options.value = data.value;
Ox.loop(3, function(i) { 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({ self.$inputs[3].css({
background: 'rgb(' + getRGB().join(', ') + ')' 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 width: 16 // this is just a hack to make the InputGroup layout work
}); });
that = Ox.InputGroup({ that.setElement(Ox.InputGroup({
id: self.options.id,
inputs: self.$inputs, inputs: self.$inputs,
separators: [ separators: [
{title: ',', width: 8}, {title: ',', width: 8},
@ -66,21 +61,23 @@ Ox.ColorInput = function(options, self) {
{title: '', width: 8}, {title: '', width: 8},
{title: '', width: 8} {title: '', width: 8}
], ],
value: self.options.value value: Ox.clone(self.options.value)
}) })
.bindEvent('change', change); .bindEvent('change', change)
);
function change() { function change() {
self.options.value = self.$inputs.map(function(input, i) { self.options.value = Ox.range(3).map(function(i) {
return i < 3 ? input.value() : null; return self.$inputs[i].options('value');
}); })
self.$inputs[3].css({ self.$inputs[3].css({
background: 'rgb(' + getRGB().join(', ') + ')' background: 'rgb(' + getRGB().join(', ') + ')'
}); });
that.triggerEvent('change', {value: self.options.value});
} }
function getRGB() { function getRGB() {
return self.options.mode == 'RGB' return self.options.mode == 'rgb'
? self.options.value ? self.options.value
: Ox.rgb(self.options.value).map(function(value) { : Ox.rgb(self.options.value).map(function(value) {
return Math.round(value); return Math.round(value);

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

@ -4,8 +4,8 @@
Ox.ColorPicker <f> ColorPicker Element Ox.ColorPicker <f> ColorPicker Element
([options[, self]]) -> <o:Ox.Picker> ColorPicker Element ([options[, self]]) -> <o:Ox.Picker> ColorPicker Element
options <o> Options object options <o> Options object
id <s> element id mode <s|'rgb'> Mode ('rgb' or 'hsl')
value <s|0, 0, 0> rgb value value <[n]|[0, 0, 0]> Value
self <o> Shared private variable self <o> Shared private variable
change <!> triggered on change of value change <!> triggered on change of value
@*/ @*/
@ -15,9 +15,8 @@ Ox.ColorPicker = function(options, self) {
self = self || {}; self = self || {};
var that = Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
id: '', mode: 'rgb',
mode: 'RGB', value: options && options.mode == 'hsl' ? [0, 1, 0.5] : [0, 0, 0]
value: options.mode == 'HSL' ? [0, 1, 0.5] : [0, 0, 0]
}) })
.options(options || {}); .options(options || {});
@ -29,9 +28,9 @@ Ox.ColorPicker = function(options, self) {
arrows: true, arrows: true,
changeOnDrag: true, changeOnDrag: true,
id: self.options.id + i, id: self.options.id + i,
max: self.options.mode == 'RGB' ? 255 : i == 0 ? 359 : 1, max: self.options.mode == 'rgb' ? 255 : i == 0 ? 359 : 1,
size: self.options.mode == 'RGB' ? 328 : 432, // 256|360 + 16 + 40 + 16 size: self.options.mode == 'rgb' ? 328 : 432, // 256|360 + 16 + 40 + 16
step: self.options.mode == 'RGB' || i == 0 ? 1 : 0.01, step: self.options.mode == 'rgb' || i == 0 ? 1 : 0.01,
thumbSize: 40, thumbSize: 40,
thumbValue: true, thumbValue: true,
trackColors: getColors(i), trackColors: getColors(i),
@ -51,17 +50,14 @@ Ox.ColorPicker = function(options, self) {
if (i == 0) { if (i == 0) {
// fixme: this should go into Ox.UI.css // fixme: this should go into Ox.UI.css
self.$ranges[i].children('input.OxOverlapRight').css({ self.$ranges[i].children('input.OxOverlapRight').css({
MozBorderRadius: 0, borderRadius: 0
WebkitBorderRadius: 0
}); });
self.$ranges[i].children('input.OxOverlapLeft').css({ self.$ranges[i].children('input.OxOverlapLeft').css({
MozBorderRadius: '0 8px 0 0', borderRadius: '0 8px 0 0'
WebkitBorderRadius: '0 8px 0 0'
}); });
} else { } else {
self.$ranges[i].children('input').css({ self.$ranges[i].children('input').css({
MozBorderRadius: 0, borderRadius: 0
WebkitBorderRadius: 0
}); });
} }
}); });
@ -69,8 +65,7 @@ Ox.ColorPicker = function(options, self) {
that = Ox.Picker({ that = Ox.Picker({
element: that, element: that,
elementHeight: 46, elementHeight: 46,
elementWidth: self.options.mode == 'RGB' ? 328 : 432, elementWidth: self.options.mode == 'rgb' ? 328 : 432
id: self.options.id
}); });
function change(index, value) { function change(index, value) {
@ -85,14 +80,12 @@ Ox.ColorPicker = function(options, self) {
}); });
} }
}); });
that.triggerEvent('change', { that.triggerEvent('change', {value: self.options.value});
value: self.options.value
});
} }
function getColors(index) { function getColors(index) {
return ( return (
self.options.mode == 'RGB' ? [ self.options.mode == 'rgb' ? [
Ox.range(3).map(function(i) { Ox.range(3).map(function(i) {
return i == index ? 0 : self.options.value[i]; return i == index ? 0 : self.options.value[i];
}), }),
@ -116,7 +109,7 @@ Ox.ColorPicker = function(options, self) {
} }
function getRGB(values) { function getRGB(values) {
return self.options.mode == 'RGB' return self.options.mode == 'rgb'
? values ? values
: Ox.rgb(values).map(function(value) { : Ox.rgb(values).map(function(value) {
return Math.round(value); return Math.round(value);

15
source/Ox.UI/js/Form/Picker.js
View file

@ -21,7 +21,6 @@ Ox.Picker = function(options, self) {
element: null, element: null,
elementHeight: 128, elementHeight: 128,
elementWidth: 256, elementWidth: 256,
id: '',
overlap: 'none' overlap: 'none'
}) })
.options(options || {}); .options(options || {});
@ -31,7 +30,9 @@ Ox.Picker = function(options, self) {
title: 'select', title: 'select',
type: 'image' type: 'image'
}) })
.click(showMenu) .bindEvent({
click: showMenu
})
.appendTo(that); .appendTo(that);
self.$menu = Ox.Element() self.$menu = Ox.Element()
@ -76,8 +77,7 @@ Ox.Picker = function(options, self) {
self.$selectButton self.$selectButton
.removeClass('OxSelected') .removeClass('OxSelected')
.css({ .css({
MozBorderRadius: '8px', borderRadius: '8px'
WebkitBorderRadius: '8px'
}); });
that.triggerEvent('hide'); that.triggerEvent('hide');
} }
@ -89,16 +89,15 @@ Ox.Picker = function(options, self) {
self.$selectButton self.$selectButton
.addClass('OxSelected') .addClass('OxSelected')
.css({ .css({
MozBorderRadius: '8px 8px 0 0', borderRadius: '8px 8px 0 0'
WebkitBorderRadius: '8px 8px 0 0'
}); });
self.$layer.appendTo(Ox.UI.$body); self.$layer.appendTo(Ox.$body);
self.$menu self.$menu
.css({ .css({
left: left + 'px', left: left + 'px',
top: top + 'px' top: top + 'px'
}) })
.appendTo(Ox.UI.$body); .appendTo(Ox.$body);
that.triggerEvent('show'); that.triggerEvent('show');
} }