0x2620/pandora
2
1
Fork 1
Code Issues 1.3k Pull requests Releases Wiki Activity

update documents panel and dialog

Browse source
This commit is contained in:
rolux 2014-01-07 11:38:19 +00:00
parent b4d2950ff6
commit 110d330030
2 changed files with 139 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
static/js/documentDialog.js
View file

@ -2,19 +2,21 @@
'use strict'; '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), var dialogHeight = Math.round((window.innerHeight - 48) * 0.9),
dialogWidth = Math.round(window.innerWidth * 0.9), dialogWidth = Math.round(window.innerWidth * 0.9),
documentHeight = dialogHeight - 24, items = options.items,
documentWidth = dialogWidth, item = items[options.index],
item = items[index],
$content = Ox.Element(), $content = Ox.Element(),
that = Ox.Dialog({ that = Ox.Dialog({
closeButton: true, closeButton: true,
content: $content, content: $content,
focus: false,
height: dialogHeight, height: dialogHeight,
maximizeButton: true, maximizeButton: true,
minHeight: 256, minHeight: 256,
@ -30,7 +32,7 @@ pandora.ui.documentDialog = function(items, index) {
}, },
resize: function(data) { resize: function(data) {
$content.options({ $content.options({
height: data.height - 24, height: data.height,
width: data.width width: data.width
}); });
}, },
@ -50,18 +52,24 @@ pandora.ui.documentDialog = function(items, index) {
], ],
type: 'image' type: 'image'
}) })
.css({float: 'right', margin: '4px'}) .css({
position: 'absolute',
right: '4px',
top: '4px'
})
.bindEvent({ .bindEvent({
click: function(data) { click: function(data) {
index = Ox.mod( options.index = Ox.mod(
index + (data.id == 'previous' ? -1 : 1), options.index + (data.id == 'previous' ? -1 : 1),
items.length items.length
); );
pandora.UI.set({document: items[index].id}); pandora.UI.set({document: items[options.index].id});
} }
}); });
$(that.find('.OxBar')[0]).append($selectButton); $(that.find('.OxBar')[0]).append($selectButton);
// fixme: why is this needed?
$(that.find('.OxContent')[0]).css({overflow: 'hidden'});
setContent(); setContent();
@ -71,13 +79,13 @@ pandora.ui.documentDialog = function(items, index) {
item.extension == 'pdf' item.extension == 'pdf'
? Ox.Element() ? Ox.Element()
: Ox.ImageViewer({ : Ox.ImageViewer({
height: documentHeight, height: dialogHeight,
imageHeight: item.dimensions[1], imageHeight: item.dimensions[1],
imagePreviewURL: '/documents/' + item.id + '/256p.jpg', imagePreviewURL: '/documents/' + item.id + '/256p.jpg',
imageURL: '/documents/' + item.id + '/' imageURL: '/documents/' + item.id + '/'
+ item.name + '.' + item.extension, + item.name + '.' + item.extension,
imageWidth: item.dimensions[0], imageWidth: item.dimensions[0],
width: documentWidth width: dialogWidth
}) })
) )
.bindEvent({ .bindEvent({

210
static/js/documentsPanel.js
View file

@ -5,18 +5,10 @@
pandora.ui.documentsPanel = function(options) { pandora.ui.documentsPanel = function(options) {
var ui = pandora.user.ui, var ui = pandora.user.ui,
hasItemView = false, hasItemView = false,
isItemView = false, isItemView = true,
columns = [ columns = [
{
id: 'type',
operator: '+',
title: Ox._('Type'),
visible: true,
width: 128
},
{ {
id: 'name', id: 'name',
operator: '+', operator: '+',
@ -58,6 +50,13 @@ pandora.ui.documentsPanel = function(options) {
visible: true, visible: true,
width: 64 width: 64
}, },
{
id: 'type',
operator: '+',
title: Ox._('Type'),
visible: true,
width: 128
},
{ {
id: 'description', id: 'description',
operator: '+', operator: '+',
@ -104,7 +103,7 @@ pandora.ui.documentsPanel = function(options) {
} }
], ],
$listbar = Ox.Bar({size: 24}), $listBar = Ox.Bar({size: 24}),
$addButton = Ox.Button({ $addButton = Ox.Button({
title: isItemView ? 'add' : 'upload', title: isItemView ? 'add' : 'upload',
@ -117,22 +116,23 @@ pandora.ui.documentsPanel = function(options) {
} }
}) })
.appendTo($listbar), .appendTo($listBar),
$viewSelect = Ox.Select({ $viewSelect = Ox.Select({
items: [ items: [
{id: 'list', title: Ox._('List')}, {id: 'list', title: Ox._('View as List')},
{id: 'grid', title: Ox._('Grid')} {id: 'grid', title: Ox._('View as Grid')}
], ],
width: 192 value: ui.documentsView,
width: 128
}) })
.css({float: 'left', margin: '4px 2px'}) .css({float: 'left', margin: '4px 2px'})
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {
pandora.UI.set({documentsView: data.id}); pandora.UI.set({documentsView: data.value});
} }
}) })
.appendTo($listbar), .appendTo($listBar),
$sortSelect = Ox.Select({ $sortSelect = Ox.Select({
items: columns.map(function(column) { items: columns.map(function(column) {
@ -141,7 +141,8 @@ pandora.ui.documentsPanel = function(options) {
title: Ox._('Sort by ' + column.title) title: Ox._('Sort by ' + column.title)
}; };
}), }),
width: 192 value: ui.documentsSort[0].key,
width: 128
}) })
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {
@ -173,7 +174,7 @@ pandora.ui.documentsPanel = function(options) {
float: 'right' float: 'right'
}) })
.css({float: 'left', margin: '4px 2px'}) .css({float: 'left', margin: '4px 2px'})
.appendTo($listbar), .appendTo($listBar),
$findSelect = Ox.Select({ $findSelect = Ox.Select({
items: isItemView ? [ items: isItemView ? [
@ -210,13 +211,13 @@ pandora.ui.documentsPanel = function(options) {
] ]
}) })
.css({float: 'right', margin: '4px 4px 4px 2px'}) .css({float: 'right', margin: '4px 4px 4px 2px'})
.appendTo($listbar), .appendTo($listBar),
$list = renderList(), $list = renderList(),
$statusbar = Ox.Bar({size: 16}), $listStatusbar = Ox.Bar({size: 16}).css({textAlign: 'center'}),
$status = Ox.Element() $listStatus = Ox.Element()
.css({ .css({
margin: '2px 4px', margin: '2px 4px',
fontSize: '9px', fontSize: '9px',
@ -224,54 +225,47 @@ pandora.ui.documentsPanel = function(options) {
textOverflow: 'ellipsis' textOverflow: 'ellipsis'
}) })
.html(Ox._('Loading...')) .html(Ox._('Loading...'))
.appendTo($statusbar), .appendTo($listStatusbar),
$listPanel = Ox.SplitPanel({ $listPanel = Ox.SplitPanel({
elements: [ elements: [
{element: $listbar, size: 24}, {element: $listBar, size: 24},
{element: $list}, {element: $list},
{element: $statusbar, size: 16} {element: $listStatusbar, size: 16}
], ],
orientation: 'vertical' orientation: 'vertical'
})
.bindEvent({
resize: function() {
$list.size();
},
}), }),
$itembar = Ox.Bar({size: 24}), $itemBar = Ox.Bar({size: 24}),
$itemMenu = Ox.MenuButton({ $itemMenu = Ox.MenuButton({
items: isItemView ? [ items: isItemView ? [
{id: 'open', title: '', keyboard: 'enter'}, {id: 'open', title: '', keyboard: 'return'},
{id: 'edit', title: ''}, {id: 'edit', title: ''},
{id: 'remove', title: ''} {id: 'remove', title: ''}
] : [ ] : [
{id: 'open', title: '', keyboard: 'enter'}, {id: 'open', title: '', keyboard: 'return'},
{id: 'addtoitem', title: ''}, {id: 'addtoitem', title: ''},
{id: 'addtolist', title: ''}, {id: 'addtolist', title: ''},
{id: 'replace', title: Ox._('Replace Document...')}, {id: 'replace', title: Ox._('Replace Document...')},
{id: 'delete', title: '', keyboard: 'delete'} {id: 'delete', title: '', keyboard: 'delete'}
], ],
title: 'set', title: 'set',
tooltip: 'Options' tooltip: 'Options',
type: 'image'
}) })
.css({float: 'left', margin: '4px'})
.bindEvent({ .bindEvent({
click: function() { click: function() {
} }
}),
$selectButton = Ox.ButtonGroup({
buttons: [
{id: 'previous', title: 'left'},
{id: 'next', title: 'right'}
],
type: 'image'
}) })
.css({float: 'right', margin: '4px 2px'}) .appendTo($itemBar),
.appendTo($itembar)
.bindEvent({
click: function(data) {
}
}),
$deselectButton = Ox.Button({ $deselectButton = Ox.Button({
title: 'close', title: 'close',
@ -284,10 +278,25 @@ pandora.ui.documentsPanel = function(options) {
pandora.UI.set( pandora.UI.set(
'documentsSelection.' + (isItemView ? ui.item : ''), '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'}), $item = Ox.Element().css({overflowY: 'scroll'}),
@ -295,16 +304,30 @@ pandora.ui.documentsPanel = function(options) {
$form, $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({ $itemPanel = Ox.SplitPanel({
elements: [ elements: [
{element: $itembar, size: 24}, {element: $itemBar, size: 24},
{element: $item} {element: $item},
{element: $itemStatusbar, size: 16}
], ],
orientation: 'vertical' orientation: 'vertical'
}) })
.bindEvent({ .bindEvent({
resize: function(data) { resize: function(data) {
ui.sidebarSize = data.size; ui.documentSize = data.size;
}, },
resizeend: function(data) { resizeend: function(data) {
// set to 0 so that UI.set registers a change of the value // 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, collapsed: !ui.showDocument,
element: $itemPanel, element: $itemPanel,
size: ui.documentSize, size: ui.documentSize,
resizable: isItemView, resizable: true,
resize: isItemView ? [192, 256, 320, 384] : [] resize: [192, 256, 320, 384]
} }
], ],
orientation: 'horizontal' orientation: 'horizontal'
@ -336,23 +359,21 @@ pandora.ui.documentsPanel = function(options) {
pandora_documentssort: function(data) { pandora_documentssort: function(data) {
updateSortElement(); updateSortElement();
$list.options({sort: data.value}); $list.options({sort: data.value});
},
pandora_documentsview: function(data) {
$listPanel.replaceElement(1, $list = renderList());
} }
}); });
that.bindEvent( that.bindEvent(
'documentsSelection.' + (isItemView ? ui.item : ''), 'pandora_documentsselection.' + (isItemView ? ui.item.toLowerCase() : ''),
selectDocuments selectDocuments
); );
selectDocuments();
function addDocuments() { function addDocuments() {
pandora.api.addDocument({ pandora.$ui.documentsDialog = pandora.ui.documentsDialog().open();
item: ui.item,
ids: $list.options('selected')
}, function() {
Ox.Request.clearCache();
// ...
$list.reloadList();
});
} }
function deleteDocuments() { function deleteDocuments() {
@ -363,6 +384,10 @@ pandora.ui.documentsPanel = function(options) {
}).open(); }).open();
} }
function editDocuments() {
pandora.$ui.documentsDialog = pandora.ui.documentsDialog().open();
}
function getOrderButtonTitle() { function getOrderButtonTitle() {
return ui.documentsSort[0].operator == '+' ? 'up' : 'down'; return ui.documentsSort[0].operator == '+' ? 'up' : 'down';
} }
@ -372,7 +397,7 @@ pandora.ui.documentsPanel = function(options) {
} }
function getPreviewSize() { 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, size = ui.documentSize - 16 - Ox.UI.SCROLLBAR_SIZE,
height = ratio > 1 ? size / ratio : size, height = ratio > 1 ? size / ratio : size,
width = ratio > 1 ? size : size * ratio, width = ratio > 1 ? size : size * ratio,
@ -399,7 +424,7 @@ pandora.ui.documentsPanel = function(options) {
} }
function renderForm() { function renderForm() {
var item = $list.value(selected), var item = $list.value($list.options('selected')[0]),
editable = item.user == pandora.user.username editable = item.user == pandora.user.username
|| pandora.site.capabilities.canEditDocuments[pandora.user.level], || pandora.site.capabilities.canEditDocuments[pandora.user.level],
inputWidth = ui.documentSize - 16 - Ox.UI.SCROLLBAR_SIZE, inputWidth = ui.documentSize - 16 - Ox.UI.SCROLLBAR_SIZE,
@ -427,9 +452,9 @@ pandora.ui.documentsPanel = function(options) {
id: 'dimensions', id: 'dimensions',
label: Ox._('Dimensions'), label: Ox._('Dimensions'),
labelWidth: labelWidth, labelWidth: labelWidth,
value: Ox.isArray(value) value: Ox.isArray(item.dimensions)
? Ox.formatDimensions(value, 'px') ? Ox.formatDimensions(item.dimensions, 'px')
: Ox.formatCount(value, 'page'), : Ox.formatCount(item.dimensions, 'page'),
width: inputWidth width: inputWidth
}), }),
Ox.Input({ Ox.Input({
@ -495,13 +520,13 @@ pandora.ui.documentsPanel = function(options) {
function renderList() { function renderList() {
var options = { var options = {
items: pandora.api.findDocuments, items: pandora.api.findDocuments,
keys: ['ratio'], keys: ['dimensions', 'extension', 'name', 'ratio', 'size'],
query: {conditions: [], operator: '&'}, query: {conditions: [], operator: '&'},
selected: ui.documentsSelection[isItemView ? ui.item : ''],
sort: ui.documentsSort.concat([ sort: ui.documentsSort.concat([
{key: 'extension', operator: '+'}, {key: 'extension', operator: '+'},
{key: 'filename', operator: '+'} {key: 'name', operator: '+'}
]), ]),
sums: ['size'],
unique: 'id' unique: 'id'
}; };
return (ui.documentsView == 'list' ? Ox.TableList(Ox.extend(options, { return (ui.documentsView == 'list' ? Ox.TableList(Ox.extend(options, {
@ -517,12 +542,12 @@ pandora.ui.documentsPanel = function(options) {
)(data[infoKey]), )(data[infoKey]),
size = size || 128; size = size || 128;
return { return {
height: Math.round(data.ratio > 1 ? size / ratio : size), height: Math.round(data.ratio > 1 ? size / data.ratio : size),
id: data.id, id: data.id,
info: info, info: info,
title: data.name, title: data.name,
url: '/documents/' + data.id + '/256p.jpg', 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 size: 128
@ -531,25 +556,27 @@ pandora.ui.documentsPanel = function(options) {
add: uploadDocuments, add: uploadDocuments,
'delete': deleteDocuments, 'delete': deleteDocuments,
init: function(data) { init: function(data) {
$status.html( Ox.print('INIT', data)
$listStatus.html(
Ox.toTitleCase(Ox.formatCount(data.items, 'document')) Ox.toTitleCase(Ox.formatCount(data.items, 'document'))
+ ', ' + Ox.formatValue(data.size, 'B') + ', ' + Ox.formatValue(data.size, 'B')
); );
}, },
select: function() { select: function(data) {
pandora.UI.set( pandora.UI.set(
'documentsSelection.' + (isItemView ? ui.item : ''), 'documentsSelection.' + (isItemView ? ui.item : ''),
data.ids data.ids
); );
}, },
sort: function() { sort: function(data) {
pandora.UI.set({documentsSort: data.sort}); pandora.UI.set({documentsSort: [data]});
} }
}); });
} }
function renderPreview() { function renderPreview() {
var size = getPreviewSize(), var selected = $list.options('selected')[0],
size = getPreviewSize(),
src = '/documents/' + selected + '/256p.jpg'; src = '/documents/' + selected + '/256p.jpg';
return Ox.ImageElement({ return Ox.ImageElement({
height: size.height, height: size.height,
@ -557,11 +584,19 @@ pandora.ui.documentsPanel = function(options) {
width: size.width width: size.width
}) })
.css({ .css({
borderRadius: '8px',
margin: size.margin, margin: size.margin,
borderRadius: '8px' cursor: 'pointer'
}) })
.on({ .on({
click: function() { 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); var item = $list.value(selected);
window.open( window.open(
'/documents/' + selected + '/' + item.name + '.' + item.extension, '/documents/' + selected + '/' + item.name + '.' + item.extension,
@ -572,20 +607,14 @@ pandora.ui.documentsPanel = function(options) {
} }
function selectDocuments() { function selectDocuments() {
var items = ui.documentSelection[isItemView ? ui.item : ''], var selected = ui.documentsSelection[isItemView ? ui.item : ''] || [],
string = items.length < 2 ? 'Document' : items.length + ' Documents'; string = selected.length < 2 ? 'Document'
['open', 'edit', 'delete'].forEach(function(id) { : selected.length + ' Documents';
$itemMenu[items.length ? 'enableItem' : 'disableItem'] $list.options({selected: selected});
});
$itemMenu.setItemTitle('open', Ox._('Open ' + string)); $itemMenu.setItemTitle('open', Ox._('Open ' + string));
if (isItemView) { if (isItemView) {
$itemMenu.setItemTitle( $itemMenu.setItemTitle('edit', Ox._('Edit ' + string + '...'))
'edit', Ox._('Edit ' + string + '...') .setItemTitle('remove', Ox._('Remove ' + string));
)
.setItemTitle('remove', Ox._(
'Remove ' + string + ' from this '
+ pandora.site.itemName.singular
));
} else { } else {
$itemMenu.setItemTitle('addtoitem', Ox._( $itemMenu.setItemTitle('addtoitem', Ox._(
'Add ' + string + ' to Current ' 'Add ' + string + ' to Current '
@ -596,10 +625,11 @@ pandora.ui.documentsPanel = function(options) {
)) ))
.setItemTitle('delete', Ox._('Delete ' + string + '...')); .setItemTitle('delete', Ox._('Delete ' + string + '...'));
} }
$selectButton(items.length ? 'show' : 'hide'); $itemMenu[selected.length ? 'show' : 'hide']();
$deselectButton(items.length ? 'show' : 'hide'); $selectButton[selected.length > 1 ? 'show' : 'hide']();
$deselectButton[selected.length ? 'show' : 'hide']();
$item.empty(); $item.empty();
if (items.length) { if (selected.length) {
$preview = renderPreview().appendTo($item); $preview = renderPreview().appendTo($item);
$form = renderForm().appendTo($item); $form = renderForm().appendTo($item);
} }