nitweb: frontend add ui-pagination directive

Signed-off-by: Alexandre Terrasa <alexandre@moz-code.org>

diff --git a/share/nitweb/directives/ui/pagination.html b/share/nitweb/directives/ui/pagination.html
new file mode 100644 (file)
index 0000000..4af87d2
--- /dev/null
+++ b/share/nitweb/directives/ui/pagination.html
@@ -0,0 +1,14 @@
+<nav>
+       <ul class='pagination' ng-if='pagination.pagination.max > 1'>
+               <li ng-class='{disabled: pagination.pagination.page <= 1}'>
+                       <a ng-click='pagination.changePage(pagination.pagination.page - 1, pagination.pagination.limit)'><span>&laquo;</span></a>
+               </li>
+               <li ng-repeat='page in pagination.pages'
+                       ng-class='{disabled: pagination.pagination.page == page}'>
+                       <a ng-click='pagination.changePage(page, pagination.pagination.limit)'>{{page}}</a>
+               </li>
+               <li ng-class='{disabled: pagination.pagination.page >= pagination.pagination.max}'>
+                       <a ng-click='pagination.changePage(pagination.pagination.page + 1, pagination.pagination.limit)'><span>&raquo;</span></a>
+               </li>
+       </ul>
+</nav>

diff --git a/share/nitweb/javascripts/ui.js b/share/nitweb/javascripts/ui.js
index 7fc3f8a..7a2f062 100644 (file)
--- a/share/nitweb/javascripts/ui.js
+++ b/share/nitweb/javascripts/ui.js
@@ -257,4 +257,53 @@
                                }
                        };
                })
+
+               /* Pagination */
+
+               .directive('uiPagination', function() {
+                       return {
+                               restrict: 'E',
+                               replace: true,
+                               bindToController: {
+                                       pagination: '=',
+                                       suffix: '=?'
+                               },
+                               controller: function($scope) {
+                                       var vm = this;
+
+                                       $scope.$watch('pagination.pagination', function(pagination) {
+                                               if(!pagination) return;
+                                               vm.computePages(pagination);
+                                       })
+
+                                       vm.computePages = function(pagination) {
+                                               vm.pages = [];
+                                               var len = 11;
+                                               var page = pagination.page;
+                                               var start = page - Math.floor(len / 2);
+                                               var end = page + Math.floor(len / 2);
+
+                                               if(start < 1) {
+                                                       end = Math.min(pagination.max, end + Math.abs(start) + 1)
+                                                       start = 1
+                                               } else if(end > pagination.max) {
+                                                       start = Math.max(1, start - Math.abs(end - pagination.max))
+                                                       end = pagination.max;
+                                               }
+
+                                               for(var i = start; i <= end; i++) {
+                                                       vm.pages.push(i);
+                                               }
+                                       }
+
+                                       vm.changePage = function(page, limit) {
+                                               if(page <= 0 || page > vm.pagination.max) return;
+                                               var suffix = vm.suffix ? vm.suffix : '';
+                                               $scope.$emit('change-page' + suffix, page, limit);
+                                       }
+                               },
+                               controllerAs: 'pagination',
+                               templateUrl: 'directives/ui/pagination.html'
+                       };
+               })
 })();