yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

move list view pagination to directive

Browse Source
This commit is contained in:
Mads Rasmussen
2015-10-22 09:42:00 +02:00
parent 153e2ecfae
commit 9449a778e9
4 changed files with 149 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/Umbraco.Web.UI.Client/src/common/directives/components/umbpagination.directive.js Normal file
View File

@@ -0,0 +1,105 @@
(function() {
'use strict';
function PaginationDirective() {
function link(scope, el, attr, ctrl) {
function activate() {
scope.pagination = [];
var i = 0;
if (scope.totalPages <= 10) {
for (i = 0; i < scope.totalPages; i++) {
scope.pagination.push({
val: (i + 1),
isActive: scope.pageNumber === (i + 1)
});
}
}
else {
//if there is more than 10 pages, we need to do some fancy bits
//get the max index to start
var maxIndex = scope.totalPages - 10;
//set the start, but it can't be below zero
var start = Math.max(scope.pageNumber - 5, 0);
//ensure that it's not too far either
start = Math.min(maxIndex, start);
for (i = start; i < (10 + start) ; i++) {
scope.pagination.push({
val: (i + 1),
isActive: scope.pageNumber === (i + 1)
});
}
//now, if the start is greater than 0 then '1' will not be displayed, so do the elipses thing
if (start > 0) {
scope.pagination.unshift({ name: "First", val: 1, isActive: false }, {val: "...",isActive: false});
}
//same for the end
if (start < maxIndex) {
scope.pagination.push({ val: "...", isActive: false }, { name: "Last", val: scope.totalPages, isActive: false });
}
}
}
scope.next = function() {
if (scope.onNext && scope.pageNumber < scope.totalPages) {
scope.pageNumber++;
scope.onNext(scope.pageNumber);
}
};
scope.prev = function(pageNumber) {
if (scope.onPrev && scope.pageNumber > 1) {
scope.pageNumber--;
scope.onPrev(scope.pageNumber);
}
};
scope.goToPage = function(pageNumber) {
if(scope.onGoToPage) {
scope.pageNumber = pageNumber + 1;
scope.onGoToPage(scope.pageNumber);
}
};
var unbindPageNumberWatcher = scope.$watch('pageNumber', function(newValue, oldValue){
activate();
});
scope.$on('$destroy', function(){
unbindPageNumberWatcher();
});
activate();
}
var directive = {
restrict: 'E',
replace: true,
templateUrl: 'views/components/umb-pagination.html',
scope: {
pageNumber: "=",
totalPages: "=",
onNext: "=",
onPrev: "=",
onGoToPage: "="
},
link: link
};
return directive;
}
angular.module('umbraco.directives').directive('umbPagination', PaginationDirective);
})();

26
src/Umbraco.Web.UI.Client/src/views/components/umb-pagination.html Normal file
View File

@@ -0,0 +1,26 @@
<div class="pagination" ng-show="pagination.length > 1">
<ul>
<li ng-class="{disabled:pageNumber <= 1}">
<a href="#" ng-click="prev()" prevent-default>
<localize key="general_previous">Previous</localize>
</a>
</li>
<li ng-repeat="pgn in pagination"
ng-class="{active:pgn.isActive}">
<a href="#" ng-click="goToPage(pgn.val - 1)" prevent-default
ng-bind="pgn.name ? pgn.name : pgn.val"
ng-if="pgn.val != '...'"></a>
<span ng-bind="pgn.val" ng-if="pgn.val == '...'"></span>
</li>
<li ng-class="{disabled:pageNumber >= totalPages}">
<a href="#" ng-click="next()" prevent-default>
<localize key="general_next">Next</localize>
</a>
</li>
</ul>
</div>

66
src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js
View File

@@ -142,29 +142,20 @@ function listViewController($rootScope, $scope, $routeParams, $injector, notific
}
}
$scope.next = function() {
if ($scope.options.pageNumber < $scope.listViewResultSet.totalPages) {
$scope.options.pageNumber++;
$scope.reloadView($scope.contentId);
//TODO: this would be nice but causes the whole view to reload
//$location.search("page", $scope.options.pageNumber);
}
$scope.next = function(pageNumber) {
$scope.options.pageNumber = pageNumber;
$scope.reloadView($scope.contentId);
};
$scope.goToPage = function(pageNumber) {
$scope.options.pageNumber = pageNumber + 1;
$scope.reloadView($scope.contentId);
//TODO: this would be nice but causes the whole view to reload
//$location.search("page", $scope.options.pageNumber);
$scope.options.pageNumber = pageNumber;
$scope.reloadView($scope.contentId);
};
$scope.prev = function() {
if ($scope.options.pageNumber > 1) {
$scope.options.pageNumber--;
$scope.reloadView($scope.contentId);
//TODO: this would be nice but causes the whole view to reload
//$location.search("page", $scope.options.pageNumber);
}
$scope.prev = function(pageNumber) {
console.log(pageNumber);
$scope.options.pageNumber = pageNumber;
$scope.reloadView($scope.contentId);
};
@@ -208,45 +199,6 @@ function listViewController($rootScope, $scope, $routeParams, $injector, notific
$scope.reloadView(id);
}
$scope.pagination = [];
//list 10 pages as per normal
if ($scope.listViewResultSet.totalPages <= 10) {
for (var i = 0; i < $scope.listViewResultSet.totalPages; i++) {
$scope.pagination.push({
val: (i + 1),
isActive: $scope.options.pageNumber == (i + 1)
});
}
}
else {
//if there is more than 10 pages, we need to do some fancy bits
//get the max index to start
var maxIndex = $scope.listViewResultSet.totalPages - 10;
//set the start, but it can't be below zero
var start = Math.max($scope.options.pageNumber - 5, 0);
//ensure that it's not too far either
start = Math.min(maxIndex, start);
for (var i = start; i < (10 + start) ; i++) {
$scope.pagination.push({
val: (i + 1),
isActive: $scope.options.pageNumber == (i + 1)
});
}
//now, if the start is greater than 0 then '1' will not be displayed, so do the elipses thing
if (start > 0) {
$scope.pagination.unshift({ name: "First", val: 1, isActive: false }, {val: "...",isActive: false});
}
//same for the end
if (start < maxIndex) {
$scope.pagination.push({ val: "...", isActive: false }, { name: "Last", val: $scope.listViewResultSet.totalPages, isActive: false });
}
}
});
};

9
src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
View File

@@ -122,6 +122,15 @@
<div ng-include="options.layout.activeLayout.path"></div>
<umb-pagination
ng-if="listViewResultSet.totalPages"
page-number="options.pageNumber"
total-pages="listViewResultSet.totalPages"
on-next="next"
on-prev="prev"
on-go-to-page="goToPage">
</umb-pagination>
<div class="pagination" ng-show="pagination.length > 1">
<ul>