pandora/static/js/documentsPanel.js

1122 lines
40 KiB
JavaScript
Raw Normal View History

2014-01-07 08:24:00 +00:00
'use strict';
2016-10-04 22:00:03 +00:00
pandora.documentColumns = [
{
id: 'title',
operator: '+',
title: Ox._('Title'),
find: true,
visible: true,
width: 256
},
{
id: 'id',
operator: '+',
title: Ox._('ID'),
visible: true,
width: 64
},
{
format: function(value) {
return value.toUpperCase();
},
id: 'extension',
operator: '+',
title: Ox._('Extension'),
find: true,
visible: true,
width: 64
},
{
align: 'right',
format: function(value, data) {
return Ox.isArray(value)
? Ox.formatDimensions(value, 'px')
: Ox.formatCount(value, (data && data.extension == 'html') ? 'word' : 'page');
2016-10-04 22:00:03 +00:00
},
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: 'description',
operator: '+',
title: Ox._('Description'),
find: true,
visible: true,
width: 256
},
{
align: 'right',
id: 'matches',
operator: '-',
title: Ox._('Matches'),
visible: true,
width: 64
},
{
id: 'user',
operator: '+',
title: Ox._('User'),
find: true,
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
}
];
2014-01-07 08:24:00 +00:00
2016-10-04 22:00:03 +00:00
pandora.ui.documentSortSelect = function() {
2014-01-07 08:24:00 +00:00
var ui = pandora.user.ui,
2016-10-04 22:00:03 +00:00
$orderButton = Ox.Button({
overlap: 'left',
title: getOrderButtonTitle(),
tooltip: getOrderButtonTooltip(),
type: 'image'
2014-01-07 08:24:00 +00:00
})
.bindEvent({
2016-10-04 22:00:03 +00:00
click: function() {
pandora.UI.set({documentsSort: [{
key: ui.documentsSort[0].key,
operator: ui.documentsSort[0].operator == '+' ? '-' : '+'
}]});
2014-01-07 08:24:00 +00:00
}
2016-10-04 22:00:03 +00:00
}),
2014-01-07 08:24:00 +00:00
$sortSelect = Ox.Select({
2016-10-04 22:00:03 +00:00
items: pandora.documentColumns.map(function(column) {
2014-01-07 08:24:00 +00:00
return {
id: column.id,
2014-02-13 15:32:14 +00:00
title: Ox._('Sort by {0}', [column.title])
2014-01-07 08:24:00 +00:00
};
}),
2014-01-07 11:38:19 +00:00
value: ui.documentsSort[0].key,
width: 128
2014-01-07 08:24:00 +00:00
})
.bindEvent({
change: function(data) {
var key = data.value;
pandora.UI.set({documentsSort: [{
2014-01-07 08:37:03 +00:00
key: key,
2016-10-04 22:00:03 +00:00
operator: Ox.getObjectById(pandora.documentColumns, key).operator
2014-01-07 08:24:00 +00:00
}]});
}
}),
2016-10-04 22:00:03 +00:00
that = Ox.FormElementGroup({
2014-01-07 08:24:00 +00:00
elements: [$sortSelect, $orderButton],
float: 'right'
})
2016-10-04 22:00:03 +00:00
.css({float: 'left', margin: '4px 2px'});
function getOrderButtonTitle() {
return ui.documentsSort[0].operator == '+' ? 'up' : 'down';
}
function getOrderButtonTooltip() {
return Ox._(ui.documentsSort[0].operator == '+' ? 'Ascending' : 'Descending');
}
2014-01-07 08:24:00 +00:00
2016-10-04 22:00:03 +00:00
that.sortValue = function(value) {
$sortSelect.value(value);
$orderButton.options({
title: getOrderButtonTitle(),
tooltip: getOrderButtonTooltip()
});
};
return that;
};
pandora.ui.documentViewSelect = function() {
var ui = pandora.user.ui,
that = Ox.Select({
items: [
2016-10-04 22:00:03 +00:00
{id: 'list', title: Ox._('View as List')},
{id: 'grid', title: Ox._('View as Grid')}
],
value: ui.documentsView,
width: 128
2014-01-07 08:24:00 +00:00
})
2016-10-04 22:00:03 +00:00
.css({float: 'left', margin: '4px 2px 4px 4px'})
2014-01-07 08:24:00 +00:00
.bindEvent({
change: function(data) {
2016-10-04 22:00:03 +00:00
pandora.UI.set({documentsView: data.value});
2014-01-07 08:24:00 +00:00
}
2016-10-04 22:00:03 +00:00
});
return that;
};
2014-01-07 08:24:00 +00:00
2016-10-04 22:00:03 +00:00
pandora.ui.documentsPanel = function(options) {
var ui = pandora.user.ui,
hasItemView = ui.section == 'items' && ui.item,
hasListSelection = ui.section == 'items' && !ui.item && ui.listSelection.length,
isItemView = options.isItemView,
listLoaded = false,
allFindKeys = ['user', 'title', 'entity', 'extension', 'description'].filter(function(key) {
return key != 'entity' || pandora.site.entities.length;
2014-01-07 08:24:00 +00:00
}),
2016-10-04 22:00:03 +00:00
$listBar = Ox.Bar({size: 24}),
$viewSelect = pandora.ui.documentViewSelect().appendTo($listBar),
$sortElement = pandora.ui.documentSortSelect().appendTo($listBar),
$findElement = findElement(updateList, isItemView).appendTo($listBar),
2014-01-07 08:24:00 +00:00
$list = renderList(),
2014-01-07 11:38:19 +00:00
$listStatusbar = Ox.Bar({size: 16}).css({textAlign: 'center'}),
2014-01-07 08:24:00 +00:00
2014-01-07 11:38:19 +00:00
$listStatus = Ox.Element()
2014-01-07 08:24:00 +00:00
.css({
margin: '2px 4px',
fontSize: '9px',
overflow: 'hidden',
textOverflow: 'ellipsis'
})
.html(Ox._('Loading...'))
2014-01-07 11:38:19 +00:00
.appendTo($listStatusbar),
2014-01-07 08:24:00 +00:00
$listPanel = Ox.SplitPanel({
elements: [
2014-01-07 11:38:19 +00:00
{element: $listBar, size: 24},
2014-01-07 08:24:00 +00:00
{element: $list},
2014-01-07 11:38:19 +00:00
{element: $listStatusbar, size: 16}
2014-01-07 08:24:00 +00:00
],
orientation: 'vertical'
2014-01-07 11:38:19 +00:00
})
.bindEvent({
resize: function() {
$list.size();
},
2014-01-07 08:24:00 +00:00
}),
2014-01-07 11:38:19 +00:00
$itemBar = Ox.Bar({size: 24}),
2014-01-07 08:24:00 +00:00
$itemMenu = Ox.MenuButton({
items: isItemView ? [
2014-01-07 11:38:19 +00:00
{id: 'open', title: '', keyboard: 'return'},
2014-01-07 08:24:00 +00:00
{id: 'edit', title: ''},
{id: 'embed', title: Ox._('Embed Document...')},
2014-01-16 02:44:39 +00:00
{},
2014-01-07 12:40:33 +00:00
{id: 'remove', title: '', keyboard: 'delete'}
2014-01-07 08:24:00 +00:00
] : [
2014-02-14 15:23:59 +00:00
{id: 'upload', title: Ox._('Upload {0}...', [Ox._('Documents')]), file: {width: 192}},
2014-01-16 04:50:44 +00:00
{},
2014-01-07 11:38:19 +00:00
{id: 'open', title: '', keyboard: 'return'},
2014-01-16 02:44:39 +00:00
{id: 'add', title: ''},
{id: 'embed', title: Ox._('Embed Document...')},
2014-01-16 02:44:39 +00:00
{},
{id: 'replace', title: Ox._('Replace {0}...', [Ox._('Document')]), file: {width: 192}},
2014-01-07 08:24:00 +00:00
{id: 'delete', title: '', keyboard: 'delete'}
],
title: 'set',
tooltip: Ox._('Options'),
2014-01-07 11:38:19 +00:00
type: 'image'
2014-01-07 08:24:00 +00:00
})
2014-01-07 11:38:19 +00:00
.css({float: 'left', margin: '4px'})
2014-01-07 08:24:00 +00:00
.bindEvent({
2014-01-07 14:29:12 +00:00
click: function(data) {
2014-01-16 02:44:39 +00:00
if (data.id == 'add') {
2014-01-16 04:50:44 +00:00
isItemView ? openDocumentsDialog() : addDocuments();
} else if (data.id == 'delete') {
deleteDocuments();
2014-01-07 14:29:12 +00:00
} else if (data.id == 'edit') {
2016-11-27 18:44:10 +00:00
pandora.UI.set({
section: 'documents',
document: ui.documentsSelection[ui.item][0],
documentView: 'info'
});
} else if (data.id == 'embed') {
openEmbedDialog();
} else if (data.id == 'open') {
openDocuments();
2014-01-07 14:29:12 +00:00
} else if (data.id == 'remove') {
removeDocuments();
} else if (data.id == 'replace') {
replaceDocument(data);
} else if (data.id == 'upload') {
uploadDocuments(data);
2014-01-07 14:29:12 +00:00
}
2014-01-07 08:24:00 +00:00
}
})
2014-01-07 11:38:19 +00:00
.appendTo($itemBar),
2014-01-07 08:24:00 +00:00
$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 : ''),
[]
2014-01-07 11:38:19 +00:00
);
2014-01-07 08:24:00 +00:00
}
})
.hide()
2014-01-07 11:38:19 +00:00
.appendTo($itemBar),
$selectButton = Ox.ButtonGroup({
buttons: [
{id: 'previous', title: 'left', tooltip: Ox._('Previous')},
{id: 'next', title: 'right', tooltip: Ox._('Next')}
2014-01-07 11:38:19 +00:00
],
type: 'image'
})
.css({float: 'right', margin: '4px 2px'})
.bindEvent({
click: function(data) {
$list.selectSelected(data.id == 'previous' ? -1 : 1);
2014-01-07 11:38:19 +00:00
}
})
.hide()
2014-01-07 11:38:19 +00:00
.appendTo($itemBar),
2014-01-07 08:24:00 +00:00
$item = Ox.Element().css({overflowY: 'scroll'}),
$preview,
$data,
2014-01-07 08:24:00 +00:00
2014-01-07 11:38:19 +00:00
$itemStatusbar = Ox.Bar({size: 16})
.css({textAlign: 'center'}),
$itemStatus = Ox.Element()
.css({
margin: '2px 4px',
fontSize: '9px',
overflow: 'hidden',
textOverflow: 'ellipsis'
})
.appendTo($itemStatusbar),
2014-01-07 08:24:00 +00:00
$itemPanel = Ox.SplitPanel({
elements: [
2014-01-07 11:38:19 +00:00
{element: $itemBar, size: 24},
{element: $item},
{element: $itemStatusbar, size: 16}
2014-01-07 08:24:00 +00:00
],
orientation: 'vertical'
})
.bindEvent({
resize: function(data) {
2014-01-07 11:38:19 +00:00
ui.documentSize = data.size;
resizeItem();
2014-01-07 08:24:00 +00:00
},
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});
},
2014-01-07 14:29:12 +00:00
toggle: function(data) {
2014-01-07 08:24:00 +00:00
pandora.UI.set({showDocument: !data.collapsed});
}
}),
that = Ox.SplitPanel({
elements: [
{
element: $listPanel
},
{
collapsible: isItemView,
2014-01-07 14:29:12 +00:00
collapsed: isItemView && !ui.showDocument,
2014-01-07 08:24:00 +00:00
element: $itemPanel,
2014-01-07 08:37:03 +00:00
size: ui.documentSize,
2014-01-07 11:38:19 +00:00
resizable: true,
2014-01-07 14:29:12 +00:00
resize: [192, 256, 320, 384],
tooltip: 'document <span class="OxBright">'
2014-09-25 19:56:19 +00:00
+ Ox.SYMBOLS.shift + 'D</span>'
2014-01-07 08:24:00 +00:00
}
],
orientation: 'horizontal'
})
.bindEvent({
pandora_documentsize: function(data) {
that.size(1, data.value);
},
2014-01-07 08:24:00 +00:00
pandora_documentssort: function(data) {
2016-10-04 22:00:03 +00:00
$sortElement.sortValue(ui.documentsSort[0].key);
2014-01-07 08:24:00 +00:00
$list.options({sort: data.value});
2014-01-07 11:38:19 +00:00
},
pandora_documentsview: function(data) {
$listPanel.replaceElement(1, $list = renderList());
2014-01-07 14:29:12 +00:00
},
pandora_showdocument: function(data) {
2014-09-23 21:56:11 +00:00
isItemView && that.toggleElement(1);
2014-01-07 08:24:00 +00:00
}
})
.bindEvent(
'pandora_documentsselection.' + (
isItemView ? ui.item.toLowerCase() : ''
),
selectDocuments
);
2014-01-07 08:24:00 +00:00
if (isItemView) {
pandora.$ui.documentsList = $list;
}
2014-01-07 08:24:00 +00:00
function addDocuments() {
var ids = ui.documentsSelection[''];
2014-01-09 08:06:01 +00:00
pandora.api.addDocument({
item: hasItemView ? ui.item : ui.listSelection,
ids: ids
2014-01-09 08:06:01 +00:00
}, function() {
Ox.Request.clearCache();
if (ui.item && ui.itemView == 'documents') {
// FIXME: $list.reloadList() would be much better
2014-01-09 08:06:01 +00:00
pandora.$ui.contentPanel.replaceElement(1,
2014-01-17 13:49:11 +00:00
pandora.$ui.item = pandora.ui.item()
);
// FIXME: there has to be a way to do this without timeout
setTimeout(function() {
pandora.UI.set('documentsSelection.' + ui.item, ids);
}, 1000);
2014-01-09 08:06:01 +00:00
}
});
}
2014-01-07 12:40:33 +00:00
function closeDocuments() {
if (pandora.$ui.documentDialog) {
pandora.$ui.documentDialog.close();
}
}
2014-01-07 08:24:00 +00:00
function deleteDocuments() {
2014-01-16 02:57:15 +00:00
pandora.ui.deleteDocumentDialog(
$list.options('selected').map(function(id) {
return $list.value(id);
}),
function() {
Ox.Request.clearCache();
// ...
$list.reloadList();
}
).open();
2014-01-07 08:24:00 +00:00
}
2014-01-07 11:38:19 +00:00
function editDocuments() {
2014-01-08 08:35:02 +00:00
pandora.UI.set('documentsSelection.', $list.options('selected'));
openDocumentsDialog();
2014-01-07 11:38:19 +00:00
}
2016-10-04 22:00:03 +00:00
function findElement(callback, isItemView) {
var $findSelect = Ox.Select({
items: [
{id: 'all', title: Ox._('Find: All')},
{id: 'title', title: Ox._('Find: Title')},
{id: 'user', title: Ox._('Find: User')},
{id: 'entity', title: Ox._('Find: Entity')}
].filter(function(item) {
if (item.id == 'user') {
return !isItemView;
} else if (item.id == 'entity') {
return pandora.site.entities.length;
}
return true;
}),
overlap: 'right',
type: 'image'
})
.bindEvent({
change: function(data) {
$findInput.options({placeholder: data.title}).focusInput();
}
}),
2014-01-07 08:24:00 +00:00
2016-10-04 22:00:03 +00:00
$findInput = Ox.Input({
changeOnKeypress: true,
clear: true,
placeholder: Ox._('Find: All'),
width: 192
})
.bindEvent({
change: function(data) {
data.key = $findSelect.value();
data.value = $findInput.value()
callback(data);
}
}),
that = Ox.FormElementGroup({
elements: [
$findSelect,
$findInput
]
})
.css({float: 'right', margin: '4px 4px 4px 2px'});
// to determine the width of the find input inside
// the documents dialog, that dialog has to be present
setTimeout(function() {
$findInput.options({width: getFindInputWidth()});
});
return that;
2014-01-07 08:24:00 +00:00
}
function getFindInputWidth() {
// 2 * 128px selects + 2 * 16px buttons + 4 * 4px margins = 304px
return Math.min(192, (
isItemView
? window.innerWidth - (ui.showSidebar * ui.sidebarSize) - 1
- (ui.showDocument * ui.documentSize)
: pandora.$ui.documentsDialog.options('width')
- ui.documentSize - 1
) - 304);
}
2014-01-07 08:24:00 +00:00
function getPreviewSize() {
2014-01-07 11:38:19 +00:00
var ratio = $list.value($list.options('selected')[0], 'ratio'),
2014-09-26 12:12:25 +00:00
size = ui.documentSize - 16 - Ox.UI.SCROLLBAR_SIZE,
2014-01-07 08:24:00 +00:00
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
};
}
2014-01-07 12:40:33 +00:00
function openDocuments() {
2014-01-20 11:13:07 +00:00
pandora.openDocumentDialog({
documents: $list.options('selected').map(function(id) {
return $list.value(id);
})
}).bindEvent({
close: function() {
$list.closePreview();
}
});
2014-01-07 12:40:33 +00:00
}
function openDocumentsDialog() {
pandora.$ui.documentsDialog = pandora.ui.documentsDialog().open();
}
function openEmbedDialog() {
pandora.$ui.embedDocumentDialog = pandora.ui.embedDocumentDialog(
ui.documentsSelection[isItemView ? ui.item : ''][0]
).open();
}
function replaceDocument(data) {
2014-01-09 08:06:01 +00:00
var id = $list.options('selected')[0];
pandora.ui.uploadDocumentDialog({
files: data.files,
id: id
}, function(files) {
if (files) {
Ox.Request.clearCache();
$list.bindEventOnce({
load: function() {
$list.options({selected: files.ids});
selectDocuments();
}
})
.reloadList();
}
}).open();
2014-01-09 08:06:01 +00:00
}
2014-01-07 08:24:00 +00:00
function removeDocuments() {
pandora.api.removeDocument({
item: ui.item,
ids: $list.options('selected')
}, function() {
Ox.Request.clearCache();
// ...
$list.reloadList();
});
}
function renderData() {
var $name, $description, $input,
item = $list.value($list.options('selected')[0]),
2014-01-07 08:24:00 +00:00
editable = item.user == pandora.user.username
2017-11-04 09:53:27 +00:00
|| pandora.hasCapability('canEditDocuments')
|| options.editable,
labelWidth = 80,
2014-09-26 12:12:25 +00:00
width = ui.documentSize - 16 - Ox.UI.SCROLLBAR_SIZE;
return isItemView
? Ox.Element()
2014-01-18 00:43:50 +00:00
.css({textAlign: 'center'})
.append(
2014-01-18 00:43:50 +00:00
Ox.$('<div>').css({height: '8px'})
)
.append(
2014-01-18 00:43:50 +00:00
$name = Ox.EditableContent({
editable: editable,
2016-10-04 22:00:03 +00:00
tooltip: editable ? pandora.getEditTooltip('title') : '',
value: item.title,
width: width
})
.css({
textAlign: 'center',
fontWeight: 'bold'
})
.bindEvent({
edit: function() {
2014-01-18 00:43:50 +00:00
$name.options({
width: that.width()
});
},
2014-01-18 00:43:50 +00:00
submit: function(data) {
pandora.api.editDocument({
2016-10-04 22:00:03 +00:00
title: data.value,
2014-01-18 00:43:50 +00:00
id: item.id,
item: ui.item,
}, function(result) {
2016-10-04 22:00:03 +00:00
$name.options({value: result.data.title});
2014-01-18 00:43:50 +00:00
Ox.Request.clearCache('findDocuments');
$list.reloadList();
});
}
})
)
.append(
Ox.$('<div>').css({height: '8px'})
)
.append(
$description = Ox.EditableContent({
2014-03-01 09:13:41 +00:00
clickLink: pandora.clickLink,
2014-01-18 00:43:50 +00:00
editable: editable,
format: function(value) {
return '<div class="OxLight" style="text-align: center">'
+ value + '</div>';
},
height: width,
2014-02-13 16:24:52 +00:00
placeholder: Ox._('No description'),
2014-01-18 00:50:02 +00:00
tooltip: editable ? pandora.getEditTooltip('description') : '',
type: 'textarea',
value: item.description || '',
width: width
})
.css({
2014-01-18 00:43:50 +00:00
margin: '0 8px',
textAlign: 'center'
})
.bindEvent({
submit: function(data) {
pandora.api.editDocument({
description: data.value,
id: item.id,
item: ui.item,
}, function(result) {
$description.options({value: result.data.description});
Ox.Request.clearCache('findDocuments');
$list.reloadList();
});
}
})
)
: Ox.Form({
items: [
Ox.Input({
disabled: !editable,
2016-10-04 22:00:03 +00:00
id: 'title',
label: Ox._('Title'),
labelWidth: labelWidth,
2016-10-04 22:00:03 +00:00
value: item.title,
width: width
}),
2015-02-05 04:48:45 +00:00
Ox.Input({
disabled: true,
id: 'id',
label: Ox._('ID'),
labelWidth: labelWidth,
value: item.id,
width: width
}),
Ox.Input({
disabled: true,
id: 'extension',
label: Ox._('Extension'),
labelWidth: labelWidth,
value: item.extension,
width: width
}),
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: width
}),
Ox.Input({
disabled: true,
id: 'size',
label: Ox._('Size'),
labelWidth: labelWidth,
value: Ox.formatValue(item.size, 'B'),
width: width
}),
Ox.Input({
disabled: true,
id: 'matches',
label: Ox._('Matches'),
labelWidth: labelWidth,
value: item.matches,
width: width
}),
Ox.Input({
disabled: true,
id: 'username',
2015-02-05 04:48:45 +00:00
label: Ox._('User'),
labelWidth: labelWidth,
value: item.user,
width: width
}),
Ox.Input({
disabled: !editable,
height: 256,
id: 'description',
placeholder: Ox._('Description'),
type: 'textarea',
value: item.description,
width: width
})
].concat(
pandora.site.entities && pandora.site.entities.length
? Ox.ArrayInput({
2015-02-14 19:52:30 +00:00
input: {
get: function(width) {
2015-02-14 19:55:29 +00:00
var $input = Ox.FormElementGroup({
2015-02-14 19:52:30 +00:00
elements: [
Ox.Select({
items: pandora.site.entities.map(function(entity) {
return {
id: entity.id,
title: entity.title
};
}),
overlap: 'right',
width: labelWidth
})
.bindEvent({
change: function() {
2015-02-15 09:53:16 +00:00
$input.value([$input.value()[0], '']);
$input.options('elements')[1].focusInput();
2015-02-14 19:52:30 +00:00
}
}),
2015-02-14 19:52:30 +00:00
Ox.Input({
autocomplete: function(value, callback) {
pandora.api.autocompleteEntities({
key: $input.value()[0],
operator: '=',
range: [0, 10],
value: value
}, function(result) {
callback(result.data.items);
});
},
autocompleteReplace: true,
autocompleteSelect: true,
autocompleteSelectSubmit: true,
width: width - labelWidth
})
],
width: width
});
2015-02-14 19:55:29 +00:00
return $input;
2015-02-14 19:52:30 +00:00
},
getEmpty: function() {
return [pandora.site.entities[0].id, ''];
},
isEmpty: function(value) {
return value[1] === '';
},
setWidth: function($input, width) {
$input.options('elements')[1].options({
width: width - labelWidth
});
}
2015-02-14 19:53:37 +00:00
},
label: Ox._('Entities'),
2015-02-13 11:05:03 +00:00
value: item.entities.map(function(entity) {
return [entity.type, entity.name];
}),
width: width
})
.bindEvent({
add: function() {
$item[0].scrollTop = 1000000;
2015-02-13 17:34:18 +00:00
},
change: function(data) {
var remove = item.entities.filter(function(entity) {
return data.value.filter(function(value) {
return value[0] == entity.type && value[1] == entity.name;
}).length == 0;
}).map(function(entity) {
return entity.id;
});
var add = data.value.filter(function(value) {
return item.entities.filter(function(entity) {
return value[0] == entity.type && value[1] == entity.name;
}).length == 0;
}).map(function(value) {
return {
type: value[0],
name: value[1]
}
});
remove.length && remove.forEach(function(id) {
pandora.api.removeDocument({
id: item.id,
entity: id
}, function(result) {
// fixme: check result
});
});
add.length && add.forEach(function(entity) {
pandora.api.findEntities({
query: {
conditions: [
{key: 'type', value: entity.type, operator: '=='},
{key: 'name', value: entity.name, operator: '=='}
],
operator: '&'
},
keys: ['id'],
range: [0, 1]
}, function(result) {
if (result.data.items && result.data.items.length) {
pandora.api.addDocument({
id: item.id,
entity: result.data.items[0].id
}, function(result) {
// fixme: check result
});
}
});
});
}
})
: []
),
width: 240
})
.css({margin: '12px 8px 8px 8px'})
.bindEvent({
change: function(event) {
var data = Ox.extend({id: item.id}, event.id, event.data.value);
if (isItemView) {
data.item = ui.item;
2014-01-07 08:24:00 +00:00
}
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();
});
}
});
2014-01-07 08:24:00 +00:00
}
function renderList() {
var options = {
items: pandora.api.findDocuments,
2016-10-04 22:00:03 +00:00
keys: ['description', 'dimensions', 'extension', 'id', 'title', 'ratio', 'size', 'user', 'entities', 'modified'],
2014-01-07 15:54:20 +00:00
query: {
2014-01-08 04:32:57 +00:00
conditions: isItemView ? [{ key: 'item', value: ui.item, operator: '==' }] : [],
2014-01-07 15:54:20 +00:00
operator: '&'
},
2014-01-08 08:35:02 +00:00
selected: ui.documentsSelection[isItemView ? ui.item : ''] || [],
2014-01-07 08:24:00 +00:00
sort: ui.documentsSort.concat([
{key: 'extension', operator: '+'},
2016-10-04 22:00:03 +00:00
{key: 'title', operator: '+'}
2014-01-07 08:24:00 +00:00
]),
unique: 'id'
};
return (ui.documentsView == 'list' ? Ox.TableList(Ox.extend(options, {
2016-10-04 22:00:03 +00:00
columns: pandora.documentColumns,
2014-01-07 08:24:00 +00:00
columnsVisible: true,
scrollbarVisible: true,
})) : Ox.IconList(Ox.extend(options, {
item: function(data, sort, size) {
var sortKey = sort[0].key,
2016-10-04 22:00:03 +00:00
infoKey = sortKey == 'title' ? 'extension' : sortKey,
2014-01-07 08:24:00 +00:00
info = (
2016-10-04 22:00:03 +00:00
Ox.getObjectById(pandora.documentColumns, infoKey).format || Ox.identity
2014-01-07 08:24:00 +00:00
)(data[infoKey]),
size = size || 128;
return {
2014-01-07 11:38:19 +00:00
height: Math.round(data.ratio > 1 ? size / data.ratio : size),
2014-01-07 08:24:00 +00:00
id: data.id,
info: info,
2016-10-04 22:00:03 +00:00
title: data.title,
url: pandora.getMediaURL('/documents/' + data.id + '/256p.jpg?' + data.modified),
2014-01-07 11:38:19 +00:00
width: Math.round(data.ratio > 1 ? size : size * data.ratio)
2014-01-07 08:24:00 +00:00
};
},
size: 128
})))
.bindEvent({
add: function() {
// we can't open upload dialog via control+n
isItemView && openDocumentsDialog();
},
2016-10-04 22:00:03 +00:00
copy: function(data) {
pandora.clipboard.copy(data.ids, 'document');
},
2014-01-07 12:40:33 +00:00
closepreview: closeDocuments,
'delete': isItemView ? removeDocuments : deleteDocuments,
2014-01-07 08:24:00 +00:00
init: function(data) {
2014-01-07 11:38:19 +00:00
$listStatus.html(
2014-01-07 08:24:00 +00:00
Ox.toTitleCase(Ox.formatCount(data.items, 'document'))
+ (isItemView ? '' : ', ' + Ox.formatValue(data.size, 'B'))
2014-01-07 08:24:00 +00:00
);
},
2014-01-07 14:29:12 +00:00
key_escape: function() {
pandora.UI.set({'part.documents': ''});
2014-01-07 14:29:12 +00:00
},
2014-01-07 12:40:33 +00:00
open: openDocuments,
openpreview: openDocuments,
2016-10-04 22:00:03 +00:00
paste: function(data) {
if (isItemView) {
//fixme permissions!
var items = pandora.clipboard.paste();
if (items.length && pandora.clipboard.type() == 'document') {
//fixme use history
pandora.api.addDocument({
item: ui.item,
ids: items
}, function(result) {
Ox.Request.clearCache('findDocuments');
$list.reloadList();
});
}
}
},
2014-01-07 11:38:19 +00:00
select: function(data) {
2014-01-07 08:24:00 +00:00
pandora.UI.set(
'documentsSelection.' + (isItemView ? ui.item : ''), data.ids
2014-01-07 08:24:00 +00:00
);
ui.part.documents && pandora.UI.set('part.documents', data.ids[0]);
2014-01-07 08:24:00 +00:00
},
2014-01-07 11:38:19 +00:00
sort: function(data) {
2017-03-02 11:37:53 +00:00
pandora.UI.set({collectionSort: [data]});
2014-01-07 08:24:00 +00:00
}
2014-01-07 15:54:20 +00:00
})
.bindEventOnce({
load: function() {
2014-01-20 11:13:07 +00:00
listLoaded = true;
!ui.showBrowser && $list.gainFocus();
2014-11-21 16:09:42 +00:00
if ($list.options('selected').length == 0) {
selectDocuments()
} else {
selectDocumentsLater();
}
function selectDocumentsLater() {
2014-11-21 16:37:50 +00:00
if (!Ox.isEmpty($list.value($list.options('selected')[0]))) {
2014-11-21 16:04:54 +00:00
selectDocuments();
} else {
2014-11-21 16:09:42 +00:00
setTimeout(selectDocumentsLater, 100);
2014-11-21 16:04:54 +00:00
}
}
2014-01-07 15:54:20 +00:00
}
2014-01-07 08:24:00 +00:00
});
}
function renderPreview() {
2014-01-07 11:38:19 +00:00
var selected = $list.options('selected')[0],
modified = $list.value(selected, 'modified'),
2014-01-07 11:38:19 +00:00
size = getPreviewSize(),
src = '/documents/' + selected + '/256p.jpg?' + modified,
$element = Ox.ImageElement({
height: size.height,
src: src,
// fixme: this tends to stick around after menu click
// (and may not be necessary in the first place)
// tooltip: Ox._('Click to open document'),
width: size.width
})
.css({
borderRadius: '8px',
2015-02-14 15:21:05 +00:00
margin: size.margin
})
.on({
click: function(e) {
if ($(e.target).is('img')) {
openDocuments();
}
}
})
.bindEvent({
load: function() {
$($element.children()[0]).css({cursor: 'pointer'});
}
});
return $element;
2014-01-07 08:24:00 +00:00
}
function resizeItem() {
var size = getPreviewSize(),
2014-09-26 12:12:25 +00:00
width = ui.documentSize - 16 - Ox.UI.SCROLLBAR_SIZE;
2014-01-16 04:50:44 +00:00
$preview && $preview.options({
height: size.height,
width: size.width
}).css({
margin: size.margin
});
if (!isItemView && $data) {
$data.options('items').forEach(function($item) {
$item.options({width: width});
});
}
}
2014-01-07 08:24:00 +00:00
function selectDocuments() {
// FIXME: this looks wrong - will produce inconsistent state
2014-01-20 11:13:07 +00:00
if(!listLoaded) {
return;
}
2014-01-07 11:38:19 +00:00
var selected = ui.documentsSelection[isItemView ? ui.item : ''] || [],
2014-02-14 15:23:59 +00:00
string = Ox._(selected.length < 2 ? 'Document' : 'Documents');
2014-01-07 11:38:19 +00:00
$list.options({selected: selected});
2014-02-14 15:23:59 +00:00
$itemMenu.setItemTitle('open', Ox._('Open {0}', [string]))
2014-02-03 04:03:25 +00:00
[selected.length ? 'enableItem' : 'disableItem']('open');
2014-01-07 08:24:00 +00:00
if (isItemView) {
2014-02-14 15:23:59 +00:00
$itemMenu.setItemTitle('edit', Ox._('Edit {0}...', [string]))
.setItemTitle('remove', Ox._(
2014-02-14 15:23:59 +00:00
'Remove {0} from {1}',
[string, Ox._(pandora.site.itemName.singular)]
))
2014-02-03 04:03:25 +00:00
[selected.length ? 'enableItem' : 'disableItem']('edit')
[selected.length ? 'enableItem' : 'disableItem']('embed')
2014-02-03 04:03:25 +00:00
[selected.length ? 'enableItem' : 'disableItem']('remove');
2014-01-07 08:24:00 +00:00
} else {
2014-02-14 15:23:59 +00:00
$itemMenu.setItemTitle('add', Ox._('Add {0} to {1} {2}', [
string,
2014-02-14 15:23:59 +00:00
Ox._(hasListSelection ? 'Selected' : 'Current'),
Ox._(pandora.site.itemName[
hasListSelection && ui.listSelection.length > 1
? 'plural' : 'singular'])
2014-02-14 15:23:59 +00:00
]))
.setItemTitle('delete', Ox._('Delete {0}...', [string]))
[selected.length && (hasItemView || hasListSelection) ? 'enableItem' : 'disableItem']('add')
[selected.length ? 'enableItem' : 'disableItem']('embed')
[selected.length == 1 ? 'enableItem' : 'disableItem']('replace')
2014-02-03 04:03:25 +00:00
[selected.length ? 'enableItem' : 'disableItem']('delete');
2014-01-07 08:24:00 +00:00
}
2014-01-07 11:38:19 +00:00
$selectButton[selected.length > 1 ? 'show' : 'hide']();
$deselectButton[selected.length ? 'show' : 'hide']();
2014-01-07 08:24:00 +00:00
$item.empty();
2014-01-07 11:38:19 +00:00
if (selected.length) {
2014-01-07 08:24:00 +00:00
$preview = renderPreview().appendTo($item);
$data = renderData().appendTo($item);
2014-01-07 08:24:00 +00:00
}
2014-01-07 14:29:12 +00:00
$itemStatus.html(
selected.length
? Ox.formatCount(selected.length, 'Document')
: Ox._('No document selected')
);
2014-01-07 08:24:00 +00:00
}
2016-10-04 22:00:03 +00:00
function updateList(data) {
var key = data.key,
value = data.value,
itemCondition = isItemView
? {key: 'item', operator: '==', value: ui.item}
: null,
findKeys = key == 'all' ? allFindKeys : [key],
findQuery = {
conditions: findKeys.map(function(k) {
return {key: k, operator: '=', value: value};
}),
operator: '|'
},
query = isItemView
? {
conditions: [itemCondition].concat(findQuery),
operator: '&'
}
: findQuery;
2014-01-07 08:24:00 +00:00
$list.options({query: query});
}
function updateSortElement() {
2016-10-04 22:00:03 +00:00
$sortElement.sortValue(ui.documentsSort[0].key);
2014-01-07 08:24:00 +00:00
}
function uploadDocuments(data) {
pandora.ui.uploadDocumentDialog({
files: data.files
}, function(files) {
2014-01-07 08:24:00 +00:00
if (files) {
Ox.Request.clearCache('findDocuments');
$list.bindEventOnce({
load: function() {
$list.options({selected: files.ids});
2014-01-07 08:24:00 +00:00
}
})
.reloadList();
}
}).open();
}
that.reloadList = function() {
$list.reloadList();
};
that.selectSelected = function(offset) {
$list.selectSelected(offset);
return that;
};
that.updateSize = function() {
$findInput.options({width: getFindInputWidth()});
$list.size();
};
2014-01-07 08:24:00 +00:00
return that;
};