diff --git a/.editorconfig b/.editorconfig
index c5eb0981..d646d1d0 100644
--- a/.editorconfig
+++ b/.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}]
diff --git a/public/templates/tracks/index.html b/public/templates/tracks/index.html
index 9f4dc91c..6b5f8433 100644
--- a/public/templates/tracks/index.html
+++ b/public/templates/tracks/index.html
@@ -66,6 +66,12 @@
{{page}}
Next
+
diff --git a/resources/assets/scripts/app/controllers/tracks.coffee b/resources/assets/scripts/app/controllers/tracks.coffee
index 9b34b153..33dbc0d4 100644
--- a/resources/assets/scripts/app/controllers/tracks.coffee
+++ b/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) ->
+ '$scope', 'tracks', '$state', 'focus'
+ ($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()
]
diff --git a/resources/assets/scripts/app/services/focus.coffee b/resources/assets/scripts/app/services/focus.coffee
new file mode 100644
index 00000000..9e12f233
--- /dev/null
+++ b/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 .
+
+
+# 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
diff --git a/resources/assets/styles/components.less b/resources/assets/styles/components.less
index 4089346b..e9a36941 100644
--- a/resources/assets/styles/components.less
+++ b/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;
+ }
+ }
}
diff --git a/resources/assets/styles/forms.less b/resources/assets/styles/forms.less
index 117835ef..fd78f0b1 100644
--- a/resources/assets/styles/forms.less
+++ b/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);