From 240bfb78b62e1f3c2c9c3f509e1d24a3de5f6718 Mon Sep 17 00:00:00 2001 From: Peter Deltchev Date: Thu, 29 Oct 2015 03:24:12 -0700 Subject: [PATCH] Improved track pagination to better handle tons of content, including a "jump to page" button. --- .editorconfig | 5 ++- public/templates/tracks/index.html | 6 ++++ .../scripts/app/controllers/tracks.coffee | 36 +++++++++++++++++-- .../assets/scripts/app/services/focus.coffee | 26 ++++++++++++++ resources/assets/styles/components.less | 14 ++++++++ resources/assets/styles/forms.less | 4 +-- 6 files changed, 85 insertions(+), 6 deletions(-) create mode 100644 resources/assets/scripts/app/services/focus.coffee 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
    • +
  • + Jump… +
    + +
    +
    • 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);