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

120 lines
3.5 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-05-16 10:49:48 +00:00
/*@
Ox.Checkbox <f:Ox.Element> Checkbox Element
() -> <f> Checkbox Element
(options) -> <f> Checkbox Element
(options, self) -> <f> Checkbox Element
options <o> Options object
disabled <b> if true, checkbox is disabled
id <s> element id
group <b> if true, checkbox is part of a group
checked <b> if true, checkbox is checked
title <s> text on label
width <n> width in px
self <o> Shared private variable
change <!> triggered when checked property changes, passes {checked, id, title}
@*/
2011-04-22 22:03:10 +00:00
2011-05-16 10:49:48 +00:00
Ox.Checkbox = 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({
disabled: false,
id: '',
group: false,
checked: false,
overlap: 'none',
title: '',
width: 'auto'
})
.options(options || {})
.addClass('OxCheckbox' +
(self.options.overlap == 'none' ? '' : ' OxOverlap' +
Ox.toTitleCase(self.options.overlap))
)
.attr(self.options.disabled ? {
disabled: 'disabled'
} : {});
if (self.options.title) {
self.options.width != 'auto' && that.css({
2011-06-04 01:41:47 +00:00
width: self.options.width + 'px'
});
self.$title = Ox.Label({
2011-04-22 22:03:10 +00:00
disabled: self.options.disabled,
id: self.options.id + 'Label',
overlap: 'left',
title: self.options.title,
width: self.options.width - 16
})
.css({
float: 'right'
})
.click(clickTitle)
.appendTo(that);
}
self.$button = Ox.Button({
2011-04-22 22:03:10 +00:00
disabled: self.options.disabled,
id: self.options.id + 'Button',
title: [
{id: 'none', title: 'none', selected: !self.options.checked},
{id: 'check', title: 'check', selected: self.options.checked}
],
type: 'image'
})
.addClass('OxCheckbox')
.click(clickButton)
.appendTo(that);
function clickButton() {
self.options.checked = !self.options.checked;
// click will have toggled the button,
// if it is part of a group, we have to revert that
self.options.group && that.toggleChecked();
that.triggerEvent('change', {
checked: self.options.checked,
id: self.options.id,
title: self.options.title
});
}
function clickTitle() {
!self.options.disabled && self.$button.trigger('click');
}
2011-04-29 12:40:51 +00:00
self.setOption = function(key, value) {
2011-04-22 22:03:10 +00:00
if (key == 'checked') {
that.toggleChecked();
2011-10-03 13:23:40 +00:00
} else if (key == 'title') {
self.$title.options({title: value});
2011-04-22 22:03:10 +00:00
}
};
2011-05-16 10:49:48 +00:00
/*@
checked <f> get current checked state
() -> <b> returns self.options.checked
@*/
2011-04-22 22:03:10 +00:00
that.checked = function() {
return self.options.checked;
}
2011-05-16 10:49:48 +00:00
/*@
toggleChecked <f> toggle current checked state
() -> <f> toggle state, returns Checkbox Element
@*/
2011-04-22 22:03:10 +00:00
that.toggleChecked = function() {
self.$button.toggleTitle();
return that;
}
2011-06-04 01:41:47 +00:00
// fixme: added for forms, duplicated, checked() shouldn't be neccessary
that.value = function() {
return self.options.checked;
}
2011-04-22 22:03:10 +00:00
return that;
};