0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

form elements rewrite, part 3

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

18
demos/form2/js/form.js
View file

@ -48,25 +48,25 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() {
},
{
options: {
title: [
{id: "one", title: "right"},
{id: "two", title: "down"},
values: [
{id: "collapsed", title: "right"},
{id: "expanded", title: "down"},
],
type: "image"
},
title: "Multi-Title Image Button"
title: "Multi-Value Image Button"
},
{
options: {
selectable: true,
title: [
value: 'on',
values: [
{id: "off", title: "Off"},
{id: "on", title: "On"},
{id: "on", title: "On"}
],
width: 32,
value: 'on'
width: 32
},
title: "Multi-Title Selectable Text Button"
title: "Multi-Value Selectable Text Button"
}
],
"ButtonGroup": [

2
source/Ox.UI/css/Ox.UI.css
View file

@ -934,7 +934,7 @@ OxRange
}
.OxRange > .OxTrack > .OxThumb.OxTransparent {
border: 1px solid white;
background: transparent;
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 0 1px white inset;
}
/*

1
source/Ox.UI/js/Core/Ox.Element.js
View file

@ -236,7 +236,6 @@ Ox.Element = function(options, self) {
}
function mousemove(e) {
//Ox.Log('Core', 'mousemove!!')
that.$tooltip.options({
title: self.options.tooltip(e)
}).show(e);

112
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,30 +68,35 @@ 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();
that.triggerEvent('change', {value: self.options.value});
} else if (self.options.selectable) {
that.toggleSelected();
if (self.options.values.length || self.options.selectable) {
that.toggle();
that.triggerEvent('change', {value: self.options.value});
} 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;
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();
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]
title: self.options.tooltips[index]
});
return that;
} else {
self.options.value = !self.options.value;
}
self.options.selectable && that.toggleClass('OxSelected');
}
that.value = function() {
return self.options.title;
};
return that;
};

4
source/Ox.UI/js/Form/Ox.ButtonGroup.js
View file

@ -34,8 +34,10 @@ Ox.ButtonGroup = function(options, self) {
self.options.buttons = self.options.buttons.map(function(button) {
return Ox.extend({
disabled: button.disabled,
id: button.id || button,
title: button.title || button
title: button.title || button,
tooltip: button.tooltip,
}, self.options.selectable ? {
selected: Ox.toArray(self.options.value).indexOf(button.id || button) > -1
} : {});

4
source/Ox.UI/js/Form/Ox.Checkbox.js
View file

@ -72,9 +72,9 @@ Ox.Checkbox = function(options, self) {
self.$button = Ox.Button({
disabled: self.options.disabled,
id: self.options.id + 'Button',
title: ['none', 'check'],
type: 'image',
value: self.options.value ? 'check' : 'none'
value: self.options.value ? 'check' : 'none',
values: ['none', 'check']
})
.addClass('OxCheckbox')
.bindEvent({

8
source/Ox.UI/js/Form/Ox.CheckboxGroup.js
View file

@ -97,14 +97,6 @@ Ox.CheckboxGroup = function(options, self) {
}
}
that.value = function() {
return self.options.checkboxes.filter(function(checkbox) {
return checkbox.value;
}).map(function(checkbox) {
return checkbox.id;
});
};
return that;
};

8
source/Ox.UI/js/Form/Ox.Input.js
View file

@ -893,8 +893,9 @@ Ox.Input = function(options, self) {
return that;
};
// fixme: deprecate, options are enough
// FIXME: deprecate, options are enough
that.value = function() {
if (arguments.length == 0) {
var value = self.$input.hasClass('OxPlaceholder') ? '' : self.$input.val();
if (self.options.type == 'float') {
value = parseFloat(value);
@ -902,6 +903,9 @@ Ox.Input = function(options, self) {
value = parseInt(value); // cannot have leading zero
}
return value;
} else {
return that.options({value: arguments[0]});
}
};
return that;
@ -1876,7 +1880,7 @@ Ox.Range_ = function(options, self) {
}, self.options.animate ? animate : 0, function() {
if (self.options.thumbValue) {
$thumb.value(
value: self.options.valueNames
self.options.valueNames
? self.options.valueNames[self.options.value]
: self.options.value
);