From a96f6fdfd14d4e14ed25e4de99b9bc87b8467356 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Thu, 2 Jun 2011 03:02:16 +0000 Subject: [PATCH] filter rewrite, element update --- source/Ox.UI/js/Core/Ox.Element.js | 5 +- source/Ox.UI/js/Form/Ox.Filter.js | 197 +++++++++++++++++------------ 2 files changed, 118 insertions(+), 84 deletions(-) diff --git a/source/Ox.UI/js/Core/Ox.Element.js b/source/Ox.UI/js/Core/Ox.Element.js index 76089a1e..46cc5938 100644 --- a/source/Ox.UI/js/Core/Ox.Element.js +++ b/source/Ox.UI/js/Core/Ox.Element.js @@ -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); }); } diff --git a/source/Ox.UI/js/Form/Ox.Filter.js b/source/Ox.UI/js/Form/Ox.Filter.js index a4339ef6..9cb5dff8 100644 --- a/source/Ox.UI/js/Form/Ox.Filter.js +++ b/source/Ox.UI/js/Form/Ox.Filter.js @@ -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() {