aderaaij
10/12/2014 - 2:43 PM

ajaxify some stuff

ajaxify some stuff

// Ajaxify internal content
(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;

  }

  $(function() { 
    // helper variables
    var
      $window = $(window),
      $body = $(document.body),
      rootUrl = History.getRootUrl(),
      $main = $('#ajax-content'),
      completedEventName = 'statechangecomplete';

    // internal helper link function
    $.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;
    };

    // 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;

        // Continue as normal for cmd clicks etc
        if ( event.which == 2 || event.metaKey ) { return true; }

        // Ajaxify this link
        History.pushState(null, title, url);

        event.preventDefault();

        return false;

      });

      // Chain
      return $this;

    };

    // Ajaxify our Internal Links
    $body.ajaxify();
    
    // Hook into State Changes
    $window.bind('statechange', function(){

      $body.addClass('is-loading');

      var
        State = History.getState(),
        url = State.url,
        relativeUrl = url.replace(rootUrl,'');     

        ajaxLoad = function( html, status, xhr) {

          $main.waitForImages(function() {            

            $body.ajaxify();         

            // DOMParser
            var parser = new DOMParser();

            doc = parser.parseFromString(html, "text/html");

            // Your class(es)
            var 
              docClass = doc.body.getAttribute('class'),
              docTitle = $('title', doc).text();

            // Garbage collection, you don't need this anymore.

            parser = doc = null;

            $body.removeClass();

            $body.addClass(docClass);

            document.title = docTitle;

            $window.trigger(completedEventName);

          });

        };

        loadPage = function(url) {

          $main.load(url + " #ajax-content>*", ajaxLoad);

        };
        
        loadPage(url);
        
    });

  }); // end dom load

})(window); // end closure