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

use Ox.EditableContent for info in documents item view

Browse source
This commit is contained in:
j 2014-01-16 14:12:51 +00:00
parent fdbd17fdc1
commit f52daaacbd
1 changed files with 160 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

265
static/js/documentsPanel.js
View file

@ -310,7 +310,7 @@ pandora.ui.documentsPanel = function(options) {
$preview, $preview,
$form, $data,
$itemStatusbar = Ox.Bar({size: 16}) $itemStatusbar = Ox.Bar({size: 16})
.css({textAlign: 'center'}), .css({textAlign: 'center'}),
@ -492,101 +492,162 @@ pandora.ui.documentsPanel = function(options) {
}); });
} }
function renderForm() { function renderData() {
var item = $list.value($list.options('selected')[0]), var $title, $description,
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, labelWidth = 80,
labelWidth = 80; width = ui.documentSize - 16 - Ox.UI.SCROLLBAR_SIZE;
return Ox.Form({ return isItemView
items: [ ? Ox.Element()
Ox.Input({ .append(
disabled: !editable, Ox.$('<div>').css({height: '16px'})
id: 'name', )
label: Ox._('Name'), .append(
labelWidth: labelWidth, $title = Ox.EditableContent({
value: item.name, editable: false,
width: inputWidth value: item.name,
}), width: width
Ox.Input({ })
disabled: true, .css({
id: 'extension', margin: '0 4px',
label: Ox._('Extension'), textAlign: 'center',
labelWidth: labelWidth, fontWeight: 'bold'
value: item.extension, })
width: inputWidth .bindEvent({
}), edit: function() {
Ox.Input({ $title.options({
disabled: true, width: that.width()
id: 'dimensions', });
label: Ox._('Dimensions'), },
labelWidth: labelWidth, submit: function() {
value: Ox.isArray(item.dimensions) // ...
? Ox.formatDimensions(item.dimensions, 'px') }
: Ox.formatCount(item.dimensions, 'page'), })
width: inputWidth )
}), .append(
Ox.Input({ Ox.$('<div>').css({height: '8px'})
disabled: true, )
id: 'size', .append(
label: Ox._('Size'), $description = Ox.EditableContent({
labelWidth: labelWidth, format: function(value) {
value: Ox.formatValue(item.size, 'B'), return '<div class="OxLight" style="text-align: center">'
width: inputWidth + value + '</div>';
}), },
Ox.Input({ height: width,
disabled: true, placeholder: 'No description',
id: 'matches', type: 'textarea',
label: Ox._('Matches'), value: item.description || '',
labelWidth: labelWidth, width: width
value: item.matches, })
width: inputWidth .css({
}), marginLeft: '8px',
Ox.Input({ textAlign: 'center'
disabled: true, })
id: 'username', .bindEvent({
label: Ox._('Username'), submit: function(data) {
labelWidth: labelWidth, pandora.api.editDocument({
value: item.user, description: data.value,
width: inputWidth id: item.id,
}), item: ui.item,
Ox.Input({ }, function(result) {
disabled: !editable, $description.options({value: result.data.description});
id: 'type', Ox.Request.clearCache('findDocuments');
label: Ox._('Type'), $list.reloadList();
labelWidth: labelWidth, });
value: item.type, }
width: inputWidth })
}), )
Ox.Input({ : Ox.Form({
disabled: !editable, items: [
height: 256, Ox.Input({
id: 'description', disabled: !editable,
placeholder: Ox._('Description'), id: 'name',
type: 'textarea', label: Ox._('Name'),
value: item.description, labelWidth: labelWidth,
width: inputWidth value: item.name,
}) width: width
], }),
width: 240 Ox.Input({
}) disabled: true,
.css({margin: '12px 8px 8px 8px'}) id: 'extension',
.bindEvent({ label: Ox._('Extension'),
change: function(event) { labelWidth: labelWidth,
var data = Ox.extend({id: item.id}, event.id, event.data.value); value: item.extension,
if (isItemView) { width: width
data.item = ui.item; }),
} Ox.Input({
pandora.api.editDocument(data, function(result) { disabled: true,
$list.value(result.data.id, event.id, result.data[event.id]); id: 'dimensions',
if (event.id == 'name') { label: Ox._('Dimensions'),
$list.value(item.id, 'id', result.data.id); 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',
label: Ox._('Username'),
labelWidth: labelWidth,
value: item.user,
width: width
}),
Ox.Input({
disabled: !editable,
id: 'type',
label: Ox._('Type'),
labelWidth: labelWidth,
value: item.type,
width: width
}),
Ox.Input({
disabled: !editable,
height: 256,
id: 'description',
placeholder: Ox._('Description'),
type: 'textarea',
value: item.description,
width: width
})
],
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;
} }
Ox.Request.clearCache('findDocuments'); pandora.api.editDocument(data, function(result) {
$list.reloadList(); $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() { function renderList() {
@ -678,14 +739,6 @@ pandora.ui.documentsPanel = function(options) {
}) })
.on({ .on({
click: openDocuments click: openDocuments
// FIXME
/*
var item = $list.value(selected);
window.open(
'/documents/' + selected + '/' + item.name + '.' + item.extension,
'_blank'
);
*/
}); });
} }
@ -698,9 +751,11 @@ pandora.ui.documentsPanel = function(options) {
}).css({ }).css({
margin: size.margin margin: size.margin
}); });
$form && $form.options('items').forEach(function($item) { if (!isItemView && $data) {
$item.options({width: width}); $data.options('items').forEach(function($item) {
}); $item.options({width: width});
});
}
} }
function selectDocuments() { function selectDocuments() {
@ -733,7 +788,7 @@ pandora.ui.documentsPanel = function(options) {
$item.empty(); $item.empty();
if (selected.length) { if (selected.length) {
$preview = renderPreview().appendTo($item); $preview = renderPreview().appendTo($item);
$form = renderForm().appendTo($item); $data = renderData().appendTo($item);
} }
$itemStatus.html( $itemStatus.html(
selected.length selected.length