litvinovg/vitro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

NIHVIVO-1073 Pagination for browsing individuals

Browse source
This commit is contained in:
nac26 2011-01-26 14:32:26 +00:00
parent abb2228b9b
commit f9faa680f2
1 changed files with 85 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

108
webapp/web/js/menupage/browseByVClass.js
View file

@ -15,39 +15,57 @@ var browseByVClass = {
// Create references to frequently used elements for convenience // Create references to frequently used elements for convenience
initObjects: function() { initObjects: function() {
this.vgraphVClasses = $('#vgraph-childClasses'); this.vgraphVClasses = $('#vgraph-classes');
this.vgraphVClassLinks = $('#vgraph-childClasses li a'); this.vgraphVClassLinks = $('#vgraph-classes li a');
this.browseVClasses = $('#browse-childClasses'); this.browseVClasses = $('#browse-classes');
this.browseVClassLinks = $('#browse-childClasses li a'); this.browseVClassLinks = $('#browse-classes li a');
this.selectedBrowseVClass = $('#browse-childClasses li a.selected'); this.selectedBrowseVClass = $('#browse-classes li a.selected');
this.alphaIndex = $('#alpha-browse-childClass'); this.alphaIndex = $('#alpha-browse-individuals');
this.alphaIndexLinks = $('#alpha-browse-childClass li a'); this.alphaIndexLinks = $('#alpha-browse-individuals li a');
this.selectedAlphaIndex = $('#alpha-browse-childClass li a.selected'); this.selectedAlphaIndex = $('#alpha-browse-individuals li a.selected');
this.individualsInVClass = $('#individuals-in-childClass ul'); this.paginationNav = $('nav.pagination');
this.paginationLinks = $('nav.pagination li a');
this.individualsInVClass = $('#individuals-in-class ul');
this.individualsContainer = $('#individuals-in-class');
}, },
// Event listeners. Called on page load // Event listeners. Called on page load
bindEventListeners: function() { bindEventListeners: function() {
// Listeners for vClass switching // Listeners for vClass switching
this.vgraphVClassLinks.click(function() { this.vgraphVClassLinks.click(function() {
uri = $(this).attr("data-uri"); uri = $(this).attr('data-uri');
browseByVClass.getIndividuals(uri); browseByVClass.getIndividuals(uri);
}); });
this.browseVClassLinks.click(function() { this.browseVClassLinks.click(function() {
uri = $(this).attr("data-uri"); uri = $(this).attr('data-uri');
browseByVClass.getIndividuals(uri); browseByVClass.getIndividuals(uri);
return false; return false;
}) });
// Listener for alpha switching // Listener for alpha switching
this.alphaIndexLinks.click(function() { this.alphaIndexLinks.click(function() {
uri = $('#browse-childClasses li a.selected').attr("data-uri"); uri = $('#browse-classes li a.selected').attr('data-uri');
alpha = $(this).attr("data-alpha"); alpha = $(this).attr('data-alpha');
// alpha = $(this).text().substring(0, 1); // alpha = $(this).text().substring(0, 1);
browseByVClass.getIndividuals(uri, alpha); browseByVClass.getIndividuals(uri, alpha);
return false; return false;
}) });
// Call the pagination listener
this.paginationListener();
},
paginationListener: function() {
// Listener for page switching
// separate from the rest because it needs to be callable
$('nav.pagination li a').click(function() {
uri = $('#browse-classes li a.selected').attr('data-uri');
alpha = $('#alpha-browse-individuals li a.selected').attr('data-alpha');
page = $(this).attr('class').substring(4,5);
browseByVClass.getIndividuals(uri, alpha, page);
return false;
});
}, },
// Load individuals for default class as specified by menupage template // Load individuals for default class as specified by menupage template
@ -57,16 +75,54 @@ var browseByVClass = {
} }
}, },
getIndividuals: function(vclassUri, alpha) { getIndividuals: function(vclassUri, alpha, page) {
url = this.dataServiceUrl + encodeURIComponent(vclassUri); url = this.dataServiceUrl + encodeURIComponent(vclassUri);
if ( alpha && alpha != "all") { if ( alpha && alpha != "all") {
url = url + '&alpha=' + alpha; 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(); this.individualsInVClass.empty();
$('nav.pagination').remove();
$.getJSON(url, function(results) { $.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>';
// Add the pagination above the list of individuals and call the listener
browseByVClass.individualsContainer.prepend(pagination);
browseByVClass.paginationListener();
}
$.each(results.individuals, function(i, item) { $.each(results.individuals, function(i, item) {
label = results.individuals[i].label; label = results.individuals[i].label;
moniker = results.individuals[i].moniker; moniker = results.individuals[i].moniker;
@ -91,7 +147,13 @@ var browseByVClass = {
listItem += '</li>'; listItem += '</li>';
browseByVClass.individualsInVClass.append(listItem); 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.selectedVClass(results.vclass.URI);
browseByVClass.selectedAlpha(alpha); browseByVClass.selectedAlpha(alpha);
}); });
@ -99,12 +161,12 @@ var browseByVClass = {
selectedVClass: function(vclassUri) { selectedVClass: function(vclassUri) {
// Remove active class on all vClasses // Remove active class on all vClasses
$('#browse-childClasses li a.selected').removeClass('selected'); $('#browse-classes li a.selected').removeClass('selected');
// Can't figure out why using this.selectedBrowseVClass doesn't work here // Can't figure out why using this.selectedBrowseVClass doesn't work here
// this.selectedBrowseVClass.removeClass('selected'); // this.selectedBrowseVClass.removeClass('selected');
// Add active class for requested vClass // Add active class for requested vClass
$('#browse-childClasses li a[data-uri="'+ vclassUri +'"]').addClass('selected'); $('#browse-classes li a[data-uri="'+ vclassUri +'"]').addClass('selected');
}, },
selectedAlpha: function(alpha) { selectedAlpha: function(alpha) {
@ -113,10 +175,10 @@ var browseByVClass = {
alpha = "all"; alpha = "all";
} }
// Remove active class on all letters // Remove active class on all letters
$('#alpha-browse-childClass li a.selected').removeClass('selected'); $('#alpha-browse-individuals li a.selected').removeClass('selected');
// Add active class for requested alpha // Add active class for requested alpha
$('#alpha-browse-childClass li a[data-alpha="'+ alpha +'"]').addClass('selected'); $('#alpha-browse-individuals li a[data-alpha="'+ alpha +'"]').addClass('selected');
} }
}; };