updating dialog and filter
This commit is contained in:
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, 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;
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -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 = [];
|
||||||
|
|
|
@ -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});
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue