forked from 0x2620/pandora
update documents panel and dialog
This commit is contained in:
parent
b4d2950ff6
commit
110d330030
2 changed files with 139 additions and 101 deletions
|
@ -2,19 +2,21 @@
|
|||
|
||||
'use strict';
|
||||
|
||||
pandora.ui.documentDialog = function(items, index) {
|
||||
pandora.ui.documentDialog = function(options) {
|
||||
|
||||
Ox.print('OPTIONS', options)
|
||||
|
||||
var dialogHeight = Math.round((window.innerHeight - 48) * 0.9),
|
||||
dialogWidth = Math.round(window.innerWidth * 0.9),
|
||||
documentHeight = dialogHeight - 24,
|
||||
documentWidth = dialogWidth,
|
||||
item = items[index],
|
||||
items = options.items,
|
||||
item = items[options.index],
|
||||
|
||||
$content = Ox.Element(),
|
||||
|
||||
that = Ox.Dialog({
|
||||
closeButton: true,
|
||||
content: $content,
|
||||
focus: false,
|
||||
height: dialogHeight,
|
||||
maximizeButton: true,
|
||||
minHeight: 256,
|
||||
|
@ -30,7 +32,7 @@ pandora.ui.documentDialog = function(items, index) {
|
|||
},
|
||||
resize: function(data) {
|
||||
$content.options({
|
||||
height: data.height - 24,
|
||||
height: data.height,
|
||||
width: data.width
|
||||
});
|
||||
},
|
||||
|
@ -50,18 +52,24 @@ pandora.ui.documentDialog = function(items, index) {
|
|||
],
|
||||
type: 'image'
|
||||
})
|
||||
.css({float: 'right', margin: '4px'})
|
||||
.css({
|
||||
position: 'absolute',
|
||||
right: '4px',
|
||||
top: '4px'
|
||||
})
|
||||
.bindEvent({
|
||||
click: function(data) {
|
||||
index = Ox.mod(
|
||||
index + (data.id == 'previous' ? -1 : 1),
|
||||
options.index = Ox.mod(
|
||||
options.index + (data.id == 'previous' ? -1 : 1),
|
||||
items.length
|
||||
);
|
||||
pandora.UI.set({document: items[index].id});
|
||||
pandora.UI.set({document: items[options.index].id});
|
||||
}
|
||||
});
|
||||
|
||||
$(that.find('.OxBar')[0]).append($selectButton);
|
||||
// fixme: why is this needed?
|
||||
$(that.find('.OxContent')[0]).css({overflow: 'hidden'});
|
||||
|
||||
setContent();
|
||||
|
||||
|
@ -71,13 +79,13 @@ pandora.ui.documentDialog = function(items, index) {
|
|||
item.extension == 'pdf'
|
||||
? Ox.Element()
|
||||
: Ox.ImageViewer({
|
||||
height: documentHeight,
|
||||
height: dialogHeight,
|
||||
imageHeight: item.dimensions[1],
|
||||
imagePreviewURL: '/documents/' + item.id + '/256p.jpg',
|
||||
imageURL: '/documents/' + item.id + '/'
|
||||
+ item.name + '.' + item.extension,
|
||||
imageWidth: item.dimensions[0],
|
||||
width: documentWidth
|
||||
width: dialogWidth
|
||||
})
|
||||
)
|
||||
.bindEvent({
|
||||
|
|
|
@ -5,18 +5,10 @@
|
|||
pandora.ui.documentsPanel = function(options) {
|
||||
|
||||
var ui = pandora.user.ui,
|
||||
|
||||
hasItemView = false,
|
||||
isItemView = false,
|
||||
isItemView = true,
|
||||
|
||||
columns = [
|
||||
{
|
||||
id: 'type',
|
||||
operator: '+',
|
||||
title: Ox._('Type'),
|
||||
visible: true,
|
||||
width: 128
|
||||
},
|
||||
{
|
||||
id: 'name',
|
||||
operator: '+',
|
||||
|
@ -58,6 +50,13 @@ pandora.ui.documentsPanel = function(options) {
|
|||
visible: true,
|
||||
width: 64
|
||||
},
|
||||
{
|
||||
id: 'type',
|
||||
operator: '+',
|
||||
title: Ox._('Type'),
|
||||
visible: true,
|
||||
width: 128
|
||||
},
|
||||
{
|
||||
id: 'description',
|
||||
operator: '+',
|
||||
|
@ -104,7 +103,7 @@ pandora.ui.documentsPanel = function(options) {
|
|||
}
|
||||
],
|
||||
|
||||
$listbar = Ox.Bar({size: 24}),
|
||||
$listBar = Ox.Bar({size: 24}),
|
||||
|
||||
$addButton = Ox.Button({
|
||||
title: isItemView ? 'add' : 'upload',
|
||||
|
@ -117,22 +116,23 @@ pandora.ui.documentsPanel = function(options) {
|
|||
|
||||
}
|
||||
})
|
||||
.appendTo($listbar),
|
||||
.appendTo($listBar),
|
||||
|
||||
$viewSelect = Ox.Select({
|
||||
items: [
|
||||
{id: 'list', title: Ox._('List')},
|
||||
{id: 'grid', title: Ox._('Grid')}
|
||||
{id: 'list', title: Ox._('View as List')},
|
||||
{id: 'grid', title: Ox._('View as Grid')}
|
||||
],
|
||||
width: 192
|
||||
value: ui.documentsView,
|
||||
width: 128
|
||||
})
|
||||
.css({float: 'left', margin: '4px 2px'})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
pandora.UI.set({documentsView: data.id});
|
||||
pandora.UI.set({documentsView: data.value});
|
||||
}
|
||||
})
|
||||
.appendTo($listbar),
|
||||
.appendTo($listBar),
|
||||
|
||||
$sortSelect = Ox.Select({
|
||||
items: columns.map(function(column) {
|
||||
|
@ -141,7 +141,8 @@ pandora.ui.documentsPanel = function(options) {
|
|||
title: Ox._('Sort by ' + column.title)
|
||||
};
|
||||
}),
|
||||
width: 192
|
||||
value: ui.documentsSort[0].key,
|
||||
width: 128
|
||||
})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
|
@ -173,7 +174,7 @@ pandora.ui.documentsPanel = function(options) {
|
|||
float: 'right'
|
||||
})
|
||||
.css({float: 'left', margin: '4px 2px'})
|
||||
.appendTo($listbar),
|
||||
.appendTo($listBar),
|
||||
|
||||
$findSelect = Ox.Select({
|
||||
items: isItemView ? [
|
||||
|
@ -210,13 +211,13 @@ pandora.ui.documentsPanel = function(options) {
|
|||
]
|
||||
})
|
||||
.css({float: 'right', margin: '4px 4px 4px 2px'})
|
||||
.appendTo($listbar),
|
||||
.appendTo($listBar),
|
||||
|
||||
$list = renderList(),
|
||||
|
||||
$statusbar = Ox.Bar({size: 16}),
|
||||
$listStatusbar = Ox.Bar({size: 16}).css({textAlign: 'center'}),
|
||||
|
||||
$status = Ox.Element()
|
||||
$listStatus = Ox.Element()
|
||||
.css({
|
||||
margin: '2px 4px',
|
||||
fontSize: '9px',
|
||||
|
@ -224,54 +225,47 @@ pandora.ui.documentsPanel = function(options) {
|
|||
textOverflow: 'ellipsis'
|
||||
})
|
||||
.html(Ox._('Loading...'))
|
||||
.appendTo($statusbar),
|
||||
.appendTo($listStatusbar),
|
||||
|
||||
$listPanel = Ox.SplitPanel({
|
||||
elements: [
|
||||
{element: $listbar, size: 24},
|
||||
{element: $listBar, size: 24},
|
||||
{element: $list},
|
||||
{element: $statusbar, size: 16}
|
||||
{element: $listStatusbar, size: 16}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
})
|
||||
.bindEvent({
|
||||
resize: function() {
|
||||
$list.size();
|
||||
},
|
||||
}),
|
||||
|
||||
$itembar = Ox.Bar({size: 24}),
|
||||
$itemBar = Ox.Bar({size: 24}),
|
||||
|
||||
$itemMenu = Ox.MenuButton({
|
||||
items: isItemView ? [
|
||||
{id: 'open', title: '', keyboard: 'enter'},
|
||||
{id: 'open', title: '', keyboard: 'return'},
|
||||
{id: 'edit', title: ''},
|
||||
{id: 'remove', title: ''}
|
||||
] : [
|
||||
{id: 'open', title: '', keyboard: 'enter'},
|
||||
{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'
|
||||
tooltip: 'Options',
|
||||
type: 'image'
|
||||
})
|
||||
.css({float: 'left', margin: '4px'})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
|
||||
}
|
||||
}),
|
||||
|
||||
$selectButton = Ox.ButtonGroup({
|
||||
buttons: [
|
||||
{id: 'previous', title: 'left'},
|
||||
{id: 'next', title: 'right'}
|
||||
],
|
||||
type: 'image'
|
||||
})
|
||||
.css({float: 'right', margin: '4px 2px'})
|
||||
.appendTo($itembar)
|
||||
.bindEvent({
|
||||
click: function(data) {
|
||||
|
||||
}
|
||||
}),
|
||||
.appendTo($itemBar),
|
||||
|
||||
$deselectButton = Ox.Button({
|
||||
title: 'close',
|
||||
|
@ -284,10 +278,25 @@ pandora.ui.documentsPanel = function(options) {
|
|||
pandora.UI.set(
|
||||
'documentsSelection.' + (isItemView ? ui.item : ''),
|
||||
[]
|
||||
)
|
||||
);
|
||||
}
|
||||
})
|
||||
.appendTo($itembar),
|
||||
.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'}),
|
||||
|
||||
|
@ -295,16 +304,30 @@ pandora.ui.documentsPanel = function(options) {
|
|||
|
||||
$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: $itemBar, size: 24},
|
||||
{element: $item},
|
||||
{element: $itemStatusbar, size: 16}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
})
|
||||
.bindEvent({
|
||||
resize: function(data) {
|
||||
ui.sidebarSize = data.size;
|
||||
ui.documentSize = data.size;
|
||||
},
|
||||
resizeend: function(data) {
|
||||
// set to 0 so that UI.set registers a change of the value
|
||||
|
@ -326,8 +349,8 @@ pandora.ui.documentsPanel = function(options) {
|
|||
collapsed: !ui.showDocument,
|
||||
element: $itemPanel,
|
||||
size: ui.documentSize,
|
||||
resizable: isItemView,
|
||||
resize: isItemView ? [192, 256, 320, 384] : []
|
||||
resizable: true,
|
||||
resize: [192, 256, 320, 384]
|
||||
}
|
||||
],
|
||||
orientation: 'horizontal'
|
||||
|
@ -336,23 +359,21 @@ pandora.ui.documentsPanel = function(options) {
|
|||
pandora_documentssort: function(data) {
|
||||
updateSortElement();
|
||||
$list.options({sort: data.value});
|
||||
},
|
||||
pandora_documentsview: function(data) {
|
||||
$listPanel.replaceElement(1, $list = renderList());
|
||||
}
|
||||
});
|
||||
|
||||
that.bindEvent(
|
||||
'documentsSelection.' + (isItemView ? ui.item : ''),
|
||||
'pandora_documentsselection.' + (isItemView ? ui.item.toLowerCase() : ''),
|
||||
selectDocuments
|
||||
);
|
||||
|
||||
selectDocuments();
|
||||
|
||||
function addDocuments() {
|
||||
pandora.api.addDocument({
|
||||
item: ui.item,
|
||||
ids: $list.options('selected')
|
||||
}, function() {
|
||||
Ox.Request.clearCache();
|
||||
// ...
|
||||
$list.reloadList();
|
||||
});
|
||||
pandora.$ui.documentsDialog = pandora.ui.documentsDialog().open();
|
||||
}
|
||||
|
||||
function deleteDocuments() {
|
||||
|
@ -363,6 +384,10 @@ pandora.ui.documentsPanel = function(options) {
|
|||
}).open();
|
||||
}
|
||||
|
||||
function editDocuments() {
|
||||
pandora.$ui.documentsDialog = pandora.ui.documentsDialog().open();
|
||||
}
|
||||
|
||||
function getOrderButtonTitle() {
|
||||
return ui.documentsSort[0].operator == '+' ? 'up' : 'down';
|
||||
}
|
||||
|
@ -372,7 +397,7 @@ pandora.ui.documentsPanel = function(options) {
|
|||
}
|
||||
|
||||
function getPreviewSize() {
|
||||
var ratio = $list.value(selected[0], 'ratio'),
|
||||
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,
|
||||
|
@ -399,7 +424,7 @@ pandora.ui.documentsPanel = function(options) {
|
|||
}
|
||||
|
||||
function renderForm() {
|
||||
var item = $list.value(selected),
|
||||
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,
|
||||
|
@ -427,9 +452,9 @@ pandora.ui.documentsPanel = function(options) {
|
|||
id: 'dimensions',
|
||||
label: Ox._('Dimensions'),
|
||||
labelWidth: labelWidth,
|
||||
value: Ox.isArray(value)
|
||||
? Ox.formatDimensions(value, 'px')
|
||||
: Ox.formatCount(value, 'page'),
|
||||
value: Ox.isArray(item.dimensions)
|
||||
? Ox.formatDimensions(item.dimensions, 'px')
|
||||
: Ox.formatCount(item.dimensions, 'page'),
|
||||
width: inputWidth
|
||||
}),
|
||||
Ox.Input({
|
||||
|
@ -495,13 +520,13 @@ pandora.ui.documentsPanel = function(options) {
|
|||
function renderList() {
|
||||
var options = {
|
||||
items: pandora.api.findDocuments,
|
||||
keys: ['ratio'],
|
||||
keys: ['dimensions', 'extension', 'name', 'ratio', 'size'],
|
||||
query: {conditions: [], operator: '&'},
|
||||
selected: ui.documentsSelection[isItemView ? ui.item : ''],
|
||||
sort: ui.documentsSort.concat([
|
||||
{key: 'extension', operator: '+'},
|
||||
{key: 'filename', operator: '+'}
|
||||
{key: 'name', operator: '+'}
|
||||
]),
|
||||
sums: ['size'],
|
||||
unique: 'id'
|
||||
};
|
||||
return (ui.documentsView == 'list' ? Ox.TableList(Ox.extend(options, {
|
||||
|
@ -517,12 +542,12 @@ pandora.ui.documentsPanel = function(options) {
|
|||
)(data[infoKey]),
|
||||
size = size || 128;
|
||||
return {
|
||||
height: Math.round(data.ratio > 1 ? size / ratio : size),
|
||||
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 * ratio)
|
||||
width: Math.round(data.ratio > 1 ? size : size * data.ratio)
|
||||
};
|
||||
},
|
||||
size: 128
|
||||
|
@ -531,25 +556,27 @@ pandora.ui.documentsPanel = function(options) {
|
|||
add: uploadDocuments,
|
||||
'delete': deleteDocuments,
|
||||
init: function(data) {
|
||||
$status.html(
|
||||
Ox.print('INIT', data)
|
||||
$listStatus.html(
|
||||
Ox.toTitleCase(Ox.formatCount(data.items, 'document'))
|
||||
+ ', ' + Ox.formatValue(data.size, 'B')
|
||||
);
|
||||
},
|
||||
select: function() {
|
||||
select: function(data) {
|
||||
pandora.UI.set(
|
||||
'documentsSelection.' + (isItemView ? ui.item : ''),
|
||||
data.ids
|
||||
);
|
||||
},
|
||||
sort: function() {
|
||||
pandora.UI.set({documentsSort: data.sort});
|
||||
sort: function(data) {
|
||||
pandora.UI.set({documentsSort: [data]});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function renderPreview() {
|
||||
var size = getPreviewSize(),
|
||||
var selected = $list.options('selected')[0],
|
||||
size = getPreviewSize(),
|
||||
src = '/documents/' + selected + '/256p.jpg';
|
||||
return Ox.ImageElement({
|
||||
height: size.height,
|
||||
|
@ -557,11 +584,19 @@ pandora.ui.documentsPanel = function(options) {
|
|||
width: size.width
|
||||
})
|
||||
.css({
|
||||
borderRadius: '8px',
|
||||
margin: size.margin,
|
||||
borderRadius: '8px'
|
||||
cursor: 'pointer'
|
||||
})
|
||||
.on({
|
||||
click: function() {
|
||||
pandora.$ui.documentDialog = pandora.ui.documentDialog({
|
||||
index: 0,
|
||||
items: $list.options('selected').map(function(id) {
|
||||
return $list.value(id);
|
||||
})
|
||||
}).open();
|
||||
return;
|
||||
var item = $list.value(selected);
|
||||
window.open(
|
||||
'/documents/' + selected + '/' + item.name + '.' + item.extension,
|
||||
|
@ -572,20 +607,14 @@ pandora.ui.documentsPanel = function(options) {
|
|||
}
|
||||
|
||||
function selectDocuments() {
|
||||
var items = ui.documentSelection[isItemView ? ui.item : ''],
|
||||
string = items.length < 2 ? 'Document' : items.length + ' Documents';
|
||||
['open', 'edit', 'delete'].forEach(function(id) {
|
||||
$itemMenu[items.length ? 'enableItem' : 'disableItem']
|
||||
});
|
||||
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 + ' from this '
|
||||
+ pandora.site.itemName.singular
|
||||
));
|
||||
$itemMenu.setItemTitle('edit', Ox._('Edit ' + string + '...'))
|
||||
.setItemTitle('remove', Ox._('Remove ' + string));
|
||||
} else {
|
||||
$itemMenu.setItemTitle('addtoitem', Ox._(
|
||||
'Add ' + string + ' to Current '
|
||||
|
@ -596,10 +625,11 @@ pandora.ui.documentsPanel = function(options) {
|
|||
))
|
||||
.setItemTitle('delete', Ox._('Delete ' + string + '...'));
|
||||
}
|
||||
$selectButton(items.length ? 'show' : 'hide');
|
||||
$deselectButton(items.length ? 'show' : 'hide');
|
||||
$itemMenu[selected.length ? 'show' : 'hide']();
|
||||
$selectButton[selected.length > 1 ? 'show' : 'hide']();
|
||||
$deselectButton[selected.length ? 'show' : 'hide']();
|
||||
$item.empty();
|
||||
if (items.length) {
|
||||
if (selected.length) {
|
||||
$preview = renderPreview().appendTo($item);
|
||||
$form = renderForm().appendTo($item);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue