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

138 lines
4.2 KiB
JavaScript
Raw Normal View History

2011-07-29 18:48:43 +00:00
// vim: et:ts=4:sw=4:sts=4:ft=javascript
2011-04-22 22:03:10 +00:00
2011-05-16 08:24:46 +00:00
/*@
Ox.Form <f:Ox.Element> Form Object
() -> <f> Form Object
(options) -> <f> Form Object
(options, self) -> <f> Form Object
options <o> Options object
error <s> error
id <s> id
2011-05-16 10:49:48 +00:00
items <a|[]> []
submit <f|null> on submit function
2011-05-16 08:24:46 +00:00
self <o> shared private variable
@*/
Ox.Form = function(options, self) {
2011-04-22 22:03:10 +00:00
self = self || {};
var that = Ox.Element({}, self)
2011-04-22 22:03:10 +00:00
.defaults({
error: '',
id: '',
items: [],
submit: null
})
.options(options || {}) // fixme: the || {} can be done once, in the options function
.addClass('OxForm');
$.extend(self, {
$items: [],
$messages: [],
formIsValid: false,
itemIds: [],
itemIsValid: []
});
// fixme: form isn't necessarily empty/invalid
self.options.items.forEach(function(item, i) {
self.itemIds[i] = item.options('id') || item.id;
self.itemIsValid[i] = !!item.value().length;
that.append(self.$items[i] = Ox.FormItem({element: item}));
2011-04-22 22:03:10 +00:00
item.bindEvent({
/*
blur: function(event, data) {
validate(i, data.valid);
if (data.valid) {
self.$messages[i].html('').hide();
} else {
self.$messages[i].html(data.message).show();
}
},
*/
autovalidate: function(event, data) {
data.valid = !!data.value.length;
validate(i, data.valid);
data.valid && self.$items[i].setMessage('');
},
submit: function(event, data) {
self.formIsValid && that.submit();
},
validate: function(event, data) {
validate(i, data.valid);
self.$items[i].setMessage(data.valid ? '' : data.message);
}
});
});
2011-05-22 12:39:57 +00:00
function getItemIndexById(id) {
2011-04-22 22:03:10 +00:00
return self.itemIds.indexOf(id);
}
function submitCallback(data) {
data.forEach(function(v, i) {
self.$items[i].setMessage(v.message);
});
}
function validate(pos, valid) {
//Ox.print('FORM validate', pos, valid)
self.itemIsValid[pos] = valid;
if (Ox.every(self.itemIsValid) != self.formIsValid) {
self.formIsValid = !self.formIsValid;
that.triggerEvent('validate', {
valid: self.formIsValid
});
}
}
that.addItem = function(pos, item) {
Ox.print('addItem', pos)
self.options.items.splice(pos, 0, item);
self.$items.splice(pos, 0, Ox.FormItem({element: item}));
2011-04-22 22:03:10 +00:00
pos == 0 ?
self.$items[pos].insertBefore(self.$items[0]) :
self.$items[pos].insertAfter(self.$items[pos - 1]);
}
that.removeItem = function(pos) {
Ox.print('removeItem', pos);
self.$items[pos].removeElement();
self.options.items.splice(pos, 1);
self.$items.splice(pos, 1);
}
that.submit = function() {
//Ox.print('---- that.values()', that.values())
self.options.submit(that.values(), submitCallback);
};
that.values = function() { // fixme: can this be private?
/*
get/set form values
call without arguments to get current form values
pass values as array to set values (not implemented)
*/
var values = {};
if (arguments.length == 0) {
self.$items.forEach(function($item, i) {
values[self.itemIds[i]] = self.$items[i].value();
2011-05-30 12:06:58 +00:00
//fixme: make the following work
//values[self.itemIds[i]] = self.$items[i].options('value');
2011-04-22 22:03:10 +00:00
});
//Ox.print('VALUES', values)
return values;
} else {
2011-05-22 12:39:57 +00:00
Ox.forEach(arguments[0], function(value, key) {
var index = getItemIndexById(key);
//index > -1 && Ox.print(':::::::', key, value)
2011-05-22 12:39:57 +00:00
index > -1 && self.options.items[index].options({value: value});
2011-04-22 22:03:10 +00:00
});
return that;
}
};
return that;
};