ajaxify-html5-svs.js

// Ajaxify
// v1.0.1 - 30 September, 2012
// https://github.com/browserstate/ajaxify
(function(window,undefined){
	
	// Prepare our Variables
	var
		History = window.History,
		$ = window.jQuery,
		document = window.document;

	// Check to see if History.js is enabled for our Browser
	if ( !History.enabled ) {
		return false;
	}

	// Wait for Document
	$(function(){
		// Prepare Variables
		var
			/* Application Specific Variables */
			contentSelector = '#content',
			$content = $(contentSelector).filter(':first'),
			contentNode = $content.get(0),
			//filter(':first') means it finds the firts item
 			//$menu = $('.slicknav_menu, #menu-header-menu,.nav-menu,#site-navigation,#menu-menu-1,#menu,#nav,nav:first,.nav:first'),
			$menu = $('#site-navigation').filter(':first'),
			activeClass ='current-menu-item',
			//	activeClass ='active, selected, current, youarehere',
			activeSelector = '.current-menu-item',
 			// activeSelector = '.current-menu-item, .current-page-item, .active, .selected, .current, .youarehere',

 			menuChildrenSelector = '> li,> ul > li',
			completedEventName = 'statechangecomplete',
			/* Application Generic Variables */
			$window = $(window),
			$body = $(document.body),
			rootUrl = History.getRootUrl(),
			scrollOptions = {
				duration: 800,
				easing:'swing'
			};
		
		// Ensure Content
		if ( $content.length === 0 ) {
			$content = $body;
		}
		
		// Internal Helper
		$.expr[':'].internal = function(obj, index, meta, stack){
			// Prepare
			var
				$this = $(obj),
				url = $this.attr('href')||'',
				isInternalLink;
			
  
			// Check link
			isInternalLink = url.substring(0,rootUrl.length) === rootUrl || url.indexOf(':') === -1;
			
			// Ignore or Keep
			return isInternalLink;
		};
		

//http://stackoverflow.com/questions/14281283/how-to-use-both-html5-history-state-api-and-keep-the-hyperlinks-with-hashtags-l

		// HTML Helper
		var documentHtml = function(html){
			// Prepare
			var result = String(html)
				.replace(/<\!DOCTYPE[^>]*>/i, '')
				.replace(/<(html|head|body|title|meta|script)([\s\>])/gi,'<div class="document-$1"$2')
				.replace(/<\/(html|head|body|title|meta|script)\>/gi,'</div>')
			;
			
			// Return
			return $.trim(result);
		};
		
		// Ajaxify Helper
		$.fn.ajaxify = function(){
			// Prepare
			var $this = $(this);
			
			// Ajaxify
			$this.find('a:internal:not(.no-ajaxy)').click(function(event){
				// Prepare
				var
					$this = $(this),
					url = $this.attr('href'),
					title = $this.attr('title')||null,
	  				hashPos = url.indexOf('#'), hash;
				
				// Continue as normal for cmd clicks etc
				if ( event.which == 2 || event.metaKey ) { return true; }
				
					//edit to ensure we can still use /#  - https://github.com/browserstate/history.js/issues/57

 				if (hashPos > -1) {
                    hash = url.substr(hashPos);
                    url = url.substring(0, hashPos);
                    }

				// Ajaxify this link
				History.pushState(null,title,url);
               	if (hash) window.location.hash = hash;
				event.preventDefault();
				return false;
			});
			
			// Chain
			return $this;
 		};
		
		// Ajaxify our Internal Links
		$body.ajaxify();
		
		// Hook into State Changes
		$window.bind('statechange',function(){
			// Prepare Variables
			var
				State = History.getState(),
				url = State.url,
				relativeUrl = url.replace(rootUrl,'');

			// Set Loading
			console.log('startloading ajax')
			// check if the toggle is on
           
            if( $body.hasClass('toggled-on')) {
          	 	var storeclass = 'toggled-on';
           	//console.log("toggle-on");
          	}; // if the toggle is on


 
			$body.addClass('loading');
			// $(".home-icon").addClass('loading');
			// $body.addClass('timer'); // timer anim
			// $("#home-fill").attr("class", "on");
			// $('#home-timer').addClass('on');
			// $('#loader').addClass('on');
			// $('.logo-mask').removeClass('off');
			
			// Start Fade Out
			// Animating to opacity to 0 still keeps the element's height intact
			// Which prevents that annoying pop bang issue when loading in new content
			$content.animate({opacity:0},800);
			
			// Ajax Request the Traditional Page
			$.ajax({
				url: url,
				success: function(data, textStatus, jqXHR){
					// Prepare
					var
						$data = $(documentHtml(data)),
						$dataBody = $data.find('.document-body:first'),
						bodyClasses = $data.find('.document-body:first').attr('class'),
						$dataContent = $dataBody.find(contentSelector).filter(':first'),
						$menuChildren, contentHtml, $scripts;
					
					
					
					//Add classes to body
					
					$("body").attr("class", data.match(/body class=\"(.*?)\"/)[1]);


				//	$("body").addClass('timer'); // timer anim
				//	$("#home-fill").attr("class", "on");

				//var trigger_fill = document.getElementById("trigger_fill");

				//trigger_fill.beginElement();
					
					// Fetch the scripts
					$scripts = $dataContent.find('.document-script');
					if ( $scripts.length ) {
						$scripts.detach();
					}

					// Fetch the content
					contentHtml = $dataContent.html()||$data.html();
					if ( !contentHtml ) {
						document.location.href = url;
						return false;
					}
					
					// Update the menu
					$menuChildren = $menu.find(menuChildrenSelector);
					$menuChildren.filter(activeSelector).removeClass(activeClass);
					$menuChildren = $menuChildren.has('a[href^="'+relativeUrl+'"],a[href^="/'+relativeUrl+'"],a[href^="'+url+'"]');
					if ( $menuChildren.length === 1 ) { $menuChildren.addClass(activeClass); }

					// Update the content
					$content.stop(true,true);
					$content.html(contentHtml).ajaxify().css('opacity',100).show(); /* you could fade in here if you'd like */

					// Update the title
					document.title = $data.find('.document-title:first').text();
					try {
						document.getElementsByTagName('title')[0].innerHTML = document.title.replace('<','&lt;').replace('>','&gt;').replace(' & ',' &amp; ');
					}
					catch ( Exception ) { }
					
					// Add the scripts
					$scripts.each(function(){
						var $script = $(this), scriptText = $script.text(), scriptNode = document.createElement('script');
						if ( $script.attr('src') ) {
							if ( !$script[0].async ) { scriptNode.async = false; }
							scriptNode.src = $script.attr('src');
						}
    						scriptNode.appendChild(document.createTextNode(scriptText));
						contentNode.appendChild(scriptNode);
					});

					
					// Complete the change
					if ( $body.ScrollTo||false ) { 
						$body.ScrollTo(scrollOptions); 
					} 
					/* http://balupton.com/projects/jquery-scrollto */
					
			
					// close menu and reset page
				
				$("body").addClass('ggs-hidden ggs-animated'); // This make sure the 'grid classes' are always there afer page load; sometimes they were disappearing on page transition. Unsure why?


 
					$(function() {

					
						if(window.location.hash) {
							
							var hash = $(location).attr('hash');
							$('html,body').animate({scrollTop: $(hash).offset().top},'slow');

						  // Fragment exists
						} else {
						  // Fragment doesn't exist
						  
						  	$('html,body').animate({ scrollTop: 0 }, 'slow'); // temporirly disabled because it clases iwth #linking - fix!

						  	console.log('no hashs')

						}

										 
 					});

 
					if(storeclass) { // check if the toggle was on
			          //	console.log("toggled-on class was on!!");
			          	$body.addClass('toggled-on'); 	
					} // if(storeclass)

					$body.removeClass('loading');



					//	$('#loader').removeClass('on');
					//	$('.logo-mask').addClass('off');
					$window.trigger(completedEventName);
	
					// Add further scripts
			
	
					$.getScript( "http://creativeblocks.co.uk/site/wp-content/themes/creativeblocks/js/cb-enquire.js", function( data, textStatus, jqxhr ) {
				//			  console.log( data ); // Data returned
				//			  console.log( textStatus ); // Success
				//			  console.log( jqxhr.status ); // 200
				//			  console.log( "Load was performed." );
					});

				
					
	
					// Inform Google Analytics of the change
					if ( typeof window._gaq !== 'undefined' ) {
						window._gaq.push(['_trackPageview', relativeUrl]);
					}

					// Inform ReInvigorate of a state change
					if ( typeof window.reinvigorate !== 'undefined' && typeof window.reinvigorate.ajax_track !== 'undefined' ) {
						reinvigorate.ajax_track(url);
						// ^ we use the full url here as that is what reinvigorate supports
					}
				},
				error: function(jqXHR, textStatus, errorThrown){
					document.location.href = url;
					return false;
				}
			}); // end ajax


		

		}); // end onStateChange
		
	}); // end onDomLoad
	



})(window); // end closure

	

This needs tidying up; badly..