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: { options: {
title: [ values: [
{id: "one", title: "right"}, {id: "collapsed", title: "right"},
{id: "two", title: "down"}, {id: "expanded", title: "down"},
], ],
type: "image" type: "image"
}, },
title: "Multi-Title Image Button" title: "Multi-Value Image Button"
}, },
{ {
options: { options: {
selectable: true, selectable: true,
title: [ value: 'on',
values: [
{id: "off", title: "Off"}, {id: "off", title: "Off"},
{id: "on", title: "On"}, {id: "on", title: "On"}
], ],
width: 32, width: 32
value: 'on'
}, },
title: "Multi-Title Selectable Text Button" title: "Multi-Value Selectable Text Button"
} }
], ],
"ButtonGroup": [ "ButtonGroup": [

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

@ -934,7 +934,7 @@ OxRange
} }
.OxRange > .OxTrack > .OxThumb.OxTransparent { .OxRange > .OxTrack > .OxThumb.OxTransparent {
border: 1px solid white; border: 1px solid white;
background: transparent; background: rgba(255, 255, 255, 0.25);
box-shadow: 0 0 1px white inset; 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) { function mousemove(e) {
//Ox.Log('Core', 'mousemove!!')
that.$tooltip.options({ that.$tooltip.options({
title: self.options.tooltip(e) title: self.options.tooltip(e)
}).show(e); }).show(e);

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

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

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