diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index 5cfa940c..84dba599 100644 --- a/source/Ox.UI/css/Ox.UI.css +++ b/source/Ox.UI/css/Ox.UI.css @@ -836,10 +836,23 @@ OxObjectInput -------------------------------------------------------------------------------- */ .OxObjectInput > div { - margin-bottom: 8px; + margin-top: 8px; } -.OxObjectInput > div:last-child { - margin-bottom: 0; +.OxObjectInput > div:first-child { + 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; } /* diff --git a/source/Ox.UI/js/Form/Ox.FormPanel.js b/source/Ox.UI/js/Form/Ox.FormPanel.js index ea4bab30..bcfe9fee 100644 --- a/source/Ox.UI/js/Form/Ox.FormPanel.js +++ b/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); - self.$list.value(section.title, 'valid', valid); - that.triggerEvent('change', data); + var valid; + if (section.validate) { + valid = section.validate(section.title, data); + self.$list.value(section.title, 'valid', valid); + 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 + }); } }) ) diff --git a/source/Ox.UI/js/Form/Ox.ObjectArrayInput.js b/source/Ox.UI/js/Form/Ox.ObjectArrayInput.js index 0f4dbeee..1f9ee8a9 100644 --- a/source/Ox.UI/js/Form/Ox.ObjectArrayInput.js +++ b/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 }); }); } diff --git a/source/Ox.UI/js/Form/Ox.Select.js b/source/Ox.UI/js/Form/Ox.Select.js index d6467915..80eb6187 100644 --- a/source/Ox.UI/js/Form/Ox.Select.js +++ b/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); diff --git a/source/Ox.UI/js/Form/Ox.SelectInput.js b/source/Ox.UI/js/Form/Ox.SelectInput.js new file mode 100644 index 00000000..85fe0bbb --- /dev/null +++ b/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; + +}; \ No newline at end of file