jQuery.telligent.evolution.ui.components.page
UI Component which handles automatic presentation of a paging control. Transforms the output from $core_v2_ui.Page(), which is a <span class="ui-page"></span> stub. The default implementation uses the evolutionPager plugin. Overrides can be provided at the theme level to present paging differently, either by different usage of evolutionPager plugin or by an entirely different paging UI.
Options
Data made available to instances of the component:
currentpage: Current page indexpagesize: Items per pagetotalitems: Total itemspagekey: Pager-specific query string key to use for page numberspagedcontenturl: Optional ajax endpoint for retrieving paged content (for ajax paging)pagedcontentwrapperid: Optional DOM id of an element to update with paged content retrieved from the ajax paging endpointpagedcontentpagingevent: Optional name of a client message to raise when ajax paging is occurringpagedcontentpagedevent: Optional name of a client message to raise when ajax paging has completedloadingindicator: When true, shows a loading indicator mask on thepagedcontentpagingevent, hiding it on thepagedcontentpagedeventevent.loadonanyhashchange: When true, reloads the currently viewed page on anyhashchangewhen using ajax paging-
configuration: Object of all other keys and values passed via the options dictionary to$core_v2_ui.Page(), regardless of whether they have been pre-defined-
jQuery.evolutionPager looks for the following optional configuration:
ShowPrevious: Whether 'previous' links should be shown (default:false)ShowNext: Whether 'next' links should be shown (default:false)ShowFirst: Whether 'first' links should be shown (default:true)ShowLast: Whether 'last' links should be shown (default:true)ShowIndividualPages: Whether individual pages should be shown (default:true)NumberOfPagesToDisplay:: Number of individual pages to show (default:5)
-
jQuery.evolutionPager looks for the following optional configuration:
Example
A barebones UI component override which would result in rendering the current page number with back and next links, and not performing any paging via Ajax regardless of whether a pagedcontenturl was provided:
$.telligent.evolution.ui.components.page = {
setup: function() {
},
add: function(elm, options) {
var message = '',
currentPage = parseInt(options.currentpage, 10)
// show a previous link
if(currentPage > 0) {
// build a URL using the query string key
var previousPageQuery = {}, previousPageHref;
previousPageQuery[options.pagekey] = currentPage;
previousPageHref = $.telligent.evolution.html.encode(
$.telligent.evolution.url.modify({ query: previousPageQuery }));
message = '<a href="' + previousPageHref + '">Previous</a>';
}
// show current page
message = message + 'Page: ' + (currentPage + 1);
// show a next link
if((currentPage + 1) < options.totalitems / options.pagesize) {
// build a URL using the query string key
var nextPageQuery = {}, nextPageHref;
nextPageQuery[options.pagekey] = currentPage + 2;
nextPageHref = $.telligent.evolution.html.encode(
$.telligent.evolution.url.modify({ query: nextPageQuery }));
message = message + '<a href="' + nextPageHref + '">Next</a>';
}
$(elm).html(message);
}
};
Default Implementation
For reference purposes or as the basis for an override:
(function($){
function showLoadingIndicator(container, mask) {
var containerOffset = container.offset();
mask.hide().appendTo('body').css({
width: container.width(),
height: container.height(),
top: containerOffset.top,
left: containerOffset.left
}).show();
}
function hideLoadingIndicator(container, mask) {
mask.hide();
}
function buildMask() {
return $('<div></div>').css({
backgroundColor: '#fff',
position: 'absolute',
opacity: .75,
zIndex: 1
});
}
var ajaxPagerContexts = {};
$.telligent.evolution.ui.components.page = {
setup: function() {
},
add: function(elm, options) {
// general settings
var settings = {
currentPage: parseInt(options.currentpage, 10),
pageSize: parseInt(options.pagesize, 10),
totalItems: parseInt(options.totalitems, 10),
showPrevious: typeof options.configuration.ShowPrevious === 'undefined' ? false : options.configuration.ShowPrevious === 'true',
showNext: typeof options.configuration.ShowNext === 'undefined' ? false : options.configuration.ShowNext === 'true',
showFirst: typeof options.configuration.ShowFirst === 'undefined' ? true : options.configuration.ShowFirst === 'true',
showLast: typeof options.configuration.ShowLast === 'undefined' ? true : options.configuration.ShowLast === 'true',
showIndividualPages: typeof options.configuration.ShowIndividualPages === 'undefined' ? true : options.configuration.ShowIndividualPages === 'true',
numberOfPagesToDisplay: typeof options.configuration.NumberOfPagesToDisplay === 'undefined' ? 5 : parseInt(options.configuration.NumberOfPagesToDisplay, 10),
pageKey: options.pagekey,
hash: options.configuration.Target,
baseUrl: options.configuration.BaseUrl || window.location.href,
template: typeof options.configuration.Template !== 'undefined' ? options.configuration.Template : '' +
' <% foreach(links, function(link, i) { %> ' +
' <% if(link.type === "first") { %> ' +
' <a href="<%: link.url %>" class="first" data-type="first" data-page="<%= link.page %>" data-selected="false"><span>«</span></a> ' +
' <% } else if(link.type === "previous") { %> ' +
' <a href="<%: link.url %>" class="previous" data-type="previous" data-page="<%= link.page %>" data-selected="false"><span><</span></a> ' +
' <% } else if(link.type === "page") { %> ' +
' <a href="<%: link.url %>" class="page<%= link.selected ? " selected" : "" %>" data-type="page" data-page="<%= link.page %>" data-selected="<%= link.selected ? "true" : "false" %>"><span><%= link.page %></span></a> ' +
' <% } else if(link.type === "next") { %> ' +
' <a href="<%: link.url %>" class="next" data-type="next" data-page="<%= link.page %>" data-selected="false"><span>></span></a> ' +
' <% } else if(link.type === "last") { %> ' +
' <a href="<%: link.url %>" class="last" data-type="last" data-page="<%= link.page %>" data-selected="false"><span>»</span></a> ' +
' <% } %> ' +
' <% if(i < (links.length - 1)) { %> ' +
' <span class="separator"></span> ' +
' <% } %> ' +
' <% }); %> '
};
// ajax-specific options
if(options.pagedcontenturl) {
ajaxPagerContexts[options.pagedcontentpagingevent] = {
onPage: function(pageIndex, complete, hash) {
var data = hash || {};
data[options.pagekey] = pageIndex;
// modify the url instead of passing as data, as the url might have this in the querystring already
var url = $.telligent.evolution.url.modify({ url: options.pagedcontenturl, query: data });
$.telligent.evolution.get({
url: url,
cache: false,
success: function(response) {
complete(response);
}
});
}
};
$.extend(settings, {
onPage: function(pageIndex, complete, hash) {
ajaxPagerContexts[options.pagedcontentpagingevent].onPage(pageIndex, complete, hash);
},
refreshOnAnyHashChange: (options.loadonanyhashchange === 'true'),
pagedContentContainer: '#' + options.pagedcontentwrapperid,
pagedContentPagingEvent: options.pagedcontentpagingevent,
pagedContentPagedEvent: options.pagedcontentpagedevent,
transition: options.configuration.Transition,
transitionDuration: typeof options.configuration.TransitionDuration === 'undefined' ? 200 : parseInt(options.configuration.TransitionDuration, 10)
});
}
$(elm).evolutionPager(settings);
if(options.loadingindicator === 'true') {
var container = $('#' + options.pagedcontentwrapperid), mask = buildMask();
$.telligent.evolution.messaging.subscribe(options.pagedcontentpagingevent, function(){
showLoadingIndicator(container, mask);
});
$.telligent.evolution.messaging.subscribe(options.pagedcontentpagedevent, function(){
hideLoadingIndicator(container, mask);
});
}
}
};
}(jQuery));