Improved track pagination to better handle tons of content, including a "jump to page" button.

.editorconfig

@@ -9,11 +9,14 @@ end_of_line = lf
 insert_final_newline = true
 
 # 4 space indentation and default charset
-[*.{php,coffee,js,less,css,html}]
+[*.{php,coffee,js,html}]
 charset = utf-8
 indent_style = space
 indent_size = 4
 
+[*.{less,css}]
+indent_size = 2
+
 # One-offs
 
 [{package.json}]

public/templates/tracks/index.html

@@ -66,6 +66,12 @@
             <a href="#" ng-click="gotoPage(page);" pfm-eat-click>{{page}}</a>
         </li>
         <li ng-class="{disabled: !nextPage}"><a href="#" ng-click="gotoPage(nextPage);" pfm-eat-click>Next</a></li>
+        <li class="pagination-jump">
+            <a href="#" ng-click="showPageSelector();" ng-hide="pageSelectorShown" pfm-eat-click>Jump&hellip;</a>
+            <form ng-submit="jumpToPage()" ng-show="pageSelectorShown">
+                <input type="number" id="pagination-jump-destination" ng-model="inputPageNumber" ng-blur="hidePageSelector()">
+            </form>
+        </li>
     </ul>
 </div>
 

resources/assets/scripts/app/controllers/tracks.coffee

@@ -21,8 +21,8 @@ window.pfm.preloaders['tracks'] = [
 ]
 
 angular.module('ponyfm').controller "tracks", [
-    '$scope', 'tracks', '$state'
+    '$scope', 'tracks', '$state', 'focus'
-    ($scope, tracks, $state) ->
+    ($scope, tracks, $state, focus) ->
         $scope.recentTracks = null
         $scope.query = tracks.mainQuery
         $scope.filters = tracks.filters
@@ -52,10 +52,40 @@ angular.module('ponyfm').controller "tracks", [
 
             $scope.nextPage = $scope.currentPage + 1 if $scope.currentPage < $scope.totalPages
             $scope.prevPage = $scope.currentPage - 1 if $scope.currentPage > 1
-            $scope.pages = [1..$scope.totalPages]
+            $scope.allPages = [1..$scope.totalPages]
+
+            # TODO: turn this into a directive
+            # The actual first page will always be in the paginator.
+            $scope.pages = [1]
+
+            # This logic determines how many pages to add prior to the current page, if any.
+            firstPage = Math.max(2, $scope.currentPage-3)
+            $scope.pages = $scope.pages.concat [firstPage..$scope.currentPage] unless $scope.currentPage == 1
+
+            pagesLeftToAdd = 8-$scope.pages.length
+
+            lastPage = Math.min($scope.totalPages - 1, $scope.currentPage+1+pagesLeftToAdd)
+            $scope.pages = $scope.pages.concat([$scope.currentPage+1..lastPage]) unless $scope.currentPage >= lastPage
+
+            # The actual last page will always be in the paginator.
+            $scope.pages.push($scope.totalPages) unless $scope.totalPages in $scope.pages
+
+        $scope.pageSelectorShown = false
+        $scope.inputPageNumber = $scope.currentPage
 
         $scope.gotoPage = (page) ->
             $state.transitionTo 'content.tracks.list', {filter: $state.params.filter, page: page}
 
+        $scope.showPageSelector = () ->
+            $scope.pageSelectorShown = true
+            focus('#pagination-jump-destination')
+
+        $scope.hidePageSelector = () ->
+            $scope.pageSelectorShown = false
+
+
+        $scope.jumpToPage = () ->
+            $scope.gotoPage($scope.inputPageNumber)
+
         $scope.$on '$destroy', -> tracks.mainQuery = tracks.createQuery()
 ]

resources/assets/scripts/app/services/focus.coffee

@@ -0,0 +1,26 @@
+# Pony.fm - A community for pony fan music.
+# Copyright (C) 2015 Peter Deltchev
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as published by
+# the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+
+# This service provides a way to set the browser's focus to a particular element
+# using a jQuery selector.
+#
+# Based on: https://stackoverflow.com/a/25597540/3225811
+angular.module('ponyfm').factory 'focus', ($timeout, $window) ->
+    (selector) ->
+        $timeout () ->
+            element = $window.jQuery("#{selector}")
+            element.focus() # will do nothing if the selector doesn't select anything

resources/assets/styles/components.less

@@ -408,4 +408,18 @@ html {
       float: right;
     }
   }
+
+  .pagination-jump {
+    form {
+      margin: 0;
+    }
+
+    input[type="number"] {
+      margin: 0;
+      height: 22px;
+      width: 60px;
+      padding: 0 5px;
+      text-align: center;
+    }
+  }
 }

resources/assets/styles/forms.less

@@ -51,13 +51,13 @@ label.strong {
   font-weight: bold;
 }
 
-input[type="text"], input[type="password"], input[type="date"], textarea {
+input[type="text"], input[type="password"], input[type="date"], input[type="number"], textarea {
   padding: 3px;
   border: 1px solid;
   border-color: #9c9c9c #9c9c9c #ccc #ccc;
 }
 
-input[type="text"], input[type="password"], input[type="date"], textarea, select {
+input[type="text"], input[type="password"], input[type="date"], input[type="number"], textarea, select {
   .border-radius(0px);
   .box-sizing(border-box);