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

self.setOption ~> that.update

Browse source
This commit is contained in:
j 2012-05-28 19:35:41 +00:00
commit 005d50c389
56 changed files with 919 additions and 933 deletions
Download patch file Download diff file Expand all files Collapse all files

46
source/Ox.UI/js/Form/Ox.ArrayEditable.js
View file

@ -30,6 +30,30 @@ Ox.ArrayEditable = function(options, self) {
width: 256
})
.options(options || {})
.update({
highlight: function() {
self.$items.forEach(function($item) {
$item.options({highlight: self.options.highlight})
});
},
items: function() {
if (self.options.selected && getSelectedPosition() == -1) {
selectNone();
}
renderItems(true);
},
selected: function() {
selectItem(self.options.selected);
},
sort: renderItems,
width: function() {
var width = self.options.width;
that.css({width: width - 8 + 'px'}); // 2 x 4 px padding
self.options.type == 'textarea' && self.$items.forEach(function($item) {
$item.options({width: width})
});
}
})
.addClass('OxArrayEditable OxArrayEditable' + Ox.toTitleCase(self.options.type))
.css({width: self.options.width - (self.options.type == 'input' ? 8 : 0) + 'px'}) // 2 x 4 px padding
.bindEvent({
@ -318,28 +342,6 @@ Ox.ArrayEditable = function(options, self) {
}
}
self.setOption = function(key, value) {
if (key == 'highlight') {
self.$items.forEach(function($item) {
$item.options({highlight: value})
});
} else if (key == 'items') {
if (self.options.selected && getSelectedPosition() == -1) {
selectNone();
}
renderItems(true);
} else if (key == 'selected') {
selectItem(value);
} else if (key == 'sort') {
renderItems();
} else if (key == 'width') {
that.css({width: value - 8 + 'px'}); // 2 x 4 px padding
self.options.type == 'textarea' && self.$items.forEach(function($item) {
$item.options({width: value})
});
}
}
/*@
addItem <f> addItem
(position, item) -> <o> add item at position

14
source/Ox.UI/js/Form/Ox.ArrayInput.js
View file

@ -23,7 +23,11 @@ Ox.ArrayInput = function(options, self) {
value: [],
width: 256
})
.options(options || {});
.options(options || {})
.update({
value: setValue,
width: setWidths
});
if (self.options.label) {
self.$label = Ox.Label({
@ -176,14 +180,6 @@ Ox.ArrayInput = function(options, self) {
});
}
self.setOption = function(key, value) {
if (key == 'value') {
setValue();
} else if (key == 'width') {
setWidths();
}
}
/*@
setErrors <f> setErrors
(values) -> <u> set erros

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

@ -48,6 +48,29 @@ Ox.Button = function(options, self) {
.options(Ox.isArray(options.tooltip) ? Ox.extend(Ox.clone(options), {
tooltip: options.tooltip[0]
}) : options || {})
.update({
disabled: function() {
that.attr({disabled: self.options.disabled}).toggleClass('OxDisabled');
self.options.disabled && that.$tooltip && that.$tooltip.hide();
},
//FIXME: check if this is still needed
tooltip: function() {
that.$tooltip.options({title: self.options.disabled});
},
title: setTitle,
value: function() {
if (self.options.values.length) {
self.options.title = Ox.getObjectById(
self.options.values, self.options.value
).title;
setTitle();
}
self.options.selectable && that.toggleClass('OxSelected');
},
width: function() {
that.$element.css({width: (self.options.width - 14) + 'px'});
}
})
.attr({
disabled: self.options.disabled,
type: self.options.type == 'text' ? 'button' : 'image'
@ -121,25 +144,6 @@ Ox.Button = function(options, self) {
}
}
self.setOption = function(key, value) {
if (key == 'disabled') {
that.attr({disabled: value}).toggleClass('OxDisabled');
value && that.$tooltip && that.$tooltip.hide();
} 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'});
}
};
/*@
toggle <f> toggle
() -> <o> toggle button

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

@ -30,6 +30,22 @@ Ox.ButtonGroup = function(options, self) {
value: options.max != 1 ? [] : ''
})
.options(options || {})
.update({
value: function() {
// fixme: this doesn't work in cases where
// multiple buttons can be selected
var position = Ox.getIndexById(
self.options.buttons, self.options.value
);
if (position > -1) {
self.$buttons[position].trigger('click');
} else if (self.options.min == 0) {
self.$buttons.forEach(function($button, i) {
$button.options('value') && $button.trigger('click');
});
}
}
})
.addClass('OxButtonGroup');
self.options.buttons = self.options.buttons.map(function(button) {
@ -99,21 +115,6 @@ Ox.ButtonGroup = function(options, self) {
}
}
self.setOption = function(key, value) {
if (key == 'value') {
// fixme: this doesn't work in cases where
// multiple buttons can be selected
var position = Ox.getIndexById(self.options.buttons, value);
if (position > -1) {
self.$buttons[position].trigger('click');
} else if (self.options.min == 0) {
self.$buttons.forEach(function($button, i) {
$button.options('value') && $button.trigger('click');
});
}
}
}
return that;
};

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

@ -34,6 +34,24 @@ Ox.Checkbox = function(options, self) {
width: 'auto'
})
.options(options || {})
.update({
disabled: function() {
var disabled = self.options.disabled;
that.attr({disabled: disabled});
self.$button.options({disabled: disabled});
self.$title && self.$title.options({disabled: disabled});
},
title: function() {
self.$title.options({title: self.options.title});
},
value: function() {
self.$button.toggle();
},
width: function() {
that.css({width: self.options.width + 'px'});
self.$title && self.$title.options({width: getTitleWidth()});
}
})
.addClass('OxCheckbox' + (
self.options.overlap == 'none'
? '' : ' OxOverlap' + Ox.toTitleCase(self.options.overlap)
@ -98,21 +116,6 @@ Ox.Checkbox = function(options, self) {
- !!self.options.label * self.options.labelWidth;
}
self.setOption = function(key, value) {
if (key == 'disabled') {
that.attr({disabled: value});
self.$button.options({disabled: value});
self.$title && self.$title.options({disabled: value});
} else if (key == 'title') {
self.$title.options({title: value});
} else if (key == 'value') {
self.$button.toggle();
} else if (key == 'width') {
that.css({width: value + 'px'});
self.$title && self.$title.options({width: getTitleWidth()});
}
};
return that;
};

51
source/Ox.UI/js/Form/Ox.Editable.js
View file

@ -34,6 +34,29 @@ Ox.Editable = function(options, self) {
type: 'input'
})
.options(options || {})
.update({
editing: function() {
if (self.options.editing) {
// edit will toggle self.options.editing
self.options.editing = false;
edit();
} else {
submit();
}
},
height: function() {
setCSS({height: self.options.height + 'px'});
},
width: function() {
setCSS({width: self.options.width + 'px'});
},
highlight: function() {
self.$value.html(formatValue());
},
value: function() {
self.$value.html(formatValue());
}
})
.addClass('OxEditableElement' + (self.options.editable ? ' OxEditable' : ''))
.on({
click: function() {
@ -196,6 +219,12 @@ Ox.Editable = function(options, self) {
);
}
function setCSS(css) {
self.$test && self.$test.css(css);
self.$input && self.$input.css(css);
self.$input && self.$input.find(self.options.type).css(css);
}
function setSizes() {
var height, width;
self.$test.css({display: 'inline-block'});
@ -227,28 +256,6 @@ Ox.Editable = function(options, self) {
that.triggerEvent('submit', {value: self.options.value});
}
self.setOption = function(key, value) {
if (key == 'editing') {
if (value) {
// edit will toggle self.options.editing
self.options.editing = false;
edit();
} else {
submit();
}
} else if (key == 'height' || key == 'width') {
var css = {};
css[key] = value + 'px';
self.$test && self.$test.css(css);
self.$input && self.$input.css(css);
self.$input && self.$input.find(self.options.type).css(css);
} else if (key == 'highlight') {
self.$value.html(formatValue());
} else if (key == 'value') {
self.$value.html(formatValue());
}
};
that.css = function(css) {
self.css = css;
that.$element.css(css);

18
source/Ox.UI/js/Form/Ox.FileButton.js
View file

@ -20,6 +20,15 @@ Ox.FileButton = function(options, self) {
width: 256
})
.options(options || {})
.update({
disabled: function() {
self.$button.options({disabled: self.options.disabled});
self.$input[self.options.disabled ? 'hide' : 'show']();
},
title: function() {
self.$button.options({title: self.options.title});
}
})
.addClass('OxFileButton')
.css({width: self.options.width + 'px'});
@ -98,15 +107,6 @@ Ox.FileButton = function(options, self) {
.appendTo(that);
}
self.setOption = function(key, value) {
if (key == 'disabled') {
self.$button.options({disabled: value});
self.$input[value ? 'hide' : 'show']();
} else if (key == 'title') {
self.$button.options({title: value});
}
}
/*@
blurButton <f> blurButton
@*/

9
source/Ox.UI/js/Form/Ox.FormElementGroup.js
View file

@ -27,6 +27,9 @@ Ox.FormElementGroup = function(options, self) {
width: 0
})
.options(options || {})
.update({
value: setValue
})
.addClass('OxInputGroup');
if (Ox.isEmpty(self.options.value)) {
@ -97,12 +100,6 @@ Ox.FormElementGroup = function(options, self) {
}
self.setOption = function(key, value) {
if (key == 'value') {
setValue();
}
};
/*@
replaceElement <f> replaceElement
(pos, element) -> <u> replcae element at position

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

@ -99,6 +99,49 @@ Ox.Input = function(options, self) {
width: 128
})
.options(options || {})
.update(function(key, value) {
var inputWidth;
if ([
'autocomplete', 'autocompleteReplace', 'autocompleteSelect', 'autovalidate'
].indexOf(key) > -1) {
if (self.options.autocomplete && self.options.autocompleteSelect) {
self.$autocompleteMenu = constructAutocompleteMenu();
}
self.bindKeyboard = self.options.autocomplete || self.options.autovalidate;
} else if (key == 'disabled') {
self.$input.attr({disabled: value});
} else if (key == 'height') {
that.css({height: value + 'px'});
self.$input.css({height: value - 6 + 'px'});
} else if (key == 'labelWidth') {
self.$label.options({width: value});
inputWidth = getInputWidth();
self.$input.css({
width: inputWidth + 'px'
});
self.hasPasswordPlaceholder && self.$placeholder.css({
width: inputWidth + 'px'
});
} else if (key == 'placeholder') {
setPlaceholder();
} else if (key == 'value') {
if (self.options.type == 'float' && self.options.decimals) {
self.options.value = self.options.value.toFixed(self.options.decimals);
}
self.$input.val(self.options.value);
that.is('.OxError') && that.removeClass('OxError');
setPlaceholder();
} else if (key == 'width') {
that.css({width: self.options.width + 'px'});
inputWidth = getInputWidth();
self.$input.css({
width: inputWidth + 'px'
});
self.hasPasswordPlaceholder && self.$placeholder.css({
width: inputWidth + 'px'
});
}
})
.addClass(
'OxInput OxMedium Ox' + Ox.toTitleCase(self.options.style) /*+ (
self.options.overlap != 'none' ?
@ -847,48 +890,6 @@ Ox.Input = function(options, self) {
});
}
self.setOption = function(key, value) {
var inputWidth;
if (['autocomplete', 'autocompleteReplace', 'autocompleteSelect', 'autovalidate'].indexOf(key) > -1) {
if (self.options.autocomplete && self.options.autocompleteSelect) {
self.$autocompleteMenu = constructAutocompleteMenu();
}
self.bindKeyboard = self.options.autocomplete || self.options.autovalidate;
} else if (key == 'disabled') {
self.$input.attr({disabled: value});
} else if (key == 'height') {
that.css({height: value + 'px'});
self.$input.css({height: value - 6 + 'px'});
} else if (key == 'labelWidth') {
self.$label.options({width: value});
inputWidth = getInputWidth();
self.$input.css({
width: inputWidth + 'px'
});
self.hasPasswordPlaceholder && self.$placeholder.css({
width: inputWidth + 'px'
});
} else if (key == 'placeholder') {
setPlaceholder();
} else if (key == 'value') {
if (self.options.type == 'float' && self.options.decimals) {
self.options.value = self.options.value.toFixed(self.options.decimals);
}
self.$input.val(self.options.value);
that.is('.OxError') && that.removeClass('OxError');
setPlaceholder();
} else if (key == 'width') {
that.css({width: self.options.width + 'px'});
inputWidth = getInputWidth();
self.$input.css({
width: inputWidth + 'px'
});
self.hasPasswordPlaceholder && self.$placeholder.css({
width: inputWidth + 'px'
});
}
};
/*@
blurInput <f> blurInput
@*/

9
source/Ox.UI/js/Form/Ox.InputGroup.js
View file

@ -24,6 +24,9 @@ Ox.InputGroup = function(options, self) {
width: 0
})
.options(options || {})
.update({
value: setValue
})
.addClass('OxInputGroup')
.click(click);
@ -136,12 +139,6 @@ Ox.InputGroup = function(options, self) {
that.triggerEvent('validate', data);
}
self.setOption = function(key, value) {
if (key == 'value') {
setValue();
}
};
// fixme: is this used?
that.getInputById = function(id) {
var input = null;

75
source/Ox.UI/js/Form/Ox.Label.js
View file

@ -9,45 +9,44 @@ Ox.Label = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
disabled: false,
id: '',
overlap: 'none',
textAlign: 'left',
style: 'rounded',
title: '',
width: 'auto'
})
.options(options || {})
.addClass(
'OxLabel Ox' + Ox.toTitleCase(self.options.style)
+ (self.options.disabled ? ' OxDisabled' : '')
+ (
self.options.overlap != 'none'
?
' OxOverlap' + Ox.toTitleCase(self.options.overlap) : ''
)
.defaults({
disabled: false,
id: '',
overlap: 'none',
textAlign: 'left',
style: 'rounded',
title: '',
width: 'auto'
})
.options(options || {})
.update({
title: function() {
that.html(self.options.title);
},
width: function() {
that.css({
width: self.options.width - (
self.options.style == 'rounded' ? 14 : 8
) + 'px'
});
}
})
.addClass(
'OxLabel Ox' + Ox.toTitleCase(self.options.style)
+ (self.options.disabled ? ' OxDisabled' : '')
+ (
self.options.overlap != 'none'
? ' OxOverlap' + Ox.toTitleCase(self.options.overlap) : ''
)
.css(Ox.extend(self.options.width == 'auto' ? {} : {
width: self.options.width - (
self.options.style == 'rounded' ? 14 : 8
) + 'px'
}, {
textAlign: self.options.textAlign
}))
.html(self.options.title);
self.setOption = function(key, value) {
if (key == 'title') {
that.html(value);
} else if (key == 'width') {
that.css({
width: self.options.width - (
self.options.style == 'rounded' ? 14 : 8
) + 'px'
});
}
};
)
.css(Ox.extend(self.options.width == 'auto' ? {} : {
width: self.options.width - (
self.options.style == 'rounded' ? 14 : 8
) + 'px'
}, {
textAlign: self.options.textAlign
}))
.html(self.options.title);
return that;

11
source/Ox.UI/js/Form/Ox.ObjectArrayInput.js
View file

@ -25,6 +25,11 @@ Ox.ObjectArrayInput = function(options, self) {
width: 256
})
.options(options || {})
.update({
value: function() {
setValue(self.options.value);
}
})
.addClass('OxObjectArrayInput');
if (Ox.isEmpty(self.options.value)) {
@ -163,12 +168,6 @@ Ox.ObjectArrayInput = function(options, self) {
});
}
self.setOption = function(key, value) {
if (key == 'value') {
setValue(value);
}
};
return that;
};

11
source/Ox.UI/js/Form/Ox.ObjectInput.js
View file

@ -17,6 +17,11 @@ Ox.ObjectInput = function(options, self) {
width: 256
})
.options(options || {})
.update({
value: function() {
setValue(self.options.value);
}
})
.addClass('OxObjectInput')
.css({
width: self.options.width + 'px',
@ -59,12 +64,6 @@ Ox.ObjectInput = function(options, self) {
});
}
self.setOption = function(key, value) {
if (key == 'value') {
setValue(value);
}
};
return that;
};

15
source/Ox.UI/js/Form/Ox.Range.js
View file

@ -50,6 +50,11 @@ Ox.Range = function(options, self) {
values: []
})
.options(options || {})
.update({
size: setSizes,
trackColors: setTrackColors,
value: setThumb
})
.addClass('OxRange')
.css({
width: self.options.size + 'px'
@ -280,16 +285,6 @@ Ox.Range = function(options, self) {
}
}
self.setOption = function(key, value) {
if (key == 'size') {
setSizes();
} else if (key == 'trackColors') {
setTrackColors();
} else if (key == 'value') {
setThumb();
}
}
return that;
};

51
source/Ox.UI/js/Form/Ox.Select.js
View file

@ -52,6 +52,33 @@ Ox.Select = function(options, self) {
})
// fixme: make default selection restorable
.options(options)
.update({
labelWidth: function() {
self.$label.options({width: self.options.labelWidth});
self.$title.css({width: getTitleWidth() + 'px'});
},
title: function() {
if (self.options.type == 'text') {
self.$title.html(self.options.title);
} else {
self.$button.options({title: self.options.title});
}
},
width: function() {
that.css({width: self.options.width- 2 + 'px'});
self.$title.css({width: getTitleWidth() + 'px'});
},
value: function() {
var value = self.options.value;
if (self.options.type == 'text' && !self.options.title) {
self.$title.html(getItem(value).title);
}
value !== '' && Ox.makeArray(value).forEach(function(value) {
self.$menu.checkItem(value);
});
self.options.value = self.optionGroup.value();
}
})
.addClass(
'OxSelect Ox' + Ox.toTitleCase(self.options.size)
+ ' Ox' + Ox.toTitleCase(self.options.style) + (
@ -194,30 +221,6 @@ Ox.Select = function(options, self) {
self.$menu.showMenu();
}
self.setOption = function(key, value) {
if (key == 'labelWidth') {
self.$label.options({width: value});
self.$title.css({width: getTitleWidth() + 'px'});
} else if (key == 'title') {
if (self.options.type == 'text') {
self.$title.html(value);
} else {
self.$button.options({title: value});
}
} else if (key == 'width') {
that.css({width: value - 2 + 'px'});
self.$title.css({width: getTitleWidth() + 'px'});
} else if (key == 'value') {
if (self.options.type == 'text' && !self.options.title) {
self.$title.html(getItem(value).title);
}
value !== '' && Ox.makeArray(value).forEach(function(value) {
self.$menu.checkItem(value);
});
self.options.value = self.optionGroup.value();
}
};
/*@
disableItem <f> disableItem
@*/

45
source/Ox.UI/js/Form/Ox.SelectInput.js
View file

@ -1,5 +1,5 @@
'use strict';
//FIXME: does not work without options
/*@
Ox.SelectInput <f:Ox.FormElementGroup> Select Input
([options[, self]]) -> <o> Select Input
@ -21,7 +21,7 @@ Ox.SelectInput = function(options, self) {
title: '',
value: options.max == 1 ? '' : [],
width: 384
}, options)
}, options || {})
});
self.other = self.options.items[self.options.items.length - 1].id;
@ -58,23 +58,24 @@ Ox.SelectInput = function(options, self) {
setValue();
that = Ox.FormElementGroup({
elements: [
self.$select,
self.$input
],
id: self.options.id,
join: function(value) {
return value[value[0] == self.other ? 1 : 0]
},
split: function(value) {
return Ox.filter(self.options.items, function(item, i) {
return i < item.length - 1;
}).map(function(item) {
return item.id;
}).indexOf(value) > -1 ? [value, ''] : [self.other, value];
},
width: self.options.width
});
elements: [
self.$select,
self.$input
],
id: self.options.id,
join: function(value) {
return value[value[0] == self.other ? 1 : 0]
},
split: function(value) {
return Ox.filter(self.options.items, function(item, i) {
return i < item.length - 1;
}).map(function(item) {
return item.id;
}).indexOf(value) > -1 ? [value, ''] : [self.other, value];
},
width: self.options.width
})
.update({value: setValue});
function getTitle() {
var value = self.$select ? self.$select.value() : self.options.value;
@ -118,12 +119,6 @@ Ox.SelectInput = function(options, self) {
self.$select.options({title: getTitle()});
}
self.setOption = function(key, value) {
if (key == 'value') {
setValue();
}
};
/*@
value <f> get/set value
() -> value get value