pandora/static/js/embedInfo.js

139 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;
};