pandora/static/js/documentsDialog.js

554 lines
18 KiB
JavaScript
Raw Normal View History

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