├── README.md
├── ajaxify-bookmarklet-helper.js
└── ajaxify-html5.js


/README.md:
--------------------------------------------------------------------------------
  1 | # Ajaxify
  2 | Ajaxify your entire website instantly with this simple drop-in script using the HTML5 History API with History.js and jQuery ScrollTo.
  3 | 
  4 | 
  5 | ## Installation
  6 | 
  7 | ### Direct
  8 | 
  9 | ``` html
 10 | <!-- jQuery -->
 11 | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 12 | 
 13 | <!-- jQuery ScrollTo Plugin -->
 14 | <script src="//balupton.github.io/jquery-scrollto/lib/jquery-scrollto.js"></script>
 15 | 
 16 | <!-- History.js -->
 17 | <script src="//browserstate.github.io/history.js/scripts/bundled/html4+html5/jquery.history.js"></script>
 18 | 
 19 | <!-- Ajaxify -->
 20 | <script src="//rawgithub.com/browserstate/ajaxify/master/ajaxify-html5.js"></script>
 21 | ```
 22 | 
 23 | 
 24 | ### Bookmarklet
 25 | 
 26 | ``` javascript
 27 | javascript:var%20e=document.createElement('script');e.setAttribute('src','//rawgithub.com/browserstate/ajaxify/master/ajaxify-bookmarklet-helper.js');document.body.appendChild(e);void(0);
 28 | ```
 29 | 
 30 | ### Extension
 31 | 
 32 | [Install the Ajaxify History.js It! Google Chrome Extension](https://github.com/browserstate/historyjsit.crx)
 33 | 
 34 | 
 35 | 
 36 | ## Explanation
 37 | 
 38 | ### What do the installation instructions do?
 39 | 
 40 | 1. Load in jQuery
 41 | 1. Load in the [jQuery ScrollTo Plugin](https://github.com/balupton/jquery-scrollto) allowing our ajaxify gist to scroll nicely and smoothly to the new loaded in content
 42 | 1. Load in [History.js](https://github.com/browserstate/history.js) with support for jQuery, HTML4 and HTML5
 43 | 1. Load in this gist :-)
 44 | 
 45 | ### What does this gist do?
 46 | 
 47 | 1. Check if History.js is enabled for our current browser, if it isn't then skip this gist.
 48 | 
 49 | 1. Create a way to detect our page's root url, so we can compare our links against it.
 50 | 
 51 | 1. Create a way to convert the ajax repsonse into a format jQuery will understand - as jQuery is only made to handle elements which go inside the body element, not elements made for the head element.
 52 | 
 53 | 1. Define our content and menu selectors, these are using when we load in new pages. We use our content selector to find our new content within the response, and replace the existing content on our current page. We use our menu selector to update the active navigation link in our menu when the page changes.
 54 | 
 55 | 1. Discover our internal links on our website, and upgrade them so when they are clicked it instead of changing the page to the new page, it will change our page's state to the new page. Links with the class `no-ajaxy` will not be upgraded.
 56 | 
 57 | 1. When a page state change occurs, we will:
 58 | 
 59 | 	1. Determine the absolute and relative urls from the new url
 60 | 
 61 | 	1. Use our content selector to find our current page's content and fade it out
 62 | 
 63 | 	1. Send off an ajax request to the absolute url
 64 | 
 65 | 	1. Convert the response into one we can undertand
 66 | 
 67 | 	1. Extract the response's title and set `document.title` and the title element to it
 68 | 
 69 | 	1. Use our menu selector to find our page's menu, then scan for new page's url in the menu, and make that the active menu item and mark other menu items inactive
 70 | 	
 71 | 	1. Finish the current content's fadeout animation
 72 | 
 73 | 	1. Use our menu selector to find the new page's content, and replace the current content with the new page's content
 74 | 
 75 | 	1. Fade the new content in
 76 | 
 77 | 	1. Scroll to the new current content so the user is directed to the right place - rather than them ending up looking at the footer or something instead of your page's content due to the height shift with the content change
 78 | 
 79 | 	1. Inform Google Analytics and other tracking software about the page change
 80 | 
 81 | 
 82 | ## Using this Gist?
 83 | 
 84 | [Post your website in the showcase here!](https://github.com/browserstate/history.js/wiki/Showcase)
 85 | 
 86 | 
 87 | ## Further Reading
 88 | 
 89 | - [The History.js Readme: Your guide to History.js](https://github.com/browserstate/history.js)
 90 | - [Intelligent State Handling: The evolution from hashes, to hashbangs to the HTML5 History API](https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling)
 91 | - [The state of the HTML5 History API, why it isn't good enough and why we need History.js](https://github.com/browserstate/history.js/wiki/The-State-of-the-HTML5-History-API)
 92 | 
 93 | 
 94 | ## History
 95 | 
 96 | - v1.0.1 - 30 September, 2012
 97 | 	- Added completion event (customisable via `completedEventName` defaults to `statechangecomplete`)
 98 | 	- Updated for new Google Analytics code - [credits to](https://gist.github.com/854622#gistcomment-294951) [aspiziri](https://github.com/aspiziri)
 99 | 
100 | 
101 | ## License
102 | 
103 | Licensed under the [New BSD License](http://opensource.org/licenses/BSD-3-Clause)
104 | 


--------------------------------------------------------------------------------
/ajaxify-bookmarklet-helper.js:
--------------------------------------------------------------------------------
 1 | (function (window, undefined) {
 2 |     "use strict";
 3 | 
 4 |     // jQuery
 5 |     window.jQuery || document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"><\/script>');
 6 | 
 7 |     // History & ScrollTo (Wait for jQuery)
 8 |     var interval = setInterval(function () {
 9 |         if (window.jQuery) {
10 |             clearInterval(interval);
11 | 
12 |             // History.js & ScrollTo.js
13 |             window.History || document.write('<script src="//browserstate.github.io/history.js/scripts/bundled/html4+html5/jquery.history.js"><\/script>');
14 |             jQuery.ScrollTo || document.write('<script src="//balupton.github.io/jquery-scrollto/lib/jquery-scrollto.js"><\/script>');
15 | 
16 |             interval = setInterval(function () {
17 |                 if (window.History && window.History.initHtml4) {
18 |                     clearInterval(interval);
19 | 
20 |                     // Ajaxify-html5.js
21 |                     document.write('<script src="//rawgithub.com/browserstate/ajaxify/master/ajaxify-html5.js"><\/script>');
22 | 
23 |                     interval = setInterval(function () {
24 |                         if (jQuery.fn.ajaxify) {
25 |                             clearInterval(interval);
26 |                             alert('History.js It! Is ready for action!');
27 |                         }
28 |                     }, 500);
29 |                 } else if (console && console.log) {
30 |                     console.log("Loading history.js and scrollto.js");
31 |                 }
32 |             }, 500);
33 |         } else if (console && console.log) {
34 |             console.log("Loading jQuery");
35 |         }
36 |     }, 500);
37 | }(window));
38 | 


--------------------------------------------------------------------------------
/ajaxify-html5.js:
--------------------------------------------------------------------------------
  1 | // Ajaxify
  2 | // v1.0.1 - 30 September, 2012
  3 | // https://github.com/browserstate/ajaxify
  4 | (function(window,undefined){
  5 | 	
  6 | 	// Prepare our Variables
  7 | 	var
  8 | 		History = window.History,
  9 | 		$ = window.jQuery,
 10 | 		document = window.document;
 11 | 
 12 | 	// Check to see if History.js is enabled for our Browser
 13 | 	if ( !History.enabled ) {
 14 | 		return false;
 15 | 	}
 16 | 
 17 | 	// Wait for Document
 18 | 	$(function(){
 19 | 		// Prepare Variables
 20 | 		var
 21 | 			/* Application Specific Variables */
 22 | 			contentSelector = '#content,article:first,.article:first,.post:first',
 23 | 			$content = $(contentSelector).filter(':first'),
 24 | 			contentNode = $content.get(0),
 25 | 			$menu = $('#menu,#nav,nav:first,.nav:first').filter(':first'),
 26 | 			activeClass = 'active selected current youarehere',
 27 | 			activeSelector = '.active,.selected,.current,.youarehere',
 28 | 			menuChildrenSelector = '> li,> ul > li',
 29 | 			completedEventName = 'statechangecomplete',
 30 | 			/* Application Generic Variables */
 31 | 			$window = $(window),
 32 | 			$body = $(document.body),
 33 | 			rootUrl = History.getRootUrl(),
 34 | 			scrollOptions = {
 35 | 				duration: 800,
 36 | 				easing:'swing'
 37 | 			};
 38 | 		
 39 | 		// Ensure Content
 40 | 		if ( $content.length === 0 ) {
 41 | 			$content = $body;
 42 | 		}
 43 | 		
 44 | 		// Internal Helper
 45 | 		$.expr[':'].internal = function(obj, index, meta, stack){
 46 | 			// Prepare
 47 | 			var
 48 | 				$this = $(obj),
 49 | 				url = $this.attr('href')||'',
 50 | 				isInternalLink;
 51 | 			
 52 | 			// Check link
 53 | 			isInternalLink = url.substring(0,rootUrl.length) === rootUrl || url.indexOf(':') === -1;
 54 | 			
 55 | 			// Ignore or Keep
 56 | 			return isInternalLink;
 57 | 		};
 58 | 		
 59 | 		// HTML Helper
 60 | 		var documentHtml = function(html){
 61 | 			// Prepare
 62 | 			var result = String(html)
 63 | 				.replace(/<\!DOCTYPE[^>]*>/i, '')
 64 | 				.replace(/<(html|head|body|title|meta|script)([\s\>])/gi,'<div class="document-$1"$2')
 65 | 				.replace(/<\/(html|head|body|title|meta|script)\>/gi,'</div>')
 66 | 			;
 67 | 			
 68 | 			// Return
 69 | 			return $.trim(result);
 70 | 		};
 71 | 		
 72 | 		// Ajaxify Helper
 73 | 		$.fn.ajaxify = function(){
 74 | 			// Prepare
 75 | 			var $this = $(this);
 76 | 			
 77 | 			// Ajaxify
 78 | 			$this.find('a:internal:not(.no-ajaxy)').click(function(event){
 79 | 				// Prepare
 80 | 				var
 81 | 					$this = $(this),
 82 | 					url = $this.attr('href'),
 83 | 					title = $this.attr('title')||null;
 84 | 				
 85 | 				// Continue as normal for cmd clicks etc
 86 | 				if ( event.which == 2 || event.metaKey ) { return true; }
 87 | 				
 88 | 				// Ajaxify this link
 89 | 				History.pushState(null,title,url);
 90 | 				event.preventDefault();
 91 | 				return false;
 92 | 			});
 93 | 			
 94 | 			// Chain
 95 | 			return $this;
 96 | 		};
 97 | 		
 98 | 		// Ajaxify our Internal Links
 99 | 		$body.ajaxify();
100 | 		
101 | 		// Hook into State Changes
102 | 		$window.bind('statechange',function(){
103 | 			// Prepare Variables
104 | 			var
105 | 				State = History.getState(),
106 | 				url = State.url,
107 | 				relativeUrl = url.replace(rootUrl,'');
108 | 
109 | 			// Set Loading
110 | 			$body.addClass('loading');
111 | 
112 | 			// Start Fade Out
113 | 			// Animating to opacity to 0 still keeps the element's height intact
114 | 			// Which prevents that annoying pop bang issue when loading in new content
115 | 			$content.animate({opacity:0},800);
116 | 			
117 | 			// Ajax Request the Traditional Page
118 | 			$.ajax({
119 | 				url: url,
120 | 				success: function(data, textStatus, jqXHR){
121 | 					// Prepare
122 | 					var
123 | 						$data = $(documentHtml(data)),
124 | 						$dataBody = $data.find('.document-body:first'),
125 | 						$dataContent = $dataBody.find(contentSelector).filter(':first'),
126 | 						$menuChildren, contentHtml, $scripts;
127 | 					
128 | 					// Fetch the scripts
129 | 					$scripts = $dataContent.find('.document-script');
130 | 					if ( $scripts.length ) {
131 | 						$scripts.detach();
132 | 					}
133 | 
134 | 					// Fetch the content
135 | 					contentHtml = $dataContent.html()||$data.html();
136 | 					if ( !contentHtml ) {
137 | 						document.location.href = url;
138 | 						return false;
139 | 					}
140 | 					
141 | 					// Update the menu
142 | 					$menuChildren = $menu.find(menuChildrenSelector);
143 | 					$menuChildren.filter(activeSelector).removeClass(activeClass);
144 | 					$menuChildren = $menuChildren.has('a[href^="'+relativeUrl+'"],a[href^="/'+relativeUrl+'"],a[href^="'+url+'"]');
145 | 					if ( $menuChildren.length === 1 ) { $menuChildren.addClass(activeClass); }
146 | 
147 | 					// Update the content
148 | 					$content.stop(true,true);
149 | 					$content.html(contentHtml).ajaxify().css('opacity',100).show(); /* you could fade in here if you'd like */
150 | 
151 | 					// Update the title
152 | 					document.title = $data.find('.document-title:first').text();
153 | 					try {
154 | 						document.getElementsByTagName('title')[0].innerHTML = document.title.replace('<','&lt;').replace('>','&gt;').replace(' & ',' &amp; ');
155 | 					}
156 | 					catch ( Exception ) { }
157 | 					
158 | 					// Add the scripts
159 | 					$scripts.each(function(){
160 | 						var $script = $(this), scriptText = $script.text(), scriptNode = document.createElement('script');
161 | 						if ( $script.attr('src') ) {
162 | 							if ( !$script[0].async ) { scriptNode.async = false; }
163 | 							scriptNode.src = $script.attr('src');
164 | 						}
165 |     						scriptNode.appendChild(document.createTextNode(scriptText));
166 | 						contentNode.appendChild(scriptNode);
167 | 					});
168 | 
169 | 					// Complete the change
170 | 					if ( $body.ScrollTo||false ) { $body.ScrollTo(scrollOptions); } /* http://balupton.com/projects/jquery-scrollto */
171 | 					$body.removeClass('loading');
172 | 					$window.trigger(completedEventName);
173 | 	
174 | 					// Inform Google Analytics of the change
175 | 					if ( typeof window._gaq !== 'undefined' ) {
176 | 						window._gaq.push(['_trackPageview', relativeUrl]);
177 | 					}
178 | 
179 | 					// Inform ReInvigorate of a state change
180 | 					if ( typeof window.reinvigorate !== 'undefined' && typeof window.reinvigorate.ajax_track !== 'undefined' ) {
181 | 						reinvigorate.ajax_track(url);
182 | 						// ^ we use the full url here as that is what reinvigorate supports
183 | 					}
184 | 				},
185 | 				error: function(jqXHR, textStatus, errorThrown){
186 | 					document.location.href = url;
187 | 					return false;
188 | 				}
189 | 			}); // end ajax
190 | 
191 | 		}); // end onStateChange
192 | 
193 | 	}); // end onDomLoad
194 | 
195 | })(window); // end closure
196 | 


--------------------------------------------------------------------------------