140 lines
3.9 KiB
JavaScript
140 lines
3.9 KiB
JavaScript
'use strict';
|
|
|
|
pandora.ui.embedInfo = function() {
|
|
|
|
var data,
|
|
item = pandora.user.ui.item,
|
|
margin = 16,
|
|
that = Ox.Element(),
|
|
$icon, $reflection, $reflectionIcon, $reflectionGradient,
|
|
$text;
|
|
|
|
pandora.api.get({
|
|
id: item,
|
|
keys: ['director', 'posterRatio', 'title', 'year']
|
|
}, function(result) {
|
|
|
|
data = result.data;
|
|
|
|
$icon = Ox.$('<img>')
|
|
.attr({src: pandora.getMediaURL('/' + item + '/poster512.jpg')})
|
|
.css({
|
|
position: 'absolute',
|
|
top: margin + 'px',
|
|
cursor: 'pointer'
|
|
})
|
|
.on({
|
|
click: function() {
|
|
window.open('/' + item + '/info', '_blank');
|
|
}
|
|
})
|
|
.appendTo(that);
|
|
|
|
$reflection = Ox.$('<div>')
|
|
.addClass('OxReflection')
|
|
.css({
|
|
position: 'absolute',
|
|
overflow: 'hidden'
|
|
})
|
|
.appendTo(that);
|
|
|
|
$reflectionIcon = Ox.$('<img>')
|
|
.attr({src: pandora.getMediaURL('/' + item + '/poster512.jpg')})
|
|
.css({
|
|
position: 'absolute'
|
|
})
|
|
.appendTo($reflection);
|
|
|
|
$reflectionGradient = Ox.$('<div>')
|
|
.css({
|
|
position: 'absolute'
|
|
})
|
|
.appendTo($reflection);
|
|
|
|
$text = Ox.$('<div>')
|
|
.css({
|
|
position: 'absolute',
|
|
left: margin + 'px',
|
|
right: margin + 'px'
|
|
})
|
|
.appendTo(that);
|
|
|
|
Ox.$('<div>')
|
|
.css({
|
|
fontWeight: 'bold',
|
|
fontSize: '13px',
|
|
textAlign: 'center'
|
|
})
|
|
.html(data.title + (
|
|
data.year
|
|
? ' (<a href="/year=' + data.year
|
|
+ '" target="_blank">' + data.year + '</a>)'
|
|
: ''
|
|
))
|
|
.appendTo($text);
|
|
|
|
if (data.director) {
|
|
Ox.$('<div>')
|
|
.css({
|
|
marginTop: '8px',
|
|
fontWeight: 'bold',
|
|
fontSize: '13px',
|
|
textAlign: 'center'
|
|
})
|
|
.html(data.director.map(function(director) {
|
|
// fixme: there should be a utils method for this
|
|
return '<a href="/name='
|
|
+ director.replace('_', '\t').replace(' ', '_')
|
|
+ '" target="_blank">' + director + '</a>'
|
|
}).join(', '))
|
|
.appendTo($text);
|
|
}
|
|
|
|
that.resizePanel();
|
|
|
|
});
|
|
|
|
that.resizePanel = function() {
|
|
var posterSize = Math.floor((Math.min(
|
|
window.innerWidth, window.innerHeight
|
|
) - 2 * margin) * 2/3),
|
|
posterWidth = Math.round(
|
|
data.posterRatio > 1
|
|
? posterSize
|
|
: posterSize * data.posterRatio
|
|
),
|
|
posterHeight = Math.round(
|
|
data.posterRatio > 1
|
|
? posterSize / data.posterRatio
|
|
: posterSize
|
|
),
|
|
posterLeft = Math.floor((window.innerWidth - posterWidth) / 2);
|
|
$icon.css({
|
|
left: posterLeft + 'px',
|
|
width: posterWidth + 'px',
|
|
height: posterHeight + 'px'
|
|
});
|
|
$reflection.css({
|
|
left: posterLeft + 'px',
|
|
top: posterHeight + margin + 'px',
|
|
width: posterWidth + 'px',
|
|
height: Math.round(posterHeight / 2) + 'px'
|
|
});
|
|
$reflectionIcon.css({
|
|
width: posterWidth + 'px',
|
|
height: posterHeight + 'px'
|
|
});
|
|
$reflectionGradient.css({
|
|
width: posterSize + 'px',
|
|
height: Math.round(posterHeight / 2) + 'px'
|
|
});
|
|
$text.css({
|
|
top: 2 * margin + posterHeight + 'px'
|
|
});
|
|
return that;
|
|
};
|
|
|
|
return that;
|
|
|
|
};
|