pandora/static/js/documentsDialog.js

559 lines
18 KiB
JavaScript

// vim: et:ts=4:sw=4:sts=4:ft=javascript
'use strict';
pandora.ui.documentsDialog = function(options) {
options = options || {};
var dialogHeight = Math.round((window.innerHeight - 48) * 0.9),
dialogWidth = Math.round(window.innerWidth * 0.9),
itemWidth = 272 + Ox.UI.SCROLLBAR_SIZE,
selected = null,
$reloadButton = Ox.Button({
disabled: true,
title: 'redo',
tooltip: Ox._('Reload'),
type: 'image'
})
.css({float: 'left', margin: '4px 2px 4px 4px'})
.bindEvent({
click: function() {
$reloadButton.options({disabled: true});
Ox.Request.clearCache('findDocuments');
$list.reloadList(true);
}
}),
$userCheckbox = Ox.Checkbox({
title: Ox._('Only show my documents'),
value: false
})
.css({float: 'left', margin: '4px 2px'})
.bindEvent({
change: function(data) {
data.value
? $robotsCheckbox.show()
: $robotsCheckbox.hide().options({value: false});
updateList();
}
}),
$findSelect = Ox.Select({
items: [
{id: 'all', title: Ox._('Find: All')},
{id: 'user', title: Ox._('Find: Username')},
{id: 'file', title: Ox._('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: Ox._('Find: All'),
width: 192
})
.bindEvent({
change: updateList
}),
$findElement = Ox.FormElementGroup({
elements: [
$findSelect,
$findInput
]
})
.css({float: 'right', margin: '4px'}),
$list = Ox.TableList({
columns: [
{
id: 'user',
operator: '+',
title: Ox._('Username'),
visible: true,
width: 128
},
{
align: 'right',
id: 'name',
operator: '+',
title: Ox._('Filename'),
visible: true,
width: 256
},
{
id: 'extension',
operator: '+',
title: Ox._('Extension'),
visible: true,
width: 64
},
{
align: 'right',
format: function(value) {
return Ox.formatValue(value, 'B');
},
id: 'size',
operator: '-',
title: Ox._('Size'),
visible: true,
width: 64
},
{
align: 'right',
id: 'matches',
operator: '-',
title: Ox._('Matches'),
visible: true,
width: 64
},
{
id: 'description',
operator: '+',
title: Ox._('Description'),
visible: true,
width: 256
},
{
align: 'right',
format: function(value) {
return Ox.formatDate(value, '%F %T');
},
id: 'created',
operator: '-',
title: Ox._('Created'),
visible: true,
width: 144
},
{
align: 'right',
format: function(value) {
return Ox.formatDate(value, '%F %T');
},
id: 'modified',
operator: '-',
title: Ox._('Modified'),
visible: true,
width: 144
}
],
columnsVisible: true,
items: pandora.api.findDocuments,
keys: ['ratio'],
query: {conditions: [], operator: '&'},
scrollbarVisible: true,
sort: [{key: 'user', operator: '+'}],
unique: 'id'
})
.bindEvent({
init: function(data) {
$status.html(
Ox.toTitleCase(Ox.formatCount(data.items, 'file'))
);
},
load: function() {
$reloadButton.options({disabled: false});
},
select: function(data) {
selected = data.ids[0];
selectFile();
options.callback && $doneButton.options({
disabled: !data.ids.length
});
}
}),
$embedButton = Ox.Button({
title: 'embed',
tooltip: Ox._('Embed'),
type: 'image'
})
.css({
float: 'left',
margin: '4px 2px 4px 4px'
})
.bindEvent({
click: function() {
pandora.ui.embedDocumentDialog(
$list.options('selected')[0]
).open();
}
}),
$closeButton = Ox.Button({
title: 'close',
tooltip: Ox._('Close'),
type: 'image'
})
.css({
float: 'left',
margin: '4px 4px 4px 2px'
})
.bindEvent({
click: function() {
$list.options({selected: []});
}
}),
$item = Ox.Element().css({overflowY: 'scroll'}),
$preview,
$form,
$itemToolbar = Ox.Bar({size: 24}),
$deleteButton = Ox.Button({
title: Ox._('Delete Document...'),
width: 128
})
.css({float: 'left', margin: '4px'})
.hide()
.bindEvent({
click: deleteFile
})
.appendTo($itemToolbar),
$doneButton = Ox.Button({
disabled: !!options.callback,
id: 'done',
title: options.callback ? Ox._('Select') : Ox._('Done'),
width: 48
}).bindEvent({
click: function() {
options.callback && options.callback($list.options('selected'));
that.close();
}
}),
$uploadButton = Ox.FileButton({
maxFiles: 1,
title: Ox._('Upload Document...'),
width: 128
})
.css({float: 'right', margin: '4px'})
.bindEvent({
click: uploadFile
})
.appendTo($itemToolbar),
$content = Ox.SplitPanel({
elements: [
{
element: Ox.SplitPanel({
elements: [
{
element: Ox.Bar({size: 24})
.append($reloadButton)
.append($userCheckbox)
.append($findElement),
size: 24
},
{
element: $list
}
],
orientation: 'vertical'
})
},
{
element: Ox.SplitPanel({
elements: [
{
element: Ox.Bar({size: 24})
.append($itemLabel),
size: 24
},
{
element: $item
},
{
element: $itemToolbar,
size: 24
}
],
orientation: 'vertical'
})
.bindEvent({
resize: setWidth
}),
resizable: true,
resize: [
272 + Ox.UI.SCROLLBAR_SIZE,
400 + Ox.UI.SCROLLBAR_SIZE,
528 + Ox.UI.SCROLLBAR_SIZE
],
size: 272 + Ox.UI.SCROLLBAR_SIZE
}
],
orientation: 'horizontal'
}),
$itemLabel = Ox.Label({
textAlign: 'center',
title: Ox._('No document selected'),
width: getLabelWidth()
})
.css({
float: 'left',
margin: '4px'
}),
that = Ox.Dialog({
buttons: [$doneButton],
closeButton: true,
content: $content,
height: dialogHeight,
maximizeButton: true,
minHeight: 256,
minWidth: 512,
padding: 0,
removeOnClose: true,
title: Ox._('Manage Documents'),
width: dialogWidth
}),
$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('findDocuments');
that.superClose();
};
function deleteFile() {
pandora.ui.deleteDocumentDialog($list.options('selected')[0], function() {
Ox.Request.clearCache('findDocuments');
$list.reloadList();
}).open();
}
function getLabelWidth() {
return $content.size(1) - (selected ? 48 : 8);
}
function getPreviewSize() {
var ratio = $list.value(selected, 'ratio'),
height = ratio < 1 ? 256 : 256 / ratio,
width = ratio >= 1 ? 256 : 256 * ratio,
left = Math.floor((itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE - width) / 2);
return {
height: height,
// fixme: CSS gets applied twice, to image and enclosing element
margin: [8, 8, 8, 8 + left].map(function(px) {
return px / 2 + 'px';
}).join(' '),
width: width
};
}
function renderForm() {
var file = $list.value(selected),
editable = file.user == pandora.user.username
|| pandora.site.capabilities.canEditMedia[pandora.user.level];
return Ox.Form({
items: [
Ox.Input({
disabled: true,
id: 'username',
label: Ox._('Username'),
labelWidth: 80,
value: file.user,
width: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE
}),
Ox.Input({
disabled: !editable,
id: 'name',
label: Ox._('Filename'),
labelWidth: 80,
value: file.name,
width: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE
}),
Ox.Input({
disabled: true,
id: 'extension',
label: Ox._('Extension'),
labelWidth: 80,
value: file.extension,
width: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE
}),
Ox.Input({
disabled: true,
id: 'size',
label: Ox._('Size'),
labelWidth: 80,
value: Ox.formatValue(file.size, 'B'),
width: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE
}),
Ox.Input({
disabled: true,
id: 'matches',
label: Ox._('Matches'),
labelWidth: 80,
value: file.matches,
width: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE
}),
Ox.Input({
disabled: !editable,
height: 256,
id: 'description',
placeholder: Ox._('Description'),
type: 'textarea',
value: file.description,
width: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE
})
],
width: 240
})
.css({margin: '12px 8px 8px 8px'})
.bindEvent({
change: function(event) {
var data = Ox.extend({id: file.id}, event.id, event.data.value);
pandora.api.editDocument(data, function(result) {
$list.value(result.data.id, event.id, result.data[event.id]);
if (event.id == 'name') {
$list.value(file.id, 'id', result.data.id);
}
Ox.Request.clearCache('findDocuments');
$list.reloadList();
});
}
});
}
function renderPreview() {
var size = getPreviewSize(),
src = '/documents/' + selected + '/256p.jpg';
return Ox.ImageElement({
height: size.height,
src: src,
width: size.width
})
.css({
margin: size.margin,
borderRadius: '8px'
})
.on({
click: function() {
var info = $list.value(selected),
url = '/documents/' + selected + '/' + info.name + '.' + info.extension;
window.open('/url=' + encodeURIComponent(url), '_blank');
}
});
}
function selectFile() {
var file = $list.value(selected),
editable = file.user == pandora.user.username
|| pandora.site.capabilities.canEditMedia[pandora.user.level];
$embedButton[selected ? 'show' : 'hide']();
$closeButton[selected ? 'show' : 'hide']();
setLabel();
$item.empty();
if (selected) {
$preview = renderPreview().appendTo($item);
$form = renderForm().appendTo($item);
$deleteButton.options({disabled: !editable}).show();
} else {
$deleteButton.hide();
}
}
function setLabel() {
$itemLabel.options({
title: selected
? selected.split(':').slice(1).join(':')
: Ox._('No document selected'),
width: getLabelWidth()
});
}
function setWidth() {
var size;
$itemLabel.options({width: getLabelWidth()});
if (selected) {
size = getPreviewSize(),
$preview.options({
height: size.height,
width: size.width
}).css({
margin: size.margin
});
$form.options('items').forEach(function($item) {
$item.options({width: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE});
});
}
$status.css({right: itemWidth + 128 + 'px'});
}
function updateList() {
var user = $userCheckbox.value(),
key = $findSelect.value(),
value = $findInput.value(),
query = {
conditions: value
? [].concat(
key != 'name' ? [{key: 'user', value: value, operator: '='}] : [],
key != 'user' ? [{key: 'name', value: value, operator: '='}] : []
)
: [],
operator: '|'
};
$list.options({query: user ? {
conditions: [
{key: 'user', value: pandora.user.username, operator: '='},
query
],
operator: '&'
} : query});
}
function uploadFile(data) {
pandora.ui.uploadDocumentDialog(data.files[0], function(file) {
Ox.Request.clearCache('findDocuments');
pandora.api.findDocuments({
positions: [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.data.positions[file.id] > -1) {
$list.reloadList();
} else {
$list.options({
query: {conditions: [], operator: '&'}
});
}
});
}).open();
}
return that;
};