updating dialog and filter

source/Ox.UI/js/Form/Ox.Filter.js

@@ -7,7 +7,16 @@ Ox.Filter <f:Ox.Element> Filter Element
     (options, self) -> <f> Filter Element
     options <o> Options object
         findKeys <a|[]> keys
-        query <o> query object with conditions, operator
+        list <o> list object
+            sort <s> List sort
+            view <s> List view
+        query <o> query object
+            conditions <[o]> Conditions (array of {key, value, operator})
+            operator <s> Operator ('&' or '|')
+            limit <o> Limit
+                key <s> Limit key
+                sort <s> Limit sort
+                value <n> Limit value
         sortKeys <a|[]> keys to sort by
         viewKeys <a|[]> visible keys
     self <o> Shared private variable
@@ -19,6 +28,7 @@ Ox.Filter = function(options, self) {
     var that = Ox.Element({}, self)
             .defaults({
                 findKeys: [],
+                list: null,
                 query: {
                     conditions: [],
                     operator: '&'
@@ -28,6 +38,13 @@ Ox.Filter = function(options, self) {
             })
             .options(options || {});
 
+    // fixme: this should not happen, but some lists
+    // have their query set to {} or their query operator set to ''
+    if (Ox.isEmpty(self.options.query)) {
+        self.options.query = {conditions: [], operator: '&'};
+    } else if (self.options.query.operator == '') {
+        self.options.query.operator = '&';
+    }
     Ox.print('Ox.Filter self.options', self.options)
 
     self.conditionOperators = {
@@ -91,7 +108,11 @@ Ox.Filter = function(options, self) {
             Ox.FormElementGroup({
                 elements: [
                     Ox.Select({
-                            items: self.operators,
+                            items: self.operators.map(function(operator) {
+                                return Ox.extend({
+                                    checked: operator.id == self.options.query.operator
+                                }, operator);
+                            }),
                             width: 48
                         })
                         .bindEvent({
@@ -110,7 +131,21 @@ Ox.Filter = function(options, self) {
         float: 'left',
     });
 
-    Ox.print('s.o.sK', self.options.sortKeys)
+    self.$save = Ox.InputGroup({
+        inputs: [
+            Ox.Checkbox({
+                width: 16
+            }),
+            Ox.Input({
+                id: 'list',
+                width: 128
+            })
+        ],
+        separators: [
+            {title: 'Save as Smart List', width: 112}
+        ]
+    });
+
     self.$limit = Ox.InputGroup({
         inputs: [
             Ox.Checkbox({
@@ -139,9 +174,7 @@ Ox.Filter = function(options, self) {
                 width: 120
             }),
             Ox.Select({
-                items: self.options.sortKeys.map(function(sortKey) {
+                items: self.options.sortKeys,
-                    return {id: sortKey.id, title: sortKey.title};
-                }),
                 width: 128
             }),
             Ox.FormElementGroup({
@@ -178,48 +211,42 @@ Ox.Filter = function(options, self) {
             Ox.Select({
                 items: self.options.viewKeys,
                 width: 128
-            })
-        ],
-        separators: [
-            {title: 'By default, view', width: 112}
-        ]
-    });
-
-    ///*
-    // fixme: sortKeys have been altered, probably by some select
-    Ox.print('s.o.sK', self.options.sortKeys)
-    self.$sort = Ox.InputGroup({
-        inputs: [
-            Ox.Checkbox({
-                width: 16
             }),
             Ox.Select({
                 items: self.options.sortKeys,
                 width: 128
-            })
-        ],
-        separators: [
-            {title: 'By default, sort by', width: 112}
-        ]
-    });
-    //*/
-
-    self.$save = Ox.InputGroup({
-        inputs: [
-            Ox.Checkbox({
-                width: 16
             }),
-            Ox.Input({
+            Ox.FormElementGroup({
-                id: 'list',
+                elements: [
+                    Ox.Select({
+                        items: [
+                            {id: 'ascending', title: 'ascending'},
+                            {id: 'descending', title: 'descending'}
+                        ],
                         width: 128
+                    }),
+                    Ox.Label({
+                        overlap: 'left',
+                        title: 'order',
+                        width: 72
+                    })
+                ],
+                float: 'right',
+                width: 200
             })
         ],
         separators: [
-            {title: 'Save as Smart List', width: 112}
+            {title: 'View', width: 48},
+            {title: 'sorted by', width: 60},
+            {title: 'in', width: 32}
         ]
     });
 
-    self.$items = [self.$operator, self.$limit, self.$view, self.$sort, self.$save];
+    self.$items = self.options.list
+        ? [self.$operator, self.$save, self.$limit, self.$view]
+        : [self.$operator, self.$limit, self.$view];
+
+    self.numberOfAdditionalFormItems = self.$items.length;
 
     self.$form = Ox.Form({
         items: self.$items
@@ -236,6 +263,7 @@ Ox.Filter = function(options, self) {
                 operator: self.conditionOperators[key.type][0].id
             };
         if (isGroup) {
+            Ox.print('isGroup', self.options.query.operator)
             condition = {
                 conditions: [condition],
                 operator: self.options.query.operator == '&' ? '|' : '&'
@@ -287,8 +315,15 @@ Ox.Filter = function(options, self) {
     }
 
     function changeOperator(data) {
+        var changeGroupOperator = false;
         self.options.query.operator = data.selected[0].id;
-        that.$element.find('.OxGroupLabel').html(self.options.query.operator == '&' ? 'and' : 'or');
+        self.options.query.conditions.forEach(function(condition, pos) {
+            if (condition.conditions) {
+                condition.operator = condition.operator == '&' ? '|' : '&';
+                changeGroupOperator = true;
+            }
+        });
+        changeGroupOperator && renderConditions();
     }
 
     function getConditionType(type) {
@@ -462,6 +497,69 @@ Ox.Filter = function(options, self) {
         });
     }
 
+    function renderConditions() {
+        Ox.print('renderConditions', self.options.query)
+        var $conditions = [];
+        while (self.$form.options('items').length > self.numberOfAdditionalFormItems) {
+            self.$form.removeItem(1);
+        }
+        self.options.query.conditions.forEach(function(condition, pos) {
+            if (!condition.conditions) {
+                $conditions.push(renderCondition(condition, pos));
+            } else {
+                $conditions.push(renderGroup(condition, pos));
+                condition.conditions.forEach(function(subcondition, subpos) {
+                    $conditions.push(renderCondition(subcondition, pos, subpos));
+                });
+            }
+        });
+        $conditions.forEach(function($condition, pos) {
+            self.$form.addItem(1 + pos, $condition);
+        });
+    }
+
+    function renderGroup(condition, pos) {
+        var subpos = -1;
+        var $condition = Ox.FormElementGroup({
+            elements: Ox.merge([
+                Ox.Label({
+                    title: self.options.query.operator == '&'
+                        ? (pos == 0 ? 'Both' : 'and')
+                        : (pos == 0 ? 'Either': 'or'),
+                    overlap: 'right',
+                    width: 48
+                }).addClass('OxGroupLabel'),
+                Ox.FormElementGroup({
+                    elements: [
+                        Ox.Select({
+                                items: self.operators.map(function(operator) {
+                                    return {
+                                        checked: operator.id != self.options.query.operator,
+                                        id: operator.id,
+                                        title: operator.title
+                                    };
+                                }),
+                                width: 48
+                            })
+                            .bindEvent({
+                                change: changeOperator
+                            }),
+                        Ox.Label({
+                            overlap: 'left',
+                            title: 'of the following conditions',
+                            width: 160
+                        })
+                    ],
+                    float: 'right',
+                    width: 208
+                }),
+            ], renderButtons(pos, subpos, true)),
+            float: 'left'
+        })
+        .data({position: pos, subposition: subpos});
+        return $condition;
+    }
+
     function renderInput(condition, index) {
         Ox.print('renderInput', condition)
         var $input,
@@ -547,70 +645,6 @@ Ox.Filter = function(options, self) {
         return $input;
     }
 
-    function renderConditions() {
-        Ox.print('renderConditions', self.options.query)
-        var $conditions = [];
-        while (self.$form.options('items').length > 4) {
-            self.$form.removeItem(1);
-        }
-        self.options.query.conditions.forEach(function(condition, pos) {
-            if (!condition.conditions) {
-                $conditions.push(renderCondition(condition, pos));
-            } else {
-                $conditions.push(renderGroup(condition, pos));
-                condition.conditions.forEach(function(subcondition, subpos) {
-                    $conditions.push(renderCondition(subcondition, pos, subpos));
-                });
-            }
-        });
-        $conditions.forEach(function($condition, pos) {
-            self.$form.addItem(1 + pos, $condition);
-        });
-    }
-
-    function renderGroup(condition, pos) {
-        var subpos = -1;
-        var $condition = Ox.FormElementGroup({
-            elements: Ox.merge([
-                Ox.Label({
-                    title: self.options.query.operator == '&' ? 'and' : 'or',
-                    overlap: 'right',
-                    width: 48
-                }).addClass('OxGroupLabel'),
-                Ox.FormElementGroup({
-                    elements: [
-                        Ox.Select({
-                                items: self.operators.map(function(operator) {
-                                    return {
-                                        checked: operator.id != self.options.query.operator,
-                                        id: operator.id,
-                                        // fixme: should be operator.title,
-                                        // but is passed by reference to some select,
-                                        // which makes it an array
-                                        title: operator.title[0]
-                                    };
-                                }),
-                                width: 48
-                            })
-                            .bindEvent({
-                                change: changeOperator
-                            }),
-                        Ox.Label({
-                            overlap: 'left',
-                            title: 'of the following conditions',
-                            width: 160
-                        })
-                    ],
-                    float: 'right',
-                    width: 208
-                }),
-            ], renderButtons(pos, subpos, true)),
-            float: 'left'
-        })
-        .data({position: pos, subposition: subpos});
-        return $condition;
-    }
-
     return that;
 
 };

source/Ox.UI/js/Video/Ox.VideoPreview.js

@@ -15,7 +15,11 @@ Ox.VideoPreview = function(options, self) {
             width: 256
         })
         .options(options || {})
-        .addClass('OxVideoPreview');
+        .addClass('OxVideoPreview')
+        .css({
+            width: self.options.width + 'px',
+            height: self.options.height + 'px'
+        });
 
     self.loaded = [];
     self.queue = [];

source/Ox.UI/js/Window/Ox.Dialog.js

@@ -637,7 +637,7 @@ Ox.Dialog = function(options, self) {
                     opacity: 1
                 }, 50);
             });
-        } else if (key == 'height') {
+        } else if (key == 'width') {
             setMinAndMax();
             setCSS({width: value});
         }