Pagination.class.js

/**
 * @author		Markus Bartz
 * @copyright	2011 Markus Bartz
 * @license		GNU Lesser General Public License <http://www.gnu.org/licenses/lgpl.html>
 * 
 * Parts of the logic are borrowed by "lib/system/template/plugin/TemplatePluginFunctionPages.class.php"
 * from the WoltLab® Community Framework™ which is licensed under the GNU Lesser General Public License.
 */
var Pagination = Class.create({
	// some "static" variables
	SHOW_LINKS: 11,
	SHOW_SUB_LINKS: 20,
	
	/**
	 * Initialize the paginator instance
	 * 
	 * @parameter	string	paginatorID
	 * @parameter	integer	activePage
	 * @parameter	integer	maxPage
	 */
	initialize: function(paginatorID, activePage, maxPage) {
		// initialize variables
		this.paginatorID = paginatorID;
		this.paginator = $(this.paginatorID);
		this.activePage = activePage;
		this.maxPage = maxPage;
		
		// now do the "real" work
		if (this.paginator != undefined && this.paginator != null) {
			// add correct class for pagination
			this.paginator.addClassName('pageNavigation');
			
			this.render();
		}
	},
	
	/**
	 * Renders this paginator instance
	 */
	render: function() {
		// makes no sense to think about rendering at all, if we have no paginator
		if (this.paginator != undefined && this.paginator != null) {
			// only render if we have more than 1 page
			if (this.maxPage > 1) {
				// make sure pagination is visible
				if (this.paginator.hasClassName('hidden')) {
					this.paginator.removeClassName('hidden');
				}
				if (!this.paginator.visible()) {
					this.paginator.toggle();
				}
				
				// now do the "real" rendering
				// clear previous pages
				this.paginator.childElements().each(function (element) {
					element.remove();
				});
				
				// add list
				var pageList = new Element('ul');
				this.paginator.insert(pageList);
				
				// add previous button
				var previousElement = new Element('li', {
					'class': 'skip'
				});
				pageList.insert(previousElement);
				
				if (this.activePage > 1) {
					var previousLink = new Element('a'); // TODO: add title from language variable
					previousElement.insert(previousLink);
					previousLink.observe('click', this.switchPage.bindAsEventListener(this, this.activePage - 1));
					
					var previousImage = new Element('img', {
						src: RELATIVE_WCF_DIR + 'icon/previousS.png',
						alt: ''
					});
					previousLink.insert(previousImage);
				}
				else {
					var previousImage = new Element('img', {
						src: RELATIVE_WCF_DIR + 'icon/previousDisabledS.png',
						alt: ''
					});
					previousElement.insert(previousImage);
				}
				
				// add first page
				pageList.insert(this.renderLink(1));
				
				// calculate page links
				var maxLinks = this.SHOW_LINKS - 4;
				var linksBefore = this.activePage - 2;
				if (linksBefore < 0) linksBefore = 0;
				var linksAfter = this.maxPage - (this.activePage + 1);
				if (linksAfter < 0) linksAfter = 0;
				if (this.activePage > 1 && this.activePage < this.maxPage) maxLinks--;
				
				var half = maxLinks / 2;
				var left = this.activePage;
				var right = this.activePage;
				if (left < 1) left = 1;
				if (right < 1) right = 1;
				if (right > this.maxPage - 1) right = this.maxPage - 1;
				
				if (linksBefore >= half) {
					left -= half;
				}
				else {
					left -= linksBefore;
					right += half - linksBefore;
				}
				
				if (linksAfter >= half) {
					right += half;
				}
				else {
					right += linksAfter;
					left -= half - linksAfter;
				}
				
				right = right.ceil();
				left = left.ceil();
				if (left < 1) left = 1;
				if (right > this.maxPage) right = this.maxPage;
				
				// left ... links
				if (left > 1) {
					if (left - 1 < 2) {
						
					}
				}
				
				// visible links
				for (var i = left + 1; i < right; i++) {
					pageList.insert(this.renderLink(i));
				}
				
				// right ... links
				//TODO
				
				// add last page
				pageList.insert(this.renderLink(this.maxPage));
				
				// add next button
				var nextElement = new Element('li', {
					'class': 'skip'
				});
				pageList.insert(nextElement);
				
				if (this.activePage < this.maxPage) {
					var nextLink = new Element('a'); // TODO: add title from language variable
					nextElement.insert(nextLink);
					nextLink.observe('click', this.switchPage.bindAsEventListener(this, this.activePage + 1));
					
					var nextImage = new Element('img', {
						src: RELATIVE_WCF_DIR + 'icon/nextS.png',
						alt: ''
					});
					nextLink.insert(nextImage);
				}
				else {
					var nextImage = new Element('img', {
						src: RELATIVE_WCF_DIR + 'icon/nextDisabledS.png',
						alt: ''
					});
					nextElement.insert(nextImage);
				}
			}
			else {
				// otherwise hide the paginator if not already hidden
				this.paginator.addClassName('hidden');
			}
		}
	},
	
	/**
	 * Renders a page link
	 * 
	 * @parameter	integer	page
	 * 
	 * @return		Element
	 */
	renderLink: function(page) {
		var pageElement = new Element('li');
		if (page != this.activePage) {
			var pageLink = new Element('a').update(this.formatPageNumber(page)); 
			pageElement.insert(pageLink);
			pageLink.observe('click', this.switchPage.bindAsEventListener(this, page));
		}
		else {
			pageElement.addClassName('active');
			var pageSubElement = new Element('span').update(this.formatPageNumber(page));
			pageElement.insert(pageSubElement);
		}
		
		return pageElement;
	},
	
	/**
	 * Switches to the given page
	 */
	switchPage: function(event, page) {
		if (page != this.activePage) {
			alert('Page: ' + String(page));
		}
	},
	
	/**
	 * Formats the page number
	 * 
	 * @parameter	integer	page
	 * 
	 * @return		string
	 * 
	 * @todo		really format number
	 */
	formatPageNumber: function(page) {
		return String(page);
	}
});