Mootools History class

I have recently started developing a history manager class.

You can see the current version in action here

http://www.2c2d.co.uk/demos/historymanager/

This version currently only fully works in Safari 4+, Firefox 3.6, Opera 10.6.3  and IE8. 

In IE 6 & 7 the back button works but when you get to the end of the history it causes an infinite loop of page refreshes. So still working on fixing that.


 


var HistoryManage = new Class({
    iframe:null,
	ieHistory:0,
	urlValue : null,
	initialize: function(firstUrlValue){
       
		this.urlValue = firstUrlValue;
		this.createIframe();
    }, 
    
	createIframe : function(){ 
	
		this.iframe = new IFrame({
			src		: 'blank.htm',
			styles	: { 
				'position'	: 'absolute',
				'top'		: 0,
				'left'		: 0,
				'width'		: '500px', 
				'height'	: '80px',
				'visibility': 'hidden'
			}
		}).inject(document.body);
		
			if(Browser.Engine.trident && (typeof(document.documentMode)=='undefined' || document.documentMode < 8))
			
				doc	= (this.iframe.contentDocument) ? this.iframe.contentDocument  : this.iframe.contentWindow.document;
				doc.open();
				doc.write('<html><body id="state">' + this.checkURL() + '</body></html>');
				doc.close(); 
			}
	},
	
	checkURL: function()
	{
		var page_var = location.hash.replace(/^#/,'');
		return page_var;
	},
	
	checkState: function()
	{	
	 	
		if(Browser.Engine.trident && (typeof(document.documentMode)=='undefined' || document.documentMode < 8))
		
			doc	= (this.iframe.contentDocument) ? this.iframe.contentDocument  : this.iframe.contentWindow.document;
			var docURL = doc.body.innerHTML;
			if(this.urlValue !== docURL)
			{	
				var myURI = new URI('#' + docURL).go();
				
				this.urlValue = docURL;
				
			//	this.refreshLoad(docURL)
			}
		}
 
		if(this.checkURL() != this.urlValue  )
		{	
			 
			// set values for history
			this.urlValue = this.checkURL();
							
			// check what kind of page it is, e.g. collection
			var url_array = new Array();
			url_array = this.checkURL().split('/');
		 	
			var pageType = url_array[1];
			var pageNo = url_array[2]
			
		 	// psuedo htaccess 
		 	
			var urlLoad = 'page.php?url=' + pageNo;
				 
				// request the page
				var newReq = new Request({ url: urlLoad,
				onSuccess: function(response) {
					
				document.id('main_content').set('html', response);  
					  
				}}).get(); 
				
		
			if(Browser.Engine.trident && (typeof(document.documentMode)=='undefined' || document.documentMode < 8))
			
				doc	= (this.iframe.contentDocument) ? this.iframe.contentDocument  : this.iframe.contentWindow.document;
				doc.open();
				doc.write('<html><body id="state">' + this.checkURL() + '</body></html>');
				doc.close(); 
			}
		
	},
	
	refreshLoad: function()
	
		this.urlValue = this.checkURL();
			
		// clean out content
		document.id('main_content').empty();
		  
		// check what kind of page it is, e.g. collection
		var url_array = new Array();
		url_array = this.checkURL().split('/');
		
		var pageType = url_array[1];
		var pageNo = url_array[2]
		var urlLoad = 'page.php?url=' + pageNo;
	 
		// psuedo htaccess  
		// request the page
		var newReq = new Request({ url: urlLoad,
		onSuccess: function(response) {
			document.id('main_content').set('html', response);  
		}}).get(); 	 
	},
	
	startListener: function()
	{
		this.checkRefresh = this.checkState.bind(this).periodical(100);
	},
	
	stopListener: function()
	{
		$clear(this.checkRefresh);
	
});



USAGE


 


window.addEvent('domready', function(){	
// start the history class		
var page_var_first = location.hash.replace(/^#/,'');
var historyManager = new HistoryManage(page_var_first);  	
historyManager.refreshLoad();
historyManager.startListener();
// this applies to our nav to get the page to load			 
$$('a.menu').addEvent('click', function(e){ e.stop(); loadURL(this) } );
function loadURL(evt)
	var newValue = evt.get('href');
	var myURI = new URI(newValue).go();  
	
});