Skip to content
This repository was archived by the owner on Feb 26, 2024. It is now read-only.

Fixed pagination wrapping bug. Replaced pagination with Angular-UI Bootstrap pagination. #437

Open
CodyCodeman wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fixed pagination wrapping bug. Replaced pagination with Angular-UI Bootstrap pagination. #437

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions css/bwa.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,3 +134,5 @@ img.AngularJS-large {
.modal-backdrop.fade.in {
display: block;
}

.pagination a { cursor: pointer; }
33 changes: 14 additions & 19 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@

$script('//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', function() {
$script(['//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js',
'js/bootstrap.min.js', 'js/bwa.js'], function() {
'js/bootstrap.min.js', 'js/ui-bootstrap-custom-0.8.0.min.js', 'js/bwa.js'], function() {
$().dropdown();
angular.bootstrap(document, ['bwaApp']);
});
Expand Down Expand Up @@ -133,7 +133,15 @@ <h2>{{project.name}}</h2>
<span class="label label-important bwa-label" ng-repeat="tag in project.tags" ng-click="addTag(tag)">{{tag}}</span>
</div>
</script>

<script type="text/ng-template" id="template/pagination/pagination.html">
<div class="pagination">
<ul>
<li ng-repeat="page in pages" ng-class="{active: page.active, disabled: page.disabled}">
<a ng-click="selectPage(page.number)">{{page.text}}</a>
</li>
</ul>
</div>
</script>
<div class="row first bwa-featured">
<div class="span8">
<bwa-project project="featured" lightbox="lightbox" class= "well bwa-project-well" add-tag="addTag"></bwa-project>
Expand Down Expand Up @@ -197,29 +205,16 @@ <h2>{{project.name}}</h2>

<div class="spacer"></div>

<div class="row bwa-projects" ng-repeat="projectCol in pagedProjects[currentPage]">
<div class="row bwa-projects" ng-repeat="projectCol in pagedProjects[currentPage-1]">
<div class="span6" ng-repeat="project in projectCol">
<bwa-project project="project" lightbox="lightbox" add-tag="addTag" class= "well bwa-project-well"></bwa-project>
</div>
</div>

<div class="center">
<div class="pagination">
<ul>
<li ng-class="{disabled: currentPage == 0}">
<a href ng-click="prevPage()">« Prev</a>
</li>
<li ng-repeat="n in range(pagedProjects.length)"
ng-class="{active: n == currentPage}"
ng-click="setPage()">
<a href ng-bind="n + 1">1</a>
</li>
<li ng-class="{disabled: currentPage == pagedProjects.length - 1}">
<a href ng-click="nextPage()">Next »</a>
</li>
</ul>
</div>
</div>

<pagination total-items="filteredProjects.length" items-per-page="itemsPerPage" page="currentPage" max-size="19"></pagination>
</div>

</div>

Expand Down
51 changes: 21 additions & 30 deletions js/bwa.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
var app = angular.module('bwaApp', []);
var app = angular.module('bwaApp', ['ui.bootstrap']);

app.directive('bwaProject', function() {
return {
Expand Down Expand Up @@ -107,7 +107,7 @@ app.controller('BWAController', function ($scope, $http, $filter) {
$scope.error = "Cannot get data from the server";
});

var num = 2;
var numCols = 2;
$scope.filteredProjects = [];
$scope.groupedProjects = [];

Expand Down Expand Up @@ -139,43 +139,50 @@ app.controller('BWAController', function ($scope, $http, $filter) {
$scope.filteredProjects = $filter('orderBy')($scope.filteredProjects, $scope.sortPrep);
}

$scope.currentPage = 0;
//Pagination was born yesterday, knows nothing about zero
//Corrected with "currentPage-1" for the index in the view
//Seems hacky, but didn't want to modify the vendor paginator
$scope.currentPage = 1;
$scope.group();
};

// re-calculate groupedProjects in place
$scope.group = function () {

$scope.groupedProjects.length = Math.ceil($scope.filteredProjects.length / num);
$scope.groupedProjects.length = Math.ceil($scope.filteredProjects.length / numCols);

for (var i = 0; i < $scope.filteredProjects.length; i++) {
if (i % num === 0) {
$scope.groupedProjects[Math.floor(i / num)] = [ $scope.filteredProjects[i] ];
if (i % numCols === 0) {
$scope.groupedProjects[Math.floor(i / numCols)] = [ $scope.filteredProjects[i] ];
} else {
$scope.groupedProjects[Math.floor(i / num)].push($scope.filteredProjects[i]);
$scope.groupedProjects[Math.floor(i / numCols)].push($scope.filteredProjects[i]);
}
}

if ($scope.filteredProjects.length % num !== 0) {
$scope.groupedProjects[$scope.groupedProjects.length - 1].length = num - ($scope.filteredProjects.length % num);
if ($scope.filteredProjects.length % numCols !== 0) {
$scope.groupedProjects[$scope.groupedProjects.length - 1].length = numCols - ($scope.filteredProjects.length % numCols);
}

$scope.groupToPages();
};

var itemsPerPage = 5;
var itemsPerCol = 5;
$scope.itemsPerPage = itemsPerCol*numCols;
$scope.pagedProjects = [];
$scope.currentPage = 0;
//Pagination was born yesterday, knows nothing about zero
//Corrected with "currentPage-1" in the view
//Seems hacky, but didn't want to modify the vendor paginator
$scope.currentPage = 1;

// calc pages in place
$scope.groupToPages = function () {
$scope.pagedProjects = [];

for (var i = 0; i < $scope.groupedProjects.length; i++) {
if (i % itemsPerPage === 0) {
$scope.pagedProjects[Math.floor(i / itemsPerPage)] = [ $scope.groupedProjects[i] ];
if (i % itemsPerCol === 0) {
$scope.pagedProjects[Math.floor(i / itemsPerCol)] = [ $scope.groupedProjects[i] ];
} else {
$scope.pagedProjects[Math.floor(i / itemsPerPage)].push($scope.groupedProjects[i]);
$scope.pagedProjects[Math.floor(i / itemsPerCol)].push($scope.groupedProjects[i]);
}
}
};
Expand Down Expand Up @@ -231,20 +238,4 @@ app.controller('BWAController', function ($scope, $http, $filter) {
return ret;
};

$scope.prevPage = function () {
if ($scope.currentPage > 0) {
$scope.currentPage--;
}
};

$scope.nextPage = function () {
if ($scope.currentPage < $scope.pagedProjects.length - 1) {
$scope.currentPage++;
}
};

$scope.setPage = function () {
$scope.currentPage = this.n;
};

});
Loading