From: Alexandre Terrasa <alexandre@moz-code.org>
Date: Tue, 15 Aug 2017 20:59:06 +0000 (-0400)
Subject: nitweb: frontend add ui-pagination directive
X-Git-Url: http://nitlanguage.org

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
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
--- 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'
+			};
+		})
 })();