139 lines
4.2 KiB
JavaScript
139 lines
4.2 KiB
JavaScript
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
|
/*@
|
|
Ox.Checkbox <f:Ox.Element> Checkbox Element
|
|
() -> <f> Checkbox Element
|
|
(options) -> <f> Checkbox Element
|
|
(options, self) -> <f> Checkbox Element
|
|
options <o> Options object
|
|
checked <b> if true, checkbox is checked
|
|
disabled <b> if true, checkbox is disabled
|
|
group <b> if true, checkbox is part of a group
|
|
id <s> element id
|
|
label <s> Label (on the left side)
|
|
labelWidth <n|64> Label width
|
|
title <s> Title (on the right side)
|
|
width <n> width in px
|
|
self <o> Shared private variable
|
|
change <!> triggered when checked property changes, passes {checked, id, title}
|
|
@*/
|
|
|
|
Ox.Checkbox = function(options, self) {
|
|
|
|
self = self || {};
|
|
var that = Ox.Element({}, self)
|
|
.defaults({
|
|
checked: false,
|
|
disabled: false,
|
|
group: false,
|
|
id: '',
|
|
label: '',
|
|
labelWidth: 64,
|
|
overlap: 'none',
|
|
title: '',
|
|
width: 'auto'
|
|
})
|
|
.options(options || {})
|
|
.addClass('OxCheckbox' +
|
|
(self.options.overlap == 'none' ? '' : ' OxOverlap' +
|
|
Ox.toTitleCase(self.options.overlap))
|
|
)
|
|
.attr({
|
|
disabled: self.options.disabled
|
|
});
|
|
|
|
if (self.options.title) {
|
|
self.options.width != 'auto' && that.css({
|
|
width: self.options.width + 'px'
|
|
});
|
|
self.$title = Ox.Label({
|
|
disabled: self.options.disabled,
|
|
id: self.options.id + 'Label',
|
|
overlap: 'left',
|
|
title: self.options.title,
|
|
width: self.options.width - 16
|
|
- !!self.options.label * self.options.labelWidth
|
|
})
|
|
.css({float: 'right'})
|
|
.click(clickTitle)
|
|
.appendTo(that);
|
|
}
|
|
|
|
if (self.options.label) {
|
|
self.$label = Ox.Label({
|
|
overlap: 'right',
|
|
textAlign: 'right',
|
|
title: self.options.label,
|
|
width: self.options.labelWidth
|
|
})
|
|
.css({float: 'left'})
|
|
.appendTo(that);
|
|
}
|
|
|
|
self.$button = Ox.Button({
|
|
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')
|
|
.bindEvent({
|
|
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');
|
|
}
|
|
|
|
self.setOption = function(key, value) {
|
|
if (key == 'checked') {
|
|
that.toggleChecked();
|
|
} else if (key == 'disabled') {
|
|
that.attr({disabled: value});
|
|
self.$button.options({disabled: value});
|
|
self.$title && self.$title.options({disabled: value});
|
|
} else if (key == 'title') {
|
|
self.$title.options({title: value});
|
|
}
|
|
};
|
|
|
|
/*@
|
|
checked <f> get current checked state
|
|
() -> <b> returns self.options.checked
|
|
@*/
|
|
that.checked = function() {
|
|
return self.options.checked;
|
|
}
|
|
|
|
/*@
|
|
toggleChecked <f> toggle current checked state
|
|
() -> <f> toggle state, returns Checkbox Element
|
|
@*/
|
|
that.toggleChecked = function() {
|
|
self.$button.toggleTitle();
|
|
return that;
|
|
}
|
|
|
|
// fixme: added for forms, duplicated, checked() shouldn't be neccessary
|
|
that.value = function() {
|
|
return self.options.checked;
|
|
}
|
|
|
|
return that;
|
|
|
|
};
|