form elements rewrite, part 3
This commit is contained in:
rlx
parent
a6c01dd6c6
commit
d80019a17c
8 changed files with 87 additions and 92 deletions
|
|
@ -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": [
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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
|
||||
} : {});
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
};
|
||||
|
|
|
|||
|
|
@ -893,15 +893,19 @@ Ox.Input = function(options, self) {
|
|||
return that;
|
||||
};
|
||||
|
||||
// fixme: deprecate, options are enough
|
||||
// FIXME: deprecate, options are enough
|
||||
that.value = function() {
|
||||
var value = self.$input.hasClass('OxPlaceholder') ? '' : self.$input.val();
|
||||
if (self.options.type == 'float') {
|
||||
value = parseFloat(value);
|
||||
} else if (self.options.type == 'int') {
|
||||
value = parseInt(value); // cannot have leading zero
|
||||
if (arguments.length == 0) {
|
||||
var value = self.$input.hasClass('OxPlaceholder') ? '' : self.$input.val();
|
||||
if (self.options.type == 'float') {
|
||||
value = parseFloat(value);
|
||||
} 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;
|
||||
|
|
@ -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
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue