modularize oxui

source/js/Ox.ColorPicker.js

@@ -0,0 +1,91 @@
+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;
+
+};