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

199 lines
7.2 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
/*@
2012-05-31 10:32:54 +00:00
Ox.Button <f> Button Object
2011-05-16 08:24:46 +00:00
options <o> Options object
2011-12-22 05:52:46 +00:00
If a button is both selectable and has two values, its value is the
selected id, and the second value corresponds to the selected state
disabled <b|false> If true, button is disabled
group <b|false> If true, button is part of group
id <s|''> Element id
overlap <s|'none'> 'none', 'left' or 'right'
selectable <b|false> If true, button is selectable
2013-01-31 11:58:35 +00:00
style <s|'default'> 'default', 'checkbox', 'symbol', 'tab' or 'video'
2011-12-22 05:52:46 +00:00
title <s|''> Button title
tooltip <s|[s]|''> Tooltip
type <s|text> 'text' or 'image'
value <b|s|undefined> True for selected, or current value id
values <[o]|[]> [{id, title}, {id, title}]
width <s|'auto'> Button width
2011-05-16 08:24:46 +00:00
self <o> Shared private variable
([options[, self]]) -> <o:Ox.Element> Button Object
click <!> non-selectable button was clicked
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-22 05:52:46 +00:00
value: void 0,
values: [],
2011-04-22 22:03:10 +00:00
width: 'auto'
})
2011-12-22 15:47:46 +00:00
.options(Ox.isArray(options.tooltip) ? Ox.extend(Ox.clone(options), {
tooltip: options.tooltip[0]
}) : options || {})
2012-05-28 19:35:41 +00:00
.update({
disabled: setDisabled,
2012-05-28 19:35:41 +00:00
tooltip: function() {
2014-02-02 11:05:41 +00:00
if (Ox.isArray(self.options.tooltip) && that.$tooltip) {
that.$tooltip.options({
title: self.options.tooltip[self.value]
});
}
2012-05-28 19:35:41 +00:00
},
title: setTitle,
value: function() {
if (self.options.values.length) {
self.options.title = Ox.getObjectById(
self.options.values, self.options.value
).title;
setTitle();
}
self.options.selectable && setSelected();
2012-05-28 19:35:41 +00:00
},
width: function() {
that.$element.css({width: (self.options.width - 14) + 'px'});
}
})
2011-12-21 13:42:47 +00:00
.addClass(
'OxButton Ox' + Ox.toTitleCase(self.options.size)
+ (self.options.disabled ? ' OxDisabled': '')
2013-01-31 11:58:35 +00:00
+ (self.options.selectable && self.options.value ? ' OxSelected' : '')
2011-12-21 13:42:47 +00:00
+ (self.options.style != 'default' ? ' Ox' + Ox.toTitleCase(self.options.style) : '')
+ (self.options.overlap != 'none' ? ' OxOverlap' + Ox.toTitleCase(self.options.overlap) : '')
)
2012-06-16 10:09:21 +00:00
.attr({
disabled: self.options.disabled,
type: self.options.type == 'text' ? 'button' : 'image'
})
2011-04-22 22:03:10 +00:00
.css(self.options.width == 'auto' ? {} : {
width: (self.options.width - 14) + 'px'
})
2013-12-06 19:48:13 +00:00
.on({
click: click,
mousedown: mousedown
});
2011-04-22 22:03:10 +00:00
2011-12-22 05:52:46 +00:00
if (self.options.values.length) {
self.options.values = self.options.values.map(function(value) {
2011-12-21 13:42:47 +00:00
return {
2011-12-22 05:52:46 +00:00
id: value.id || value,
title: value.title || value
2011-12-21 13:42:47 +00:00
};
});
self.value = Ox.getIndexById(self.options.values, self.options.value);
2011-12-22 05:52:46 +00:00
if (self.value == -1) {
self.value = 0;
self.options.value = self.options.values[0].id;
}
self.options.title = self.options.values[self.value].title;
} else if (self.options.selectable) {
self.options.value = self.options.value || false;
2011-12-21 13:42:47 +00:00
}
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
2011-12-22 15:47:46 +00:00
if (Ox.isArray(options.tooltip)) {
self.options.tooltip = options.tooltip;
2014-02-02 11:05:41 +00:00
// Ox.Element creates tooltip only on mouse over.
// create here to overwrite tooltip title
if (!that.$tooltip) {
that.$tooltip = Ox.Tooltip();
}
2011-12-22 15:47:46 +00:00
that.$tooltip.options({
title: self.options.tooltip[self.value]
});
}
2011-04-22 22:03:10 +00:00
function click() {
if (!self.options.disabled) {
2012-06-18 08:54:08 +00:00
that.$tooltip && that.$tooltip.hide();
2011-12-22 15:47:46 +00:00
that.triggerEvent('click');
2011-12-22 05:52:46 +00:00
if (self.options.values.length || self.options.selectable) {
that.toggle();
2011-12-21 13:42:47 +00:00
that.triggerEvent('change', {value: self.options.value});
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();
}
}
function setDisabled() {
that.attr({disabled: self.options.disabled});
that[self.options.disabled ? 'addClass' : 'removeClass']('OxDisabled');
self.options.disabled && that.$tooltip && that.$tooltip.hide();
self.options.type == 'image' && setTitle();
}
function setSelected() {
that[self.options.value ? 'addClass' : 'removeClass']('OxSelected');
self.options.type == 'image' && setTitle();
}
2011-12-21 13:42:47 +00:00
function setTitle() {
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(
2011-12-22 05:52:46 +00:00
'symbol' + self.options.title[0].toUpperCase()
+ self.options.title.slice(1),
2014-01-05 10:01:18 +00:00
self.options.style == 'overlay' ? 'overlay' + (
self.options.disabled ? 'Disabled'
: self.options.selectable && self.options.value ? 'Selected'
: ''
)
: self.options.style == 'video' ? 'video'
2013-01-31 11:58:35 +00:00
: self.options.disabled ? 'disabled'
2012-12-28 23:51:46 +00:00
: self.options.selectable && self.options.value ? 'selected'
: ''
2011-04-22 22:03:10 +00:00
)
});
} else {
2011-12-22 05:52:46 +00:00
that.val(self.options.title);
2011-04-22 22:03:10 +00:00
}
}
2012-05-21 10:38:18 +00:00
/*@
toggle <f> toggle
() -> <o> toggle button
@*/
2011-12-22 05:52:46 +00:00
that.toggle = function() {
if (self.options.values.length) {
self.value = 1 - Ox.getIndexById(self.options.values, self.options.value);
2011-12-22 15:47:46 +00:00
self.options.title = self.options.values[self.value].title;
self.options.value = self.options.values[self.value].id;
2011-12-22 05:52:46 +00:00
setTitle();
// fixme: if the tooltip is visible
// we also need to call show()
that.$tooltip && that.$tooltip.options({
2011-12-22 15:47:46 +00:00
title: self.options.tooltip[self.value]
2011-12-22 05:52:46 +00:00
});
} else {
self.options.value = !self.options.value;
}
self.options.selectable && setSelected();
2012-01-02 08:25:34 +00:00
return that;
2011-04-22 22:03:10 +00:00
}
return that;
};