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

form elements rewrite, part 2

Browse source
This commit is contained in:
rolux 2011-12-21 21:03:52 +05:30
commit 074902d079
33 changed files with 163 additions and 153 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -76,7 +76,7 @@ Ox.ArrayInput = function(options, self) {
click: function() {
var index = $(this).parent().data('index');
if (self.$input[index].value() !== '') {
self.$input[index].options({value: ''});
self.$input[index].value('');
self.options.value = getValue();
that.triggerEvent('change', {
value: self.options.value

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

@ -75,20 +75,20 @@ Ox.ButtonGroup = function(options, self) {
function toggleButton(pos) {
var toggled = self.optionGroup.toggle(pos);
Ox.print('TOGGLED::', toggled)
if (!toggled.length) {
self.$buttons[pos].options({
value: !self.$buttons[pos].options('value')
});
// FIXME: fix and use that.toggleOption()
self.$buttons[pos].value(!self.$buttons[pos].value());
} else {
toggled.forEach(function(i) {
i != pos && self.$buttons[i].options({
// FIXME: fix and use that.toggleOption()
value: !self.$buttons[i].options('value')
});
i != pos && self.$buttons[i].value(!self.$buttons[i].value());
});
self.options.value = self.optionGroup.value();
that.triggerEvent('change', {
title: Ox.isString(self.options.value)
? Ox.getObjectById(self.options.buttons, self.options.value).title
: self.options.value.map(function(value) {
return Ox.getObjectById(self.options.buttons, value).title;
}),
value: self.options.value
});
}

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

@ -49,6 +49,7 @@ Ox.CheckboxGroup = function(options, self) {
'checked'
);
self.options.checkboxes = self.optionGroup.init();
self.options.value = self.optionGroup.value();
self.$checkboxes = [];
if (self.options.type == 'group') {
@ -78,18 +79,19 @@ Ox.CheckboxGroup = function(options, self) {
var toggled = self.optionGroup.toggle(pos);
Ox.Log('Form', 'change', pos, 'toggled', toggled)
if (!toggled.length) {
self.$checkboxes[pos].options({
value: !self.$checkboxes[pos].options('value')
});
// FIXME: fix and use that.toggleOption()
self.$checkboxes[pos].value(!self.$checkboxes[pos].value());
} else {
toggled.forEach(function(i) {
i != pos && self.$checkboxes[i].options({
// FIXME: fix and use that.toggleOption()
value: !self.$checkboxes[i].options('value')
});
i != pos && self.$checkboxes[i].value(!self.$checkboxes[i].value());
});
self.options.value = self.optionGroup.value();
that.triggerEvent('change', {
title: Ox.isString(self.options.value)
? Ox.getObjectById(self.options.checkboxes, self.options.value).title
: self.options.value.map(function(value) {
return Ox.getObjectById(self.options.checkboxes, value).title;
}),
value: self.options.value
});
}

6
source/Ox.UI/js/Form/Ox.ColorInput.js
View file

@ -48,9 +48,7 @@ Ox.ColorInput = function(options, self) {
//Ox.Log('Form', 'change function called');
self.options.value = data.value;
Ox.loop(3, function(i) {
self.$inputs[i].options({
value: self.options.value[i]
});
self.$inputs[i].value(self.options.value[i]);
});
self.$inputs[3].css({
background: 'rgb(' + getRGB().join(', ') + ')'
@ -76,7 +74,7 @@ Ox.ColorInput = function(options, self) {
function change() {
self.options.value = self.$inputs.map(function(input, i) {
return i < 3 ? input.options('value') : null;
return i < 3 ? input.value() : null;
});
self.$inputs[3].css({
background: 'rgb(' + getRGB().join(', ') + ')'

52
source/Ox.UI/js/Form/Ox.DateInput.js
View file

@ -115,26 +115,29 @@ Ox.DateInput = function(options, self) {
}), self);
function changeDay() {
self.options.weekday && self.$input.weekday.options({
value: Ox.formatDate(new Date([
self.$input.month.options('value'),
self.$input.day.options('value'),
self.$input.year.options('value')
self.options.weekday && self.$input.weekday.value(
Ox.formatDate(new Date([
self.$input.month.value(),
self.$input.day.value(),
self.$input.year.value()
].join(' ')), self.formats.weekday)
});
);
self.options.value = join();
}
function changeMonthOrYear() {
var day = self.$input.day.options('value'),
month = self.$input.month.options('value'),
year = self.$input.year.options('value'),
var day = self.$input.day.value(),
month = self.$input.month.value(),
year = self.$input.year.value(),
days = Ox.getDaysInMonth(year, self.options.format == 'short' ? parseInt(month, 10) : month);
day = day <= days ? day : days;
//Ox.Log('Form', year, month, 'day days', day, days)
self.options.weekday && self.$input.weekday.options({
value: Ox.formatDate(new Date([month, day, year].join(' ')), self.formats.weekday)
});
self.options.weekday && self.$input.weekday.value(
Ox.formatDate(
new Date([month, day, year].join(' ')),
self.formats.weekday
)
);
self.$input.day.options({
autocomplete: Ox.range(1, days + 1).map(function(i) {
return self.options.format == 'short' ? Ox.pad(i, 2) : i.toString();
@ -146,21 +149,20 @@ Ox.DateInput = function(options, self) {
function changeWeekday() {
var date = getDateInWeek(
self.$input.weekday.options('value'),
self.$input.month.options('value'),
self.$input.day.options('value'),
self.$input.year.options('value')
self.$input.weekday.value(),
self.$input.month.value(),
self.$input.day.value(),
self.$input.year.value()
);
self.$input.month.options({value: date.month});
self.$input.month.value(date.month);
self.$input.day.options({
autocomplete: Ox.range(1, Ox.getDaysInMonth(date.year, date.month) + 1).map(function(i) {
return self.options.format == 'short' ? Ox.pad(i, 2) : i.toString();
}),
value: date.day
});
self.$input.year.options({value: date.year});
self.$input.year.value(date.year);
self.options.value = join();
Ox.print('self.options.value =', self.options.value)
}
function getDate(value) {
@ -190,13 +192,13 @@ Ox.DateInput = function(options, self) {
function join() {
return Ox.formatDate(new Date(self.options.format == 'short' ? [
self.$input.year.options('value'),
self.$input.month.options('value'),
self.$input.day.options('value')
self.$input.year.value(),
self.$input.month.value(),
self.$input.day.value()
].join('/') : [
self.$input.month.options('value'),
self.$input.day.options('value'),
self.$input.year.options('value')
self.$input.month.value(),
self.$input.day.value(),
self.$input.year.value()
].join(' ')), '%F');
}

2
source/Ox.UI/js/Form/Ox.DateTimeInput.js
View file

@ -60,7 +60,7 @@ Ox.DateTimeInput = function(options, self) {
function join() {
return that.options('inputs').map(function($input) {
return $input.options('value');
return $input.value();
}).join(' ');
}

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

@ -67,7 +67,7 @@ Ox.Editable = function(options, self) {
function cancel() {
self.options.value = self.originalValue;
self.$input.options({value: formatInputValue()}).hide();
self.$input.value(formatInputValue()).hide();
self.$test.html(formatTestValue());
self.$value.html(formatValue()).show();
}
@ -191,7 +191,7 @@ Ox.Editable = function(options, self) {
function submit() {
self.options.editing = false;
self.options.value = Ox.parseHTML(self.$input.value());
self.$input.options({value: formatInputValue()}).hide();
self.$input.value(formatInputValue()).hide();
self.$test.html(formatTestValue());
self.$value.html(formatValue()).show();
that.$tooltip.options({title: self.options.tooltip});
@ -204,7 +204,6 @@ Ox.Editable = function(options, self) {
if (key == 'height' || key == 'width') {
var css = {};
css[key] = value + 'px';
Ox.print(key, 'VALUE', value)
self.$test && self.$test.css(css);
self.$input && self.$input.css(css);
self.$input && self.$input.find(self.options.type).css(css);

17
source/Ox.UI/js/Form/Ox.Filter.js
View file

@ -392,7 +392,7 @@ Ox.Filter = function(options, self) {
function changeOperator(data) {
var changeGroupOperator = false;
self.options.query.operator = data.selected[0].id;
self.options.query.operator = data.value;
self.options.query.conditions.forEach(function(condition, pos) {
if (condition.conditions) {
condition.operator = condition.operator == '&' ? '|' : '&';
@ -549,7 +549,7 @@ Ox.Filter = function(options, self) {
changeConditionKey(
$element.data('position'),
$element.data('subposition'),
data.selected[0].id
data.value
);
}
});
@ -581,7 +581,7 @@ Ox.Filter = function(options, self) {
changeConditionOperator(
$element.data('position'),
$element.data('subposition'),
data.selected[0].id
data.value
);
}
});
@ -717,7 +717,6 @@ Ox.Filter = function(options, self) {
if (formatType == 'color') {
isHue = formatArgs[0] == 'hue';
$input = Ox.Range({
changeOnDrag: false,
max: isHue ? 360 : 1,
min: 0,
size: !isArray ? 288 : 128, // fixme: should be width!
@ -793,11 +792,13 @@ Ox.Filter = function(options, self) {
})
],
float: 'right',
joinValues: function(values) {
Ox.print(values, '?????')
join: function(value) {
return formatType == 'value'
? values[0] * values[1]
: values[0];
? value[0] * value[1]
: value[0];
},
split: function(value) {
},
width: !isArray ? 288 : 128
})

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

@ -149,7 +149,7 @@ Ox.Form = function(options, self) {
self.$items.forEach(function($item, i) {
values[self.itemIds[i]] = self.$items[i].value();
//fixme: make the following work
//values[self.itemIds[i]] = self.$items[i].options('value');
//values[self.itemIds[i]] = self.$items[i].value();
});
//Ox.Log('Form', 'VALUES', values)
return values;
@ -158,7 +158,7 @@ Ox.Form = function(options, self) {
Ox.forEach(arguments[0], function(value, key) {
var index = getItemIndexById(key);
//index > -1 && Ox.Log('Form', ':::::::', key, value)
index > -1 && self.options.items[index].options({value: value});
index > -1 && self.options.items[index].value(value);
});
return that;
}

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

@ -79,7 +79,7 @@ Ox.FormElementGroup = function(options, self) {
function getValue() {
var value = self.options.elements.map(function($element) {
return $element.options('value');
return $element.value();
});
return self.options.join ? self.options.join(value) : value;
}
@ -93,7 +93,7 @@ Ox.FormElementGroup = function(options, self) {
? self.options.split(self.options.value)
: self.options.value;
values.forEach(function(value, i) {
self.options.elements[i].options({value: value});
self.options.elements[i].value(value);
});
}

1
source/Ox.UI/js/Form/Ox.FormPanel.js
View file

@ -117,7 +117,6 @@ Ox.FormPanel = function(options, self) {
//that.triggerEvent('change', data);
},
validate: function(data) {
Ox.print('---------------VALIDATE', data);
self.$list.value(section.title, 'valid', data.valid);
that.triggerEvent('validate', {
title: section.title,

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

@ -1875,20 +1875,18 @@ Ox.Range_ = function(options, self) {
width: thumbWidth + 'px'
}, self.options.animate ? animate : 0, function() {
if (self.options.thumbValue) {
$thumb.options({
value: self.options.valueNames ?
self.options.valueNames[self.options.value] :
self.options.value
});
$thumb.value(
value: self.options.valueNames
? self.options.valueNames[self.options.value]
: self.options.value
);
}
});
}
function setValue(val, animate) {
val = Ox.limit(val, self.options.min, self.options.max);
if (val != self.options.value) {
that.options({
value: val
});
that.value(val);
setThumb(animate);
that.triggerEvent('change', {value: val});
}

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

@ -100,7 +100,7 @@ Ox.InputGroup = function(options, self) {
function getValue() {
var value = self.options.inputs.map(function($input) {
return $input.options('value');
return $input.value();
});
return self.options.join ? self.options.join(value) : value;
}
@ -118,7 +118,7 @@ Ox.InputGroup = function(options, self) {
? self.options.split(self.options.value)
: self.options.value;
values.forEach(function(value, i) {
self.options.inputs[i].options({value: value});
self.options.inputs[i].value(value);
});
}

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

@ -33,7 +33,6 @@ Ox.ObjectArrayInput = function(options, self) {
});
function addInput(index, value) {
Ox.print('addInput', index)
self.$element.splice(index, 0, Ox.Element()
.css({
width: self.options.width + 'px',
@ -53,6 +52,11 @@ Ox.ObjectArrayInput = function(options, self) {
labelWidth: self.options.labelWidth,
width: self.options.width
})
.bindEvent({
change: function(data) {
// ...
}
})
.appendTo(self.$element[index])
);
self.$removeButton.splice(index, 0, Ox.Button({
@ -115,6 +119,13 @@ Ox.ObjectArrayInput = function(options, self) {
});
}
self.setOption = function(key, value) {
if (key == 'value') {
// ...
}
};
// FIXME: remove
that.value = function() {
return self.$input.map(function($input) {
return $input.value();

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

@ -16,8 +16,6 @@ Ox.ObjectInput = function(options, self) {
height: self.options.elements.length * 24 - 8 + 'px'
});
Ox.print('ObjI', self.options)
self.options.elements.forEach(function($element) {
$element.options({
labelWidth: self.options.labelWidth,
@ -25,18 +23,22 @@ Ox.ObjectInput = function(options, self) {
})
.bindEvent({
change: function(data) {
// ...
self.options.value = {};
self.options.elements.forEach(function(element) {
self.options.value[element.options('id')] = element.value();
});
that.triggerEvent('change', {
value: self.options.value
});
}
})
.appendTo(that);
});
that.value = function() {
var value = {};
self.options.elements.forEach(function(element) {
value[element.options('id')] = element.value();
});
return value;
self.setOption = function(key, value) {
if (key == 'value') {
// ...
}
};
return that;

16
source/Ox.UI/js/Form/Ox.PlacePicker.js
View file

@ -60,6 +60,7 @@ Ox.PlacePicker = function(options, self) {
.append(
self.$range = Ox.Range({
arrows: true,
changeOnDrag: true,
id: self.options.id + 'Range',
max: 22,
size: 256,
@ -107,12 +108,11 @@ Ox.PlacePicker = function(options, self) {
function clickLabel() {
var name = that.$label.html();
if (name) {
self.$input.options({
value: name
})
.triggerEvent('submit', {
value: name
});
self.$input
.value(name)
.triggerEvent('submit', {
value: name
});
}
}
@ -128,9 +128,7 @@ Ox.PlacePicker = function(options, self) {
}
function onZoom(data) {
self.$range.options({
value: data.value
});
self.$range.value(data.value);
}
function showPicker() {

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

@ -67,7 +67,6 @@ Ox.Range = function(options, self) {
self.options.thumbValue = true;
self.options.value = Ox.isNumber(self.options.value)
? self.options.values[self.options.value] : self.options.value;
Ox.print('!!!$!!!', self.options.value)
}
self.options.arrowStep = options.arrowStep || self.options.step;
self.options.trackImages = Ox.toArray(self.options.trackImages);

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

@ -156,6 +156,11 @@ Ox.Select = function(options, self) {
self.options.title ? self.options.title : getItem(self.options.value).title
);
that.triggerEvent('change', {
title: Ox.isString(self.options.value)
? getItem(self.options.value).title
: self.options.value.map(function(value) {
return getItem(value).title;
}),
value: self.options.value
});
}

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

@ -47,7 +47,7 @@ Ox.SelectInput = function(options, self) {
self.$select.options({width: self.otherWidth})
.addClass('OxOverlapRight');
self.$input.show().focusInput(true);
self.options.value = self.$input.options('value');
self.options.value = self.$input.value();
}
}
});
@ -58,7 +58,6 @@ Ox.SelectInput = function(options, self) {
})
.bindEvent({
change: function(data) {
Ox.print('DATA:', data)
self.options.value = data.value;
}
})

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

@ -32,11 +32,9 @@ Ox.Spreadsheet = function(options, self) {
function addColumn(index) {
self.options.columns.splice(index, 0, '');
Ox.print('sv', JSON.stringify(self.values))
self.values.forEach(function(columns) {
columns.splice(index, 0, 0);
});
Ox.print('sv', JSON.stringify(self.values))
renderSpreadsheet();
}
@ -52,7 +50,6 @@ Ox.Spreadsheet = function(options, self) {
row: Ox.repeat([0], self.rows),
sheet: 0
};
Ox.print('sv', self.values);
self.values.forEach(function(columns, r) {
columns.forEach(function(value, c) {
sums.column[c] += value;
@ -93,12 +90,10 @@ Ox.Spreadsheet = function(options, self) {
Ox.merge([self.options.title], Ox.clone(self.options.rows), ['Total']).forEach(function(row, r) {
r--;
Ox.print('ROW', row);
Ox.merge([''], Ox.clone(self.options.columns), ['Total']).forEach(function(column, c) {
c--;
if (r == -1) {
if (c == -1 || c == self.columns) {
Ox.print('c', c, 'row', row)
Ox.Label({
style: 'square',
textAlign: c == -1 ? 'left' : 'right',
@ -210,9 +205,9 @@ Ox.Spreadsheet = function(options, self) {
change: function(data) {
self.values[r][c] = parseInt(data.value);
self.sums = getSums();
self.$input[c + ',' + self.rows].options({value: self.sums.column[c]});
self.$input[self.columns + ',' + r].options({value: self.sums.row[r]});
self.$input[self.columns + ',' + self.rows].options({value: self.sums.sheet});
self.$input[c + ',' + self.rows].value(self.sums.column[c]);
self.$input[self.columns + ',' + r].value(self.sums.row[r]);
self.$input[self.columns + ',' + self.rows].value(self.sums.sheet);
triggerChangeEvent();
}
});

10
source/Ox.UI/js/Form/Ox.TimeInput.js
View file

@ -143,17 +143,17 @@ Ox.TimeInput = function(options, self) {
return Ox.formatDate(
new Date(
'1970/01/01 ' + [
self.$input.hours.options('value'),
self.$input.minutes.options('value'),
self.options.seconds ? self.$input.seconds.options('value') : '00'
self.$input.hours.value(),
self.$input.minutes.value(),
self.options.seconds ? self.$input.seconds.value() : '00'
].join(':') + (
self.options.ampm ? ' ' + self.$input.ampm.options('value') : ''
self.options.ampm ? ' ' + self.$input.ampm.value() : ''
)
),
(
self.options.seconds ? '%T' : '%H:%M'
) + (
self.options.milliseconds ? '.' + self.$input.milliseconds.options('value') : ''
self.options.milliseconds ? '.' + self.$input.milliseconds.value() : ''
)
);
}