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

105 lines
3.6 KiB
JavaScript
Raw Normal View History

2011-11-05 16:46:53 +00:00
'use strict';
2011-12-21 13:42:47 +00:00
2011-05-16 08:24:46 +00:00
/*@
Ox.CheckboxGroup <f:Ox.Element> CheckboxGroup Object
2012-05-22 13:14:40 +00:00
() -> <o> CheckboxGroup Object
(options) -> <o> CheckboxGroup Object
(options, self) -> <o> CheckboxGroup Object
2011-05-16 08:24:46 +00:00
options <o> Options object
checkboxes <a|[]> array of checkboxes
max <n|1> max selected
min <n|1> min selected
type <s|"group"> type ("group" or "list")
width <n> width in px
2011-05-16 08:24:46 +00:00
self <o> shared private variable
change <!> triggered when checked property changes
2011-12-21 13:42:47 +00:00
passes {id, title, value}
2011-05-16 08:24:46 +00:00
@*/
2011-04-22 22:03:10 +00:00
2011-05-16 08:24:46 +00:00
Ox.CheckboxGroup = 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({
// fixme: should 'checkboxes' be 'items'?
2011-04-22 22:03:10 +00:00
checkboxes: [],
max: 1,
min: 1,
type: 'group',
2011-12-21 13:42:47 +00:00
value: options.max != 1 ? [] : '',
2011-04-22 22:03:10 +00:00
width: 256
})
.options(options || {})
.addClass('OxCheckboxGroup Ox' + Ox.toTitleCase(self.options.type));
2011-04-22 22:03:10 +00:00
2011-12-21 13:42:47 +00:00
self.options.checkboxes = self.options.checkboxes.map(function(checkbox) {
return {
checked: Ox.makeArray(self.options.value).indexOf(checkbox.id || checkbox) > -1,
2011-12-21 13:42:47 +00:00
id: checkbox.id || checkbox,
title: checkbox.title || checkbox
};
});
2011-06-19 18:25:37 +00:00
self.optionGroup = new Ox.OptionGroup(
2011-04-22 22:03:10 +00:00
self.options.checkboxes,
self.options.min,
2011-12-21 13:42:47 +00:00
self.options.max,
'checked'
);
2011-04-22 22:03:10 +00:00
self.options.checkboxes = self.optionGroup.init();
2011-12-21 15:33:52 +00:00
self.options.value = self.optionGroup.value();
2011-04-22 22:03:10 +00:00
self.$checkboxes = [];
if (self.options.type == 'group') {
self.checkboxWidth = Ox.divideInt(
2011-04-22 22:03:10 +00:00
self.options.width + (self.options.checkboxes.length - 1) * 6,
self.options.checkboxes.length
).map(function(v, i) {
2011-04-22 22:03:10 +00:00
return v + (i < self.options.checkboxes.length - 1 ? 10 : 0);
});
};
2011-12-21 13:42:47 +00:00
self.options.checkboxes.forEach(function(checkbox, pos) {
self.$checkboxes[pos] = Ox.Checkbox(Ox.extend(checkbox, {
2011-04-22 22:03:10 +00:00
group: true,
id: checkbox.id,
width: self.options.type == 'group'
2011-12-21 13:42:47 +00:00
? self.checkboxWidth[pos] : self.options.width,
value: checkbox.checked
2011-04-22 22:03:10 +00:00
}))
.bindEvent('change', function() {
2011-12-21 13:42:47 +00:00
toggleCheckbox(pos);
2011-04-22 22:03:10 +00:00
})
.appendTo(that);
});
2011-12-21 13:42:47 +00:00
function toggleCheckbox(pos) {
var toggled = self.optionGroup.toggle(pos);
Ox.Log('Form', 'change', pos, 'toggled', toggled)
if (!toggled.length) {
2011-12-21 15:33:52 +00:00
// FIXME: fix and use that.toggleOption()
self.$checkboxes[pos].value(!self.$checkboxes[pos].value());
2011-12-21 13:42:47 +00:00
} else {
toggled.forEach(function(i) {
2011-12-21 15:33:52 +00:00
i != pos && self.$checkboxes[i].value(!self.$checkboxes[i].value());
2011-04-22 22:03:10 +00:00
});
2011-12-21 13:42:47 +00:00
self.options.value = self.optionGroup.value();
2011-04-22 22:03:10 +00:00
that.triggerEvent('change', {
2011-12-21 15:33:52 +00:00
title: Ox.isString(self.options.value)
2011-12-30 09:33:01 +00:00
? (
self.options.value
? Ox.getObjectById(self.options.checkboxes, self.options.value).title
: ''
)
2011-12-21 15:33:52 +00:00
: self.options.value.map(function(value) {
return Ox.getObjectById(self.options.checkboxes, value).title;
}),
2011-12-21 13:42:47 +00:00
value: self.options.value
2011-04-22 22:03:10 +00:00
});
}
}
return that;
};