decentral1se/pandora
1
0
Fork 0
forked from 0x2620/pandora
Code Issues Pull requests Projects Releases Wiki Activity

use new dialog for list preview

Browse source
This commit is contained in:
rolux 2011-08-08 07:48:13 +00:00
parent 54fdbe7f2c
commit c4c2ea5cb2
1 changed files with 59 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

131
static/js/pandora/ui/list.js
View file

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