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

use documentsPanel in documentsDialog

Browse source
This commit is contained in:
j 2014-01-09 08:06:01 +00:00
parent 3ff178ed83
commit c5e7154374
3 changed files with 70 additions and 524 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

527
static/js/documentsDialog.js
View file

@ -6,230 +6,7 @@ pandora.ui.documentsDialog = function() {
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),
itemWidth = 272 + Ox.UI.SCROLLBAR_SIZE,
selected = null,
$reloadButton = Ox.Button({
disabled: true,
title: 'redo',
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();
}
}),
$findSelect = Ox.Select({
items: [
{id: 'all', title: Ox._('Find: All')},
{id: 'user', title: Ox._('Find: Username')},
{id: 'file', title: Ox._('Find: Filename')}
],
overlap: 'right',
type: 'image'
})
.bindEvent({
change: function(data) {
$findInput.value() && updateList();
$findInput.options({placeholder: data.title});
}
}),
$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'}),
$list = Ox.TableList({
columns: [
{
id: 'user',
operator: '+',
title: Ox._('Username'),
visible: true,
width: 128
},
{
align: 'right',
id: 'name',
operator: '+',
title: Ox._('Filename'),
visible: true,
width: 256
},
{
id: 'extension',
operator: '+',
title: Ox._('Extension'),
visible: true,
width: 64
},
{
align: 'right',
format: function(value) {
return Ox.formatValue(value, 'B');
},
id: 'size',
operator: '-',
title: Ox._('Size'),
visible: true,
width: 64
},
{
align: 'right',
id: 'matches',
operator: '-',
title: Ox._('Matches'),
visible: true,
width: 64
},
{
id: 'description',
operator: '+',
title: Ox._('Description'),
visible: true,
width: 256
},
{
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
}
],
columnsVisible: true,
items: pandora.api.findDocuments,
keys: ['ratio'],
query: {conditions: [], operator: '&'},
scrollbarVisible: true,
sort: [{key: 'user', operator: '+'}],
unique: 'id'
})
.bindEvent({
'delete': deleteDocuments,
init: function(data) {
$status.html(
Ox.toTitleCase(Ox.formatCount(data.items, 'document'))
);
},
load: function() {
$reloadButton.options({disabled: false});
},
select: function(data) {
selected = data.ids[0];
$addButton.options({disabled: data.ids.length == 0});
selectFile();
}
}),
$embedButton = Ox.Button({
title: 'embed',
tooltip: Ox._('Embed'),
type: 'image'
})
.css({
float: 'left',
margin: '4px 2px 4px 4px'
})
.bindEvent({
click: function() {
pandora.ui.embedDocumentDialog(
$list.options('selected')[0]
).open();
}
}),
$closeButton = Ox.Button({
title: 'close',
tooltip: Ox._('Close'),
type: 'image'
})
.css({
float: 'left',
margin: '4px 4px 4px 2px'
})
.bindEvent({
click: function() {
$list.options({selected: []});
}
}),
$item = Ox.Element().css({overflowY: 'scroll'}),
$preview,
$form,
$itemToolbar = Ox.Bar({size: 24}),
$deleteButton = Ox.Button({
title: Ox._('Delete Document...'),
width: 128
})
.css({float: 'left', margin: '4px'})
.hide()
.bindEvent({
click: deleteDocuments
})
.appendTo($itemToolbar),
$addButton = Ox.Button({
disabled: true,
id: 'add',
title: Ox._('Add'),
width: 48
}).bindEvent({
click: addDocuments
}),
$doneButton = Ox.Button({ $doneButton = Ox.Button({
id: 'done', id: 'done',
title: Ox._('Done'), title: Ox._('Done'),
@ -240,80 +17,13 @@ pandora.ui.documentsDialog = function() {
} }
}), }),
$uploadButton = Ox.FileButton({ // reference in pandora.$ui needed to receive pandora_ events
title: Ox._('Upload Documents...'), $content = pandora.$ui.documentsDialogPanel = pandora.ui.documentsPanel({
width: 128 isItemView: false
})
.css({float: 'right', margin: '4px'})
.bindEvent({
click: uploadDocuments
})
.appendTo($itemToolbar),
$content = Ox.SplitPanel({
elements: [
{
element: Ox.SplitPanel({
elements: [
{
element: Ox.Bar({size: 24})
.append($reloadButton)
.append($userCheckbox)
.append($findElement),
size: 24
},
{
element: $list
}
],
orientation: 'vertical'
})
},
{
element: Ox.SplitPanel({
elements: [
{
element: Ox.Bar({size: 24})
.append($itemLabel),
size: 24
},
{
element: $item
},
{
element: $itemToolbar,
size: 24
}
],
orientation: 'vertical'
})
.bindEvent({
resize: setWidth
}),
resizable: true,
resize: [
272 + Ox.UI.SCROLLBAR_SIZE,
400 + Ox.UI.SCROLLBAR_SIZE,
528 + Ox.UI.SCROLLBAR_SIZE
],
size: 272 + Ox.UI.SCROLLBAR_SIZE
}
],
orientation: 'horizontal'
}), }),
$itemLabel = Ox.Label({
textAlign: 'center',
title: Ox._('No document selected'),
width: getLabelWidth()
})
.css({
float: 'left',
margin: '4px'
}),
that = Ox.Dialog({ that = Ox.Dialog({
buttons: pandora.user.ui.item ? [$addButton, $doneButton] : [$doneButton], buttons: [$doneButton],
closeButton: true, closeButton: true,
content: $content, content: $content,
height: dialogHeight, height: dialogHeight,
@ -324,31 +34,12 @@ pandora.ui.documentsDialog = function() {
removeOnClose: true, removeOnClose: true,
title: Ox._('Manage Documents'), title: Ox._('Manage Documents'),
width: dialogWidth 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');
that.superClose();
};
function addDocuments() { function addDocuments() {
pandora.api.addDocument({ pandora.api.addDocument({
item: pandora.user.ui.item, item: pandora.user.ui.item,
ids: $list.options('selected') ids: pandora.user.ui.documentsSelection['']
}, function() { }, function() {
Ox.Request.clearCache(); Ox.Request.clearCache();
if (pandora.user.ui.itemView == 'documents') { if (pandora.user.ui.itemView == 'documents') {
@ -360,207 +51,11 @@ pandora.ui.documentsDialog = function() {
}); });
} }
function deleteDocuments() { that.superClose = that.close;
pandora.ui.deleteDocumentDialog($list.options('selected'), function() { that.close = function() {
Ox.Request.clearCache(pandora.user.ui.item ? void 0 : 'findDocuments'); Ox.Request.clearCache('findDocuments');
$list.reloadList(); that.superClose();
}).open(); };
}
function getLabelWidth() {
return $content.size(1) - (selected ? 48 : 8);
}
function getPreviewSize() {
var ratio = $list.value(selected, 'ratio'),
height = ratio < 1 ? 256 : 256 / ratio,
width = ratio >= 1 ? 256 : 256 * ratio,
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
};
}
function renderForm() {
var file = $list.value(selected),
editable = file.user == pandora.user.username
|| pandora.site.capabilities.canEditMedia[pandora.user.level];
return Ox.Form({
items: [
Ox.Input({
disabled: true,
id: 'username',
label: Ox._('Username'),
labelWidth: 80,
value: file.user,
width: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE
}),
Ox.Input({
disabled: !editable,
id: 'name',
label: Ox._('Filename'),
labelWidth: 80,
value: file.name,
width: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE
}),
Ox.Input({
disabled: true,
id: 'extension',
label: Ox._('Extension'),
labelWidth: 80,
value: file.extension,
width: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE
}),
Ox.Input({
disabled: true,
id: 'size',
label: Ox._('Size'),
labelWidth: 80,
value: Ox.formatValue(file.size, 'B'),
width: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE
}),
Ox.Input({
disabled: true,
id: 'matches',
label: Ox._('Matches'),
labelWidth: 80,
value: file.matches,
width: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE
}),
Ox.Input({
disabled: !editable,
height: 256,
id: 'description',
placeholder: Ox._('Description'),
type: 'textarea',
value: file.description,
width: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE
})
],
width: 240
})
.css({margin: '12px 8px 8px 8px'})
.bindEvent({
change: function(event) {
var data = Ox.extend({id: file.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(file.id, 'id', result.data.id);
}
Ox.Request.clearCache('findDocuments');
$list.reloadList();
});
}
});
}
function renderPreview() {
var size = getPreviewSize(),
src = '/documents/' + selected + '/256p.jpg';
return Ox.ImageElement({
height: size.height,
src: src,
width: size.width
})
.css({
margin: size.margin,
borderRadius: '8px'
})
.on({
click: function() {
var info = $list.value(selected),
url = '/documents/' + selected + '/' + info.name + '.' + info.extension;
window.open(url, '_blank');
}
});
}
function selectFile() {
var file = $list.value(selected),
editable = file.user == pandora.user.username
|| pandora.site.capabilities.canEditMedia[pandora.user.level];
$embedButton[selected ? 'show' : 'hide']();
$closeButton[selected ? 'show' : 'hide']();
setLabel();
$item.empty();
if (selected) {
$preview = renderPreview().appendTo($item);
$form = renderForm().appendTo($item);
$deleteButton.options({disabled: !editable}).show();
} else {
$deleteButton.hide();
}
}
function setLabel() {
$itemLabel.options({
title: selected
? selected.split(':').slice(1).join(':')
: Ox._('No document selected'),
width: getLabelWidth()
});
}
function setWidth() {
var size;
$itemLabel.options({width: getLabelWidth()});
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});
});
}
$status.css({right: itemWidth + 128 + 'px'});
}
function updateList() {
var user = $userCheckbox.value(),
key = $findSelect.value(),
value = $findInput.value(),
query = {
conditions: value
? [].concat(
key != 'name' ? [{key: 'user', value: value, operator: '='}] : [],
key != 'user' ? [{key: 'name', value: value, operator: '='}] : []
)
: [],
operator: '|'
};
$list.options({query: user ? {
conditions: [
{key: 'user', value: pandora.user.username, operator: '='},
query
],
operator: '&'
} : query});
}
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]});
// selectFile(file.id);
}
});
$list.reloadList();
}
}).open();
}
return that; return that;

63
static/js/documentsPanel.js
View file

@ -6,7 +6,7 @@ pandora.ui.documentsPanel = function(options) {
var ui = pandora.user.ui, var ui = pandora.user.ui,
hasItemView = false, hasItemView = false,
isItemView = true, isItemView = options.isItemView,
columns = [ columns = [
{ {
@ -105,18 +105,23 @@ pandora.ui.documentsPanel = function(options) {
$listBar = Ox.Bar({size: 24}), $listBar = Ox.Bar({size: 24}),
$addButton = Ox.Button({ $addButton = (isItemView ? Ox.Button({
title: isItemView ? 'add' : 'upload', title: 'add',
tooltip: Ox._(isItemView ? 'Add Documents...' : 'Upload Documents...'), tooltip: Ox._('Add Documents...'),
type: 'image'
}) : Ox.FileButton({
image: 'upload',
tooltip: Ox._('Upload Documents...'),
type: 'image' type: 'image'
}) })
)
.css({float: 'left', margin: '4px 2px 4px 4px'}) .css({float: 'left', margin: '4px 2px 4px 4px'})
.bindEvent({ .bindEvent({
click: function() { click: function(data) {
if (isItemView) { if (isItemView) {
editDocuments(); editDocuments();
} else { } else {
uploadDocuments(data);
} }
} }
}) })
@ -266,10 +271,17 @@ pandora.ui.documentsPanel = function(options) {
.css({float: 'left', margin: '4px'}) .css({float: 'left', margin: '4px'})
.bindEvent({ .bindEvent({
click: function(data) { click: function(data) {
if (data.id == 'open') { if (data.id == 'addtoitem') {
addToItem();
} else if (data.id == 'addtolist') {
addToList();
} else if (data.id == 'open') {
openDocuments(); openDocuments();
} else if (data.id == 'edit') { } else if (data.id == 'edit') {
editDocuments(); editDocuments();
} else if (data.id == 'replace') {
console.log('replace', data);
replaceDocument(data.files);
} else if (data.id == 'remove') { } else if (data.id == 'remove') {
removeDocuments(); removeDocuments();
} else if (data.id == 'delete') { } else if (data.id == 'delete') {
@ -339,11 +351,14 @@ pandora.ui.documentsPanel = function(options) {
.bindEvent({ .bindEvent({
resize: function(data) { resize: function(data) {
ui.documentSize = data.size; ui.documentSize = data.size;
//fixme: resize preview panel
}, },
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
ui.documentSize = 0; ui.documentSize = 0;
pandora.UI.set({documentSize: data.size}); pandora.UI.set({documentSize: data.size});
//fixme: resize preview panel instead
selectDocuments();
}, },
toggle: function(data) { toggle: function(data) {
pandora.UI.set({showDocument: !data.collapsed}); pandora.UI.set({showDocument: !data.collapsed});
@ -390,6 +405,36 @@ pandora.ui.documentsPanel = function(options) {
pandora.$ui.documentsDialog = pandora.ui.documentsDialog().open(); pandora.$ui.documentsDialog = pandora.ui.documentsDialog().open();
} }
function addToItem() {
pandora.api.addDocument({
item: ui.item,
ids: ui.documentsSelection['']
}, function() {
Ox.Request.clearCache();
if (ui.itemView == 'documents') {
//fixme just upload list here
//self.$documentsList.reloadList();
pandora.$ui.contentPanel.replaceElement(1,
pandora.$ui.item = pandora.ui.item());
}
});
}
function addToList() {
pandora.api.addDocument({
list: ui._list,
ids: ui.documentsSelection['']
}, function() {
Ox.Request.clearCache();
if (ui.item && ui.itemView == 'documents') {
//fixme just upload list here
//self.$documentsList.reloadList();
pandora.$ui.contentPanel.replaceElement(1,
pandora.$ui.item = pandora.ui.item());
}
});
}
function closeDocuments() { function closeDocuments() {
if (pandora.$ui.documentDialog) { if (pandora.$ui.documentDialog) {
pandora.$ui.documentDialog.close(); pandora.$ui.documentDialog.close();
@ -457,6 +502,10 @@ pandora.ui.documentsPanel = function(options) {
} }
} }
function replaceDocument(file) {
var id = $list.options('selected')[0];
}
function removeDocuments() { function removeDocuments() {
pandora.api.removeDocument({ pandora.api.removeDocument({
item: ui.item, item: ui.item,

4
static/js/documentsView.js
View file

@ -4,7 +4,9 @@
pandora.ui.documentsView = function(options, self) { pandora.ui.documentsView = function(options, self) {
var that = pandora.ui.documentsPanel(); var that = pandora.ui.documentsPanel({
isItemView: true
});
return that; return that;
var self = self || {}, var self = self || {},