some changes to files view
This commit is contained in:
rlx
parent
0bc884070c
commit
62df91961e
2 changed files with 143 additions and 15 deletions
|
|
@ -39,8 +39,8 @@ Ox.Checkbox = function(options, self) {
|
|||
|
||||
if (self.options.title) {
|
||||
self.options.width != 'auto' && that.css({
|
||||
width: self.options.width + 'px'
|
||||
});
|
||||
width: self.options.width + 'px'
|
||||
});
|
||||
self.$title = new Ox.Label({
|
||||
disabled: self.options.disabled,
|
||||
id: self.options.id + 'Label',
|
||||
|
|
@ -107,6 +107,11 @@ Ox.Checkbox = function(options, self) {
|
|||
return that;
|
||||
}
|
||||
|
||||
// fixme: added for forms, duplicated, checked() shouldn't be neccessary
|
||||
that.value = function() {
|
||||
return self.options.checked;
|
||||
}
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
|
|
|
|||
|
|
@ -18,6 +18,8 @@ Ox.FilesView = function(options, self) {
|
|||
})
|
||||
.options(options || {});
|
||||
|
||||
self.selected = [];
|
||||
|
||||
self.$toolbar = new Ox.Bar({
|
||||
size: 24
|
||||
});
|
||||
|
|
@ -152,32 +154,153 @@ Ox.FilesView = function(options, self) {
|
|||
select: selectFiles
|
||||
});
|
||||
|
||||
self.$instancesList = new Ox.Element()
|
||||
self.$instancesList = Ox.Element()
|
||||
.html('No files selected');
|
||||
|
||||
that.$element = new Ox.SplitPanel({
|
||||
self.$movieLabel = Ox.Label({
|
||||
textAlign: 'center',
|
||||
title: 'Move Selected Files to Another Movie',
|
||||
width: 240
|
||||
})
|
||||
.css({margin: '8px'});
|
||||
|
||||
['title', 'director', 'year', 'id'].forEach(function(key) {
|
||||
self['$' + key + 'Input'] = Ox.Input({
|
||||
clear: true,
|
||||
id: key,
|
||||
label: key == 'id' ? 'ID' : Ox.toTitleCase(key),
|
||||
labelWidth: 64,
|
||||
width: 240
|
||||
})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
var conditions;
|
||||
if (data.value.length) {
|
||||
if (key == 'id') {
|
||||
conditions = [{key: 'id', value: data.value, operator: '='}]
|
||||
} else {
|
||||
conditions = Ox.map(['title', 'director', 'year'], function(key) {
|
||||
var value = self['$' + key + 'Input'].options('value')
|
||||
return value.length ? {key: key, value: value, operator: '='} : null;
|
||||
})
|
||||
}
|
||||
pandora.api.find({
|
||||
keys: ['title', 'director', 'year', 'id'],
|
||||
query: {
|
||||
conditions: conditions,
|
||||
operator: '&'
|
||||
},
|
||||
range: [0, 2]
|
||||
}, function(result) {
|
||||
var length = result.data.items.length;
|
||||
if (length == 0) {
|
||||
if (key != 'id') {
|
||||
self.$idInput.options({value: ''});
|
||||
}
|
||||
} else if (result.data.items.length == 1) {
|
||||
['title', 'director', 'year', 'id'].forEach(function(key) {
|
||||
self['$' + key + 'Input'].options({
|
||||
value: key == 'director'
|
||||
? result.data.items[0][key].join(', ')
|
||||
: result.data.items[0][key]
|
||||
});
|
||||
});
|
||||
} else {
|
||||
self.$idInput.options({value: ''});
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
self.$checkbox = Ox.Checkbox({
|
||||
checked: false,
|
||||
id: 'go',
|
||||
title: 'Go to this movie after moving files', // fixme: wrong, can be 'Go to video' etc
|
||||
width: 240
|
||||
});
|
||||
|
||||
self.$movieForm = Ox.Form({
|
||||
items: [
|
||||
self.$titleInput,
|
||||
self.$directorInput,
|
||||
self.$yearInput,
|
||||
self.$idInput,
|
||||
self.$checkbox
|
||||
],
|
||||
width: 240
|
||||
})
|
||||
.css({margin: '8px'});
|
||||
|
||||
self.$clearButton = Ox.Button({
|
||||
title: 'Clear',
|
||||
width: 116
|
||||
})
|
||||
.css({margin: '0 4px 4px 8px'})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
['title', 'director', 'year', 'id'].forEach(function(key) {
|
||||
self['$' + key + 'Input'].options({value: ''})
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
self.$moveButton = Ox.Button({
|
||||
disabled: true,
|
||||
title: 'Move',
|
||||
width: 116
|
||||
})
|
||||
.css({margin: '0 4px 4px 4px'});
|
||||
|
||||
self.$moviePanel = Ox.Element()
|
||||
.append(self.$movieLabel)
|
||||
.append(self.$movieForm)
|
||||
.append(self.$clearButton)
|
||||
.append(self.$moveButton);
|
||||
|
||||
that.$element = Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: self.$toolbar,
|
||||
size: 24
|
||||
element: Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: self.$toolbar,
|
||||
size: 24
|
||||
},
|
||||
{
|
||||
element: self.$filesList
|
||||
},
|
||||
{
|
||||
element: self.$instancesList,
|
||||
size: 80
|
||||
}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
})
|
||||
},
|
||||
{
|
||||
element: self.$filesList
|
||||
},
|
||||
{
|
||||
element: self.$instancesList,
|
||||
size: 80
|
||||
collapsible: true,
|
||||
element: self.$moviePanel,
|
||||
size: 256
|
||||
}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
orientation: 'horizontal'
|
||||
});
|
||||
|
||||
function openFiles(event, data) {
|
||||
Ox.print('........', JSON.stringify(self.$filesList.value(data.ids[0], 'instances'))
|
||||
Ox.print('........', JSON.stringify(self.$filesList.value(data.ids[0], 'instances')))
|
||||
}
|
||||
|
||||
function selectFiles(event, data) {
|
||||
Ox.print('........', JSON.stringify(self.$filesList.value(data.ids[0], 'instances'))
|
||||
function selectFiles(data) {
|
||||
self.selected = data.ids;
|
||||
updateForm();
|
||||
}
|
||||
|
||||
function updateForm() {
|
||||
self.$moveButton.options({
|
||||
disabled: self.selected.length === 0
|
||||
});
|
||||
}
|
||||
|
||||
return that;
|
||||
|
|
|
|||
Loading…
Reference in a new issue