0x2620/cablegates
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

make poster resizable in info view

Browse source
This commit is contained in:
rlx 2011-08-06 01:34:07 +00:00
parent 132cf2fb63
commit a00823a165
2 changed files with 48 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
pandora/0xdb.json
View file

@ -502,6 +502,7 @@
"groupsQuery": {"conditions": [], "operator": "|"}, "groupsQuery": {"conditions": [], "operator": "|"},
"groupsSize": 176, "groupsSize": 176,
"icons": "posters", "icons": "posters",
"infoIconSize": 256,
"item": "", "item": "",
"itemView": "timeline", "itemView": "timeline",
"list": "", "list": "",

59
static/js/pandora/ui/infoView.js
View file

@ -2,10 +2,11 @@ pandora.ui.infoView = function(data) {
var listWidth = 144 + Ox.UI.SCROLLBAR_SIZE, var listWidth = 144 + Ox.UI.SCROLLBAR_SIZE,
margin = 8, margin = 8,
posterSize = pandora.user.ui.infoIconSize,
posterRatio = data.poster.width / data.poster.height, posterRatio = data.poster.width / data.poster.height,
posterWidth = posterRatio > 1 ? 256 : Math.round(256 * posterRatio), posterWidth = posterRatio > 1 ? posterSize : Math.round(posterSize * posterRatio),
posterHeight = posterRatio < 1 ? 256 : Math.round(256 / posterRatio), posterHeight = posterRatio < 1 ? posterSize : Math.round(posterSize / posterRatio),
posterLeft = Math.floor((256 - posterWidth) / 2), posterLeft = Math.floor((posterSize - posterWidth) / 2),
editPoster = false, editPoster = false,
that = Ox.Element(), that = Ox.Element(),
$list, $list,
@ -26,7 +27,7 @@ pandora.ui.infoView = function(data) {
height: pandora.$ui.contentPanel.size(1) + 'px' height: pandora.$ui.contentPanel.size(1) + 'px'
}) })
.appendTo($info), .appendTo($info),
$poster = $('<img>') $poster = Ox.Element('<img>')
.attr({ .attr({
src: '/' + data.id + '/poster.jpg' src: '/' + data.id + '/poster.jpg'
}) })
@ -36,7 +37,10 @@ pandora.ui.infoView = function(data) {
top: margin + 'px', top: margin + 'px',
width: posterWidth + 'px', width: posterWidth + 'px',
height: posterHeight + 'px', height: posterHeight + 'px',
cursor: pandora.user.level == 'admin' ? 'pointer' : 'default' cursor: 'pointer'
})
.bindEvent({
singleclick: togglePosterSize
}) })
.appendTo($data.$element), .appendTo($data.$element),
$reflection = $('<div>') $reflection = $('<div>')
@ -45,8 +49,8 @@ pandora.ui.infoView = function(data) {
position: 'absolute', position: 'absolute',
left: margin + 'px', left: margin + 'px',
top: margin + posterHeight + 'px', top: margin + posterHeight + 'px',
width: '256px', width: posterSize + 'px',
height: '128px', height: posterSize / 2 + 'px',
overflow: 'hidden' overflow: 'hidden'
}) })
.appendTo($data.$element), .appendTo($data.$element),
@ -68,8 +72,8 @@ pandora.ui.infoView = function(data) {
display: 'block', display: 'block',
position: 'absolute', position: 'absolute',
left: margin + 'px', left: margin + 'px',
width: '256px', width: posterSize + 'px',
height: '128px' height: posterSize / 2 + 'px'
}) })
.css('background', '-moz-linear-gradient(top, rgba(16, 16, 16, 0.75), rgba(16, 16, 16, 1))') .css('background', '-moz-linear-gradient(top, rgba(16, 16, 16, 0.75), rgba(16, 16, 16, 1))')
.css('background', '-webkit-linear-gradient(top, rgba(16, 16, 16, 0.75), rgba(16, 16, 16, 1))') .css('background', '-webkit-linear-gradient(top, rgba(16, 16, 16, 0.75), rgba(16, 16, 16, 1))')
@ -77,7 +81,7 @@ pandora.ui.infoView = function(data) {
$text = $('<div>') $text = $('<div>')
.css({ .css({
position: 'absolute', position: 'absolute',
left: margin + 256 + margin + 'px', left: margin + posterSize + margin + 'px',
top: margin + 'px', top: margin + 'px',
right: margin + 'px' right: margin + 'px'
}) })
@ -351,8 +355,9 @@ pandora.ui.infoView = function(data) {
if (pandora.user.level == 'admin') { if (pandora.user.level == 'admin') {
var icon = 'posters', var icon = 'posters',
selectedImage = {}; selectedImage = {};
$poster.bind({
click: function() { $poster.bindEvent({
doubleclick: function() {
if (!editPoster) { if (!editPoster) {
$info.animate({ $info.animate({
left: 0 left: 0
@ -458,6 +463,36 @@ pandora.ui.infoView = function(data) {
}).join(', '); }).join(', ');
} }
function togglePosterSize() {
posterSize = posterSize == 256 ? 512 : 256;
posterWidth = posterRatio > 1 ? posterSize : Math.round(posterSize * posterRatio);
posterHeight = posterRatio < 1 ? posterSize : Math.round(posterSize / posterRatio);
posterLeft = Math.floor((posterSize - posterWidth) / 2);
$poster.animate({
left: margin + posterLeft + 'px',
width: posterWidth + 'px',
height: posterHeight + 'px'
}, 250);
$reflection.animate({
top: margin + posterHeight + 'px',
width: posterSize + 'px',
height: posterSize / 2 + 'px'
}, 250);
$reflectionPoster.animate({
left: posterLeft + 'px',
width: posterWidth + 'px',
height: posterHeight + 'px',
}, 250);
$reflectionGradient.animate({
width: posterSize + 'px',
height: posterSize / 2 + 'px'
}, 250);
$text.animate({
left: margin + posterSize + margin + 'px',
}, 250);
pandora.api.setUI({infoIconSize: pandora.user.ui.infoIconSize = posterSize});
}
that.resize = function() { that.resize = function() {
var height = pandora.$ui.contentPanel.size(1); var height = pandora.$ui.contentPanel.size(1);
$list && $list.css({height: height + 'px'}); $list && $list.css({height: height + 'px'});