add SelectInput

source/Ox.UI/js/Form/Ox.SelectInput.js

@@ -0,0 +1,71 @@
+'use strict'
+
+Ox.SelectInput = function(options, self) {
+
+    var that;
+
+    self = Ox.extend(self || {}, {
+        options: Ox.extend({
+            inputWidth: 128,
+            items: [],
+            label: '',
+            labelWidth: 128,
+            max: 0,
+            min: 1,
+            placeholder: '',
+            title: '',
+            width: 384
+        }, options)
+    });
+
+    self.other = self.options.items[self.options.items.length - 1].id;
+    self.otherWidth = self.options.width - self.options.inputWidth - 3; // fixme: 3? obscure!
+
+    self.$select = Ox.Select({
+            items: self.options.items,
+            label: self.options.label,
+            labelWidth: self.options.labelWidth,
+            max: self.options.max,
+            min: self.options.min,
+            title: self.options.title,
+            width: self.options.width
+        })
+        .bindEvent({
+            change: function(data) {
+                if (self.options.title) {
+                    self.$select.options({title: data.selected[0].title});
+                }
+                if (data.selected[0].id == self.other) {
+                    self.$select.options({width: self.otherWidth})
+                        .addClass('OxOverlapRight');
+                    self.$input.show();
+                } else {
+                    self.$select.options({width: self.options.width})
+                        .removeClass('OxOverlapRight')
+                    self.$input.hide();
+                }
+            }
+        });
+
+    self.$input = Ox.Input({
+            placeholder: self.options.placeholder,
+            width: 0
+        })
+        .hide();
+
+    that = Ox.FormElementGroup({
+        elements: [
+            self.$select,
+            self.$input
+        ],
+        width: self.options.width
+    });
+
+    that.value = function() {
+        return self.$select.value() == self.other
+            ? self.$input.value() : self.$select.value();
+    };
+
+    return that;
+
+};