From 732852ebc21a5cf97697e5c2ffdaaffecf8e89af Mon Sep 17 00:00:00 2001
From: rolux <rolux@rollux.org>
Date: Sat, 6 Aug 2011 01:34:07 +0000
Subject: [PATCH] make poster resizable in info view

---
 pandora/0xdb.json                |  1 +
 static/js/pandora/ui/infoView.js | 59 +++++++++++++++++++++++++-------
 2 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/pandora/0xdb.json b/pandora/0xdb.json
index c1e6b290..2c05f3bf 100644
--- a/pandora/0xdb.json
+++ b/pandora/0xdb.json
@@ -502,6 +502,7 @@
             "groupsQuery": {"conditions": [], "operator": "|"},
             "groupsSize": 176,
             "icons": "posters",
+            "infoIconSize": 256,
             "item": "",
             "itemView": "timeline",
             "list": "",
diff --git a/static/js/pandora/ui/infoView.js b/static/js/pandora/ui/infoView.js
index ae3b9b6e..aa964f6a 100644
--- a/static/js/pandora/ui/infoView.js
+++ b/static/js/pandora/ui/infoView.js
@@ -2,10 +2,11 @@ pandora.ui.infoView = function(data) {
 
     var listWidth = 144 + Ox.UI.SCROLLBAR_SIZE,
         margin = 8,
+        posterSize = pandora.user.ui.infoIconSize,
         posterRatio = data.poster.width / data.poster.height,
-        posterWidth = posterRatio > 1 ? 256 : Math.round(256 * posterRatio),
-        posterHeight = posterRatio < 1 ? 256 : Math.round(256 / posterRatio),
-        posterLeft = Math.floor((256 - posterWidth) / 2),
+        posterWidth = posterRatio > 1 ? posterSize : Math.round(posterSize * posterRatio),
+        posterHeight = posterRatio < 1 ? posterSize : Math.round(posterSize / posterRatio),
+        posterLeft = Math.floor((posterSize - posterWidth) / 2),
         editPoster = false,
         that = Ox.Element(),
         $list,
@@ -26,7 +27,7 @@ pandora.ui.infoView = function(data) {
                 height: pandora.$ui.contentPanel.size(1) + 'px'
             })
             .appendTo($info),
-        $poster = $('<img>')
+        $poster = Ox.Element('<img>')
             .attr({
                 src: '/' + data.id + '/poster.jpg'
             })
@@ -36,7 +37,10 @@ pandora.ui.infoView = function(data) {
                 top: margin + 'px',
                 width: posterWidth + 'px',
                 height: posterHeight + 'px',
-                cursor: pandora.user.level == 'admin' ? 'pointer' : 'default'
+                cursor: 'pointer'
+            })
+            .bindEvent({
+                singleclick: togglePosterSize
             })
             .appendTo($data.$element),
         $reflection = $('<div>')
@@ -45,8 +49,8 @@ pandora.ui.infoView = function(data) {
                 position: 'absolute',
                 left: margin + 'px',
                 top: margin + posterHeight + 'px',
-                width: '256px',
-                height: '128px',
+                width: posterSize + 'px',
+                height: posterSize / 2 + 'px',
                 overflow: 'hidden'
             })
             .appendTo($data.$element),
@@ -68,8 +72,8 @@ pandora.ui.infoView = function(data) {
                 display: 'block',
                 position: 'absolute',
                 left: margin + 'px',
-                width: '256px',
-                height: '128px'
+                width: posterSize + 'px',
+                height: posterSize / 2 + 'px'
             })
             .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))')
@@ -77,7 +81,7 @@ pandora.ui.infoView = function(data) {
         $text = $('<div>')
             .css({
                 position: 'absolute',
-                left: margin + 256 + margin + 'px',
+                left: margin + posterSize + margin + 'px',
                 top: margin + 'px',
                 right: margin + 'px'
             })
@@ -351,8 +355,9 @@ pandora.ui.infoView = function(data) {
     if (pandora.user.level == 'admin') {
         var icon = 'posters',
             selectedImage = {};
-        $poster.bind({
-            click: function() {
+
+        $poster.bindEvent({
+            doubleclick: function() {
                 if (!editPoster) {
                     $info.animate({
                         left: 0
@@ -458,6 +463,36 @@ pandora.ui.infoView = function(data) {
         }).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() {
         var height = pandora.$ui.contentPanel.size(1);
         $list && $list.css({height: height + 'px'});