forked from 0x2620/pandora
update files dialog
This commit is contained in:
parent
ed3424f237
commit
1cd7c52ab6
1 changed files with 54 additions and 40 deletions
|
@ -7,6 +7,7 @@ pandora.ui.filesDialog = 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 = 256,
|
itemWidth = 256,
|
||||||
|
selected = null,
|
||||||
|
|
||||||
$findSelect = Ox.Select({
|
$findSelect = Ox.Select({
|
||||||
items: [
|
items: [
|
||||||
|
@ -131,7 +132,8 @@ pandora.ui.filesDialog = function() {
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
select: function(data) {
|
select: function(data) {
|
||||||
selectFile(data.ids[0]);
|
selected = data.ids[0];
|
||||||
|
selectFile();
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
|
|
||||||
|
@ -268,21 +270,28 @@ pandora.ui.filesDialog = function() {
|
||||||
}).open();
|
}).open();
|
||||||
}
|
}
|
||||||
|
|
||||||
function getFormItemById(id) {
|
function getPreviewSize() {
|
||||||
var ret;
|
var left = 0,
|
||||||
Ox.forEach((
|
ratio = $list.value(selected, 'ratio'),
|
||||||
$formButton.value() == 'edit' ? $editForm : $mailForm
|
width = itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE,
|
||||||
).options('items'), function($item) {
|
height = Math.round(width / ratio);
|
||||||
if ($item.options('id') == id) {
|
if (height > 256) {
|
||||||
ret = $item;
|
height = 256;
|
||||||
return false;
|
width = Math.round(height * ratio);
|
||||||
}
|
left = Math.floor((itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE - width) / 2);
|
||||||
});
|
}
|
||||||
return ret;
|
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(id) {
|
function renderForm() {
|
||||||
var file = $list.value(id),
|
var file = $list.value(selected),
|
||||||
editable = file.user == pandora.user.username
|
editable = file.user == pandora.user.username
|
||||||
|| pandora.site.capabilities.canEditFiles[pandora.user.level];
|
|| pandora.site.capabilities.canEditFiles[pandora.user.level];
|
||||||
return Ox.Form({
|
return Ox.Form({
|
||||||
|
@ -321,7 +330,7 @@ pandora.ui.filesDialog = function() {
|
||||||
}),
|
}),
|
||||||
Ox.Input({
|
Ox.Input({
|
||||||
disabled: !editable,
|
disabled: !editable,
|
||||||
height: dialogHeight - 184,
|
height: 256,
|
||||||
id: 'description',
|
id: 'description',
|
||||||
placeholder: 'Description',
|
placeholder: 'Description',
|
||||||
type: 'textarea',
|
type: 'textarea',
|
||||||
|
@ -346,55 +355,60 @@ pandora.ui.filesDialog = function() {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderPreview(id) {
|
function renderPreview() {
|
||||||
var isImage = Ox.contains(['jpg', 'png'], id.split('.').pop()),
|
var isImage = Ox.contains(['jpg', 'png'], selected.split('.').pop()),
|
||||||
src = '/files/' + id + (isImage ? '' : '.jpg'),
|
size = getPreviewSize(),
|
||||||
width = itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE,
|
src = '/files/' + selected + (isImage ? '' : '.jpg');
|
||||||
height = Math.round(width / $list.value(id, 'ratio'))
|
|
||||||
return Ox.ImageElement({
|
return Ox.ImageElement({
|
||||||
height: height,
|
height: size.height,
|
||||||
src: src,
|
src: src,
|
||||||
width: width
|
width: size.width
|
||||||
})
|
})
|
||||||
.css({
|
.css({
|
||||||
margin: '4px',
|
margin: size.margin,
|
||||||
borderRadius: '8px'
|
borderRadius: '8px'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function selectFile(id) {
|
function selectFile() {
|
||||||
var file = $list.value(id),
|
var file = $list.value(selected),
|
||||||
editable = file.user == pandora.user.username
|
editable = file.user == pandora.user.username
|
||||||
|| pandora.site.capabilities.canEditFiles[pandora.user.level];
|
|| pandora.site.capabilities.canEditFiles[pandora.user.level];
|
||||||
setLabel(id);
|
setLabel();
|
||||||
$item.empty();
|
$item.empty();
|
||||||
if (id) {
|
if (selected) {
|
||||||
$preview = renderPreview(id).appendTo($item);
|
$preview = renderPreview().appendTo($item);
|
||||||
$form = renderForm(id).appendTo($item);
|
$form = renderForm().appendTo($item);
|
||||||
$deleteButton.options({disabled: !editable}).show();
|
$deleteButton.options({disabled: !editable}).show();
|
||||||
} else {
|
} else {
|
||||||
$deleteButton.hide();
|
$deleteButton.hide();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function setLabel(id) {
|
function setLabel() {
|
||||||
$itemLabel.options({
|
$itemLabel.options({
|
||||||
title: id
|
title: selected
|
||||||
? id.split(':').slice(1).join(':')
|
? selected.split(':').slice(1).join(':')
|
||||||
: 'No file selected'
|
: 'No file selected'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function setWidth() {
|
function setWidth() {
|
||||||
|
var size;
|
||||||
itemWidth = $content.size(1);
|
itemWidth = $content.size(1);
|
||||||
$itemLabel.options({width: itemWidth - 8});
|
$itemLabel.options({width: itemWidth - 8});
|
||||||
$preview && $preview.css({
|
if (selected) {
|
||||||
maxWidth: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE,
|
size = getPreviewSize(),
|
||||||
maxHeight: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE
|
$preview.options({
|
||||||
});
|
height: size.height,
|
||||||
$form && $form.options('items').forEach(function($item) {
|
width: size.width
|
||||||
$item.options({width: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE});
|
}).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'});
|
$status.css({right: itemWidth + 128 + 'px'});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue