From d50e37588bab4e7e2a12137c6cafa1dd85863fd9 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Mon, 19 Sep 2011 12:29:06 +0000 Subject: [PATCH] updating dialog and filter --- source/Ox.UI/js/Form/Ox.Filter.js | 256 +++++++++++++---------- source/Ox.UI/js/Video/Ox.VideoPreview.js | 6 +- source/Ox.UI/js/Window/Ox.Dialog.js | 2 +- 3 files changed, 151 insertions(+), 113 deletions(-) diff --git a/source/Ox.UI/js/Form/Ox.Filter.js b/source/Ox.UI/js/Form/Ox.Filter.js index c20d8bc2..98493cbc 100644 --- a/source/Ox.UI/js/Form/Ox.Filter.js +++ b/source/Ox.UI/js/Form/Ox.Filter.js @@ -7,10 +7,19 @@ Ox.Filter Filter Element (options, self) -> Filter Element options Options object findKeys keys - query query object with conditions, operator + list list object + sort List sort + view List view + query query object + conditions <[o]> Conditions (array of {key, value, operator}) + operator Operator ('&' or '|') + limit Limit + key Limit key + sort Limit sort + value Limit value sortKeys keys to sort by viewKeys visible keys - self Shared private variable + self Shared private variable @*/ Ox.Filter = function(options, self) { @@ -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) { - return {id: sortKey.id, title: sortKey.title}; - }), + items: self.options.sortKeys, 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({ - id: 'list', - width: 128 + Ox.FormElementGroup({ + 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) { @@ -375,14 +410,14 @@ Ox.Filter = function(options, self) { : self.options.query.conditions[pos].conditions[subpos]; Ox.print('renderCondition', condition, pos, subpos) return Ox.FormElementGroup({ - elements: Ox.merge([ - renderConditionKey(condition), - renderConditionOperator(condition), - renderConditionValue(condition) - ], renderButtons(pos, subpos)) - }) - .css({marginLeft: subpos == -1 ? 0 : '24px'}) - .data({position: pos, subposition: subpos}); + elements: Ox.merge([ + renderConditionKey(condition), + renderConditionOperator(condition), + renderConditionValue(condition) + ], renderButtons(pos, subpos)) + }) + .css({marginLeft: subpos == -1 ? 0 : '24px'}) + .data({position: pos, subposition: subpos}); } function renderConditionKey(condition) { @@ -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; }; diff --git a/source/Ox.UI/js/Video/Ox.VideoPreview.js b/source/Ox.UI/js/Video/Ox.VideoPreview.js index 61784441..816268aa 100644 --- a/source/Ox.UI/js/Video/Ox.VideoPreview.js +++ b/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 = []; diff --git a/source/Ox.UI/js/Window/Ox.Dialog.js b/source/Ox.UI/js/Window/Ox.Dialog.js index fcd09642..d368d137 100644 --- a/source/Ox.UI/js/Window/Ox.Dialog.js +++ b/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}); }