From 7b37e69283654cd9b171d6787ee9c94f863801fa Mon Sep 17 00:00:00 2001
From: Nils Maier <maierman@web.de>
Date: Tue, 3 Jun 2014 02:05:30 +0200
Subject: [PATCH] Fix perf issue with collapse animations

---
 index.html       | 12 ++++++------
 js/ctrls/main.js | 25 ++++++++++++++++++++++++-
 2 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 5ace01d..a1a3439 100755
--- a/index.html
+++ b/index.html
@@ -347,7 +347,7 @@
       class="row-fluid download" data-gid="{{download.gid}}">
       <tbody>
       <tr>
-        <td class="download-name download-item" ng-click="download.collapsed = !download.collapsed">
+        <td class="download-name download-item" ng-click="toggleCollapsed(download)">
           <i class="icon-magnet" style="color: red;" ng-show="download.metadata"></i> {{download.name}}
         </td>
         <td class="download-controls download-item" rowspan="2">
@@ -404,7 +404,7 @@
               </li>
 
               <li>
-                <a ng-click="download.collapsed = !download.collapsed"
+                <a ng-click="toggleCollapsed(download)"
                    href="#"><i class="icon-info-sign">&nbsp;</i> More Info</a>
               </li>
 
@@ -418,7 +418,7 @@
         </td>
       </tr>
       <tr>
-        <td class="download-overview download-item" ng-click="download.collapsed = !download.collapsed" ng-switch="download.status">
+        <td class="download-overview download-item" ng-click="toggleCollapsed(download)" ng-switch="download.status">
           <!-- {{{ statistics -->
           <ul class="stats pull-left" ng-switch-when="active">
             <!-- {{{ active download statistics -->
@@ -551,15 +551,15 @@
         </td>
       </tr>
       <tr>
-        <td class="download-progress download-item" colspan="2" ng-click="download.collapsed = !download.collapsed">
+        <td class="download-progress download-item" colspan="2" ng-click="toggleCollapsed(download)">
           <div class="progress progress-striped" ng-class="getProgressClass(download)">
             <div class="bar" style="width: {{getProgress(download)}}%;"></div>
           </div>
         </td>
       </tr>
       <tr>
-        <td colspan="2" ng-click="download.collapsed = !download.collapsed" ng-switch="download.collapsed">
-          <div collapse="download.collapsed">
+        <td colspan="2" ng-click="toggleCollapsed(download)" ng-switch="download.collapsed">
+          <div ng-switch-when="false" collapse="download.animCollapsed">
             <div class="download-item" ng-show="download.numPieces > 1">
               <canvas bitfield="download.bitfield" draw="!download.collapsed" pieces="download.numPieces" class="progress chunk-canvas" width="1400" chunkbar></canvas>
             </div>
diff --git a/js/ctrls/main.js b/js/ctrls/main.js
index 671bd0c..1ac9c41 100644
--- a/js/ctrls/main.js
+++ b/js/ctrls/main.js
@@ -243,6 +243,28 @@ function(
 
   scope.loadFilters();
 
+  scope.toggleCollapsed = function(download) {
+    if (!download.collapsed) {
+      download.animCollapsed = true;
+      // ng-unswitch after half a second.
+      // XXX hacky way, because I'm to lazy right now to wire up proper
+      // transitionend events.
+      setTimeout(function() {
+        scope.$apply(function() {
+          download.collapsed = true;
+        });
+      }, 500);
+      return;
+    }
+
+    download.collapsed = false;
+    setTimeout(function() {
+      scope.$apply(function() {
+        download.animCollapsed = false;
+      });
+    }, 0);
+  };
+
 
   // max downloads shown in one page
   scope.pageSize = pageSize;
@@ -338,7 +360,8 @@ function(
         uploadSpeed: d.uploadSpeed,
         fmtUploadSpeed: utils.fmtspeed(d.uploadSpeed),
         collapsed: true,
-        files: []
+        animCollapsed: true,
+        files: [],
       };
     }
     else {