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

filter rewrite, element update

Browse source
This commit is contained in:
rlx 2011-06-02 03:02:16 +00:00
parent d660e0e30a
commit a96f6fdfd1
2 changed files with 118 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -106,7 +106,10 @@ Ox.Element = function() {
function bind(action, event, fn) { function bind(action, event, fn) {
self.$eventHandler[action]('ox_' + event, function(event, data) { self.$eventHandler[action]('ox_' + event, function(event, data) {
// fixme: remove second parameter // fixme: remove second parameter
fn(Ox.extend({_event: event}, data), data); fn(Ox.extend({
_element: that.$element,
_event: event
}, data), data);
}); });
} }

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

@ -227,31 +227,37 @@ Ox.Filter = function(options, self) {
} }
function changeConditionKey(pos, subpos, key) { function changeConditionKey(pos, subpos, key) {
subpos = Ox.isUndefined(subpos) ? -1 : subpos;
Ox.print('changeConditionKey', pos, subpos, key); Ox.print('changeConditionKey', pos, subpos, key);
var oldOperator = self.options.query.conditions[pos].operator, var condition = subpos == -1
oldType = Ox.getObjectById( ? self.options.query.conditions[pos]
self.options.findKeys, self.options.query.conditions[pos].key : self.options.query.conditions[pos].conditions[subpos],
).type, oldOperator = condition.operator,
newType = Ox.getObjectById( oldType = Ox.getObjectById(self.options.findKeys, condition.key).type,
self.options.findKeys, key newType = Ox.getObjectById(self.options.findKeys, key).type,
).type,
oldConditionType = getConditionType(oldType), oldConditionType = getConditionType(oldType),
newConditionType = getConditionType(newType); newConditionType = getConditionType(newType);
changeConditionType = oldConditionType != newConditionType; changeConditionType = oldConditionType != newConditionType;
Ox.print('old new', oldConditionType, newConditionType) Ox.print('old new', oldConditionType, newConditionType)
self.options.query.conditions[pos].key = key; condition.key = key;
if (changeConditionType) { if (changeConditionType) {
self.$conditions[pos].replaceElement(1, constructConditionOperator(pos, oldOperator)); renderConditions();
//self.$conditions[pos].replaceElement(1, constructConditionOperator(pos, oldOperator));
} }
} }
function changeConditionOperator(pos, operator) { function changeConditionOperator(pos, subpos, operator) {
var oldOperator = self.options.query.conditions[pos].operator; subpos = Ox.isUndefined(subpos) ? -1 : subpos;
self.options.query.conditions[pos].operator = operator; var condition = subpos == -1
if (oldOperator.indexOf('-') == -1 && operator.indexOf('-') > -1) { ? self.options.query.conditions[pos]
self.$conditions[pos].replaceElement(2, constructInput(true)); : self.options.quert.conditions[pos].conditions[subpos],
} else if (oldOperator.indexOf('-') > -1 && operator.indexOf('-') == -1) { oldOperator = condition.operator
self.$conditions[pos].replaceElement(2, constructInput()); condition.operator = operator;
if (
(oldOperator.indexOf('-') == -1 && operator.indexOf('-') > -1)
|| (oldOperator.indexOf('-') > -1 && operator.indexOf('-') == -1)
) {
renderConditions();
} }
} }
@ -260,32 +266,6 @@ Ox.Filter = function(options, self) {
that.$element.find('.OxGroupLabel').html(self.options.query.operator == '&' ? 'and' : 'or'); that.$element.find('.OxGroupLabel').html(self.options.query.operator == '&' ? 'and' : 'or');
} }
function constructConditionOperator(pos, subpos, selected) {
subpos = Ox.isUndefined(subpos) ? -1 : subpos;
Ox.print('constructConditionOperator', pos, subpos)
var condition = subpos == -1
? self.options.query.conditions[pos]
: self.options.query.conditions[pos].conditions[subpos];
return Ox.Select({
items: $.map(self.conditionOperators[getConditionType(
Ox.getObjectById(self.options.findKeys, condition.key).type
)], function(operator) {
return {
checked: operator.id == selected, // fixme: should be "selected", not "checked"
id: operator.id,
title: operator.title
};
}),
overlap: 'right',
width: 128
})
.bindEvent({
change: function(event, data) {
changeConditionOperator(/*$condition.data('position')*/ pos, data.selected[0].id)
}
});
}
function constructInput(isBetween) { function constructInput(isBetween) {
var $input; var $input;
if (!isBetween) { if (!isBetween) {
@ -336,6 +316,7 @@ Ox.Filter = function(options, self) {
} }
function renderButtons(pos, subpos) { function renderButtons(pos, subpos) {
subpos = Ox.isUndefined(subpos) ? -1 : subpos;
var isGroup = subpos == -1 && self.options.query.conditions[pos].conditions; var isGroup = subpos == -1 && self.options.query.conditions[pos].conditions;
return Ox.merge([ return Ox.merge([
new Ox.Button({ new Ox.Button({
@ -345,13 +326,18 @@ Ox.Filter = function(options, self) {
type: 'image' type: 'image'
}) })
.css({margin: '0 4px 0 ' + (isGroup ? '296px' : '8px')}) .css({margin: '0 4px 0 ' + (isGroup ? '296px' : '8px')})
.bind({ .bindEvent({
click: function() { click: function(data) {
Ox.print('remove...', data)
if (data._element.parent().data('subposition') == -1) {
removeCondition(data._element.parent().data('position'));
} else {
removeCondition( removeCondition(
$(this).parent().data('position'), data._element.parent().data('position'),
$(this).parent().data('subposition') data._element.parent().data('subposition')
); );
} }
}
}), }),
Ox.Button({ Ox.Button({
id: 'add', id: 'add',
@ -359,14 +345,15 @@ Ox.Filter = function(options, self) {
type: 'image' type: 'image'
}) })
.css({margin: '0 ' + (subpos == -1 ? '4px' : '0') + ' 0 4px'}) .css({margin: '0 ' + (subpos == -1 ? '4px' : '0') + ' 0 4px'})
.bind({ .bindEvent({
click: function() { click: function(data) {
if (subpos == -1) { Ox.print('add...', data, data._element.parent().data('position'), data._element.parent().data('subposition'))
addCondition($(this).parent().data('position') + 1); if (data._element.parent().data('subposition') == -1) {
addCondition(data._element.parent().data('position') + 1);
} else { } else {
addCondition( addCondition(
$(this).parent().data('position'), data._element.parent().data('position'),
$(this).parent().data('subposition') + 1 data._element.parent().data('subposition') + 1
); );
} }
} }
@ -378,9 +365,9 @@ Ox.Filter = function(options, self) {
type: 'image' type: 'image'
}) })
.css({margin: '0 0 0 4px'}) .css({margin: '0 0 0 4px'})
.bind({ .bindEvent({
click: function() { click: function(data) {
addCondition($(this).parent().data('position') + 1, -1, true) addCondition(data._element.parent().data('position') + 1, -1, true)
} }
}) })
] : []); ] : []);
@ -388,12 +375,26 @@ Ox.Filter = function(options, self) {
function renderCondition(condition, pos, subpos) { function renderCondition(condition, pos, subpos) {
subpos = Ox.isUndefined(subpos) ? -1 : subpos; subpos = Ox.isUndefined(subpos) ? -1 : subpos;
var condition = subpos == -1
? self.options.query.conditions[pos]
: self.options.query.conditions[pos].conditions[subpos];
Ox.print('renderCondition', condition, pos, subpos) Ox.print('renderCondition', condition, pos, subpos)
var $condition = Ox.FormElementGroup({ return Ox.FormElementGroup({
elements: Ox.merge([ elements: Ox.merge([
Ox.Select({ renderConditionKey(condition),
renderConditionOperator(condition),
renderConditionValue(condition)
], renderButtons(pos, subpos))
})
.css({marginLeft: subpos == -1 ? 0 : '24px'})
.data({position: pos, subposition: subpos});
}
function renderConditionKey(condition) {
return Ox.Select({
items: $.map(self.options.findKeys, function(key) { items: $.map(self.options.findKeys, function(key) {
return { return {
checked: key.id == condition.key,
id: key.id, id: key.id,
title: key.title title: key.title
}; };
@ -403,22 +404,52 @@ Ox.Filter = function(options, self) {
width: 128 width: 128
}) })
.bindEvent({ .bindEvent({
change: function(event, data) { change: function(data) {
Ox.print('event', event) Ox.print('changeKey', data)
changeConditionKey( changeConditionKey(
$condition.data('position'), data._element.parent().data('position'),
$condition.data('subposition'), data._element.parent().data('subposition'),
data.selected[0].id data.selected[0].id
); );
} }
});
}
function renderConditionOperator(condition) {
return Ox.Select({
items: $.map(self.conditionOperators[getConditionType(
Ox.getObjectById(self.options.findKeys, condition.key).type
)], function(operator) {
return {
checked: operator.id == condition.operator, // fixme: should be "selected", not "checked"
id: operator.id,
title: operator.title
};
}), }),
constructConditionOperator(pos, subpos), overlap: 'right',
constructInput() width: 128
], renderButtons(pos, subpos))
}) })
.css({marginLeft: subpos == -1 ? 0 : '24px'}) .bindEvent({
.data({position: pos, subpostion: subpos}); change: function(data) {
return $condition; changeConditionOperator(
data._element.parent().data('position'),
data._element.parent().data('subposition'),
data.selected[0].id
);
}
});
}
function renderConditionValue(condition) {
return Ox.Input({
value: condition.value,
width: 288
})
.bindEvent({
change: function(data) {
}
});
} }
function renderConditions() { function renderConditions() {