bit155-history.js

// Adds click event handlers to all the pager links within some content element, c.
function prepareContent(c) {
  $('ul.pager a', c).each(function(i,e) {
    var $e = $(e),
        path = $e.attr('href'),
        base = Drupal.settings.basePath,
        regex = '^' + base.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
      
    if (path && path.match(regex)) {
      $e.click(function() {
        history.pushState({ path: path }, "", path);
        loadContent(path);
        return false;
      });
    }
  });
}

// Loads and displays the content at the given path.
function loadContent(path) {
  var $container = $('#content-container'),
      $content = $('#content'),
      $throbber = $('<div>', { 'class': 'throbber' }).html('&nbsp;').appendTo($container);
  
  $content.slideUp('fast', function() {
    $.get(path, function(data, status, xhr) {
      var $newContent, el;
      
      if (status === 'success') {
        // prepare the new content
        el = document.createElement('div');
        el.innerHTML = data;
        $newContent = $('#content', el);
        $newContent.hide();
        prepareContent($newContent);
      
        // show the new content
        $content.replaceWith($newContent);
        $newContent.slideDown('fast');
      
        $throbber.remove();
      }
    });
  });

  return false;
}

// Listen for popstate events, and load the appropriate content when triggered.
$(window).bind('popstate', function(e) {
  var state = e.originalEvent.state;
  if (state) {
    loadContent(state.path);
  }
});

// Do the initial preparation of this page's links.
prepareContent($(context));

// dummy first page state
history.replaceState({ path: window.location.href }, '');