0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

updating dialog and filter

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

236
source/Ox.UI/js/Form/Ox.Filter.js
View file

@ -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) {
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',
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) {
@ -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;
};

6
source/Ox.UI/js/Video/Ox.VideoPreview.js
View file

@ -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 = [];

2
source/Ox.UI/js/Window/Ox.Dialog.js
View file

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