0x2620/pandora
2
1
Fork 1
Code Issues 1.3k Pull requests Releases Wiki Activity

update files dialogs

Browse source
This commit is contained in:
rolux 2013-03-24 11:30:18 +00:00
parent 665930885e
commit ed3424f237
3 changed files with 142 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
static/js/pandora/deleteFileDialog.js
View file

@ -20,7 +20,7 @@ pandora.ui.deleteFileDialog = function(file, callback) {
click: function() { click: function() {
that.close(); that.close();
pandora.api.removeFile({ pandora.api.removeFile({
id: file.id id: file
}, function(result) { }, function(result) {
Ox.Request.clearCache('findFiles'); Ox.Request.clearCache('findFiles');
callback(); callback();
@ -30,7 +30,7 @@ pandora.ui.deleteFileDialog = function(file, callback) {
], ],
keys: {enter: 'delete', escape: 'keep'}, keys: {enter: 'delete', escape: 'keep'},
text: 'Are you sure you want to delete the file' text: 'Are you sure you want to delete the file'
+ ' "'+ item.filename + '"?', + ' "'+ file + '"?',
title: 'Delete File' title: 'Delete File'
}); });

165
static/js/pandora/filesDialog.js
View file

@ -6,13 +6,13 @@ pandora.ui.filesDialog = function() {
var dialogHeight = Math.round((window.innerHeight - 48) * 0.9), var dialogHeight = Math.round((window.innerHeight - 48) * 0.9),
dialogWidth = Math.round(window.innerWidth * 0.9), dialogWidth = Math.round(window.innerWidth * 0.9),
formWidth = 272 + Ox.UI.SCROLLBAR_SIZE, itemWidth = 256,
$findSelect = Ox.Select({ $findSelect = Ox.Select({
items: [ items: [
{id: 'all', title: 'Find: All'}, {id: 'all', title: 'Find: All'},
{id: 'username', title: 'Find: Username'}, {id: 'user', title: 'Find: Username'},
{id: 'filename', title: 'Find: Filename'} {id: 'file', title: 'Find: Filename'}
], ],
overlap: 'right', overlap: 'right',
type: 'image' type: 'image'
@ -45,7 +45,7 @@ pandora.ui.filesDialog = function() {
$list = Ox.TableList({ $list = Ox.TableList({
columns: [ columns: [
{ {
id: 'username', id: 'user',
operator: '+', operator: '+',
title: 'Username', title: 'Username',
visible: true, visible: true,
@ -53,19 +53,13 @@ pandora.ui.filesDialog = function() {
}, },
{ {
align: 'right', align: 'right',
format: function(value) { id: 'name',
return value.split('.').slice(0, -1).join('.')
},
id: 'filename',
operator: '+', operator: '+',
title: 'Filename', title: 'Filename',
visible: true, visible: true,
width: 192 width: 256
}, },
{ {
format: function(value) {
return value.split('.').pop();
},
id: 'extension', id: 'extension',
operator: '+', operator: '+',
title: 'Extension', title: 'Extension',
@ -73,6 +67,7 @@ pandora.ui.filesDialog = function() {
width: 64 width: 64
}, },
{ {
align: 'right',
format: function(value) { format: function(value) {
return Ox.formatValue(value, 'B'); return Ox.formatValue(value, 'B');
}, },
@ -82,12 +77,20 @@ pandora.ui.filesDialog = function() {
visible: true, visible: true,
width: 64 width: 64
}, },
{
align: 'right',
id: 'matches',
operator: '-',
title: 'Matches',
visible: true,
width: 64
},
{ {
id: 'description', id: 'description',
operator: '+', operator: '+',
title: 'Description', title: 'Description',
visible: true, visible: true,
width: 192 width: 256
}, },
{ {
align: 'right', align: 'right',
@ -110,26 +113,14 @@ pandora.ui.filesDialog = function() {
title: 'Modified', title: 'Modified',
visible: true, visible: true,
width: 144 width: 144
},
{
align: 'right',
id: 'matches',
operator: '-',
title: 'Matches',
visible: true,
width: 64
} }
], ],
columnsVisible: true, columnsVisible: true,
items: pandora.api.findFiles, items: pandora.api.findFiles,
query: { keys: ['ratio'],
conditions: pandora.user.ui.showAllFiles ? [] : [ query: {conditions: [], operator: '&'},
{key: 'username', value: pandora.user.username, operator: '=='}
],
operator: '&'
},
scrollbarVisible: true, scrollbarVisible: true,
sort: [{key: 'username', operator: '+'}], sort: [{key: 'user', operator: '+'}],
unique: 'id' unique: 'id'
}) })
.bindEvent({ .bindEvent({
@ -139,41 +130,47 @@ pandora.ui.filesDialog = function() {
+ ' file' + (data.items == 1 ? '' : 's') + ' file' + (data.items == 1 ? '' : 's')
); );
}, },
select: selectFile select: function(data) {
selectFile(data.ids[0]);
}
}), }),
$formLabel = Ox.Label({ $itemLabel = Ox.Label({
textAlign: 'center', textAlign: 'center',
title: 'No file selected', 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, $form,
$formToolbar = Ox.Bar({size: 24}), $itemToolbar = Ox.Bar({size: 24}),
$deleteButton = Ox.Button({ $deleteButton = Ox.Button({
title: 'Delete File...' title: 'Delete File...',
width: 96
}) })
.css({margin: '4px'}) .css({float: 'left', margin: '4px'})
.hide() .hide()
.bindEvent({ .bindEvent({
click: deleteFile click: deleteFile
}) })
.appendTo($formToolbar), .appendTo($itemToolbar),
$uploadButton = Ox.FileButton({ $uploadButton = Ox.FileButton({
maxFiles: 1, maxFiles: 1,
title: 'Upload File...' title: 'Upload File...',
width: 96
}) })
.css({align: 'right', margin: '4px'}) .css({float: 'right', margin: '4px'})
.bindEvent({ .bindEvent({
click: uploadFile click: uploadFile
}) })
.appendTo($formToolbar) .appendTo($itemToolbar),
$content = Ox.SplitPanel({ $content = Ox.SplitPanel({
elements: [ elements: [
@ -197,14 +194,14 @@ pandora.ui.filesDialog = function() {
elements: [ elements: [
{ {
element: Ox.Bar({size: 24}) element: Ox.Bar({size: 24})
.append($formLabel), .append($itemLabel),
size: 24 size: 24
}, },
{ {
element: $form element: $item
}, },
{ {
element: $toolbar, element: $itemToolbar,
size: 24 size: 24
} }
], ],
@ -243,9 +240,6 @@ pandora.ui.filesDialog = function() {
removeOnClose: true, removeOnClose: true,
title: 'Manage Users', title: 'Manage Users',
width: dialogWidth width: dialogWidth
})
.bindEvent({
resize: setHeight
}), }),
$status = $('<div>') $status = $('<div>')
@ -268,8 +262,9 @@ pandora.ui.filesDialog = function() {
}; };
function deleteFile() { function deleteFile() {
pandora.ui.deleteFileDialog(function() { pandora.ui.deleteFileDialog($list.options('selected')[0], function() {
// ... Ox.Request.clearCache('findFiles');
$list.reloadList();
}).open(); }).open();
} }
@ -288,7 +283,7 @@ pandora.ui.filesDialog = function() {
function renderForm(id) { function renderForm(id) {
var file = $list.value(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]; || pandora.site.capabilities.canEditFiles[pandora.user.level];
return Ox.Form({ return Ox.Form({
items: [ items: [
@ -297,16 +292,16 @@ pandora.ui.filesDialog = function() {
id: 'username', id: 'username',
label: 'Username', label: 'Username',
labelWidth: 80, labelWidth: 80,
value: file.username, value: file.user,
width: formWidth - 16 width: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE
}), }),
Ox.Input({ Ox.Input({
disabled: !editable, disabled: !editable,
id: 'filename', id: 'name',
label: 'Filename', label: 'Filename',
labelWidth: 80, labelWidth: 80,
value: file.filename, value: file.name,
width: formWidth - 16 width: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE
}), }),
Ox.Input({ Ox.Input({
disabled: true, disabled: true,
@ -314,7 +309,7 @@ pandora.ui.filesDialog = function() {
label: 'Extension', label: 'Extension',
labelWidth: 80, labelWidth: 80,
value: file.extension, value: file.extension,
width: formWidth - 16 width: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE
}), }),
Ox.Input({ Ox.Input({
disabled: true, disabled: true,
@ -322,7 +317,7 @@ pandora.ui.filesDialog = function() {
label: 'Size', label: 'Size',
labelWidth: 80, labelWidth: 80,
value: Ox.formatValue(file.size, 'B'), value: Ox.formatValue(file.size, 'B'),
width: formWidth - 16 width: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE
}), }),
Ox.Input({ Ox.Input({
disabled: !editable, disabled: !editable,
@ -331,18 +326,18 @@ pandora.ui.filesDialog = function() {
placeholder: 'Description', placeholder: 'Description',
type: 'textarea', type: 'textarea',
value: file.description, value: file.description,
width: formWidth - 16 width: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE
}) })
], ],
width: 240 width: 240
}) })
.css({margin: '8px'}) .css({margin: '12px 8px 8px 8px'})
.bindEvent({ .bindEvent({
change: function(event) { change: function(event) {
var data = Ox.extend({id: file.id}, event.id, event.data.value); var data = Ox.extend({id: file.id}, event.id, event.data.value);
pandora.api.editFile(data, function(result) { pandora.api.editFile(data, function(result) {
$list.value(result.data.id, event.id, result.data[event.id]); $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); $list.value(file.id, 'id', result.data.id);
} }
Ox.Request.clearCache('findFiles'); Ox.Request.clearCache('findFiles');
@ -352,38 +347,38 @@ pandora.ui.filesDialog = function() {
} }
function renderPreview(id) { function renderPreview(id) {
var isImage = Ox.contains(['jpg', 'png'], id.split('.').pop()); var isImage = Ox.contains(['jpg', 'png'], id.split('.').pop()),
return $('<img>') src = '/files/' + id + (isImage ? '' : '.jpg'),
.attr({ width = itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE,
src: '/files/' + id + (isImage ? '' : '.jpg') height = Math.round(width / $list.value(id, 'ratio'))
return Ox.ImageElement({
height: height,
src: src,
width: width
}) })
.css({ .css({
maxWidth: formWidth - 16 + 'px', margin: '4px',
maxHeight: formWidth - 16 + 'px', borderRadius: '8px'
}); });
} }
function selectFile(id) { function selectFile(id) {
var editable = file.username == pandora.user.username var file = $list.value(id),
|| pandora.site.capabilities.canEditFiles[pandora.user.level]; editable = file.user == pandora.user.username
|| pandora.site.capabilities.canEditFiles[pandora.user.level];
setLabel(id); setLabel(id);
$item.empty();
if (id) { if (id) {
$preview = renderPreview(id).appendTo($formElement); $preview = renderPreview(id).appendTo($item);
$form = renderForm(id).appendTo($formElement); $form = renderForm(id).appendTo($item);
$deleteButton.options({disabled: !editable}).show(); $deleteButton.options({disabled: !editable}).show();
} else { } else {
$formElement.empty();
$deleteButton.hide(); $deleteButton.hide();
} }
} }
function setHeight(data) {
var $item = getFormItemById('description');
$item && $item.options({height: data.height - 160)});
}
function setLabel(id) { function setLabel(id) {
$formLabel.options({ $itemLabel.options({
title: id title: id
? id.split(':').slice(1).join(':') ? id.split(':').slice(1).join(':')
: 'No file selected' : 'No file selected'
@ -391,12 +386,16 @@ pandora.ui.filesDialog = function() {
} }
function setWidth() { function setWidth() {
formWidth = $content.size(1); itemWidth = $content.size(1);
$formLabel.options({width: formWidth - 44}); $itemLabel.options({width: itemWidth - 8});
$form && $form.options('items').forEach(function($item) { $preview && $preview.css({
$item.options({width: formWidth - 16}); 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() { function updateList() {
@ -405,8 +404,8 @@ pandora.ui.filesDialog = function() {
query = { query = {
conditions: value conditions: value
? [].concat( ? [].concat(
key != 'filename' ? [{key: 'username', value: value, operator: '='}] : [], key != 'name' ? [{key: 'user', value: value, operator: '='}] : [],
key != 'username' ? [{key: 'filename', value: value, operator: '='}] : [] key != 'user' ? [{key: 'name', value: value, operator: '='}] : []
) )
: [], : [],
operator: '|' operator: '|'

79
static/js/pandora/uploadFileDialog.js
View file

@ -9,23 +9,9 @@ pandora.ui.uploadFileDialog = function(file, callback) {
upload, upload,
$errorDialog = pandora.iconDialog({ $errorDialog,
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.'
}),
$content = Ox.Element(), $content = Ox.Element().css({margin: '16px'}),
$text = $('<div>') $text = $('<div>')
.html('Uploading ' + file.name) .html('Uploading ' + file.name)
@ -36,6 +22,10 @@ pandora.ui.uploadFileDialog = function(file, callback) {
showPercent: true, showPercent: true,
showTime: true showTime: true
}) })
.css({margin: '16px 0 16px 0'})
.appendTo($content),
$message = $('<div>')
.appendTo($content), .appendTo($content),
$uploadDialog = Ox.Dialog({ $uploadDialog = Ox.Dialog({
@ -45,7 +35,7 @@ pandora.ui.uploadFileDialog = function(file, callback) {
title: 'Cancel Upload' title: 'Cancel Upload'
}).bindEvent({ }).bindEvent({
click: function() { click: function() {
if (that.title == 'Cancel Upload') { if (this.options('title') == 'Cancel Upload') {
upload.abort(); upload.abort();
} }
$uploadDialog.close(); $uploadDialog.close();
@ -53,7 +43,7 @@ pandora.ui.uploadFileDialog = function(file, callback) {
}) })
], ],
content: $content, content: $content,
height: 128, height: 112,
keys: {escape: 'close'}, keys: {escape: 'close'},
width: 288, width: 288,
title: 'Upload File' title: 'Upload File'
@ -72,10 +62,11 @@ pandora.ui.uploadFileDialog = function(file, callback) {
.bindEvent({ .bindEvent({
done: function(data) { done: function(data) {
if (data.progress == 1) { if (data.progress == 1) {
that.options('buttons')[0].options({title: 'Done'}) $uploadDialog.options('buttons')[0].options({title: 'Done'});
Ox.print('SUCCEEDED'); Ox.print('SUCCEEDED');
} else { } else {
that.options('buttons')[0].options({title: 'Retry Upload'}) $message.html('Upload failed.')
$uploadDialog.options('buttons')[0].options({title: 'Close'});
Ox.print('FAILED'); 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
});
}
}; };