forked from 0x2620/pandora
refactor preview dialog
This commit is contained in:
rolux
parent
e8e81af594
commit
1667510e2b
2 changed files with 115 additions and 86 deletions
|
|
@ -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) {
|
if (!pandora.$ui.previewDialog) {
|
||||||
// ...
|
pandora.$ui.previewDialog = pandora.ui.previewDialog()
|
||||||
|
.open()
|
||||||
|
.bindEvent({
|
||||||
|
close: function() {
|
||||||
|
that.closePreview();
|
||||||
|
delete pandora.$ui.previewDialog;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
pandora.$ui.previewDialog.update();
|
||||||
}
|
}
|
||||||
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) {
|
|
||||||
pandora.$ui.previewDialog = Ox.Dialog({
|
|
||||||
closeButton: true,
|
|
||||||
content: pandora.$ui.previewImage,
|
|
||||||
fixedRatio: true,
|
|
||||||
focus: false,
|
|
||||||
height: height,
|
|
||||||
maximizeButton: true,
|
|
||||||
title: title,
|
|
||||||
width: width
|
|
||||||
})
|
|
||||||
.bindEvent({
|
|
||||||
close: function() {
|
|
||||||
that.closePreview();
|
|
||||||
preview = false;
|
|
||||||
},
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
paste: function(data) {
|
paste: function(data) {
|
||||||
var items;
|
var items;
|
||||||
|
|
|
||||||
102
static/js/previewDialog.js
Normal file
102
static/js/previewDialog.js
Normal 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();
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
Loading…
Reference in a new issue