add SelectInput

source/Ox.UI/css/Ox.UI.css

@@ -836,10 +836,23 @@ OxObjectInput
 --------------------------------------------------------------------------------
 */
 .OxObjectInput > div {
-    margin-bottom: 8px;
+    margin-top: 8px;
 }
-.OxObjectInput > div:last-child {
+.OxObjectInput > div:first-child {
-    margin-bottom: 0;
+    margin-top: 0;
+}
+.OxObjectArrayInput > div {
+    padding: 8px 0 8px 0;
+    border-top-width: 1px;
+    border-top-style: dashed;
+    border-top-color: rgb(128, 128, 128);
+}
+.OxObjectArrayInput > div.OxFirst {
+    padding-top: 0;
+    border-top-width: 0;
+}
+.OxObjectArrayInput > div.OxLast {
+    padding-bottom: 0;
 }
 
 /*

source/Ox.UI/js/Form/Ox.FormPanel.js

@@ -103,12 +103,26 @@ Ox.FormPanel = function(options, self) {
                 })
                 .bindEvent({
                     change: function(data) {
-                        var valid = section.validate(section.title, data);
+                        var valid;
+                        if (section.validate) {
+                            valid = section.validate(section.title, data);
                             self.$list.value(section.title, 'valid', valid);
-                        that.triggerEvent('change', data);
+                            that.triggerEvent('validate', {
+                                title: section.title,
+                                data: {valid: valid}
+                            });
+                        }
+                        //var valid = section.validate(section.title, data);
+                        //self.$list.value(section.title, 'valid', valid);
+                        //that.triggerEvent('change', data);
                     },
                     validate: function(data) {
-                        Ox.print('VALIDATE', data);
+                        Ox.print('---------------VALIDATE', data);
+                        self.$list.value(section.title, 'valid', data.valid);
+                        that.triggerEvent('validate', {
+                            title: section.title,
+                            data: data
+                        });
                     }
                 })
             )

source/Ox.UI/js/Form/Ox.ObjectArrayInput.js

@@ -36,7 +36,8 @@ Ox.ObjectArrayInput = function(options, self) {
         Ox.print('addInput', index)
         self.$element.splice(index, 0, Ox.Element()
             .css({
-                height: (self.options.inputs.length + 1) * 24 + 'px'
+                width: self.options.width + 'px',
+                height: (self.options.inputs.length + 1) * 24 - 8 + 'px'
             })
         );
         if (index == 0) {
@@ -59,7 +60,7 @@ Ox.ObjectArrayInput = function(options, self) {
                 title: self.options.buttonTitles.remove,
                 width: self.buttonWidth
             })
-            .css({float: 'left', margin: '8px 8px 0 0'})
+            .css({float: 'left', margin: '8px 4px 0 0'})
             .bind({
                 click: function() {
                     var index = $(this).parent().data('index');
@@ -75,7 +76,7 @@ Ox.ObjectArrayInput = function(options, self) {
                 title: self.options.buttonTitles.add,
                 width: self.buttonWidth
             })
-            .css({float: 'left', margin: '8px 0 0 0'})
+            .css({float: 'left', margin: '8px 0 0 4px'})
             .bind({
                 click: function() {
                     var index = $(this).parent().data('index');
@@ -99,13 +100,17 @@ Ox.ObjectArrayInput = function(options, self) {
     }
 
     function updateInputs() {
+        var length = self.$element.length;
         self.$element.forEach(function($element, i) {
-            $element.data({index: i});
+            $element
+                [i == 0 ? 'addClass' : 'removeClass']('OxFirst')
+                [i == length - 1 ? 'addClass' : 'removeClass']('OxLast')
+                .data({index: i});
             self.$removeButton[i].options({
-                disabled: self.$element.length == 1,
+                disabled: length == 1,
             });
             self.$addButton[i].options({
-                disabled: self.$element.length == self.options.max
+                disabled: length == self.options.max
             });
         });
     }

source/Ox.UI/js/Form/Ox.Select.js

@@ -206,7 +206,9 @@ Ox.Select = function(options, self) {
         } else if (key == 'title') {
             self.$title.html(value);
         } else if (key == 'width') {
+            Ox.Log('Form', 'SETTING WIDTH OPTION', value)
             self.$title.css({width: getTitleWidth() + 'px'});
+            that.css({width: value - 2 + 'px'});
         } else if (key == 'value') {
             Ox.Log('Form', 'SETTING VALUE OPTION', value)
             that.selectItem(value);

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;
+
+};