updating dialog and filter
This commit is contained in:
rlx
parent
636f772820
commit
d50e37588b
3 changed files with 151 additions and 113 deletions
|
|
@ -7,10 +7,19 @@ 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
|
||||
self <o> 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;
|
||||
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 = [];
|
||||
|
|
|
|||
|
|
@ -637,7 +637,7 @@ Ox.Dialog = function(options, self) {
|
|||
opacity: 1
|
||||
}, 50);
|
||||
});
|
||||
} else if (key == 'height') {
|
||||
} else if (key == 'width') {
|
||||
setMinAndMax();
|
||||
setCSS({width: value});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue