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

147
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 = $('<img>')
}); .attr({src: item.poster.url.replace('.jpg', '128.jpg')})
pandora.$ui.previewImage.animate({ .css({width: width + 'px', height: height + 'px'})
opacity: 0 $('<img>').load(function() {
}, 100, function() { pandora.$ui.previewImage.attr({src: $(this).attr('src')});
pandora.$ui.previewDialog.size(dialogWidth, dialogHeight, function() { })
pandora.$ui.previewImage .attr({src: item.poster.url.replace('.jpg', '1024.jpg')});
.attr({ if (!preview) {
src: item.poster.url if (!pandora.$ui.previewDialog) {
}) pandora.$ui.previewDialog = Ox.Dialog({
.one('load', function() { closeButton: true,
pandora.$ui.previewImage content: pandora.$ui.previewImage,
.css({ fixedRatio: true,
width: dialogWidth + 'px', focus: false,
height: (dialogHeight - 48) + 'px', // fixme: why -2 ? height: height,
opacity: 0 maximizeButton: true,
}) title: title,
.animate({ width: width
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>')
.attr({
src: item.poster.url
})
.css({
position: 'absolute',
width: dialogWidth + 'px',
height: (dialogHeight - 48) + 'px', // fixme: why -2 ?
left: 0,
top: 0,
right: 0,
bottom: 0,
margin: 'auto',
});
pandora.$ui.previewDialog = Ox.Dialog({
buttons: [
Ox.Button({
title: 'Close',
}).bindEvent({
click: function() {
pandora.$ui.previewDialog.close();
delete pandora.$ui.previewDialog;
pandora.$ui.list.closePreview();
}
})
],
content: pandora.$ui.previewImage,
focus: false,
height: dialogHeight,
id: 'previewDialog',
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,
width: dialogWidth
})
.bindEvent('resize', function(event, data) {
var dialogRatio = data.width / (data.height - 48),
height, width;
if (dialogRatio < pandora.site.previewRatio) {
width = data.width;
height = Math.round(width / pandora.site.previewRatio);
} else {
height = (data.height - 48);
width = Math.round(height * pandora.site.previewRatio);
}
pandora.$ui.previewImage.css({
width: width + 'px',
height: height + 'px', // fixme: why -2 ?
}) })
.bindEvent({
close: function() {
that.closePreview();
preview = false;
},
resize: function(event) {
pandora.$ui.previewImage.css({
width: event.width + 'px',
height: event.height + 'px'
});
}
})
.open();
} else {
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,
}) })
.open(); .setSize(width, height);
//pandora.$ui.previewImage = $image;
//Ox.print(pandora.$document.height(), dialogWidth, 'x', dialogHeight, dialogWidth / (dialogHeight - 48), item.poster.width, 'x', item.poster.height, item.poster.width / item.poster.height)
} }
}); });
}, },