From 19d390e5611dcac38beaf0f9602e5ae288a8f51a Mon Sep 17 00:00:00 2001
From: rolux <rolux@rollux.org>
Date: Thu, 20 Oct 2011 16:49:01 +0000
Subject: [PATCH] make number of clips in clips view dynamic

---
 static/js/pandora.js               | 20 ++++++++++++++++++--
 static/js/pandora/ui/itemClips.js  |  4 +++-
 static/js/pandora/ui/list.js       |  7 +++++--
 static/js/pandora/ui/rightPanel.js | 10 +++++++++-
 static/js/pandora/utils.js         |  7 +++++++
 5 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/static/js/pandora.js b/static/js/pandora.js
index 34aa605f7..91ebdbeaa 100644
--- a/static/js/pandora.js
+++ b/static/js/pandora.js
@@ -174,8 +174,24 @@ Ox.load({
         pandora.$ui.info.resizeInfo();
         if (!pandora.user.ui.item) {
             pandora.resizeGroups(pandora.$ui.rightPanel.width());
-            if (pandora.user.ui.listView == 'timelines') {
-                pandora.$ui.list.options({width: window.innerWidth - pandora.user.ui.showSidebar * pandora.user.ui.sidebarSize - 1});
+            if (pandora.user.ui.listView == 'clips') {
+                var clipsItems = pandora.getClipsItems();
+                    previousClipsItems = pandora.getClipsItems(pandora.$ui.list.options('width'));
+                pandora.$ui.list.options({
+                    width: window.innerWidth
+                        - pandora.user.ui.showSidebar * pandora.user.ui.sidebarSize - 1
+                        - Ox.UI.SCROLLBAR_SIZE
+                });
+                if (clipsItems != previousClipsItems) {
+                    Ox.Request.clearCache(); // fixme
+                    pandora.$ui.list.reloadList(true);
+                }
+            } else if (pandora.user.ui.listView == 'timelines') {
+                pandora.$ui.list.options({
+                    width: window.innerWidth
+                        - pandora.user.ui.showSidebar * pandora.user.ui.sidebarSize - 1
+                        - Ox.UI.SCROLLBAR_SIZE
+                });
             } else if (pandora.user.ui.listView == 'map') {
                 pandora.$ui.map.resizeMap();
             } else if (pandora.user.ui.listView == 'calendar') {
diff --git a/static/js/pandora/ui/itemClips.js b/static/js/pandora/ui/itemClips.js
index 87cc3d9a3..414216dc8 100644
--- a/static/js/pandora/ui/itemClips.js
+++ b/static/js/pandora/ui/itemClips.js
@@ -39,7 +39,9 @@ pandora.ui.itemClips = function(options) {
             .addClass('OxInfoIcon')
             .css({
                 float: 'left',
-                margin: '2px'
+                margin: i == 0 ? '2px 2px 2px -2px'
+                    : i == self.options.clips.length - 1 ? '2px -2px 2px 2px'
+                    : '2px'
             })
             .data({'in': clip['in'], out: clip.out});
         $item.$element.find('.OxTarget').addClass('OxSpecialTarget');
diff --git a/static/js/pandora/ui/list.js b/static/js/pandora/ui/list.js
index 0459e3191..df25b94ee 100644
--- a/static/js/pandora/ui/list.js
+++ b/static/js/pandora/ui/list.js
@@ -233,7 +233,7 @@ pandora.ui.list = function() {
                     query: pandora.user.ui.find,
                     clips: {
                         query: pandora.getClipsQuery(),
-                        items: 5,
+                        items: pandora.getClipsItems(),
                         keys: []
                     }
                 }), callback);
@@ -242,7 +242,10 @@ pandora.ui.list = function() {
             selected: pandora.user.ui.listSelection,
             size: 192,
             sort: pandora.user.ui.listSort,
-            unique: 'id'
+            unique: 'id',
+            width: window.innerWidth
+                - pandora.user.ui.showSidebar * pandora.user.ui.sidebarSize - 1
+                - Ox.UI.SCROLLBAR_SIZE
         })
         .bindEvent({
             key_left: function() {
diff --git a/static/js/pandora/ui/rightPanel.js b/static/js/pandora/ui/rightPanel.js
index eb78bb2ca..3a8ab3362 100644
--- a/static/js/pandora/ui/rightPanel.js
+++ b/static/js/pandora/ui/rightPanel.js
@@ -25,7 +25,15 @@ pandora.ui.rightPanel = function() {
                 if (!pandora.user.ui.item) {
                     pandora.resizeGroups();
                     pandora.$ui.list.size();
-                    if (pandora.user.ui.listView == 'timelines') {
+                    if (pandora.user.ui.listView == 'clips') {
+                        var clipsItems = pandora.getClipsItems();
+                            previousClipsItems = pandora.getClipsItems(pandora.$ui.list.options('width'));
+                        pandora.$ui.list.options({width: data.size});
+                        if (clipsItems != previousClipsItems) {
+                            Ox.Request.clearCache(); // fixme
+                            pandora.$ui.list.reloadList(true);
+                        }
+                    } else if (pandora.user.ui.listView == 'timelines') {
                         pandora.$ui.list.options({width: data.size});
                     } else if (pandora.user.ui.listView == 'map') {
                         pandora.$ui.map.resizeMap();
diff --git a/static/js/pandora/utils.js b/static/js/pandora/utils.js
index c63acf66b..8bc7248af 100644
--- a/static/js/pandora/utils.js
+++ b/static/js/pandora/utils.js
@@ -416,6 +416,13 @@ pandora.exitFullscreen = function() {
     pandora.user.ui.showBrowser && pandora.$ui.contentPanel.size(0, 112 + Ox.UI.SCROLLBAR_SIZE);
 };
 
+pandora.getClipsItems = function(width) {
+    width = width || window.innerWidth
+        - pandora.user.ui.showSidebar * pandora.user.ui.sidebarSize - 1
+        - Ox.UI.SCROLLBAR_SIZE;
+    return Math.floor((width - 8) / (128 + 8)) - 1;
+};
+
 pandora.getClipsQuery = function() {
     function addClipsConditions(conditions) {
         conditions.forEach(function(condition) {