pandora/static/js/documentsPanel.js
2014-01-07 12:40:33 +00:00

715 lines
No EOL
22 KiB
JavaScript

// vim: et:ts=4:sw=4:sts=4:ft=javascript
'use strict';
pandora.ui.documentsPanel = function(options) {
var ui = pandora.user.ui,
hasItemView = false,
isItemView = true,
columns = [
{
id: 'name',
operator: '+',
title: Ox._('Name'),
visible: true,
width: 256
},
{
format: function(value) {
return value.toUpperCase();
},
id: 'extension',
operator: '+',
title: Ox._('Extension'),
visible: true,
width: 64
},
{
align: 'right',
format: function(value) {
return Ox.isArray(value)
? Ox.formatDimensions(value, 'px')
: Ox.formatCount(value, 'page');
},
id: 'dimensions',
operator: '-',
title: Ox._('Dimensions'),
visible: true,
width: 128
},
{
align: 'right',
format: function(value) {
return Ox.formatValue(value, 'B');
},
id: 'size',
operator: '-',
title: Ox._('Size'),
visible: true,
width: 64
},
{
id: 'type',
operator: '+',
title: Ox._('Type'),
visible: true,
width: 128
},
{
id: 'description',
operator: '+',
title: Ox._('Description'),
visible: true,
width: 256
},
{
align: 'right',
id: 'matches',
operator: '-',
title: Ox._('Matches'),
visible: true,
width: 64
},
{
id: 'user',
operator: '+',
title: Ox._('User'),
visible: true,
width: 128
},
{
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
}
],
$listBar = Ox.Bar({size: 24}),
$addButton = Ox.Button({
title: isItemView ? 'add' : 'upload',
tooltip: Ox._(isItemView ? 'Add Documents...' : 'Upload Documents...'),
type: 'image'
})
.css({float: 'left', margin: '4px 2px 4px 4px'})
.bindEvent({
click: function() {
if (isItemView) {
} else {
}
}
})
.appendTo($listBar),
$viewSelect = Ox.Select({
items: [
{id: 'list', title: Ox._('View as List')},
{id: 'grid', title: Ox._('View as Grid')}
],
value: ui.documentsView,
width: 128
})
.css({float: 'left', margin: '4px 2px'})
.bindEvent({
change: function(data) {
pandora.UI.set({documentsView: data.value});
}
})
.appendTo($listBar),
$sortSelect = Ox.Select({
items: columns.map(function(column) {
return {
id: column.id,
title: Ox._('Sort by ' + column.title)
};
}),
value: ui.documentsSort[0].key,
width: 128
})
.bindEvent({
change: function(data) {
var key = data.value;
pandora.UI.set({documentsSort: [{
key: key,
operator: Ox.getObjectById(columns, key).operator
}]});
}
}),
$orderButton = Ox.Button({
overlap: 'left',
title: getOrderButtonTitle(),
tooltip: getOrderButtonTooltip(),
type: 'image'
})
.bindEvent({
click: function() {
pandora.UI.set({documentsSort: [{
key: ui.documentsSort[0].key,
operator: ui.documentsSort[0].operator == '+' ? '-' : '+'
}]});
}
}),
$sortElement = Ox.FormElementGroup({
elements: [$sortSelect, $orderButton],
float: 'right'
})
.css({float: 'left', margin: '4px 2px'})
.appendTo($listBar),
$findSelect = Ox.Select({
items: isItemView ? [
{id: 'all', title: Ox._('Find: All')},
{id: 'name', title: Ox._('Find: Name')}
] : [
{id: 'all', title: Ox._('Find: All')},
{id: 'name', title: Ox._('Find: Name')},
{id: 'user', title: Ox._('Find: User')}
],
overlap: 'right',
type: 'image'
})
.bindEvent({
change: function(data) {
$findInput.options({placeholder: data.title}).focusInput();
}
}),
$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 4px 4px 2px'})
.appendTo($listBar),
$list = renderList(),
$listStatusbar = Ox.Bar({size: 16}).css({textAlign: 'center'}),
$listStatus = Ox.Element()
.css({
margin: '2px 4px',
fontSize: '9px',
overflow: 'hidden',
textOverflow: 'ellipsis'
})
.html(Ox._('Loading...'))
.appendTo($listStatusbar),
$listPanel = Ox.SplitPanel({
elements: [
{element: $listBar, size: 24},
{element: $list},
{element: $listStatusbar, size: 16}
],
orientation: 'vertical'
})
.bindEvent({
resize: function() {
$list.size();
},
}),
$itemBar = Ox.Bar({size: 24}),
$itemMenu = Ox.MenuButton({
items: isItemView ? [
{id: 'open', title: '', keyboard: 'return'},
{id: 'edit', title: ''},
{id: 'remove', title: '', keyboard: 'delete'}
] : [
{id: 'open', title: '', keyboard: 'return'},
{id: 'addtoitem', title: ''},
{id: 'addtolist', title: ''},
{id: 'replace', title: Ox._('Replace Document...')},
{id: 'delete', title: '', keyboard: 'delete'}
],
title: 'set',
tooltip: 'Options',
type: 'image'
})
.css({float: 'left', margin: '4px'})
.bindEvent({
click: function() {
}
})
.appendTo($itemBar),
$deselectButton = Ox.Button({
title: 'close',
tooltip: Ox._('Done'),
type: 'image'
})
.css({float: 'right', margin: '4px 4px 4px 2px'})
.bindEvent({
click: function() {
pandora.UI.set(
'documentsSelection.' + (isItemView ? ui.item : ''),
[]
);
}
})
.appendTo($itemBar),
$selectButton = Ox.ButtonGroup({
buttons: [
{id: 'previous', title: 'left'},
{id: 'next', title: 'right'}
],
type: 'image'
})
.css({float: 'right', margin: '4px 2px'})
.bindEvent({
click: function(data) {
}
})
.appendTo($itemBar),
$item = Ox.Element().css({overflowY: 'scroll'}),
$preview,
$form,
$itemStatusbar = Ox.Bar({size: 16})
.css({textAlign: 'center'}),
$itemStatus = Ox.Element()
.css({
margin: '2px 4px',
fontSize: '9px',
overflow: 'hidden',
textOverflow: 'ellipsis'
})
.html(Ox._('No document selected'))
.appendTo($itemStatusbar),
$itemPanel = Ox.SplitPanel({
elements: [
{element: $itemBar, size: 24},
{element: $item},
{element: $itemStatusbar, size: 16}
],
orientation: 'vertical'
})
.bindEvent({
resize: function(data) {
ui.documentSize = data.size;
},
resizeend: function(data) {
// set to 0 so that UI.set registers a change of the value
ui.documentSize = 0;
pandora.UI.set({documentSize: data.size});
},
toggle: function() {
pandora.UI.set({showDocument: !data.collapsed});
}
}),
that = Ox.SplitPanel({
elements: [
{
element: $listPanel
},
{
collapsible: isItemView,
collapsed: !ui.showDocument,
element: $itemPanel,
size: ui.documentSize,
resizable: true,
resize: [192, 256, 320, 384]
}
],
orientation: 'horizontal'
})
.bindEvent({
pandora_documentssort: function(data) {
updateSortElement();
$list.options({sort: data.value});
},
pandora_documentsview: function(data) {
$listPanel.replaceElement(1, $list = renderList());
}
});
that.bindEvent(
'pandora_documentsselection.' + (isItemView ? ui.item.toLowerCase() : ''),
selectDocuments
);
selectDocuments();
function addDocuments() {
pandora.$ui.documentsDialog = pandora.ui.documentsDialog().open();
}
function closeDocuments() {
if (pandora.$ui.documentDialog) {
pandora.$ui.documentDialog.close();
}
}
function deleteDocuments() {
pandora.ui.deleteDocumentDialog($list.options('selected'), function() {
Ox.Request.clearCache();
// ...
$list.reloadList();
}).open();
}
function editDocuments() {
pandora.$ui.documentsDialog = pandora.ui.documentsDialog().open();
}
function getOrderButtonTitle() {
return ui.documentsSort[0].operator == '+' ? 'up' : 'down';
}
function getOrderButtonTooltip() {
return Ox._(ui.documentsSort[0].operator == '+' ? 'Ascending' : 'Descending');
}
function getPreviewSize() {
var ratio = $list.value($list.options('selected')[0], 'ratio'),
size = ui.documentSize - 16 - Ox.UI.SCROLLBAR_SIZE,
height = ratio > 1 ? size / ratio : size,
width = ratio > 1 ? size : size * ratio,
left = Math.floor((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 Math.round(px / 2) + 'px';
}).join(' '),
width: width
};
}
function openDocuments() {
if (!pandora.$ui.documentDialog) {
pandora.$ui.documentDialog = pandora.ui.documentDialog({
index: 0,
items: $list.options('selected').map(function(id) {
return $list.value(id);
})
})
.bindEvent({
close: function() {
$list.closePreview();
}
})
.open();
} else {
pandora.$ui.documentDialog.update({
index: 0,
items: $list.options('selected').map(function(id) {
return $list.value(id);
})
});
}
}
function removeDocuments() {
pandora.api.removeDocument({
item: ui.item,
ids: $list.options('selected')
}, function() {
Ox.Request.clearCache();
// ...
$list.reloadList();
});
}
function renderForm() {
var item = $list.value($list.options('selected')[0]),
editable = item.user == pandora.user.username
|| pandora.site.capabilities.canEditDocuments[pandora.user.level],
inputWidth = ui.documentSize - 16 - Ox.UI.SCROLLBAR_SIZE,
labelWidth = 80;
return Ox.Form({
items: [
Ox.Input({
disabled: !editable,
id: 'name',
label: Ox._('Name'),
labelWidth: labelWidth,
value: item.name,
width: inputWidth
}),
Ox.Input({
disabled: true,
id: 'extension',
label: Ox._('Extension'),
labelWidth: labelWidth,
value: item.extension,
width: inputWidth
}),
Ox.Input({
disabled: true,
id: 'dimensions',
label: Ox._('Dimensions'),
labelWidth: labelWidth,
value: Ox.isArray(item.dimensions)
? Ox.formatDimensions(item.dimensions, 'px')
: Ox.formatCount(item.dimensions, 'page'),
width: inputWidth
}),
Ox.Input({
disabled: true,
id: 'size',
label: Ox._('Size'),
labelWidth: labelWidth,
value: Ox.formatValue(item.size, 'B'),
width: inputWidth
}),
Ox.Input({
disabled: true,
id: 'matches',
label: Ox._('Matches'),
labelWidth: labelWidth,
value: item.matches,
width: inputWidth
}),
Ox.Input({
disabled: true,
id: 'username',
label: Ox._('Username'),
labelWidth: labelWidth,
value: item.user,
width: inputWidth
}),
Ox.Input({
disabled: !editable,
id: 'type',
label: Ox._('Type'),
labelWidth: labelWidth,
value: item.type,
width: inputWidth
}),
Ox.Input({
disabled: !editable,
height: 256,
id: 'description',
placeholder: Ox._('Description'),
type: 'textarea',
value: item.description,
width: inputWidth
})
],
width: 240
})
.css({margin: '12px 8px 8px 8px'})
.bindEvent({
change: function(event) {
var data = Ox.extend({id: item.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(item.id, 'id', result.data.id);
}
Ox.Request.clearCache('findDocuments');
$list.reloadList();
});
}
});
}
function renderList() {
var options = {
items: pandora.api.findDocuments,
keys: ['dimensions', 'extension', 'id', 'name', 'ratio', 'size'],
query: {conditions: [], operator: '&'},
selected: ui.documentsSelection[isItemView ? ui.item : ''],
sort: ui.documentsSort.concat([
{key: 'extension', operator: '+'},
{key: 'name', operator: '+'}
]),
unique: 'id'
};
return (ui.documentsView == 'list' ? Ox.TableList(Ox.extend(options, {
columns: columns,
columnsVisible: true,
scrollbarVisible: true,
})) : Ox.IconList(Ox.extend(options, {
item: function(data, sort, size) {
var sortKey = sort[0].key,
infoKey = sortKey == 'name' ? 'extension' : sortKey,
info = (
Ox.getObjectById(columns, infoKey).format || Ox.identity
)(data[infoKey]),
size = size || 128;
return {
height: Math.round(data.ratio > 1 ? size / data.ratio : size),
id: data.id,
info: info,
title: data.name,
url: '/documents/' + data.id + '/256p.jpg',
width: Math.round(data.ratio > 1 ? size : size * data.ratio)
};
},
size: 128
})))
.bindEvent({
add: uploadDocuments,
closepreview: closeDocuments,
'delete': deleteDocuments,
init: function(data) {
$listStatus.html(
Ox.toTitleCase(Ox.formatCount(data.items, 'document'))
+ ', ' + Ox.formatValue(data.size, 'B')
);
},
open: openDocuments,
openpreview: openDocuments,
select: function(data) {
pandora.UI.set(
'documentsSelection.' + (isItemView ? ui.item : ''),
data.ids
);
},
sort: function(data) {
pandora.UI.set({documentsSort: [data]});
}
});
}
function renderPreview() {
var selected = $list.options('selected')[0],
size = getPreviewSize(),
src = '/documents/' + selected + '/256p.jpg';
return Ox.ImageElement({
height: size.height,
src: src,
width: size.width
})
.css({
borderRadius: '8px',
margin: size.margin,
cursor: 'pointer'
})
.on({
click: openDocuments
// FIXME
/*
var item = $list.value(selected);
window.open(
'/documents/' + selected + '/' + item.name + '.' + item.extension,
'_blank'
);
*/
});
}
function selectDocuments() {
var selected = ui.documentsSelection[isItemView ? ui.item : ''] || [],
string = selected.length < 2 ? 'Document'
: selected.length + ' Documents';
$list.options({selected: selected});
$itemMenu.setItemTitle('open', Ox._('Open ' + string));
if (isItemView) {
$itemMenu.setItemTitle('edit', Ox._('Edit ' + string + '...'))
.setItemTitle('remove', Ox._('Remove ' + string));
} else {
$itemMenu.setItemTitle('addtoitem', Ox._(
'Add ' + string + ' to Current '
+ pandora.site.itemName.singular
))
.setItemTitle('addtolist', Ox._(
'Add ' + string + ' to All Items in Current List'
))
.setItemTitle('delete', Ox._('Delete ' + string + '...'));
}
$itemMenu[selected.length ? 'show' : 'hide']();
$selectButton[selected.length > 1 ? 'show' : 'hide']();
$deselectButton[selected.length ? 'show' : 'hide']();
$item.empty();
if (selected.length) {
$preview = renderPreview().appendTo($item);
$form = renderForm().appendTo($item);
}
}
function updateList() {
var key = $findSelect.value(),
value = $findInput.value(),
query = {
conditions: value
? [].concat(
key != 'user'
? [{key: 'name', value: value, operator: '='}]
: [],
key == 'all'
? [{key: 'description', value: value, operator: '='}]
: [],
key != 'name'
? [{key: 'user', value: value, operator: '='}]
: []
)
: [],
operator: '|'
};
$list.options({query: query});
}
function updateSortElement() {
$sortSelect.value(ui.documentsSort[0].key);
$orderButton.options({
title: getOrderButtonTitle(),
tooltip: getOrderButtonTooltip()
});
}
function uploadDocuments(data) {
pandora.ui.uploadDocumentDialog(data.files, function(files) {
if (files) {
Ox.Request.clearCache('findDocuments');
$list.bindEventOnce({
load: function() {
$list.options({selected: [files.ids]});
}
})
.reloadList();
}
}).open();
}
return that;
}