use new dialog for list preview
This commit is contained in:
rlx
parent
63a4aac9fd
commit
f7f9071cf1
1 changed files with 59 additions and 88 deletions
|
|
@ -1,7 +1,8 @@
|
||||||
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
||||||
|
|
||||||
pandora.ui.list = function(view) { // fixme: remove view argument
|
pandora.ui.list = function(view) { // fixme: remove view argument
|
||||||
var that, $map;
|
var that, $map,
|
||||||
|
preview = false;
|
||||||
//Ox.print('constructList', view);
|
//Ox.print('constructList', view);
|
||||||
if (view == 'list') {
|
if (view == 'list') {
|
||||||
/*
|
/*
|
||||||
|
|
@ -297,7 +298,8 @@ pandora.ui.list = function(view) { // fixme: remove view argument
|
||||||
}).bindEvent({
|
}).bindEvent({
|
||||||
closepreview: function(event, data) {
|
closepreview: function(event, data) {
|
||||||
pandora.$ui.previewDialog.close();
|
pandora.$ui.previewDialog.close();
|
||||||
delete pandora.$ui.previewDialog;
|
preview = false;
|
||||||
|
//delete pandora.$ui.previewDialog;
|
||||||
},
|
},
|
||||||
copy: function(event, data) {
|
copy: function(event, data) {
|
||||||
Ox.Clipboard.copy({
|
Ox.Clipboard.copy({
|
||||||
|
|
@ -341,94 +343,63 @@ pandora.ui.list = function(view) { // fixme: remove view argument
|
||||||
operator: '|'
|
operator: '|'
|
||||||
}
|
}
|
||||||
}, function(result) {
|
}, function(result) {
|
||||||
var documentHeight = pandora.$ui.document.height(),
|
Ox.print('-- preview item', result.data.items[0])
|
||||||
item = result.data.items[0],
|
var item = result.data.items[0],
|
||||||
title = item.title + (item.director ? ' (' + item.director + ')' : ''),
|
title = item.title + ' (' + item.director + ')'
|
||||||
dialogHeight = documentHeight - 48,
|
ratio = item.poster.width / item.poster.height,
|
||||||
dialogWidth;
|
windowWidth = window.innerWidth * 0.8,
|
||||||
pandora.site.previewRatio = item.poster.width / item.poster.height,
|
windowHeight = window.innerHeight * 0.8,
|
||||||
dialogWidth = Math.round((dialogHeight - 48) * pandora.site.previewRatio);
|
windowRatio = windowWidth / windowHeight,
|
||||||
if ('previewDialog' in pandora.$ui) {
|
width = Math.round(ratio > windowRatio ? windowWidth : windowHeight * ratio),
|
||||||
pandora.$ui.previewDialog.options({
|
height = Math.round(ratio < windowRatio ? windowHeight : windowWidth / ratio);
|
||||||
title: title
|
|
||||||
});
|
|
||||||
pandora.$ui.previewImage.animate({
|
|
||||||
opacity: 0
|
|
||||||
}, 100, function() {
|
|
||||||
pandora.$ui.previewDialog.size(dialogWidth, dialogHeight, function() {
|
|
||||||
pandora.$ui.previewImage
|
|
||||||
.attr({
|
|
||||||
src: item.poster.url
|
|
||||||
})
|
|
||||||
.one('load', function() {
|
|
||||||
pandora.$ui.previewImage
|
|
||||||
.css({
|
|
||||||
width: dialogWidth + 'px',
|
|
||||||
height: (dialogHeight - 48) + 'px', // fixme: why -2 ?
|
|
||||||
opacity: 0
|
|
||||||
})
|
|
||||||
.animate({
|
|
||||||
opacity: 1
|
|
||||||
}, 100);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
//Ox.print(pandora.$ui.document.height(), dialogWidth, 'x', dialogHeight, dialogWidth / (dialogHeight - 48), item.poster.width, 'x', item.poster.height, item.poster.width / item.poster.height)
|
|
||||||
} else {
|
|
||||||
pandora.$ui.previewImage = $('<img>')
|
pandora.$ui.previewImage = $('<img>')
|
||||||
.attr({
|
.attr({src: item.poster.url.replace('.jpg', '128.jpg')})
|
||||||
src: item.poster.url
|
.css({width: width + 'px', height: height + 'px'})
|
||||||
|
$('<img>').load(function() {
|
||||||
|
pandora.$ui.previewImage.attr({src: $(this).attr('src')});
|
||||||
})
|
})
|
||||||
.css({
|
.attr({src: item.poster.url.replace('.jpg', '1024.jpg')});
|
||||||
position: 'absolute',
|
if (!preview) {
|
||||||
width: dialogWidth + 'px',
|
if (!pandora.$ui.previewDialog) {
|
||||||
height: (dialogHeight - 48) + 'px', // fixme: why -2 ?
|
|
||||||
left: 0,
|
|
||||||
top: 0,
|
|
||||||
right: 0,
|
|
||||||
bottom: 0,
|
|
||||||
margin: 'auto',
|
|
||||||
});
|
|
||||||
pandora.$ui.previewDialog = Ox.Dialog({
|
pandora.$ui.previewDialog = Ox.Dialog({
|
||||||
buttons: [
|
closeButton: true,
|
||||||
Ox.Button({
|
|
||||||
title: 'Close',
|
|
||||||
}).bindEvent({
|
|
||||||
click: function() {
|
|
||||||
pandora.$ui.previewDialog.close();
|
|
||||||
delete pandora.$ui.previewDialog;
|
|
||||||
pandora.$ui.list.closePreview();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
],
|
|
||||||
content: pandora.$ui.previewImage,
|
content: pandora.$ui.previewImage,
|
||||||
|
fixedRatio: true,
|
||||||
focus: false,
|
focus: false,
|
||||||
height: dialogHeight,
|
height: height,
|
||||||
id: 'previewDialog',
|
maximizeButton: true,
|
||||||
minHeight: pandora.site.previewRatio >= 1 ? Math.round(128 / pandora.site.previewRatio) + 48 : 176,
|
|
||||||
minWidth: pandora.site.previewRatio >= 1 ? 128 : Math.round(176 * pandora.site.previewRatio),
|
|
||||||
padding: 0,
|
|
||||||
title: title,
|
title: title,
|
||||||
width: dialogWidth
|
width: width
|
||||||
})
|
})
|
||||||
.bindEvent('resize', function(event, data) {
|
.bindEvent({
|
||||||
var dialogRatio = data.width / (data.height - 48),
|
close: function() {
|
||||||
height, width;
|
that.closePreview();
|
||||||
if (dialogRatio < pandora.site.previewRatio) {
|
preview = false;
|
||||||
width = data.width;
|
},
|
||||||
height = Math.round(width / pandora.site.previewRatio);
|
resize: function(event) {
|
||||||
} else {
|
|
||||||
height = (data.height - 48);
|
|
||||||
width = Math.round(height * pandora.site.previewRatio);
|
|
||||||
}
|
|
||||||
pandora.$ui.previewImage.css({
|
pandora.$ui.previewImage.css({
|
||||||
width: width + 'px',
|
width: event.width + 'px',
|
||||||
height: height + 'px', // fixme: why -2 ?
|
height: event.height + 'px'
|
||||||
})
|
});
|
||||||
|
}
|
||||||
})
|
})
|
||||||
.open();
|
.open();
|
||||||
//pandora.$ui.previewImage = $image;
|
} else {
|
||||||
//Ox.print(pandora.$document.height(), dialogWidth, 'x', dialogHeight, dialogWidth / (dialogHeight - 48), item.poster.width, 'x', item.poster.height, item.poster.width / item.poster.height)
|
pandora.$ui.previewDialog.options({
|
||||||
|
content: pandora.$ui.previewImage,
|
||||||
|
height: height,
|
||||||
|
title: title,
|
||||||
|
width: width
|
||||||
|
})
|
||||||
|
.open();
|
||||||
|
}
|
||||||
|
preview = true;
|
||||||
|
} else {
|
||||||
|
pandora.$ui.previewDialog.options({
|
||||||
|
content: pandora.$ui.previewImage,
|
||||||
|
title: title,
|
||||||
|
})
|
||||||
|
.setSize(width, height);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue