updating dialog and filter

This commit is contained in:
rlx 2011-09-19 12:29:06 +00:00
parent 636f772820
commit d50e37588b
3 changed files with 151 additions and 113 deletions

View file

@ -7,10 +7,19 @@ Ox.Filter <f:Ox.Element> Filter Element
(options, self) -> <f> Filter Element (options, self) -> <f> Filter Element
options <o> Options object options <o> Options object
findKeys <a|[]> keys 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 sortKeys <a|[]> keys to sort by
viewKeys <a|[]> visible keys viewKeys <a|[]> visible keys
self <o> Shared private variable self <o> Shared private variable
@*/ @*/
Ox.Filter = function(options, self) { Ox.Filter = function(options, self) {
@ -19,6 +28,7 @@ Ox.Filter = function(options, self) {
var that = Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
findKeys: [], findKeys: [],
list: null,
query: { query: {
conditions: [], conditions: [],
operator: '&' operator: '&'
@ -28,6 +38,13 @@ Ox.Filter = function(options, self) {
}) })
.options(options || {}); .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) Ox.print('Ox.Filter self.options', self.options)
self.conditionOperators = { self.conditionOperators = {
@ -91,7 +108,11 @@ Ox.Filter = function(options, self) {
Ox.FormElementGroup({ Ox.FormElementGroup({
elements: [ elements: [
Ox.Select({ Ox.Select({
items: self.operators, items: self.operators.map(function(operator) {
return Ox.extend({
checked: operator.id == self.options.query.operator
}, operator);
}),
width: 48 width: 48
}) })
.bindEvent({ .bindEvent({
@ -110,7 +131,21 @@ Ox.Filter = function(options, self) {
float: 'left', 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({ self.$limit = Ox.InputGroup({
inputs: [ inputs: [
Ox.Checkbox({ Ox.Checkbox({
@ -139,9 +174,7 @@ Ox.Filter = function(options, self) {
width: 120 width: 120
}), }),
Ox.Select({ Ox.Select({
items: self.options.sortKeys.map(function(sortKey) { items: self.options.sortKeys,
return {id: sortKey.id, title: sortKey.title};
}),
width: 128 width: 128
}), }),
Ox.FormElementGroup({ Ox.FormElementGroup({
@ -178,48 +211,42 @@ Ox.Filter = function(options, self) {
Ox.Select({ Ox.Select({
items: self.options.viewKeys, items: self.options.viewKeys,
width: 128 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({ Ox.Select({
items: self.options.sortKeys, items: self.options.sortKeys,
width: 128 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: [
width: 128 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: [ 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({ self.$form = Ox.Form({
items: self.$items items: self.$items
@ -236,6 +263,7 @@ Ox.Filter = function(options, self) {
operator: self.conditionOperators[key.type][0].id operator: self.conditionOperators[key.type][0].id
}; };
if (isGroup) { if (isGroup) {
Ox.print('isGroup', self.options.query.operator)
condition = { condition = {
conditions: [condition], conditions: [condition],
operator: self.options.query.operator == '&' ? '|' : '&' operator: self.options.query.operator == '&' ? '|' : '&'
@ -287,8 +315,15 @@ Ox.Filter = function(options, self) {
} }
function changeOperator(data) { function changeOperator(data) {
var changeGroupOperator = false;
self.options.query.operator = data.selected[0].id; 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) { function getConditionType(type) {
@ -375,14 +410,14 @@ Ox.Filter = function(options, self) {
: self.options.query.conditions[pos].conditions[subpos]; : self.options.query.conditions[pos].conditions[subpos];
Ox.print('renderCondition', condition, pos, subpos) Ox.print('renderCondition', condition, pos, subpos)
return Ox.FormElementGroup({ return Ox.FormElementGroup({
elements: Ox.merge([ elements: Ox.merge([
renderConditionKey(condition), renderConditionKey(condition),
renderConditionOperator(condition), renderConditionOperator(condition),
renderConditionValue(condition) renderConditionValue(condition)
], renderButtons(pos, subpos)) ], renderButtons(pos, subpos))
}) })
.css({marginLeft: subpos == -1 ? 0 : '24px'}) .css({marginLeft: subpos == -1 ? 0 : '24px'})
.data({position: pos, subposition: subpos}); .data({position: pos, subposition: subpos});
} }
function renderConditionKey(condition) { 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) { function renderInput(condition, index) {
Ox.print('renderInput', condition) Ox.print('renderInput', condition)
var $input, var $input,
@ -547,70 +645,6 @@ Ox.Filter = function(options, self) {
return $input; 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; return that;
}; };

View file

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

View file

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