filter rewrite, element update

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);
             });
         }
 

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,
+        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),
             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) {
+    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');
     }
 
-    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({
+                .bindEvent({
-                    click: function() {
+                    click: function(data) {
-                        removeCondition(
+                        Ox.print('remove...', data)
-                            $(this).parent().data('position'),
+                        if (data._element.parent().data('subposition') == -1) {
-                            $(this).parent().data('subposition')
+                            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({
+                .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 {
                             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'
                 })
                 .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,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({
+                renderConditionKey(condition),
-                        items: $.map(self.options.findKeys, function(key) {
+                renderConditionOperator(condition),
-                            return {
+                renderConditionValue(condition)
-                                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()
             ], renderButtons(pos, subpos))
         })
         .css({marginLeft: subpos == -1 ? 0 : '24px'})
-        .data({position: pos, subpostion: subpos});
+        .data({position: pos, subposition: subpos});
-        return $condition;
+    }
+
+    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() {