Permalink
Browse files

Now uses History.js. Cleaned javascript.

  • Loading branch information...
1 parent 81459cf commit 78fe4f2e4865390157b64cdb50d3e4af7e85c919 @balupton committed Jan 26, 2011
Showing with 21,757 additions and 59 deletions.
  1. +70 −27 app/views/layouts/application.html.erb
  2. +4 −0 app/views/search/search.html.erb
  3. +147 −0 public/javascripts/history.js/README.md
  4. +322 −0 public/javascripts/history.js/cli
  5. +37 −0 public/javascripts/history.js/demo/html5.html
  6. +70 −0 public/javascripts/history.js/demo/index.php
  7. +1 −0 public/javascripts/history.js/demo/pages/cool.php
  8. +1 −0 public/javascripts/history.js/demo/pages/form.php
  9. +1 −0 public/javascripts/history.js/demo/pages/welcome.php
  10. +54 −0 public/javascripts/history.js/demo/scripts/demo.js
  11. +14 −0 public/javascripts/history.js/demo/scripts/dojo.js
  12. +7,179 −0 public/javascripts/history.js/demo/scripts/jquery.js
  13. +5,367 −0 public/javascripts/history.js/demo/scripts/mootools.js
  14. +6,082 −0 public/javascripts/history.js/demo/scripts/prototype.js
  15. +257 −0 public/javascripts/history.js/demo/tests.php
  16. +1 −0 public/javascripts/history.js/scripts/compressed/history.adapter.dojo.min.js
  17. +1 −0 public/javascripts/history.js/scripts/compressed/history.adapter.jquery.min.js
  18. +1 −0 public/javascripts/history.js/scripts/compressed/history.adapter.mootools.min.js
  19. +4 −0 public/javascripts/history.js/scripts/compressed/history.adapter.prototype.min.js
  20. +29 −0 public/javascripts/history.js/scripts/compressed/history.min.js
  21. +7 −0 public/javascripts/history.js/scripts/compressed/json2.min.js
  22. +1 −0 public/javascripts/history.js/scripts/uncompressed/history.adapter.dojo.js
  23. +63 −0 public/javascripts/history.js/scripts/uncompressed/history.adapter.jquery.js
  24. +67 −0 public/javascripts/history.js/scripts/uncompressed/history.adapter.mootools.js
  25. +152 −0 public/javascripts/history.js/scripts/uncompressed/history.adapter.prototype.js
  26. +1,345 −0 public/javascripts/history.js/scripts/uncompressed/history.js
  27. +480 −0 public/javascripts/history.js/scripts/uncompressed/json2.js
  28. +0 −32 public/javascripts/jquery.address.min.js
@@ -2,8 +2,18 @@
<html>
<head>
<title>Better Ajax Pagination (Cross Browser)</title>
+ <script type="text/javascript">
+ if ( typeof JSON === 'undefined' ) {
+ var
+ url = 'public/history.js/scripts/uncompressed/json2.js',
+ scriptEl = document.createElement('script');
+ scriptEl.type = 'text/javascript';
+ scriptEl.src = url;
+ document.body.appendChild(scriptEl,document.body.firstChild);
+ }
+ </script>
<%= stylesheet_link_tag :all %>
- <%= javascript_include_tag 'jquery.min', 'jquery.address.min', 'rails' %>
+ <%= javascript_include_tag 'jquery.min', 'history.js/scripts/uncompressed/history.adapter.jquery.js', 'history.js/scripts/uncompressed/history.js', 'rails' %>
<%= csrf_meta_tag %>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
</head>
@@ -27,44 +37,77 @@
<script type="text/javascript">
- $.address.state('/');
+ // Cache Elements
+ var
+ $form = $('form'),
+ $search = $('#search'),
+ $loading = $('#loading'),
+ $content = $('#content');
+
+ // Bind to Form Submit
+ $form.live('submit', function(event) {
+ var
+ query = $search.val(),
+ params = $form.serialize(),
+ url = $form.attr('action')+'?'+params,
+ data = {
+ 'query': query,
+ 'params': params
+ },
+ title = 'Searching for: '+query;
+
+ History.log('pushState', data, title, url);
+ History.pushState(data,title,url);
+
+ event.preventDefault();
+ return false;
+ })
+
+ // Bind to Ajax Links
+ $('.pagination a').live('click', function() {
+ var
+ query = $search.val(),
+ $link = $(this),
+ url = $link.attr('href'),
+ data = {
+ 'query': query,
+ },
+ title = 'Searching for: '+query;
+
+ History.pushState(data,title,url);
- $.address.change(function(event) {
+ return false;
+ });
+
+ // Bind to State Change
+ History.Adapter.bind(window,'statechange',function() {
- if($.isEmptyObject(event.parameters))
- return;
+ var
+ State = History.getState(),
+ query = State.data.query||'',
+ params = State.data.params||'';
- $('#search').val(event.parameters.q);
+ if ( !query ) return false;
- $('#loading').slideToggle('fast', function() {
+ History.log('statechange', State);
+
+ $loading.slideToggle('fast', function() {
$.ajax({
- url: event.path,
- data: event.parameters,
+ url: State.url,
+ method: 'get',
+ data: params,
success: function(html) {
- $('#loading').slideToggle('fast');
- $('#content').html(html);
+ $loading.slideToggle('fast');
+ $content.html(html);
+ },
+ error: function(){
+ console.error(this,arguments);
}
})
});
});
- $('form').live('submit', function() {
- var action = $(this).attr('action'),
- params = $(this).serialize();
-
- $.address.value(action + '?' + params);
-
- return false;
- })
-
- $('.pagination a').live('click', function() {
- var href = $(this).attr('href');
-
- $.address.value(href);
- return false;
- })
-
</script>
</div>
@@ -18,4 +18,8 @@
<%= page_entries_info @results %>
</div>
+<% else %>
+
+ No results found
+
<% end %>
@@ -0,0 +1,147 @@
+Welcome to History.js (v1.2.0 - 25th January 2011)
+==================
+
+This project is the successor of jQuery History, it aims to:
+
+- Support HTML5's State Management
+- Provide a backwards compatible experience for Browsers which do not support HTML5's State Management *- including continued support `replaceState`, and state data storage*
+- Provide a backwards compatible experience for Browsers which do not support HTML4's OnHashChange *- including continued support for traditional anchors*
+- Provide a forwards compatible experience for HTML4 States in HTML5 Browsers *- so urls that contain states in hashes (a HTML4 State) will still work in HTML5 browsers*
+- Follow the original API's as much as possible *- support attaching data and title properties to states and both the `pushState` and `replaceState` methods in all browsers*
+- Support as many javascript frameworks as possible via adapters *- especially jQuery, MooTools and Prototype*
+
+Licensed under the [New BSD License](http://creativecommons.org/licenses/BSD/)
+Copyright 2011 [Benjamin Arthur Lupton](http://balupton.com)
+
+
+## Usage
+
+ (function(window,undefined){
+
+ var History = window.History; // Note: We are using a capital H instead of a lower h
+
+ History.Adapter.bind(window,'statechange',functon(){ // Note: We are using statechange instead of popstate
+ var State = History.getState(); // Note: We are using History.getState() instead of event.state
+ History.log(State.data, State.title, State.url);
+ });
+
+ History.pushState({state:1}, "State 1", "?state=1"); // logs {state:1}, "State 1", "?state=1"
+ History.pushState({state:2}, "State 2", "?state=2"); // logs {state:2}, "State 2", "?state=2"
+ History.replaceState({state:3}, "State 3", "?state=3"); // logs {state:2}, "State 3", "?state=3"
+ History.back(); // logs {state:1}, "State 1", "?state=1"
+ History.back(); // logs {}, "Home Page", "?"
+ History.go(2); // logs {state:3}, "State 3", "?state=3"
+
+ })(window);
+
+
+## Installation
+
+1. Download History.js and upload it to your webserver. Download links: [tar.gz](https://github.com/balupton/History.js/tarball/master) or [zip](https://github.com/balupton/History.js/zipball/master)
+
+2. Include [JSON2](http://www.json.org/js.html) for HTML4 Browsers Only *(replace www.yourwebsite.com)*
+
+ <script type="text/javascript">
+ if ( typeof JSON === 'undefined' ) {
+ var
+ url = 'http://www.yourwebsite.com/history.js/scripts/compressed/json2.min.js',
+ scriptEl = document.createElement('script');
+ scriptEl.type = 'text/javascript';
+ scriptEl.src = url;
+ document.body.appendChild(scriptEl);
+ }
+ </script>
+
+3. Include the Adapter for your Framework:
+
+ - jQuery
+
+ <script type="text/javascript" src="http://www.yourwebsite.com/history.js/scripts/compressed/history.adapter.jquery.min.js"></script>
+
+ - Mootools
+
+ <script type="text/javascript" src="http://www.yourwebsite.com/history.js/scripts/compressed/history.adapter.mootools.min.js"></script>
+
+ - Prototype
+
+ <script type="text/javascript" src="http://www.yourwebsite.com/history.js/scripts/compressed/history.adapter.prototype.min.js"></script>
+
+4. Include History.js
+
+ <script type="text/javascript" src="http://www.yourwebsite.com/history.js/scripts/compressed/history.min.js"></script>
+
+
+## Adapters
+
+### Supported
+
+- jQuery
+- Prototype
+- MooTools
+
+> If your favourite framework is not included? Then just write an adapter for it, and send it to us :-) Easy peasy.
+
+
+## Browsers
+
+### Tested and Working In:
+
+- Chrome 8
+- Opera 10,11
+- Safari 5
+- Firefox 4 Beta 9
+- Firefox 3
+- IE 6,7,8
+
+
+## Notes on Compatibility
+
+- State data will always contain the State's title and url at: `data.title` and `data.url`
+- State titles will always be applied to the document.title
+- ReplaceState functionality is emulated in HTML4 browsers by discarding the replaced state, so when the discarded state is accessed it is skipped using the appropriate `History.back()` / `History.forward()` call.
+ - As such, there is no `History.go(index)` method as we cannot ensure compatibility between HTML5 and HTML4 browsers due to discarded states.
+- History.js fixes a bug in Google Chrome where traversing back through the history to the home page does not return the correct state data.
+- Setting a hash (even in HTML5 browsers) causes `onpopstate` to fire - this is expected/standard functionality.
+ - As such, to ensure correct compatability between HTML5 and HTML4 browsers, we now have two new events:
+ - onstatechange: this is the same as onpopstate except does not fire for traditional anchors
+ - onanchorchange: this is the same as onhashchange but only fires for traditional anchors and not states
+ - To fetch the anchor/hash, you may use `History.getHash()`.
+
+
+## Changelog
+
+- v1.3.0 - Upcoming (Expected 1st Week February 2011)
+ - Support for cleaner HTML4 States
+
+- v1.2.0 - 25th of January 2011
+ - Support for HTML4 States in HTML5 Browsers (added test)
+ - Updates of Documentation
+
+- v1.1.0 - 24th January 2011
+ - Developed a series of automated test cases
+ - Fixed issue with traditional anchors
+ - Fixed issue with differing replaceState functionality in HTML4 Browsers
+ - Fixed issue with Google Chrome artefacts being carried over to the initial state
+ - Provided `onstatechange` and `onanchorchange` events
+
+- v1.0.0 - 22nd January 2011
+ - Supported `History.pushState` and `History.replaceState` degradation
+ - Supported jQuery, MooTools and Prototype Frameworks
+
+
+## Todo for Upcoming Releases
+
+- Degradation of the HTML5 States could perhaps be cleaner (have the anchor as only a URL with a UID, instead of the serialised state). Will need to:
+ - Evaluate if the `State.data` is kept in HTML5 browsers if the page is:
+ - Closed and re-opened.
+ - Navigated to a 3rd party website, then returned.
+ - Under both circumstances of:
+ - The initial opening
+ - Traversing the history
+ - This then leads to:
+ - If the data persists, then we can either:
+ - Use the existing URL Serialisation
+ - Use `document.cookie` to store the states indexed by UIDs, and give the hash a UID.
+ - If the data doesn't persist, then we can either:
+ - Use the existing URL Serialisation
+ - Use a local data structure to store the states indexed by UIDs, and give the hash a UID.
Oops, something went wrong.

0 comments on commit 78fe4f2

Please sign in to comment.