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

/info#embed: support resize

Browse source
This commit is contained in:
rolux 2014-01-22 13:57:38 +00:00
parent f6ee282606
commit 128eea602b
1 changed files with 75 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

145
static/js/embedInfo.js
View file

@ -2,11 +2,19 @@
pandora.ui.embedInfo = function() { pandora.ui.embedInfo = function() {
var item = pandora.user.ui.item, var data,
item = pandora.user.ui.item,
data, poster = {
size: 256
that = Ox.Element(); },
textCSS = {
marginTop: '8px',
fontWeight: 'bold',
fontSize: '13px',
textAlign: 'center'
},
that = Ox.Element(),
$icon, $reflection, $text;
pandora.api.get({ pandora.api.get({
id: item, id: item,
@ -15,76 +23,67 @@ pandora.ui.embedInfo = function() {
data = result.data; data = result.data;
var posterSize = 256, poster.width = Math.round(
posterWidth = Math.round( data.posterRatio > 1
data.posterRatio > 1 ? poster.size
? posterSize : poster.size * data.posterRatio
: posterSize * data.posterRatio );
), poster.height = Math.round(
posterHeight = Math.round( data.posterRatio > 1
data.posterRatio > 1 ? poster.size / data.posterRatio
? posterSize / data.posterRatio : poster.size
: posterSize );
), poster.left = Math.floor((window.innerWidth - poster.width) / 2);
posterLeft = Math.floor(
(window.innerWidth - posterWidth) / 2
),
textCSS = {
marginTop: '8px',
fontWeight: 'bold',
fontSize: '13px',
textAlign: 'center'
},
$icon = Ox.$('<img>') $icon = Ox.$('<img>')
.attr({src: '/' + item + '/poster256.jpg'}) .attr({src: '/' + item + '/poster256.jpg'})
.css({ .css({
position: 'absolute', position: 'absolute',
left: posterLeft + 'px', left: poster.left + 'px',
top: '8px', top: '8px',
width: posterWidth + 'px', width: poster.width + 'px',
height: posterHeight + 'px', height: poster.height + 'px',
cursor: 'pointer' cursor: 'pointer'
}) })
.appendTo(that), .appendTo(that);
$reflection = Ox.$('<div>') $reflection = Ox.$('<div>')
.addClass('OxReflection') .addClass('OxReflection')
.css({ .css({
position: 'absolute', position: 'absolute',
left: posterLeft + 'px', left: poster.left + 'px',
top: posterHeight + 8 + 'px', top: poster.height + 8 + 'px',
width: '256px', width: '256px',
height: '128px', height: '128px',
overflow: 'hidden' overflow: 'hidden'
}) })
.appendTo(that), .appendTo(that);
$reflectionIcon = Ox.$('<img>') Ox.$('<img>')
.attr({src: '/' + item + '/poster256.jpg'}) .attr({src: '/' + item + '/poster256.jpg'})
.css({ .css({
position: 'absolute', position: 'absolute',
width: posterWidth + 'px', width: poster.width + 'px',
height: posterHeight + 'px' height: poster.height + 'px'
}) })
.appendTo($reflection), .appendTo($reflection);
$reflectionGradient = Ox.$('<div>') Ox.$('<div>')
.css({ .css({
position: 'absolute', position: 'absolute',
width: '256px', width: '256px',
height: '128px' height: '128px'
}) })
.appendTo($reflection), .appendTo($reflection);
$text = Ox.$('<div>') $text = Ox.$('<div>')
.css({ .css({
position: 'absolute', position: 'absolute',
left: '8px', left: '8px',
top: 8 + 8 + posterHeight + 'px', top: 8 + 8 + poster.height + 'px',
right: '8px' right: '8px'
}) })
.appendTo(that); .appendTo(that);
Ox.$('<div>') Ox.$('<div>')
.css(textCSS) .css(textCSS)
@ -100,6 +99,12 @@ pandora.ui.embedInfo = function() {
}); });
that.resizePanel = function() {
poster.left = Math.floor((window.innerWidth - poster.width) / 2);
$icon.css({left: poster.left + 'px'});
$reflection.css({left: poster.left + 'px'});
};
return that; return that;
}; };