update files dialogs
This commit is contained in:
rolux
parent
665930885e
commit
ed3424f237
3 changed files with 142 additions and 106 deletions
|
|
@ -20,7 +20,7 @@ pandora.ui.deleteFileDialog = function(file, callback) {
|
|||
click: function() {
|
||||
that.close();
|
||||
pandora.api.removeFile({
|
||||
id: file.id
|
||||
id: file
|
||||
}, function(result) {
|
||||
Ox.Request.clearCache('findFiles');
|
||||
callback();
|
||||
|
|
@ -30,7 +30,7 @@ pandora.ui.deleteFileDialog = function(file, callback) {
|
|||
],
|
||||
keys: {enter: 'delete', escape: 'keep'},
|
||||
text: 'Are you sure you want to delete the file'
|
||||
+ ' "'+ item.filename + '"?',
|
||||
+ ' "'+ file + '"?',
|
||||
title: 'Delete File'
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -6,13 +6,13 @@ pandora.ui.filesDialog = function() {
|
|||
|
||||
var dialogHeight = Math.round((window.innerHeight - 48) * 0.9),
|
||||
dialogWidth = Math.round(window.innerWidth * 0.9),
|
||||
formWidth = 272 + Ox.UI.SCROLLBAR_SIZE,
|
||||
itemWidth = 256,
|
||||
|
||||
$findSelect = Ox.Select({
|
||||
items: [
|
||||
{id: 'all', title: 'Find: All'},
|
||||
{id: 'username', title: 'Find: Username'},
|
||||
{id: 'filename', title: 'Find: Filename'}
|
||||
{id: 'user', title: 'Find: Username'},
|
||||
{id: 'file', title: 'Find: Filename'}
|
||||
],
|
||||
overlap: 'right',
|
||||
type: 'image'
|
||||
|
|
@ -45,7 +45,7 @@ pandora.ui.filesDialog = function() {
|
|||
$list = Ox.TableList({
|
||||
columns: [
|
||||
{
|
||||
id: 'username',
|
||||
id: 'user',
|
||||
operator: '+',
|
||||
title: 'Username',
|
||||
visible: true,
|
||||
|
|
@ -53,19 +53,13 @@ pandora.ui.filesDialog = function() {
|
|||
},
|
||||
{
|
||||
align: 'right',
|
||||
format: function(value) {
|
||||
return value.split('.').slice(0, -1).join('.')
|
||||
},
|
||||
id: 'filename',
|
||||
id: 'name',
|
||||
operator: '+',
|
||||
title: 'Filename',
|
||||
visible: true,
|
||||
width: 192
|
||||
width: 256
|
||||
},
|
||||
{
|
||||
format: function(value) {
|
||||
return value.split('.').pop();
|
||||
},
|
||||
id: 'extension',
|
||||
operator: '+',
|
||||
title: 'Extension',
|
||||
|
|
@ -73,6 +67,7 @@ pandora.ui.filesDialog = function() {
|
|||
width: 64
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
format: function(value) {
|
||||
return Ox.formatValue(value, 'B');
|
||||
},
|
||||
|
|
@ -82,12 +77,20 @@ pandora.ui.filesDialog = function() {
|
|||
visible: true,
|
||||
width: 64
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
id: 'matches',
|
||||
operator: '-',
|
||||
title: 'Matches',
|
||||
visible: true,
|
||||
width: 64
|
||||
},
|
||||
{
|
||||
id: 'description',
|
||||
operator: '+',
|
||||
title: 'Description',
|
||||
visible: true,
|
||||
width: 192
|
||||
width: 256
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
|
|
@ -110,26 +113,14 @@ pandora.ui.filesDialog = function() {
|
|||
title: 'Modified',
|
||||
visible: true,
|
||||
width: 144
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
id: 'matches',
|
||||
operator: '-',
|
||||
title: 'Matches',
|
||||
visible: true,
|
||||
width: 64
|
||||
}
|
||||
],
|
||||
columnsVisible: true,
|
||||
items: pandora.api.findFiles,
|
||||
query: {
|
||||
conditions: pandora.user.ui.showAllFiles ? [] : [
|
||||
{key: 'username', value: pandora.user.username, operator: '=='}
|
||||
],
|
||||
operator: '&'
|
||||
},
|
||||
keys: ['ratio'],
|
||||
query: {conditions: [], operator: '&'},
|
||||
scrollbarVisible: true,
|
||||
sort: [{key: 'username', operator: '+'}],
|
||||
sort: [{key: 'user', operator: '+'}],
|
||||
unique: 'id'
|
||||
})
|
||||
.bindEvent({
|
||||
|
|
@ -139,41 +130,47 @@ pandora.ui.filesDialog = function() {
|
|||
+ ' file' + (data.items == 1 ? '' : 's')
|
||||
);
|
||||
},
|
||||
select: selectFile
|
||||
select: function(data) {
|
||||
selectFile(data.ids[0]);
|
||||
}
|
||||
}),
|
||||
|
||||
$formLabel = Ox.Label({
|
||||
$itemLabel = Ox.Label({
|
||||
textAlign: 'center',
|
||||
title: 'No file selected',
|
||||
width: 212
|
||||
width: 248
|
||||
})
|
||||
.css({float: 'left', margin: '4px 2px 4px 4px'}),
|
||||
.css({margin: '4px'}),
|
||||
|
||||
$formElement = Ox.Element().css({overflowY: 'scroll'}),
|
||||
$item = Ox.Element().css({overflowY: 'scroll'}),
|
||||
|
||||
$preview,
|
||||
|
||||
$form,
|
||||
|
||||
$formToolbar = Ox.Bar({size: 24}),
|
||||
$itemToolbar = Ox.Bar({size: 24}),
|
||||
|
||||
$deleteButton = Ox.Button({
|
||||
title: 'Delete File...'
|
||||
title: 'Delete File...',
|
||||
width: 96
|
||||
})
|
||||
.css({margin: '4px'})
|
||||
.css({float: 'left', margin: '4px'})
|
||||
.hide()
|
||||
.bindEvent({
|
||||
click: deleteFile
|
||||
})
|
||||
.appendTo($formToolbar),
|
||||
.appendTo($itemToolbar),
|
||||
|
||||
$uploadButton = Ox.FileButton({
|
||||
maxFiles: 1,
|
||||
title: 'Upload File...'
|
||||
title: 'Upload File...',
|
||||
width: 96
|
||||
})
|
||||
.css({align: 'right', margin: '4px'})
|
||||
.css({float: 'right', margin: '4px'})
|
||||
.bindEvent({
|
||||
click: uploadFile
|
||||
})
|
||||
.appendTo($formToolbar)
|
||||
.appendTo($itemToolbar),
|
||||
|
||||
$content = Ox.SplitPanel({
|
||||
elements: [
|
||||
|
|
@ -197,14 +194,14 @@ pandora.ui.filesDialog = function() {
|
|||
elements: [
|
||||
{
|
||||
element: Ox.Bar({size: 24})
|
||||
.append($formLabel),
|
||||
.append($itemLabel),
|
||||
size: 24
|
||||
},
|
||||
{
|
||||
element: $form
|
||||
element: $item
|
||||
},
|
||||
{
|
||||
element: $toolbar,
|
||||
element: $itemToolbar,
|
||||
size: 24
|
||||
}
|
||||
],
|
||||
|
|
@ -243,9 +240,6 @@ pandora.ui.filesDialog = function() {
|
|||
removeOnClose: true,
|
||||
title: 'Manage Users',
|
||||
width: dialogWidth
|
||||
})
|
||||
.bindEvent({
|
||||
resize: setHeight
|
||||
}),
|
||||
|
||||
$status = $('<div>')
|
||||
|
|
@ -268,8 +262,9 @@ pandora.ui.filesDialog = function() {
|
|||
};
|
||||
|
||||
function deleteFile() {
|
||||
pandora.ui.deleteFileDialog(function() {
|
||||
// ...
|
||||
pandora.ui.deleteFileDialog($list.options('selected')[0], function() {
|
||||
Ox.Request.clearCache('findFiles');
|
||||
$list.reloadList();
|
||||
}).open();
|
||||
}
|
||||
|
||||
|
|
@ -288,7 +283,7 @@ pandora.ui.filesDialog = function() {
|
|||
|
||||
function renderForm(id) {
|
||||
var file = $list.value(id),
|
||||
editable = file.username == pandora.user.username
|
||||
editable = file.user == pandora.user.username
|
||||
|| pandora.site.capabilities.canEditFiles[pandora.user.level];
|
||||
return Ox.Form({
|
||||
items: [
|
||||
|
|
@ -297,16 +292,16 @@ pandora.ui.filesDialog = function() {
|
|||
id: 'username',
|
||||
label: 'Username',
|
||||
labelWidth: 80,
|
||||
value: file.username,
|
||||
width: formWidth - 16
|
||||
value: file.user,
|
||||
width: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE
|
||||
}),
|
||||
Ox.Input({
|
||||
disabled: !editable,
|
||||
id: 'filename',
|
||||
id: 'name',
|
||||
label: 'Filename',
|
||||
labelWidth: 80,
|
||||
value: file.filename,
|
||||
width: formWidth - 16
|
||||
value: file.name,
|
||||
width: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE
|
||||
}),
|
||||
Ox.Input({
|
||||
disabled: true,
|
||||
|
|
@ -314,7 +309,7 @@ pandora.ui.filesDialog = function() {
|
|||
label: 'Extension',
|
||||
labelWidth: 80,
|
||||
value: file.extension,
|
||||
width: formWidth - 16
|
||||
width: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE
|
||||
}),
|
||||
Ox.Input({
|
||||
disabled: true,
|
||||
|
|
@ -322,7 +317,7 @@ pandora.ui.filesDialog = function() {
|
|||
label: 'Size',
|
||||
labelWidth: 80,
|
||||
value: Ox.formatValue(file.size, 'B'),
|
||||
width: formWidth - 16
|
||||
width: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE
|
||||
}),
|
||||
Ox.Input({
|
||||
disabled: !editable,
|
||||
|
|
@ -331,18 +326,18 @@ pandora.ui.filesDialog = function() {
|
|||
placeholder: 'Description',
|
||||
type: 'textarea',
|
||||
value: file.description,
|
||||
width: formWidth - 16
|
||||
width: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE
|
||||
})
|
||||
],
|
||||
width: 240
|
||||
})
|
||||
.css({margin: '8px'})
|
||||
.css({margin: '12px 8px 8px 8px'})
|
||||
.bindEvent({
|
||||
change: function(event) {
|
||||
var data = Ox.extend({id: file.id}, event.id, event.data.value);
|
||||
pandora.api.editFile(data, function(result) {
|
||||
$list.value(result.data.id, event.id, result.data[event.id]);
|
||||
if (event.id == 'filename') {
|
||||
if (event.id == 'name') {
|
||||
$list.value(file.id, 'id', result.data.id);
|
||||
}
|
||||
Ox.Request.clearCache('findFiles');
|
||||
|
|
@ -352,38 +347,38 @@ pandora.ui.filesDialog = function() {
|
|||
}
|
||||
|
||||
function renderPreview(id) {
|
||||
var isImage = Ox.contains(['jpg', 'png'], id.split('.').pop());
|
||||
return $('<img>')
|
||||
.attr({
|
||||
src: '/files/' + id + (isImage ? '' : '.jpg')
|
||||
var isImage = Ox.contains(['jpg', 'png'], id.split('.').pop()),
|
||||
src = '/files/' + id + (isImage ? '' : '.jpg'),
|
||||
width = itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE,
|
||||
height = Math.round(width / $list.value(id, 'ratio'))
|
||||
return Ox.ImageElement({
|
||||
height: height,
|
||||
src: src,
|
||||
width: width
|
||||
})
|
||||
.css({
|
||||
maxWidth: formWidth - 16 + 'px',
|
||||
maxHeight: formWidth - 16 + 'px',
|
||||
margin: '4px',
|
||||
borderRadius: '8px'
|
||||
});
|
||||
}
|
||||
|
||||
function selectFile(id) {
|
||||
var editable = file.username == pandora.user.username
|
||||
|| pandora.site.capabilities.canEditFiles[pandora.user.level];
|
||||
var file = $list.value(id),
|
||||
editable = file.user == pandora.user.username
|
||||
|| pandora.site.capabilities.canEditFiles[pandora.user.level];
|
||||
setLabel(id);
|
||||
$item.empty();
|
||||
if (id) {
|
||||
$preview = renderPreview(id).appendTo($formElement);
|
||||
$form = renderForm(id).appendTo($formElement);
|
||||
$preview = renderPreview(id).appendTo($item);
|
||||
$form = renderForm(id).appendTo($item);
|
||||
$deleteButton.options({disabled: !editable}).show();
|
||||
} else {
|
||||
$formElement.empty();
|
||||
$deleteButton.hide();
|
||||
}
|
||||
}
|
||||
|
||||
function setHeight(data) {
|
||||
var $item = getFormItemById('description');
|
||||
$item && $item.options({height: data.height - 160)});
|
||||
}
|
||||
|
||||
function setLabel(id) {
|
||||
$formLabel.options({
|
||||
$itemLabel.options({
|
||||
title: id
|
||||
? id.split(':').slice(1).join(':')
|
||||
: 'No file selected'
|
||||
|
|
@ -391,12 +386,16 @@ pandora.ui.filesDialog = function() {
|
|||
}
|
||||
|
||||
function setWidth() {
|
||||
formWidth = $content.size(1);
|
||||
$formLabel.options({width: formWidth - 44});
|
||||
$form && $form.options('items').forEach(function($item) {
|
||||
$item.options({width: formWidth - 16});
|
||||
itemWidth = $content.size(1);
|
||||
$itemLabel.options({width: itemWidth - 8});
|
||||
$preview && $preview.css({
|
||||
maxWidth: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE,
|
||||
maxHeight: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE
|
||||
});
|
||||
$status.css({right: formWidth + 128 + 'px'});
|
||||
$form && $form.options('items').forEach(function($item) {
|
||||
$item.options({width: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE});
|
||||
});
|
||||
$status.css({right: itemWidth + 128 + 'px'});
|
||||
}
|
||||
|
||||
function updateList() {
|
||||
|
|
@ -405,8 +404,8 @@ pandora.ui.filesDialog = function() {
|
|||
query = {
|
||||
conditions: value
|
||||
? [].concat(
|
||||
key != 'filename' ? [{key: 'username', value: value, operator: '='}] : [],
|
||||
key != 'username' ? [{key: 'filename', value: value, operator: '='}] : []
|
||||
key != 'name' ? [{key: 'user', value: value, operator: '='}] : [],
|
||||
key != 'user' ? [{key: 'name', value: value, operator: '='}] : []
|
||||
)
|
||||
: [],
|
||||
operator: '|'
|
||||
|
|
|
|||
|
|
@ -9,23 +9,9 @@ pandora.ui.uploadFileDialog = function(file, callback) {
|
|||
|
||||
upload,
|
||||
|
||||
$errorDialog = pandora.iconDialog({
|
||||
buttons: [
|
||||
Ox.Button({
|
||||
id: 'close',
|
||||
title: 'Close'
|
||||
})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
$extensionDialog.close();
|
||||
}
|
||||
})
|
||||
],
|
||||
title: 'Upload File',
|
||||
text: 'Supported file types are GIF, JPG, PNG and PDF.'
|
||||
}),
|
||||
$errorDialog,
|
||||
|
||||
$content = Ox.Element(),
|
||||
$content = Ox.Element().css({margin: '16px'}),
|
||||
|
||||
$text = $('<div>')
|
||||
.html('Uploading ' + file.name)
|
||||
|
|
@ -36,6 +22,10 @@ pandora.ui.uploadFileDialog = function(file, callback) {
|
|||
showPercent: true,
|
||||
showTime: true
|
||||
})
|
||||
.css({margin: '16px 0 16px 0'})
|
||||
.appendTo($content),
|
||||
|
||||
$message = $('<div>')
|
||||
.appendTo($content),
|
||||
|
||||
$uploadDialog = Ox.Dialog({
|
||||
|
|
@ -45,7 +35,7 @@ pandora.ui.uploadFileDialog = function(file, callback) {
|
|||
title: 'Cancel Upload'
|
||||
}).bindEvent({
|
||||
click: function() {
|
||||
if (that.title == 'Cancel Upload') {
|
||||
if (this.options('title') == 'Cancel Upload') {
|
||||
upload.abort();
|
||||
}
|
||||
$uploadDialog.close();
|
||||
|
|
@ -53,7 +43,7 @@ pandora.ui.uploadFileDialog = function(file, callback) {
|
|||
})
|
||||
],
|
||||
content: $content,
|
||||
height: 128,
|
||||
height: 112,
|
||||
keys: {escape: 'close'},
|
||||
width: 288,
|
||||
title: 'Upload File'
|
||||
|
|
@ -72,10 +62,11 @@ pandora.ui.uploadFileDialog = function(file, callback) {
|
|||
.bindEvent({
|
||||
done: function(data) {
|
||||
if (data.progress == 1) {
|
||||
that.options('buttons')[0].options({title: 'Done'})
|
||||
$uploadDialog.options('buttons')[0].options({title: 'Done'});
|
||||
Ox.print('SUCCEEDED');
|
||||
} else {
|
||||
that.options('buttons')[0].options({title: 'Retry Upload'})
|
||||
$message.html('Upload failed.')
|
||||
$uploadDialog.options('buttons')[0].options({title: 'Close'});
|
||||
Ox.print('FAILED');
|
||||
}
|
||||
},
|
||||
|
|
@ -86,7 +77,53 @@ pandora.ui.uploadFileDialog = function(file, callback) {
|
|||
}
|
||||
});
|
||||
|
||||
return !Ox.contains(extensions, extension) ? $errorDialog : $uploadDialog;
|
||||
if (!Ox.contains(extensions, extension)) {
|
||||
return errorDialog('Supported file types are GIF, JPG, PNG and PDF.');
|
||||
} else {
|
||||
Ox.oshash(file, function(oshash) {
|
||||
pandora.api.findFiles({
|
||||
keys: ['id'],
|
||||
query: {
|
||||
conditions: [{key: 'oshash', value: oshash, operator: '=='}],
|
||||
operator: '&'
|
||||
},
|
||||
range: [0, 1],
|
||||
sort: [{key: 'name', operator: '+'}]
|
||||
}, function(result) {
|
||||
var id = pandora.user.name + ':' + file.name;
|
||||
if (result.data.items.length) {
|
||||
errorDialog(
|
||||
'The file ' + id + ' already exists' + (
|
||||
file.name == result.data.items[0].id
|
||||
? ''
|
||||
: ' as ' + result.data.items[0].id
|
||||
) + '.'
|
||||
).open();
|
||||
} else {
|
||||
$uploadDialog.open();
|
||||
}
|
||||
})
|
||||
});
|
||||
return {open: Ox.noop};
|
||||
}
|
||||
|
||||
function errorDialog(text) {
|
||||
return $errorDialog = pandora.ui.iconDialog({
|
||||
buttons: [
|
||||
Ox.Button({
|
||||
id: 'close',
|
||||
title: 'Close'
|
||||
})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
$errorDialog.close();
|
||||
}
|
||||
})
|
||||
],
|
||||
title: 'Upload File',
|
||||
text: text
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue