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

update files dialog

Browse source
This commit is contained in:
rolux 2013-03-24 11:57:45 +00:00
parent ed3424f237
commit 1cd7c52ab6
1 changed files with 54 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
static/js/pandora/filesDialog.js
View file

@ -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'});
} }