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

refactor preview dialog

Browse source
This commit is contained in:
rolux 2013-07-21 12:59:11 +00:00
parent e8e81af594
commit 1667510e2b
2 changed files with 115 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

89
static/js/list.js
View file

@ -3,8 +3,7 @@
pandora.ui.list = function() { pandora.ui.list = function() {
var preview = false, var that,
that,
view = pandora.user.ui.listView; view = pandora.user.ui.listView;
if (view == 'list') { if (view == 'list') {
@ -390,8 +389,7 @@ pandora.ui.list = function() {
that.bindEvent({ that.bindEvent({
closepreview: function(data) { closepreview: function(data) {
pandora.$ui.previewDialog.close(); pandora.$ui.previewDialog.close();
preview = false; delete pandora.$ui.previewDialog;
//delete pandora.$ui.previewDialog;
}, },
copy: function(data) { copy: function(data) {
Ox.Clipboard.copy(data.ids, 'item'); Ox.Clipboard.copy(data.ids, 'item');
@ -443,89 +441,18 @@ pandora.ui.list = function() {
pandora.UI.set(set); pandora.UI.set(set);
}, },
openpreview: function(data) { openpreview: function(data) {
if (data.ids.length) {
// ...
}
pandora.requests.preview && pandora.api.cancel(pandora.requests.preview);
pandora.requests.preview = pandora.api.find({
keys: ['director', 'id', 'modified', 'posterRatio', 'title', 'year'],
query: {
conditions: data.ids.map(function(id) {
return {
key: 'id',
value: id,
operator: '=='
};
}),
operator: '|'
}
}, function(result) {
var item = result.data.items[0],
title = item.title + (
item.director ? ' (' + item.director.join(', ') + ')' : ''
) + (
item.year ? ' ' + item.year : ''
),
ratio = pandora.user.ui.showSitePosters ? pandora.site.posters.ratio : item.posterRatio,
windowWidth = window.innerWidth * 0.8,
windowHeight = window.innerHeight * 0.8,
windowRatio = windowWidth / windowHeight,
width = Math.round(ratio > windowRatio ? windowWidth : windowHeight * ratio),
height = Math.round(ratio < windowRatio ? windowHeight : windowWidth / ratio);
pandora.$ui.previewImage = $('<img>')
.attr({src: '/' + item.id + '/' + (
pandora.user.ui.showSitePosters ? 'siteposter' : 'poster'
) + '128.jpg'})
.css({width: width + 'px', height: height + 'px'})
$('<img>').load(function() {
pandora.$ui.previewImage.attr({src: $(this).attr('src')});
})
.attr({src: '/' + item.id + '/' + (
pandora.user.ui.showSitePosters ? 'siteposter' : 'poster'
) + '1024.jpg'});
if (!preview) {
if (!pandora.$ui.previewDialog) { if (!pandora.$ui.previewDialog) {
pandora.$ui.previewDialog = Ox.Dialog({ pandora.$ui.previewDialog = pandora.ui.previewDialog()
closeButton: true, .open()
content: pandora.$ui.previewImage,
fixedRatio: true,
focus: false,
height: height,
maximizeButton: true,
title: title,
width: width
})
.bindEvent({ .bindEvent({
close: function() { close: function() {
that.closePreview(); that.closePreview();
preview = false; delete pandora.$ui.previewDialog;
},
resize: function(data) {
pandora.$ui.previewImage.css({
width: data.width + 'px',
height: data.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
})
.setSize(width, height);
} }
}); });
} else {
pandora.$ui.previewDialog.update();
}
}, },
paste: function(data) { paste: function(data) {
var items; var items;

102
static/js/previewDialog.js Normal file
View file

@ -0,0 +1,102 @@
'use strict';
pandora.ui.previewDialog = function() {
var $image,
$list = pandora.$ui.list,
item = Ox.last($list.options('selected')),
posterRatio = pandora.user.ui.showSitePosters
? pandora.site.posters.ratio
: ($list.value(item, 'posterRatio') || pandora.site.posters.ratio),
size = getSize(posterRatio),
that = Ox.Dialog({
closeButton: true,
content: Ox.Element(),
fixedRatio: true,
focus: false,
height: size.height,
maximizeButton: true,
title: Ox._('Loading...'),
width: size.width
})
.bindEvent({
resize: function(data) {
// FIXME: why doesn't that.options('content') work here?
// (currently the only reason $image is in the outer scope)
$image.css({
width: data.width,
height: data.height
});
},
pandora_find: function() {
that.close();
},
pandora_item: function() {
that.close();
},
pandora_section: function() {
that.close();
},
pandora_showsiteposters: function() {
that.update();
}
});
function getSize(posterRatio) {
var windowWidth = window.innerWidth * 0.8,
windowHeight = window.innerHeight * 0.8,
windowRatio = windowWidth / windowHeight;
return {
width: Math.round(posterRatio > windowRatio ? windowWidth : windowHeight * posterRatio),
height: Math.round(posterRatio < windowRatio ? windowHeight : windowWidth / posterRatio)
};
}
that.update = function() {
pandora.requests.preview && pandora.api.cancel(pandora.requests.preview);
pandora.requests.preview = pandora.api.find({
keys: ['director', 'id', 'modified', 'posterRatio', 'title', 'year'],
query: {
conditions: [{
key: 'id',
operator: '==',
value: Ox.last($list.options('selected'))
}],
operator: '&'
}
}, function(result) {
var item = result.data.items[0],
posterRatio = pandora.user.ui.showSitePosters
? pandora.site.posters.ratio
: item.posterRatio,
size = getSize(posterRatio),
title = item.title + (
item.director ? ' (' + item.director.join(', ') + ')' : ''
) + (
item.year ? ' ' + item.year : ''
);
$image = $('<img>')
.attr({src: '/' + item.id + '/' + (
pandora.user.ui.showSitePosters ? 'siteposter' : 'poster'
) + '128.jpg?' + item.modified})
.css({width: size.width + 'px', height: size.height + 'px'});
$('<img>')
.load(function() {
$image.attr({src: $(this).attr('src')});
})
.attr({src: '/' + item.id + '/' + (
pandora.user.ui.showSitePosters ? 'siteposter' : 'poster'
) + '1024.jpg?' + item.modified});
that.options({
content: $image,
title: title,
})
.setSize(size.width, size.height);
});
return that;
}
return that.update();
};