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

form elements rewrite, part 1

Browse source
This commit is contained in:
rlx 2011-12-21 13:42:47 +00:00
commit 7f83cd3141
30 changed files with 1061 additions and 958 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,7 @@
// vim: et:ts=4:sw=4:sts=4:ft=javascript
'use strict';
/*@
Ox.Button <f:Ox.Element> Button Object
() -> <f> Button Object
@ -11,17 +13,16 @@ Ox.Button <f:Ox.Element> Button Object
id: <s|''> button id
overlap <s|none> overlap
selectable <b|false> is selecatable
selected <b|false> is selected
size <s|medium> button size
style <s|default> // can be default, checkbox, symbol, or tab
title <s|a|''> title, can be array of titles
tooltip <s|a|''> tooltip if multiple must be same number as titles
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
self <o> Shared private variable
click <!> non-selectable button was clicked
deselect <!> selectable button was deselected
select <!> selectable button was selected
change <!> selectable button was clicked
@*/
Ox.Button = function(options, self) {
@ -34,13 +35,13 @@ Ox.Button = function(options, self) {
id: '',
overlap: 'none',
selectable: false,
selected: false,
size: 'medium',
// fixme: 'default' or ''?
style: 'default',
title: '',
tooltip: '',
type: 'text',
value: false,
width: 'auto'
})
.options(options ? Ox.extend(Ox.clone(options), {
@ -51,29 +52,30 @@ Ox.Button = function(options, self) {
disabled: self.options.disabled,
type: self.options.type == 'text' ? 'button' : 'image'
})
.addClass('OxButton Ox' + Ox.toTitleCase(self.options.size) +
(self.options.disabled ? ' OxDisabled': '') +
(self.options.selected ? ' OxSelected': '') +
(self.options.style != 'default' ? ' Ox' + Ox.toTitleCase(self.options.style) : '') +
(self.options.overlap != 'none' ? ' OxOverlap' + Ox.toTitleCase(self.options.overlap) : ''))
.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) : '')
)
.css(self.options.width == 'auto' ? {} : {
width: (self.options.width - 14) + 'px'
})
.mousedown(mousedown)
.click(click);
Ox.extend(self, Ox.isArray(self.options.title) ? {
selectedTitle: Ox.setPropertyOnce(self.options.title, 'selected'),
titles: self.options.title
} : {
selectedTitle: 0,
titles: [{
id: '',
title: self.options.title
}]
});
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;
}
setTitle(self.titles[self.selectedTitle].title);
setTitle();
if (options.tooltip) {
self.tooltips = Ox.toArray(options.tooltip);
@ -82,21 +84,14 @@ Ox.Button = function(options, self) {
function click() {
if (!self.options.disabled) {
var data = self.titles[self.selectedTitle];
if (!self.options.selectable) {
that.triggerEvent('click', data);
} else {
//self.options.selected = !self.options.selected;
//that.toggleClass('OxSelected');
if (self.options.group) {
that.triggerEvent('select', data);
} else {
that.toggleSelected();
//that.triggerEvent('change', {selected: self.options.selected});
}
}
if (self.titles.length == 2) {
if (Ox.isArray(self.options.title)) {
that.toggleTitle();
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');
}
}
}
@ -108,8 +103,10 @@ Ox.Button = function(options, self) {
}
}
function setTitle(title) {
self.title = title;
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(
@ -125,15 +122,12 @@ Ox.Button = function(options, self) {
if (key == 'disabled') {
that.attr({disabled: value})
.toggleClass('OxDisabled');
} else if (key == 'selected') {
if (value != that.hasClass('OxSelected')) { // fixme: neccessary?
that.toggleClass('OxSelected');
}
that.triggerEvent('change');
} else if (key == 'tooltip') {
that.$tooltip.options({title: value});
} else if (key == 'title') {
setTitle(value);
setTitle();
} else if (key == 'value') {
self.options.selectable && that.toggleClass('OxSelected');
} else if (key == 'width') {
that.$element.css({
width: (value - 14) + 'px'
@ -141,37 +135,21 @@ Ox.Button = function(options, self) {
}
};
/*@
toggleDisabled <f>
() -> <u> toggle disabled state
@*/
that.toggleDisabled = function() {
that.options({
disabled: !self.options.disabled
});
return that;
//self.options.disabled = !self.options.disabled;
}
/*@
toggleSelected <f>
() -> <u> toggle selected state
@*/
that.toggleSelected = function() {
that.options({
selected: !self.options.selected
});
return that;
//self.options.selected = !self.options.selected;
}
self.options.value = !self.options.value;
that.toggleClass('OxSelected');
};
/*@
toggleTitle <f>
() -> <u> toggle through titles
() -> <o> toggle through titles
@*/
that.toggleTitle = function() {
self.selectedTitle = 1 - self.selectedTitle;
setTitle(self.titles[self.selectedTitle].title);
self.options.value = self.options.title[
1 - Ox.getPositionById(self.options.title, self.options.value)
].id;
setTitle();
self.options.selectable && that.toggleClass('OxSelected');
// fixme: if the tooltip is visible
// we also need to call show()
that.$tooltip && that.$tooltip.options({