sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests Activity

form elements rewrite, part 3

Browse source
This commit is contained in:
rlx 2011-12-22 05:52:46 +00:00
commit d80019a17c
8 changed files with 87 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

122
source/Ox.UI/js/Form/Ox.Button.js
View file

@ -8,18 +8,20 @@ Ox.Button <f:Ox.Element> 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
title <s|a|''> title, can be array
tooltip <s|a|''> tooltip, can be array (per title)
type <s|text> button type, text or image, (for image, title must be symbolTitle.svg must be availabe)
value <b|false> is selected
width <s|auto> button width
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
style <s|'default'> 'default', 'checkbox', 'symbol' or 'tab'
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
self <o> Shared private variable
click <!> non-selectable button was clicked
change <!> selectable button was clicked
@ -41,7 +43,8 @@ Ox.Button = function(options, self) {
title: '',
tooltip: '',
type: 'text',
value: false,
value: void 0,
values: [],
width: 'auto'
})
.options(options ? Ox.extend(Ox.clone(options), {
@ -65,32 +68,37 @@ Ox.Button = function(options, self) {
.mousedown(mousedown)
.click(click);
if (Ox.isArray(self.options.title)) {
self.options.title = self.options.title.map(function(title) {
if (self.options.values.length) {
self.options.values = self.options.values.map(function(value) {
return {
id: title.id || title,
title: title.title || title
id: value.id || value,
title: value.title || value
};
});
self.options.value = self.options.value || self.options.title[0].id;
self.value = Ox.getPositionById(self.options.values, self.options.value);
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;
}
setTitle();
if (options.tooltip) {
self.tooltips = Ox.toArray(options.tooltip);
that.options({tooltip: self.tooltips[self.selectedTitle]});
}
options.tooltip && that.options({
tooltip: Ox.isArray(options.tooltip)
? options.tooltip[self.value]
: options.tooltip
});
function click() {
if (!self.options.disabled) {
if (Ox.isArray(self.options.title)) {
that.toggleTitle();
if (self.options.values.length || self.options.selectable) {
that.toggle();
that.triggerEvent('change', {value: self.options.value});
} else if (self.options.selectable) {
that.toggleSelected();
that.triggerEvent('change', {value: self.options.value});
} else {
} else {
that.triggerEvent('click');
}
}
@ -104,64 +112,54 @@ Ox.Button = function(options, self) {
}
function setTitle() {
var title = Ox.isArray(self.options.title)
? Ox.getObjectById(self.options.title, self.options.value).title
: self.options.title;
if (self.options.type == 'image') {
that.attr({
src: Ox.UI.getImageURL(
'symbol' + title[0].toUpperCase() + title.substr(1)
'symbol' + self.options.title[0].toUpperCase()
+ self.options.title.substr(1)
)
});
} else {
that.val(title);
that.val(self.options.title);
}
}
self.setOption = function(key, value) {
if (key == 'disabled') {
that.attr({disabled: value})
.toggleClass('OxDisabled');
that.attr({disabled: value}).toggleClass('OxDisabled');
} else if (key == 'tooltip') {
that.$tooltip.options({title: value});
} else if (key == 'title') {
setTitle();
} else if (key == 'value') {
if (self.options.values.length) {
self.options.title = Ox.getObjectById(self.options.values, value).title;
setTitle();
}
self.options.selectable && that.toggleClass('OxSelected');
} else if (key == 'width') {
that.$element.css({
width: (value - 14) + 'px'
});
that.$element.css({width: (value - 14) + 'px'});
}
};
that.toggleSelected = function() {
self.options.value = !self.options.value;
that.toggleClass('OxSelected');
};
/*@
toggleTitle <f>
() -> <o> toggle through titles
@*/
that.toggleTitle = function() {
self.options.value = self.options.title[
1 - Ox.getPositionById(self.options.title, self.options.value)
].id;
setTitle();
that.toggle = function() {
var index;
if (self.options.values.length) {
index = 1 - Ox.getPositionById(self.options.values, self.options.value);
self.options.title = self.options.values[index].title;
self.options.value = self.options.values[index].id;
setTitle();
// fixme: if the tooltip is visible
// we also need to call show()
that.$tooltip && that.$tooltip.options({
title: self.options.tooltips[index]
});
} else {
self.options.value = !self.options.value;
}
self.options.selectable && that.toggleClass('OxSelected');
// fixme: if the tooltip is visible
// we also need to call show()
that.$tooltip && that.$tooltip.options({
title: self.tooltips[self.selectedTitle]
});
return that;
}
that.value = function() {
return self.options.title;
};
return that;
};