From 4100aa25b913237cbd3012b64f89464f00e6e52e Mon Sep 17 00:00:00 2001
From: OldHawk <taobataoma@gmail.com>
Date: Tue, 25 Apr 2017 19:22:15 +0800
Subject: [PATCH] add pagination on torrent comment list

---
 .../directives/scrollIf.client.directive.js   |  3 +-
 modules/core/client/less/comment.less         |  4 ++
 .../torrent-info.client.controller.js         | 38 ++++++++++++++++++-
 .../views/view-torrent.client.view.html       | 14 ++++++-
 4 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/modules/core/client/directives/scrollIf.client.directive.js b/modules/core/client/directives/scrollIf.client.directive.js
index 98b0c9e3..0a9bf33a 100644
--- a/modules/core/client/directives/scrollIf.client.directive.js
+++ b/modules/core/client/directives/scrollIf.client.directive.js
@@ -19,7 +19,8 @@
         if (value) {
           //element[0].scrollIntoView({block: 'end', behavior: 'smooth'});
           //$uiViewScroll(element);
-          window.scrollTo(0, element[0].offsetTop - 60);
+          var offsetTop = Number(attrs.offsetTop || 0);
+          window.scrollTo(0, element[0].offsetTop + offsetTop);
         }
       });
     }
diff --git a/modules/core/client/less/comment.less b/modules/core/client/less/comment.less
index c470ce5d..edc33999 100644
--- a/modules/core/client/less/comment.less
+++ b/modules/core/client/less/comment.less
@@ -12,6 +12,10 @@
     .panel-body {
         background-color: @comment-background-default;
     }
+    .pagination {
+        padding-left: 75px;
+        margin: 0;
+    }
 }
 
 .tabnav-extra {
diff --git a/modules/torrents/client/controllers/torrent-info.client.controller.js b/modules/torrents/client/controllers/torrent-info.client.controller.js
index f6d76dd5..aafe8445 100644
--- a/modules/torrents/client/controllers/torrent-info.client.controller.js
+++ b/modules/torrents/client/controllers/torrent-info.client.controller.js
@@ -6,11 +6,12 @@
     .controller('TorrentsInfoController', TorrentsInfoController);
 
   TorrentsInfoController.$inject = ['$scope', '$state', '$stateParams', '$translate', 'Authentication', 'Notification', 'TorrentsService',
-    'MeanTorrentConfig', 'DownloadService', '$sce', '$filter', 'CommentsService', 'ModalConfirmService', 'marked', 'Upload', '$timeout',
+    'MeanTorrentConfig', 'DownloadService', '$sce', '$filter', 'CommentsService', 'ModalConfirmService', 'marked', 'Upload', '$timeout', '$uiViewScroll',
     'SubtitlesService'];
 
   function TorrentsInfoController($scope, $state, $stateParams, $translate, Authentication, Notification, TorrentsService, MeanTorrentConfig,
-                                  DownloadService, $sce, $filter, CommentsService, ModalConfirmService, marked, Upload, $timeout, SubtitlesService) {
+                                  DownloadService, $sce, $filter, CommentsService, ModalConfirmService, marked, Upload, $timeout, SubtitlesService,
+                                  $uiViewScroll) {
     var vm = this;
     vm.user = Authentication.user;
     vm.announce = MeanTorrentConfig.meanTorrentConfig.announce;
@@ -21,6 +22,38 @@
     vm.torrentTabs = [];
     vm.progress = 0;
 
+    //page init
+    vm.commentBuildPager = commentBuildPager;
+    vm.commentFigureOutItemsToDisplay = commentFigureOutItemsToDisplay;
+    vm.commentPageChanged = commentPageChanged;
+
+    function commentBuildPager() {
+      vm.commentPagedItems = [];
+      vm.commentItemsPerPage = 10;
+      vm.commentCurrentPage = 1;
+      vm.commentFigureOutItemsToDisplay();
+    }
+
+    function commentFigureOutItemsToDisplay() {
+      if (vm.torrentLocalInfo && vm.torrentLocalInfo._replies) {
+        vm.commentFilterLength = vm.torrentLocalInfo._replies.length;
+        var begin = ((vm.commentCurrentPage - 1) * vm.commentItemsPerPage);
+        var end = begin + vm.commentItemsPerPage;
+        vm.commentPagedItems = vm.torrentLocalInfo._replies.slice(begin, end);
+      }
+    }
+
+    function commentPageChanged() {
+      var element = angular.element('#top_of_comments');
+
+      vm.commentFigureOutItemsToDisplay();
+      window.scrollTo(0, element[0].offsetTop - 30);
+    }
+
+    $scope.$watch('vm.torrentLocalInfo', function () {
+      vm.commentFigureOutItemsToDisplay();
+    });
+
     // If user is not signed in then redirect back home
     if (!Authentication.user) {
       $state.go('authentication.signin');
@@ -37,6 +70,7 @@
           $('.backdrop').css('backgroundImage', 'url(' + vm.tmdbConfig.backdrop_img_base_url + res.torrent_backdrop_img + ')');
         }
         vm.initInfo(res.torrent_tmdb_id);
+        vm.commentBuildPager();
 
         vm.torrentTabs.push(
           {
diff --git a/modules/torrents/client/views/view-torrent.client.view.html b/modules/torrents/client/views/view-torrent.client.view.html
index 4fd8a05f..e61cbb6e 100644
--- a/modules/torrents/client/views/view-torrent.client.view.html
+++ b/modules/torrents/client/views/view-torrent.client.view.html
@@ -148,13 +148,18 @@
     </div>
 
 
-    <div class="padding-top-30">
+    <div class="padding-top-30" id="top_of_comments">
         <div class="container">
             <div class="panel panel-default panel-comment">
                 <div class="panel-heading text-center"><strong>{{ 'USER_COMMENT_LIST' | translate}}</strong> <span
                         class="badge badge_info">{{vm.torrentLocalInfo._replies.length}}</span></div>
                 <div class="panel-body">
-                    <div class="comment-list" id="{{item._id}}" scroll-if="item._id==vm.scrollToId" ng-repeat="item in vm.torrentLocalInfo._replies">
+                    <uib-pagination boundary-links="true" max-size="8" items-per-page="vm.commentItemsPerPage" total-items="vm.commentFilterLength"
+                                    ng-model="vm.commentCurrentPage" ng-change="vm.commentPageChanged()"
+                                    ng-if="vm.torrentLocalInfo._replies.length > 0"></uib-pagination>
+
+                    <div class="comment-list" id="{{item._id}}" scroll-if="item._id==vm.scrollToId" offset-top="-60"
+                         ng-repeat="item in vm.commentPagedItems">
                         <div class="timeline-comment-wrapper">
                             <a class="timeline-comment-avatar" ng-click="vm.replyComment(item);">
                                 <img title="{{item.user.displayName}}" ng-src="/{{item.user.profileImageURL}}">
@@ -224,6 +229,11 @@
                         </div>
                     </div>
 
+                    <uib-pagination boundary-links="true" max-size="8" items-per-page="vm.commentItemsPerPage" total-items="vm.commentFilterLength"
+                                    ng-model="vm.commentCurrentPage" ng-change="vm.commentPageChanged()"
+                                    ng-if="vm.torrentLocalInfo._replies.length > 0"></uib-pagination>
+                    <div class="padding-top-20"></div>
+
                     <div class="comment-new">
                         <div class="timeline-comment-wrapper">
                             <a href="#" class="timeline-comment-avatar">