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

168 lines
5.4 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-12-21 13:42:47 +00:00
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.Button <f:Ox.Element> Button Object
() -> <f> Button Object
(options) -> <f> Button Object
(options, self) -> <f> Button Object
options <o> Options object
disabled <b|false> disabled
group <b|false> is part of group
id: <s|''> button id
overlap <s|none> overlap
selectable <b|false> is selecatable
size <s|medium> button size
style <s|default> // can be default, checkbox, symbol, or tab
2011-12-21 13:42:47 +00:00
title <s|a|''> title, can be array
tooltip <s|a|''> tooltip, can be array (per title)
2011-05-16 08:24:46 +00:00
type <s|text> button type, text or image, (for image, title must be symbolTitle.svg must be availabe)
2011-12-21 13:42:47 +00:00
value <b|false> is selected
2011-05-16 08:24:46 +00:00
width <s|auto> button width
self <o> Shared private variable
click <!> non-selectable button was clicked
2011-12-21 13:42:47 +00:00
change <!> selectable button was clicked
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.Button = function(options, self) {
self = self || {};
var that = Ox.Element('<input>', self)
2011-04-22 22:03:10 +00:00
.defaults({
disabled: false,
group: false,
id: '',
overlap: 'none',
selectable: false,
size: 'medium',
// fixme: 'default' or ''?
style: 'default',
2011-04-22 22:03:10 +00:00
title: '',
tooltip: '',
type: 'text',
2011-12-21 13:42:47 +00:00
value: false,
2011-04-22 22:03:10 +00:00
width: 'auto'
})
.options(options ? Ox.extend(Ox.clone(options), {
// tooltip may be an array, so we can't pass it yet
tooltip: ''
}) : {})
.attr({
disabled: self.options.disabled,
2011-04-22 22:03:10 +00:00
type: self.options.type == 'text' ? 'button' : 'image'
})
2011-12-21 13:42:47 +00:00
.addClass(
'OxButton Ox' + Ox.toTitleCase(self.options.size)
+ (self.options.disabled ? ' OxDisabled': '')
+ (self.options.selectable && self.options.value ? ' OxSelected': '')
+ (self.options.style != 'default' ? ' Ox' + Ox.toTitleCase(self.options.style) : '')
+ (self.options.overlap != 'none' ? ' OxOverlap' + Ox.toTitleCase(self.options.overlap) : '')
)
2011-04-22 22:03:10 +00:00
.css(self.options.width == 'auto' ? {} : {
width: (self.options.width - 14) + 'px'
})
.mousedown(mousedown)
.click(click);
2011-12-21 13:42:47 +00:00
if (Ox.isArray(self.options.title)) {
self.options.title = self.options.title.map(function(title) {
return {
id: title.id || title,
title: title.title || title
};
});
self.options.value = self.options.value || self.options.title[0].id;
}
2011-04-22 22:03:10 +00:00
2011-12-21 13:42:47 +00:00
setTitle();
2011-04-22 22:03:10 +00:00
if (options.tooltip) {
self.tooltips = Ox.toArray(options.tooltip);
that.options({tooltip: self.tooltips[self.selectedTitle]});
2011-04-22 22:03:10 +00:00
}
function click() {
if (!self.options.disabled) {
2011-12-21 13:42:47 +00:00
if (Ox.isArray(self.options.title)) {
2011-04-22 22:03:10 +00:00
that.toggleTitle();
2011-12-21 13:42:47 +00:00
that.triggerEvent('change', {value: self.options.value});
} else if (self.options.selectable) {
that.toggleSelected();
that.triggerEvent('change', {value: self.options.value});
} else {
that.triggerEvent('click');
2011-04-22 22:03:10 +00:00
}
}
}
function mousedown(e) {
if (self.options.type == 'image' && $.browser.safari) {
// keep image from being draggable
e.preventDefault();
}
}
2011-12-21 13:42:47 +00:00
function setTitle() {
var title = Ox.isArray(self.options.title)
? Ox.getObjectById(self.options.title, self.options.value).title
: self.options.title;
2011-04-22 22:03:10 +00:00
if (self.options.type == 'image') {
that.attr({
2011-08-09 17:00:39 +00:00
src: Ox.UI.getImageURL(
'symbol' + title[0].toUpperCase() + title.substr(1)
2011-04-22 22:03:10 +00:00
)
});
} else {
that.val(title);
}
}
2011-04-29 12:40:51 +00:00
self.setOption = function(key, value) {
2011-04-22 22:03:10 +00:00
if (key == 'disabled') {
that.attr({disabled: value})
.toggleClass('OxDisabled');
} else if (key == 'tooltip') {
that.$tooltip.options({title: value});
2011-04-22 22:03:10 +00:00
} else if (key == 'title') {
2011-12-21 13:42:47 +00:00
setTitle();
} else if (key == 'value') {
self.options.selectable && that.toggleClass('OxSelected');
2011-04-22 22:03:10 +00:00
} else if (key == 'width') {
that.$element.css({
width: (value - 14) + 'px'
});
}
};
2011-04-22 22:03:10 +00:00
that.toggleSelected = function() {
2011-12-21 13:42:47 +00:00
self.options.value = !self.options.value;
that.toggleClass('OxSelected');
};
2011-04-22 22:03:10 +00:00
2011-05-16 08:24:46 +00:00
/*@
toggleTitle <f>
2011-12-21 13:42:47 +00:00
() -> <o> toggle through titles
2011-05-16 08:24:46 +00:00
@*/
2011-04-22 22:03:10 +00:00
that.toggleTitle = function() {
2011-12-21 13:42:47 +00:00
self.options.value = self.options.title[
1 - Ox.getPositionById(self.options.title, self.options.value)
].id;
setTitle();
self.options.selectable && that.toggleClass('OxSelected');
2011-09-04 04:14:58 +00:00
// fixme: if the tooltip is visible
// we also need to call show()
that.$tooltip && that.$tooltip.options({
2011-04-22 22:03:10 +00:00
title: self.tooltips[self.selectedTitle]
});
return that;
2011-04-22 22:03:10 +00:00
}
that.value = function() {
return self.options.title;
};
2011-04-22 22:03:10 +00:00
return that;
};