From 2548e4c8dd2fb192c5be1c91bdae4ac6ad0f5c23 Mon Sep 17 00:00:00 2001
From: Shannon <sdeminick@gmail.com>
Date: Fri, 19 Sep 2014 18:31:37 +1000
Subject: [PATCH] makes the list view pager super awesome

---
 .../listview/listview.controller.js           | 47 ++++++++++++++++---
 .../propertyeditors/listview/listview.html    | 10 ++--
 2 files changed, 47 insertions(+), 10 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js
index 47f583a430..6733da5426 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js
@@ -46,6 +46,7 @@ function listViewController($rootScope, $scope, $routeParams, $injector, notific
         };
     }
 
+    $scope.pagination = [];
     $scope.isNew = false;
     $scope.actionInProgress = false;
     $scope.listViewResultSet = {
@@ -146,16 +147,49 @@ function listViewController($rootScope, $scope, $routeParams, $injector, notific
                 setPropertyValues(e);
             });
 
-            $scope.pagination = [];
-
-            for (var i = $scope.listViewResultSet.totalPages - 1; i >= 0; i--) {
-                $scope.pagination[i] = { index: i, name: i + 1 };
-            }
-
             if ($scope.options.pageNumber > $scope.listViewResultSet.totalPages) {
                 $scope.options.pageNumber = $scope.listViewResultSet.totalPages;
             }
 
+            $scope.pagination = [];
+
+            //list 10 pages as per normal
+            if ($scope.listViewResultSet.totalPages <= 10) {
+                for (var i = 0; i < $scope.listViewResultSet.totalPages; i++) {
+                    $scope.pagination.push({
+                        val: (i + 1),
+                        isActive: $scope.options.pageNumber == (i + 1)
+                    });
+                }
+            }
+            else {
+                //if there is more than 10 pages, we need to do some fancy bits
+
+                //get the max index to start
+                var maxIndex = $scope.listViewResultSet.totalPages - 10;
+                //set the start, but it can't be below zero
+                var start = Math.max($scope.options.pageNumber - 5, 0);
+                //ensure that it's not too far either
+                start = Math.min(maxIndex, start);
+
+                for (var i = start; i < (10 + start) ; i++) {
+                    $scope.pagination.push({
+                        val: (i + 1),
+                        isActive: $scope.options.pageNumber == (i + 1)
+                    });
+                }
+
+                //now, if the start is greater than 0 then '1' will not be displayed, so do the elipses thing
+                if (start > 0) {
+                    $scope.pagination.unshift({ name: "First", val: 1, isActive: false }, {val: "...",isActive: false});
+                }
+
+                //same for the end
+                if (start < maxIndex) {
+                    $scope.pagination.push({ val: "...", isActive: false }, { name: "Last", val: $scope.listViewResultSet.totalPages, isActive: false });
+                }
+            }
+
         });
     };
 
@@ -369,7 +403,6 @@ function listViewController($rootScope, $scope, $routeParams, $injector, notific
 
     function initView() {
         if ($routeParams.id) {
-            $scope.pagination = new Array(10);
             $scope.listViewAllowedTypes = getContentTypesCallback($routeParams.id);
 
             $scope.contentId = $routeParams.id;
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
index fadbbd4cab..920f762966 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
@@ -113,9 +113,13 @@
                                     </a>
                                 </li>
 
-                                <li ng-repeat="pgn in pagination track by $index"
-                                    ng-class="{active:$index + 1 == options.pageNumber}">
-                                    <a href="#" ng-click="goToPage($index)" prevent-default ng-bind="$index + 1"></a>
+                                <li ng-repeat="pgn in pagination"
+                                    ng-class="{active:pgn.isActive}">
+
+                                    <a href="#" ng-click="goToPage(pgn.val - 1)" prevent-default 
+                                       ng-bind="pgn.name ? pgn.name : pgn.val" 
+                                       ng-if="pgn.val != '...'"></a>
+                                    <span ng-bind="pgn.val" ng-if="pgn.val == '...'"></span>
                                 </li>
 
                                 <li ng-class="{disabled:options.pageNumber >= listViewResultSet.totalPages}">