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

add SelectInput

Browse source
This commit is contained in:
rolux 2011-12-01 11:52:23 +01:00
parent da0742e542
commit 3d3be10e2c
5 changed files with 118 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
source/Ox.UI/css/Ox.UI.css
View file

@ -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;
}
/*

22
source/Ox.UI/js/Form/Ox.FormPanel.js
View file

@ -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
});
}
})
)

17
source/Ox.UI/js/Form/Ox.ObjectArrayInput.js
View file

@ -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
});
});
}

2
source/Ox.UI/js/Form/Ox.Select.js
View file

@ -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);

71
source/Ox.UI/js/Form/Ox.SelectInput.js Normal file
View file

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