ajaxpaginate.js

/* 
	ajaxPaginate (will_paginate via jQuery)
	@author Al Shaw for TPM PollTracker (http://polltracker.talkingpointsmemo.com) <[email protected]> 
	December 2009
	
	USAGE!
	Stick this in your page somewhere, with the div you want to inject the new content into as the argument. 
	Here, the injected_div is `.index_polls`. For it to work, you need to have a raw version of your content to inject.
	The raw version should take the format <page>?format=list_only&page=[pagenumber].
	
		<script type="text/javascript">
			$(document).ready(function() {
				$(this).ajaxPaginate('.index_polls');
			});
		</script> 

*/

jQuery.fn.ajaxPaginate = function(injected_div,no_reverse) {
	
	var next = $(".pagination a.next_page");
	var prev = $(".pagination .prev_page");
		
		if (no_reverse === true) {
		var prev_link =	$("<a href=\"#page=1\" class=\"prev_page\" rel=\"prev start\">&laquo; Previous<\/a>"); //assuming we show this when we're on p 2
		} else {
		var prev_link =	$("<a href=\"#page=1\" class=\"prev_page\" rel=\"prev start\">Newer &raquo;<\/a>"); //assuming we show this when we're on p 2		
		}
		
		
	var next_page_link = $(next).attr("href");
	var p = next_page_link.match(/page=\b(\d.*?)\b/)[1]
			
	var next_page_plain = next_page_link+'&format=list_only';	
	var total_pages = $(".pagination").attr('class').match(/\d+/)[0];
	var hash_page = window.location.hash.match(/\d+/);
	
	function injectCallBack() { 
		//use this to do stuff on the injected page
		//i'm going to use it to create edit areas for logged in users
		
		try {
			$().createEditAreas();
		}
		catch(err) {}
				
	}
	
	function getContainerHeight() {
		var injectedHeight = $(injected_div).outerHeight();
			if (injectedHeight == 0 || null) {
				var inner_el = "" + injected_div + " *:first";
				var injectedHeight = $(inner_el).height();
			}
			return injectedHeight;
	}

// 	if (p > 1 && window.location.hash == null) {
// 		window.location.hash = ('page='+(p-1)); // though here you can get ?page=2#page=3. so that's a problem
// 	}
	
	/*	
		really want to keep people in one universe or another. either they're navigating with query strings or hashes.
		though one problem is if they jump universes. maybe a redirect. if they come into ?page=2 and have js 
		enabled, they'll get redirected to #page=2 (can't rewrite URLs in the address bar). otherwise URL could be 
		confusing. For now, we'll assume they're coming into the base URL, and will navigate with hashes.
	*/
	
	if (!hash_page || hash_page == 1) {
			updateNavLink("next_page",p);
	}
	
	if (hash_page) {
	p = hash_page;
	} else {
	p = 1; //DEFINE p
	}
	

	/* logic */
	
	$(injected_div) //spinner for ajax page load
	
		.ajaxStart(function() {				
				$(this).css("height",getContainerHeight);
				$(this).empty();
				$(this).addClass("ajaxLoading");
		})

		.ajaxStop(function() {
				$(this).removeClass("ajaxLoading");
				$(this).css("height",'');
	});


	
	function showNewerBtn()  {
			$(prev).empty();
			$(prev).show();
			$(prev).append(prev_link);
			$(".show_page_count").removeClass("page_count_without_prev");
	}
	
	function hideNewerBtn() {
			$(prev).hide();
			$(".show_page_count").addClass("page_count_without_prev");
	}
	
	function hideOlderBtn() {
 			$(next).hide();
	}
	
	function showOlderBtn() {
			$(next).show();
	}
	
	function updateNavLink(direction,page) {
		$(".pagination a."+direction).attr("href", "#page="+page+"");
	}

	
	function updatePageCountDisplay(p) {
		if ($(".pagination .show_page_count") != null) {
			$(".pagination .show_page_count").remove();
		}
		var show_page_count = "<span class='show_page_count'>"+p+"/"+total_pages+"<\/span>";
		$(".pagination").append(show_page_count);		
	}
	
	function updateHash(p) {
			window.location.hash = "page="+p;
			hash_page = p;
	}
	
	
	//initialize the page based on current conditions
		
		if (hash_page > 1) {
			showNewerBtn();
			updatePageCountDisplay(p);
			$(injected_div).load("?format=list_only&page="+hash_page, null, function() {
			
				injectCallBack();
			
			}); //load page
		
			updateNavLink('next_page',parseInt(p)+1);
			updateNavLink('prev_page',p-1);
		}
		
		if(hash_page == 1) {
			hideNewerBtn();
		}
		
		if (p == total_pages || hash_page == total_pages) {
			hideOlderBtn();
		}
		
	
	/* button actions -- need to merge these into one function */

	//next button

	$(next).click(function(){
		
		p++; //increment page, and adjust links accordingly
		//p is now 2 if I came in from base URL
		
		$(injected_div).load("?format=list_only&page="+p, null, function() {
			
			injectCallBack();
			
		});
					

		//show previous button if we're not on the first page
		updateHash(p);
		updatePageCountDisplay(p);
		

		updateNavLink("next_page",p+1); 
		updateNavLink("prev_page",p-1); // << 3 | 2 | 1 >>

		if (p > 1) {
			showNewerBtn();
		} else {
			hideNewerBtn()
		}
		
		if (p == total_pages || hash_page == total_pages) {
			hideOlderBtn();
		} else {
			showOlderBtn();
		}
		
		return false;
	});
	
	//previous button
	
	$(prev).click(function() {
		
		p--; //decrement page, and adjust links accordingly
		
		//say we're on page 3, going to page 2. page is now 2.

		
		$(injected_div).load("?format=list_only&page="+p, null, function() {
			
			injectCallBack();
			
		});

		updateHash(p);
		updatePageCountDisplay(p);
		
		updateNavLink("next_page",p+1);
		updateNavLink("prev_page",p-1); // << 3 | 2 | 1 >>
				
		if (p <= 1) {
			hideNewerBtn();
		}
		
		if (p >= 1) {
			showOlderBtn();
		}
		
		if (p == total_pages || hash_page == total_pages) {
			hideOlderBtn();
		} else {
			showOlderBtn();
		}
	
	return false;
	});
	
};