add file dialogs
This commit is contained in:
rolux
parent
06500c7e29
commit
2b599e3ef4
3 changed files with 610 additions and 0 deletions
40
static/js/pandora/deleteFileDialog.js
Normal file
40
static/js/pandora/deleteFileDialog.js
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
||||
'use strict';
|
||||
|
||||
pandora.ui.deleteFileDialog = function(file, callback) {
|
||||
|
||||
var that = pandora.ui.iconDialog({
|
||||
buttons: [
|
||||
Ox.Button({
|
||||
id: 'keep',
|
||||
title: 'Keep File'
|
||||
}).bindEvent({
|
||||
click: function() {
|
||||
that.close();
|
||||
}
|
||||
}),
|
||||
Ox.Button({
|
||||
id: 'delete',
|
||||
title: 'Delete File'
|
||||
}).bindEvent({
|
||||
click: function() {
|
||||
that.close();
|
||||
pandora.api.removeFile({
|
||||
id: file.id
|
||||
}, function(result) {
|
||||
Ox.Request.clearCache('findFiles');
|
||||
callback();
|
||||
});
|
||||
}
|
||||
})
|
||||
],
|
||||
keys: {enter: 'delete', escape: 'keep'},
|
||||
text: 'Are you sure you want to delete the file'
|
||||
+ ' "'+ item.filename + '"?',
|
||||
title: 'Delete File'
|
||||
});
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
|
||||
445
static/js/pandora/filesDialog.js
Normal file
445
static/js/pandora/filesDialog.js
Normal file
|
|
@ -0,0 +1,445 @@
|
|||
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
||||
|
||||
'use strict';
|
||||
|
||||
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,
|
||||
|
||||
$findSelect = Ox.Select({
|
||||
items: [
|
||||
{id: 'all', title: 'Find: All'},
|
||||
{id: 'username', title: 'Find: Username'},
|
||||
{id: 'filename', title: 'Find: Filename'}
|
||||
],
|
||||
overlap: 'right',
|
||||
type: 'image'
|
||||
})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
$findInput.value() && updateList();
|
||||
$findInput.options({placeholder: data.title});
|
||||
}
|
||||
}),
|
||||
|
||||
$findInput = Ox.Input({
|
||||
changeOnKeypress: true,
|
||||
clear: true,
|
||||
placeholder: 'Find: All',
|
||||
width: 192
|
||||
})
|
||||
.bindEvent({
|
||||
change: updateList
|
||||
}),
|
||||
|
||||
$findElement = Ox.FormElementGroup({
|
||||
elements: [
|
||||
$findSelect,
|
||||
$findInput
|
||||
]
|
||||
})
|
||||
.css({float: 'right', margin: '4px'}),
|
||||
|
||||
$list = Ox.TableList({
|
||||
columns: [
|
||||
{
|
||||
id: 'username',
|
||||
operator: '+',
|
||||
title: 'Username',
|
||||
visible: true,
|
||||
width: 128
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
format: function(value) {
|
||||
return value.split('.').slice(0, -1).join('.')
|
||||
},
|
||||
id: 'filename',
|
||||
operator: '+',
|
||||
title: 'Filename',
|
||||
visible: true,
|
||||
width: 192
|
||||
},
|
||||
{
|
||||
format: function(value) {
|
||||
return value.split('.').pop();
|
||||
},
|
||||
id: 'extension',
|
||||
operator: '+',
|
||||
title: 'Extension',
|
||||
visible: true,
|
||||
width: 64
|
||||
},
|
||||
{
|
||||
format: function(value) {
|
||||
return Ox.formatValue(value, 'B');
|
||||
},
|
||||
id: 'size',
|
||||
operator: '-',
|
||||
title: 'Size',
|
||||
visible: true,
|
||||
width: 64
|
||||
},
|
||||
{
|
||||
id: 'description',
|
||||
operator: '+',
|
||||
title: 'Description',
|
||||
visible: true,
|
||||
width: 192
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
format: function(value) {
|
||||
return Ox.formatDate(value, '%F %T');
|
||||
},
|
||||
id: 'created',
|
||||
operator: '-',
|
||||
title: 'Created',
|
||||
visible: true,
|
||||
width: 144
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
format: function(value) {
|
||||
return Ox.formatDate(value, '%F %T');
|
||||
},
|
||||
id: 'modified',
|
||||
operator: '-',
|
||||
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: '&'
|
||||
},
|
||||
scrollbarVisible: true,
|
||||
sort: [{key: 'username', operator: '+'}],
|
||||
unique: 'id'
|
||||
})
|
||||
.bindEvent({
|
||||
init: function(data) {
|
||||
$status.html(
|
||||
Ox.formatNumber(data.items)
|
||||
+ ' file' + (data.items == 1 ? '' : 's')
|
||||
);
|
||||
},
|
||||
select: selectFile
|
||||
}),
|
||||
|
||||
$formLabel = Ox.Label({
|
||||
textAlign: 'center',
|
||||
title: 'No file selected',
|
||||
width: 212
|
||||
})
|
||||
.css({float: 'left', margin: '4px 2px 4px 4px'}),
|
||||
|
||||
$formElement = Ox.Element().css({overflowY: 'scroll'}),
|
||||
|
||||
$form,
|
||||
|
||||
$formToolbar = Ox.Bar({size: 24}),
|
||||
|
||||
$deleteButton = Ox.Button({
|
||||
title: 'Delete File...'
|
||||
})
|
||||
.css({margin: '4px'})
|
||||
.hide()
|
||||
.bindEvent({
|
||||
click: deleteFile
|
||||
})
|
||||
.appendTo($formToolbar),
|
||||
|
||||
$uploadButton = Ox.FileButton({
|
||||
maxFiles: 1,
|
||||
title: 'Upload File...'
|
||||
})
|
||||
.css({align: 'right', margin: '4px'})
|
||||
.bindEvent({
|
||||
click: uploadFile
|
||||
})
|
||||
.appendTo($formToolbar)
|
||||
|
||||
$content = Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: Ox.Bar({size: 24})
|
||||
.append($findElement),
|
||||
size: 24
|
||||
},
|
||||
{
|
||||
element: $list
|
||||
}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
})
|
||||
},
|
||||
{
|
||||
element: Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: Ox.Bar({size: 24})
|
||||
.append($formLabel),
|
||||
size: 24
|
||||
},
|
||||
{
|
||||
element: $form
|
||||
},
|
||||
{
|
||||
element: $toolbar,
|
||||
size: 24
|
||||
}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
})
|
||||
.bindEvent({
|
||||
resize: setWidth
|
||||
}),
|
||||
resizable: true,
|
||||
resize: [256, 384, 512],
|
||||
size: 256
|
||||
}
|
||||
],
|
||||
orientation: 'horizontal'
|
||||
}),
|
||||
|
||||
that = Ox.Dialog({
|
||||
buttons: [
|
||||
Ox.Button({
|
||||
id: 'done',
|
||||
title: 'Done',
|
||||
width: 48
|
||||
}).bindEvent({
|
||||
click: function() {
|
||||
that.close();
|
||||
}
|
||||
})
|
||||
],
|
||||
closeButton: true,
|
||||
content: $content,
|
||||
height: dialogHeight,
|
||||
maximizeButton: true,
|
||||
minHeight: 256,
|
||||
minWidth: 512,
|
||||
padding: 0,
|
||||
removeOnClose: true,
|
||||
title: 'Manage Users',
|
||||
width: dialogWidth
|
||||
})
|
||||
.bindEvent({
|
||||
resize: setHeight
|
||||
}),
|
||||
|
||||
$status = $('<div>')
|
||||
.css({
|
||||
position: 'absolute',
|
||||
top: '4px',
|
||||
left: '128px',
|
||||
right: '384px',
|
||||
bottom: '4px',
|
||||
paddingTop: '2px',
|
||||
fontSize: '9px',
|
||||
textAlign: 'center'
|
||||
})
|
||||
.appendTo(that.find('.OxButtonsbar'));
|
||||
|
||||
that.superClose = that.close;
|
||||
that.close = function() {
|
||||
Ox.Request.clearCache('findFiles');
|
||||
that.superClose();
|
||||
};
|
||||
|
||||
function deleteFile() {
|
||||
pandora.ui.deleteFileDialog(function() {
|
||||
// ...
|
||||
}).open();
|
||||
}
|
||||
|
||||
function getFormItemById(id) {
|
||||
var ret;
|
||||
Ox.forEach((
|
||||
$formButton.value() == 'edit' ? $editForm : $mailForm
|
||||
).options('items'), function($item) {
|
||||
if ($item.options('id') == id) {
|
||||
ret = $item;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
return ret;
|
||||
};
|
||||
|
||||
function renderForm(id) {
|
||||
var file = $list.value(id),
|
||||
editable = file.username == pandora.user.username
|
||||
|| pandora.site.capabilities.canEditFiles[pandora.user.level];
|
||||
return Ox.Form({
|
||||
items: [
|
||||
Ox.Input({
|
||||
disabled: true,
|
||||
id: 'username',
|
||||
label: 'Username',
|
||||
labelWidth: 80,
|
||||
value: file.username,
|
||||
width: formWidth - 16
|
||||
}),
|
||||
Ox.Input({
|
||||
disabled: !editable,
|
||||
id: 'filename',
|
||||
label: 'Filename',
|
||||
labelWidth: 80,
|
||||
value: file.filename,
|
||||
width: formWidth - 16
|
||||
}),
|
||||
Ox.Input({
|
||||
disabled: true,
|
||||
id: 'extension',
|
||||
label: 'Extension',
|
||||
labelWidth: 80,
|
||||
value: file.extension,
|
||||
width: formWidth - 16
|
||||
}),
|
||||
Ox.Input({
|
||||
disabled: true,
|
||||
id: 'size',
|
||||
label: 'Size',
|
||||
labelWidth: 80,
|
||||
value: Ox.formatValue(file.size, 'B'),
|
||||
width: formWidth - 16
|
||||
}),
|
||||
Ox.Input({
|
||||
disabled: !editable,
|
||||
height: dialogHeight - 184,
|
||||
id: 'description',
|
||||
placeholder: 'Description',
|
||||
type: 'textarea',
|
||||
value: file.description,
|
||||
width: formWidth - 16
|
||||
})
|
||||
],
|
||||
width: 240
|
||||
})
|
||||
.css({margin: '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') {
|
||||
$list.value(file.id, 'id', result.data.id);
|
||||
}
|
||||
Ox.Request.clearCache('findFiles');
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function renderPreview(id) {
|
||||
var isImage = Ox.contains(['jpg', 'png'], id.split('.').pop());
|
||||
return $('<img>')
|
||||
.attr({
|
||||
src: '/files/' + id + (isImage ? '' : '.jpg')
|
||||
})
|
||||
.css({
|
||||
maxWidth: formWidth - 16 + 'px',
|
||||
maxHeight: formWidth - 16 + 'px',
|
||||
});
|
||||
}
|
||||
|
||||
function selectFile(id) {
|
||||
var editable = file.username == pandora.user.username
|
||||
|| pandora.site.capabilities.canEditFiles[pandora.user.level];
|
||||
setLabel(id);
|
||||
if (id) {
|
||||
$preview = renderPreview(id).appendTo($formElement);
|
||||
$form = renderForm(id).appendTo($formElement);
|
||||
$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({
|
||||
title: id
|
||||
? id.split(':').slice(1).join(':')
|
||||
: 'No file selected'
|
||||
});
|
||||
}
|
||||
|
||||
function setWidth() {
|
||||
formWidth = $content.size(1);
|
||||
$formLabel.options({width: formWidth - 44});
|
||||
$form && $form.options('items').forEach(function($item) {
|
||||
$item.options({width: formWidth - 16});
|
||||
});
|
||||
$status.css({right: formWidth + 128 + 'px'});
|
||||
}
|
||||
|
||||
function updateList() {
|
||||
var key = $findSelect.value(),
|
||||
value = $findInput.value(),
|
||||
query = {
|
||||
conditions: value
|
||||
? [].concat(
|
||||
key != 'filename' ? [{key: 'username', value: value, operator: '='}] : [],
|
||||
key != 'username' ? [{key: 'filename', value: value, operator: '='}] : []
|
||||
)
|
||||
: [],
|
||||
operator: '|'
|
||||
};
|
||||
$list.options({query: query});
|
||||
}
|
||||
|
||||
function uploadFile(data) {
|
||||
pandora.ui.uploadFileDialog(data.files[0], function(file) {
|
||||
Ox.Request.clearCache('findFiles');
|
||||
pandora.api.findFiles({
|
||||
ids: [file.id],
|
||||
query: $list.options.query,
|
||||
sort: $list.options.sort,
|
||||
}, function(data) {
|
||||
$list.bindEventOnce({
|
||||
load: function() {
|
||||
list.options({selected: [file.id]});
|
||||
// selectFile(file.id);
|
||||
}
|
||||
});
|
||||
if (data.positions[file.id] > -1) {
|
||||
$list.reloadList();
|
||||
} else {
|
||||
$list.options({
|
||||
query: {conditions: [], operator: '&'}
|
||||
});
|
||||
}
|
||||
});
|
||||
}).open();
|
||||
}
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
|
||||
125
static/js/pandora/uploadFileDialog.js
Normal file
125
static/js/pandora/uploadFileDialog.js
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
||||
'use strict';
|
||||
|
||||
pandora.ui.uploadFileDialog = function(file, callback) {
|
||||
|
||||
var extension = file.name.split('.').pop().toLowerCase(),
|
||||
|
||||
extensions = ['jpg', 'jpeg', 'pdf', 'png'],
|
||||
|
||||
jpg = false,
|
||||
|
||||
upload,
|
||||
|
||||
$content = Ox.Element(),
|
||||
|
||||
$text = $('<div>')
|
||||
.html('Uploading ' + file.name)
|
||||
.appendTo($content),
|
||||
|
||||
$progress = Ox.Progressbar({
|
||||
width: 256,
|
||||
showPercent: true,
|
||||
showTime: true
|
||||
})
|
||||
.appendTo($content),
|
||||
|
||||
$extensionDialog = pandora.iconDialog({
|
||||
buttons: [
|
||||
Ox.Button({
|
||||
id: 'close',
|
||||
title: 'Close'
|
||||
})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
$extensionDialog.close();
|
||||
}
|
||||
})
|
||||
],
|
||||
title: 'Upload File',
|
||||
text: 'Supported file types are JPG, PNG and PDF.'
|
||||
}),
|
||||
|
||||
$imageDialog = pandora.iconDialog({
|
||||
buttons: [
|
||||
Ox.Button({
|
||||
id: 'png',
|
||||
title: 'Keep as PNG',
|
||||
})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
$imageDialog.close();
|
||||
$uploadDialog.open();
|
||||
}
|
||||
}),
|
||||
Ox.Button({
|
||||
id: 'jpg'
|
||||
title: 'Encode as JPG'
|
||||
})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
jpg = true;
|
||||
$imageDialog.close();
|
||||
$uploadDialog.open();
|
||||
}
|
||||
})
|
||||
],
|
||||
text: 'Do you want to encode the image as JPG?<br><br>'
|
||||
+ '(JPGs are significantly smaller, but do not support transparency.)',
|
||||
title: 'Upload File'
|
||||
}),
|
||||
|
||||
$uploadDialog = Ox.Dialog({
|
||||
buttons: [
|
||||
Ox.Button({
|
||||
id: 'close',
|
||||
title: 'Cancel Upload'
|
||||
}).bindEvent({
|
||||
click: function() {
|
||||
if (that.title == 'Cancel Upload') {
|
||||
upload.abort();
|
||||
}
|
||||
$uploadDialog.close();
|
||||
}
|
||||
})
|
||||
],
|
||||
content: $content,
|
||||
height: 128,
|
||||
keys: {escape: 'close'},
|
||||
width: 288,
|
||||
title: 'Upload File'
|
||||
})
|
||||
.bindEvent({
|
||||
open: function() {
|
||||
upload = pandora.chunkupload({
|
||||
data: {
|
||||
filename: jpg || extension == 'jpeg'
|
||||
? file.name.split('.').slice(0, -1).join('.') + '.jpg'
|
||||
: file.name
|
||||
},
|
||||
file: file,
|
||||
url: '/api/upload/file/',
|
||||
})
|
||||
.bindEvent({
|
||||
done: function(data) {
|
||||
if (data.progress == 1) {
|
||||
that.options('buttons')[0].options({title: 'Done'})
|
||||
Ox.print('SUCCEEDED');
|
||||
} else {
|
||||
that.options('buttons')[0].options({title: 'Retry Upload'})
|
||||
Ox.print('FAILED');
|
||||
}
|
||||
},
|
||||
progress: function(data) {
|
||||
$progress.options({progress: data.progress || 0});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return !Ox.contains(extensions, extension) ? $extensionDialog
|
||||
: extension == 'png' ? $imageDialog
|
||||
: $uploadDialog;
|
||||
|
||||
};
|
||||
|
||||
Loading…
Reference in a new issue