NIHVIVO-1073 Pagination for browsing individuals

productMods/js/menupage/browseByVClassPeople.js

@@ -6,17 +6,56 @@
 var getPersonIndividuals = browseByVClass.getIndividuals;
 
 // Assigning the proxy function
-browseByVClass.getIndividuals = function(vclassUri, alpha) {
+browseByVClass.getIndividuals = function(vclassUri, alpha, page) {
-    // alert("This is the mothership!");
     url = this.dataServiceUrl + encodeURIComponent(vclassUri);
     if ( alpha && alpha != "all") {
         url = url + '&alpha=' + alpha;
     }
+    if ( page ) {
+        url += '&page=' + page;
+    } else {
+        page = 1;
+    }
     
-    // First wipe currently displayed individuals
+    // First wipe currently displayed individuals and existing pagination
     this.individualsInVClass.empty();
+    $('nav.pagination').remove();
     
     $.getJSON(url, function(results) {
+        // Check to see if we're dealing with pagination
+        if ( results.pages.length ) {
+            pages = results.pages;
+            
+            pagination = '<nav class="pagination menupage">';
+            pagination += '<h3>page</h3>';
+            pagination += '<ul>';
+            $.each(pages, function(i, item) {
+                anchorOpen = '<a class="page'+ pages[i].text +' round" href="#" title="View page '+ pages[i].text +' of the results">';
+                anchorClose = '</a>';
+                
+                pagination += '<li class="page'+ pages[i].text;
+                pagination += ' round';
+                // Test for active page
+                if ( pages[i].text == page) {
+                    pagination += ' selected';
+                    anchorOpen = "";
+                    anchorClose = "";
+                }
+                pagination += '" role="listitem">';
+                pagination += anchorOpen;
+                pagination += pages[i].text;
+                pagination += anchorClose;
+                pagination += '</li>';
+            })
+            pagination += '</ul>';
+            // browseByVClass.paginationNav.remove();
+            
+            // Add the pagination above the list of individuals and call the listener
+            browseByVClass.individualsContainer.prepend(pagination);
+            browseByVClass.paginationListener();
+            
+        }
+        
         $.each(results.individuals, function(i, item) {
             label = results.individuals[i].label;
             firstName = results.individuals[i].firstName;
@@ -47,7 +86,7 @@ browseByVClass.getIndividuals = function(vclassUri, alpha) {
                 image = browseByVClass.baseUrl + results.individuals[i].thumbUrl;
             }
             // Build the content of each list item, piecing together each component
-            listItem = '<li class="vcard individual-foaf-person" role="listitem" role="navigation">';
+            listItem = '<li class="vcard individual foaf-person" role="listitem" role="navigation">';
             listItem += '<img src="'+ image +'" width="90" height="90" alt="'+ fullName +'" />';
             listItem += '<h1 class="fn thumb"><a href="'+ profileUrl +'" title="View the profile page for '+ fullName +'">'+ fullName +'</a></h1>';
             // Include the calculated preferred title (see above) only if it's not empty
@@ -57,7 +96,13 @@ browseByVClass.getIndividuals = function(vclassUri, alpha) {
             listItem += '</li>';
             browseByVClass.individualsInVClass.append(listItem);
         })
-        // set selected class and alpha
+        
+        // Add the pagination below the list as well
+        if ( results.pages.length ) {
+            browseByVClass.individualsContainer.append(pagination);
+        }
+        
+        // set selected class, alpha and page
         browseByVClass.selectedVClass(results.vclass.URI);
         browseByVClass.selectedAlpha(alpha);
     });