forked from 0x2620/pandora
use Ox.EditableContent for info in documents item view
This commit is contained in:
parent
fdbd17fdc1
commit
f52daaacbd
1 changed files with 160 additions and 105 deletions
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue