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

add type option to CheckboxGroup ('group' or 'list')

Browse source
This commit is contained in:
rolux 2011-11-30 15:47:43 +01:00
parent a6264a472d
commit 8597352316
1 changed files with 35 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
source/Ox.UI/js/Form/Ox.CheckboxGroup.js
View file

@ -6,10 +6,11 @@ Ox.CheckboxGroup <f:Ox.Element> CheckboxGroup Object
(options) -> <f> CheckboxGroup Object (options) -> <f> CheckboxGroup Object
(options, self) -> <f> CheckboxGroup Object (options, self) -> <f> CheckboxGroup Object
options <o> Options object options <o> Options object
checkboxes <a|[]> array of checkboxes checkboxes <a|[]> array of checkboxes
max <n|1> integer max <n|1> max selected
min <n|1> integer min <n|1> min selected
width <n> integer, width in px type <s|"group"> type ("group" or "list")
width <n> width in px
self <o> shared private variable self <o> shared private variable
change <!> triggered when checked property changes change <!> triggered when checked property changes
passes {checked, id, title} passes {checked, id, title}
@ -20,48 +21,52 @@ Ox.CheckboxGroup = function(options, self) {
self = self || {}; self = self || {};
var that = Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
// fixme: should 'checkboxes' be 'items'?
checkboxes: [], checkboxes: [],
max: 1, max: 1,
min: 1, min: 1,
type: 'group',
width: 256 width: 256
}) })
.options(options || {}) .options(options || {})
.addClass('OxCheckboxGroup'); .addClass('OxCheckboxGroup Ox' + Ox.toTitleCase(self.options.type));
self.optionGroup = new Ox.OptionGroup( self.optionGroup = new Ox.OptionGroup(
self.options.checkboxes, self.options.checkboxes,
self.options.min, self.options.min,
self.options.max); self.options.max
);
self.options.checkboxes = self.optionGroup.init(); self.options.checkboxes = self.optionGroup.init();
Ox.extend(self, { self.$checkboxes = [];
$checkboxes: [], if (self.options.type == 'group') {
checkboxWidth: Ox.divideInt( self.checkboxWidth = Ox.divideInt(
self.options.width + (self.options.checkboxes.length - 1) * 6, self.options.width + (self.options.checkboxes.length - 1) * 6,
self.options.checkboxes.length self.options.checkboxes.length
).map(function(v, i) { ).map(function(v, i) {
return v + (i < self.options.checkboxes.length - 1 ? 10 : 0); return v + (i < self.options.checkboxes.length - 1 ? 10 : 0);
}) });
}); };
self.options.checkboxes.forEach(function(checkbox, position) {
var id = self.options.id + Ox.toTitleCase(checkbox.id) self.options.checkboxes.forEach(function(checkbox, index) {
self.$checkboxes[position] = Ox.Checkbox(Ox.extend(checkbox, { self.$checkboxes[index] = Ox.Checkbox(Ox.extend(checkbox, {
group: true, group: true,
id: id, id: checkbox.id,
width: self.checkboxWidth[position] width: self.options.type == 'group'
? self.checkboxWidth[index] : self.options.width
})) }))
.bindEvent('change', function() { .bindEvent('change', function() {
change(position); change(index);
}) })
.appendTo(that); .appendTo(that);
}); });
function change(pos) { function change(index) {
var toggled = self.optionGroup.toggle(pos); var toggled = self.optionGroup.toggle(index);
//Ox.Log('Form', 'change', pos, 'toggled', toggled) //Ox.Log('Form', 'change', index, 'toggled', toggled)
if (toggled.length) { if (toggled.length) {
toggled.forEach(function(pos, i) { toggled.forEach(function(index, i) {
self.$checkboxes[pos].toggleChecked(); self.$checkboxes[index].toggleChecked();
}); });
that.triggerEvent('change', { that.triggerEvent('change', {
checked: self.optionGroup.checked().map(function(v) { checked: self.optionGroup.checked().map(function(v) {
@ -71,6 +76,14 @@ Ox.CheckboxGroup = function(options, self) {
} }
} }
that.value = function() {
return self.options.checkboxes.filter(function(checkbox) {
return checkbox.checked;
}).map(function(checkbox) {
return checkbox.id;
});
};
return that; return that;
}; };