filter rewrite, element update
This commit is contained in:
rlx
parent
d660e0e30a
commit
a96f6fdfd1
2 changed files with 118 additions and 84 deletions
|
|
@ -106,7 +106,10 @@ Ox.Element = function() {
|
|||
function bind(action, event, fn) {
|
||||
self.$eventHandler[action]('ox_' + event, function(event, data) {
|
||||
// fixme: remove second parameter
|
||||
fn(Ox.extend({_event: event}, data), data);
|
||||
fn(Ox.extend({
|
||||
_element: that.$element,
|
||||
_event: event
|
||||
}, data), data);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -227,31 +227,37 @@ Ox.Filter = function(options, self) {
|
|||
}
|
||||
|
||||
function changeConditionKey(pos, subpos, key) {
|
||||
subpos = Ox.isUndefined(subpos) ? -1 : subpos;
|
||||
Ox.print('changeConditionKey', pos, subpos, key);
|
||||
var oldOperator = self.options.query.conditions[pos].operator,
|
||||
oldType = Ox.getObjectById(
|
||||
self.options.findKeys, self.options.query.conditions[pos].key
|
||||
).type,
|
||||
newType = Ox.getObjectById(
|
||||
self.options.findKeys, key
|
||||
).type,
|
||||
var condition = subpos == -1
|
||||
? self.options.query.conditions[pos]
|
||||
: self.options.query.conditions[pos].conditions[subpos],
|
||||
oldOperator = condition.operator,
|
||||
oldType = Ox.getObjectById(self.options.findKeys, condition.key).type,
|
||||
newType = Ox.getObjectById(self.options.findKeys, key).type,
|
||||
oldConditionType = getConditionType(oldType),
|
||||
newConditionType = getConditionType(newType);
|
||||
changeConditionType = oldConditionType != newConditionType;
|
||||
Ox.print('old new', oldConditionType, newConditionType)
|
||||
self.options.query.conditions[pos].key = key;
|
||||
condition.key = key;
|
||||
if (changeConditionType) {
|
||||
self.$conditions[pos].replaceElement(1, constructConditionOperator(pos, oldOperator));
|
||||
renderConditions();
|
||||
//self.$conditions[pos].replaceElement(1, constructConditionOperator(pos, oldOperator));
|
||||
}
|
||||
}
|
||||
|
||||
function changeConditionOperator(pos, operator) {
|
||||
var oldOperator = self.options.query.conditions[pos].operator;
|
||||
self.options.query.conditions[pos].operator = operator;
|
||||
if (oldOperator.indexOf('-') == -1 && operator.indexOf('-') > -1) {
|
||||
self.$conditions[pos].replaceElement(2, constructInput(true));
|
||||
} else if (oldOperator.indexOf('-') > -1 && operator.indexOf('-') == -1) {
|
||||
self.$conditions[pos].replaceElement(2, constructInput());
|
||||
function changeConditionOperator(pos, subpos, operator) {
|
||||
subpos = Ox.isUndefined(subpos) ? -1 : subpos;
|
||||
var condition = subpos == -1
|
||||
? self.options.query.conditions[pos]
|
||||
: self.options.quert.conditions[pos].conditions[subpos],
|
||||
oldOperator = condition.operator
|
||||
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');
|
||||
}
|
||||
|
||||
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) {
|
||||
var $input;
|
||||
if (!isBetween) {
|
||||
|
|
@ -336,6 +316,7 @@ Ox.Filter = function(options, self) {
|
|||
}
|
||||
|
||||
function renderButtons(pos, subpos) {
|
||||
subpos = Ox.isUndefined(subpos) ? -1 : subpos;
|
||||
var isGroup = subpos == -1 && self.options.query.conditions[pos].conditions;
|
||||
return Ox.merge([
|
||||
new Ox.Button({
|
||||
|
|
@ -345,12 +326,17 @@ Ox.Filter = function(options, self) {
|
|||
type: 'image'
|
||||
})
|
||||
.css({margin: '0 4px 0 ' + (isGroup ? '296px' : '8px')})
|
||||
.bind({
|
||||
click: function() {
|
||||
removeCondition(
|
||||
$(this).parent().data('position'),
|
||||
$(this).parent().data('subposition')
|
||||
);
|
||||
.bindEvent({
|
||||
click: function(data) {
|
||||
Ox.print('remove...', data)
|
||||
if (data._element.parent().data('subposition') == -1) {
|
||||
removeCondition(data._element.parent().data('position'));
|
||||
} else {
|
||||
removeCondition(
|
||||
data._element.parent().data('position'),
|
||||
data._element.parent().data('subposition')
|
||||
);
|
||||
}
|
||||
}
|
||||
}),
|
||||
Ox.Button({
|
||||
|
|
@ -359,14 +345,15 @@ Ox.Filter = function(options, self) {
|
|||
type: 'image'
|
||||
})
|
||||
.css({margin: '0 ' + (subpos == -1 ? '4px' : '0') + ' 0 4px'})
|
||||
.bind({
|
||||
click: function() {
|
||||
if (subpos == -1) {
|
||||
addCondition($(this).parent().data('position') + 1);
|
||||
.bindEvent({
|
||||
click: function(data) {
|
||||
Ox.print('add...', data, data._element.parent().data('position'), data._element.parent().data('subposition'))
|
||||
if (data._element.parent().data('subposition') == -1) {
|
||||
addCondition(data._element.parent().data('position') + 1);
|
||||
} else {
|
||||
addCondition(
|
||||
$(this).parent().data('position'),
|
||||
$(this).parent().data('subposition') + 1
|
||||
data._element.parent().data('position'),
|
||||
data._element.parent().data('subposition') + 1
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -378,9 +365,9 @@ Ox.Filter = function(options, self) {
|
|||
type: 'image'
|
||||
})
|
||||
.css({margin: '0 0 0 4px'})
|
||||
.bind({
|
||||
click: function() {
|
||||
addCondition($(this).parent().data('position') + 1, -1, true)
|
||||
.bindEvent({
|
||||
click: function(data) {
|
||||
addCondition(data._element.parent().data('position') + 1, -1, true)
|
||||
}
|
||||
})
|
||||
] : []);
|
||||
|
|
@ -388,37 +375,81 @@ Ox.Filter = function(options, self) {
|
|||
|
||||
function renderCondition(condition, pos, 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)
|
||||
var $condition = Ox.FormElementGroup({
|
||||
return Ox.FormElementGroup({
|
||||
elements: Ox.merge([
|
||||
Ox.Select({
|
||||
items: $.map(self.options.findKeys, function(key) {
|
||||
return {
|
||||
id: key.id,
|
||||
title: key.title
|
||||
};
|
||||
}),
|
||||
//items: $.extend({}, self.options.findKeys), // fixme: Ox.Menu messes with keys
|
||||
overlap: 'right',
|
||||
width: 128
|
||||
})
|
||||
.bindEvent({
|
||||
change: function(event, data) {
|
||||
Ox.print('event', event)
|
||||
changeConditionKey(
|
||||
$condition.data('position'),
|
||||
$condition.data('subposition'),
|
||||
data.selected[0].id
|
||||
);
|
||||
}
|
||||
}),
|
||||
constructConditionOperator(pos, subpos),
|
||||
constructInput()
|
||||
renderConditionKey(condition),
|
||||
renderConditionOperator(condition),
|
||||
renderConditionValue(condition)
|
||||
], renderButtons(pos, subpos))
|
||||
})
|
||||
.css({marginLeft: subpos == -1 ? 0 : '24px'})
|
||||
.data({position: pos, subpostion: subpos});
|
||||
return $condition;
|
||||
.data({position: pos, subposition: subpos});
|
||||
}
|
||||
|
||||
function renderConditionKey(condition) {
|
||||
return Ox.Select({
|
||||
items: $.map(self.options.findKeys, function(key) {
|
||||
return {
|
||||
checked: key.id == condition.key,
|
||||
id: key.id,
|
||||
title: key.title
|
||||
};
|
||||
}),
|
||||
//items: $.extend({}, self.options.findKeys), // fixme: Ox.Menu messes with keys
|
||||
overlap: 'right',
|
||||
width: 128
|
||||
})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
Ox.print('changeKey', data)
|
||||
changeConditionKey(
|
||||
data._element.parent().data('position'),
|
||||
data._element.parent().data('subposition'),
|
||||
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
|
||||
};
|
||||
}),
|
||||
overlap: 'right',
|
||||
width: 128
|
||||
})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
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() {
|
||||
|
|
|
|||
Loading…
Reference in a new issue