improvements for list item preview
This commit is contained in:
rolux
parent
c516cfb121
commit
ae9c823198
1 changed files with 61 additions and 36 deletions
|
|
@ -558,7 +558,7 @@ app.constructList = function(view) {
|
||||||
},
|
},
|
||||||
openpreview: function(event, data) {
|
openpreview: function(event, data) {
|
||||||
app.request('find', {
|
app.request('find', {
|
||||||
keys: ['director', 'id', 'posterHeight', 'posterWidth', 'posterURL', 'title'],
|
keys: ['director', 'id', 'poster', 'title'],
|
||||||
query: {
|
query: {
|
||||||
conditions: $.map(data.ids, function(id, i) {
|
conditions: $.map(data.ids, function(id, i) {
|
||||||
return {
|
return {
|
||||||
|
|
@ -570,48 +570,54 @@ app.constructList = function(view) {
|
||||||
operator: '|'
|
operator: '|'
|
||||||
}
|
}
|
||||||
}, function(result) {
|
}, function(result) {
|
||||||
var item = result.data.items[0],
|
var documentHeight = app.$document.height(),
|
||||||
|
item = result.data.items[0],
|
||||||
title = item.title + (item.director ? ' (' + item.director + ')' : ''),
|
title = item.title + (item.director ? ' (' + item.director + ')' : ''),
|
||||||
documentHeight = app.$document.height(),
|
dialogHeight = documentHeight - 100,
|
||||||
dialogHeight = documentHeight - 40,
|
dialogWidth;
|
||||||
dialogWidth = parseInt((dialogHeight - 48) * 0.75),
|
app.ui.previewRatio = item.poster.width / item.poster.height,
|
||||||
$image = $('<img>')
|
dialogWidth = parseInt((dialogHeight - 48) * app.ui.previewRatio);
|
||||||
.attr({
|
|
||||||
src: 'http://0xdb.org/' + item.id + '/poster.large.jpg'
|
|
||||||
})
|
|
||||||
.css({
|
|
||||||
height: (dialogHeight - 48) + 'px',
|
|
||||||
width: dialogWidth + 'px'
|
|
||||||
})
|
|
||||||
.load(function() {
|
|
||||||
var image = $image[0],
|
|
||||||
imageHeight = Math.min(image.height, documentHeight - 88),
|
|
||||||
imageWidth = parseInt(image.width * imageHeight / image.height);
|
|
||||||
app.$ui.previewDialog.options({
|
|
||||||
height: imageHeight + 48,
|
|
||||||
width: imageWidth
|
|
||||||
});
|
|
||||||
$image.css({
|
|
||||||
height: imageHeight + 'px',
|
|
||||||
width: imageWidth + 'px'
|
|
||||||
});
|
|
||||||
});
|
|
||||||
if ('previewDialog' in app.$ui) {
|
if ('previewDialog' in app.$ui) {
|
||||||
app.$ui.previewDialog.options({
|
app.$ui.previewDialog.options({
|
||||||
title: title
|
title: title
|
||||||
});
|
});
|
||||||
app.$ui.previewImage.animate({
|
app.$ui.previewImage.animate({
|
||||||
opacity: 0
|
opacity: 0
|
||||||
}, 250, function() {
|
}, 100, function() {
|
||||||
app.$ui.previewImage.replaceWith(
|
app.$ui.previewDialog.resize(dialogWidth, dialogHeight, function() {
|
||||||
$image.css({
|
app.$ui.previewImage
|
||||||
opacity: 0
|
.attr({
|
||||||
}).animate({
|
src: item.poster.url,
|
||||||
opacity: 1
|
})
|
||||||
}, 250));
|
.one('load', function() {
|
||||||
app.$ui.previewImage = $image;
|
app.$ui.previewImage
|
||||||
|
.css({
|
||||||
|
width: dialogWidth + 'px',
|
||||||
|
height: (dialogHeight - 48 - 2) + 'px', // fixme: why -2 ?
|
||||||
|
opacity: 0
|
||||||
|
})
|
||||||
|
.animate({
|
||||||
|
opacity: 1
|
||||||
|
}, 100);
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
Ox.print(app.$document.height(), dialogWidth, 'x', dialogHeight, dialogWidth / (dialogHeight - 48), item.poster.width, 'x', item.poster.height, item.poster.width / item.poster.height)
|
||||||
} else {
|
} else {
|
||||||
|
app.$ui.previewImage = $('<img>')
|
||||||
|
.attr({
|
||||||
|
src: item.poster.url
|
||||||
|
})
|
||||||
|
.css({
|
||||||
|
position: 'absolute',
|
||||||
|
width: dialogWidth + 'px',
|
||||||
|
height: (dialogHeight - 48 - 2) + 'px', // fixme: why -2 ?
|
||||||
|
left: 0,
|
||||||
|
top: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
margin: 'auto',
|
||||||
|
});
|
||||||
app.$ui.previewDialog = new Ox.Dialog({
|
app.$ui.previewDialog = new Ox.Dialog({
|
||||||
buttons: [
|
buttons: [
|
||||||
{
|
{
|
||||||
|
|
@ -624,13 +630,32 @@ app.constructList = function(view) {
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
height: dialogHeight,
|
height: dialogHeight,
|
||||||
|
id: 'previewDialog',
|
||||||
|
minHeight: app.ui.previewRatio >= 1 ? 128 / app.ui.previewRatio + 48 : 176,
|
||||||
|
minWidth: app.ui.previewRatio >= 1 ? 128 : 176 * app.ui.previewRatio,
|
||||||
padding: 0,
|
padding: 0,
|
||||||
title: title,
|
title: title,
|
||||||
width: dialogWidth
|
width: dialogWidth
|
||||||
})
|
})
|
||||||
.append($image)
|
.append(app.$ui.previewImage)
|
||||||
|
.bindEvent('resize', function(event, data) {
|
||||||
|
var dialogRatio = data.width / (data.height - 48),
|
||||||
|
height, width;
|
||||||
|
if (dialogRatio < app.ui.previewRatio) {
|
||||||
|
width = data.width;
|
||||||
|
height = width / app.ui.previewRatio;
|
||||||
|
} else {
|
||||||
|
height = (data.height - 48 - 2);
|
||||||
|
width = height * app.ui.previewRatio;
|
||||||
|
}
|
||||||
|
app.$ui.previewImage.css({
|
||||||
|
width: width + 'px',
|
||||||
|
height: height + 'px', // fixme: why -2 ?
|
||||||
|
})
|
||||||
|
})
|
||||||
.open();
|
.open();
|
||||||
app.$ui.previewImage = $image;
|
//app.$ui.previewImage = $image;
|
||||||
|
//Ox.print(app.$document.height(), dialogWidth, 'x', dialogHeight, dialogWidth / (dialogHeight - 48), item.poster.width, 'x', item.poster.height, item.poster.width / item.poster.height)
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue