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

171 lines
5.2 KiB
JavaScript
Raw Normal View History

2011-11-30 14:52:42 +00:00
'use strict';
Ox.FormPanel = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
form: []
})
.options(options || {});
self.sections = self.options.form.map(function(section) {
return section.title;
});
self.section = 0;
self.sectionTitle = self.sections[self.section].title;
self.$list = Ox.TextList({
columns: [
{
format: function(value) {
return $('<img>')
.attr({
src: Ox.UI.getImageURL('symbolCheck')
})
.css({
width: '10px',
height: '10px',
margin: '2px 2px 2px 0',
opacity: value ? 1 : 0.1
})
},
id: 'valid',
title: 'Valid',
visible: true,
width: 16
},
{
format: function(value) {
return (getSectionIndexByTitle(value) + 1) + '. ' + value;
},
id: 'title',
title: 'Title',
unique: true,
visible: true,
width: 240
}
],
items: function(data, callback) {
setTimeout(function() {
callback({
data: {
items: Ox.isEmpty(data)
? self.sections.length
: self.options.form.map(function(section) {
return {title: section.title, valid: section.valid};
})
}
});
}, 250);
},
max: 1,
min: 1,
selected: [self.sections[0].id],
sort: [{key: 'id', operator: '+'}],
width: 256
}).bindEvent({
select: function(data) {
self.$sections[self.section].hide();
Ox.forEach(self.options.form, function(section, i) {
if (section.title == data.ids[0]) {
self.section = i;
return false;
}
});
self.$sections[self.section].show();
}
});
self.$section = $('<div>')
.css({overflowY: 'auto'});
self.$forms = [];
self.$sections = self.options.form.map(function(section, i) {
return $('<div>')
.css({
width: (
section.descriptionWidth || section.items[0].options('width')
) + 'px',
margin: '16px'
})
.append(
$('<div>')
.css({marginBottom: '8px', fontWeight: 'bold'})
.html(section.title)
)
.append(
$('<div>')
.css({marginBottom: '16px', WebkitUserSelect: 'text'})
.html(section.description)
)
.append(
self.$forms[i] = Ox.Form({
items: section.items
})
.bindEvent({
change: function(data) {
2011-12-01 10:52:23 +00:00
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);
2011-11-30 14:52:42 +00:00
},
validate: function(data) {
2011-12-01 10:52:23 +00:00
self.$list.value(section.title, 'valid', data.valid);
that.triggerEvent('validate', {
title: section.title,
data: data
});
2011-11-30 14:52:42 +00:00
}
})
)
.hide()
.appendTo(self.$section);
});
self.$sections[0].show();
that.$element = Ox.SplitPanel({
elements: [
{
element: self.$list,
resizable: true,
resize: [256],
size: 256
},
{
element: self.$section
}
],
orientation: 'horizontal'
});
function getSectionIndexByTitle(title) {
var index = -1;
Ox.forEach(self.options.form, function(section, i) {
if (section.title == title) {
index = i;
return false;
}
});
return index;
}
that.values = function() {
var values = {};
self.options.form.forEach(function(section, i) {
values[section.title] = self.$forms[i].values();
});
return values;
};
return that;
};