FeinCMS ajax client side

feincms_ajax.js

var ajax_links_selector = 'a.ajax';
var content_selector = '#content';
var first_call = true;
var navilevel_substring = 3; // how many chars from pathname are static (3 for languagecode like /de/)

/* needs jquery address loaded: http://www.asual.com/jquery/address/
 * 
 * needs feincms to be ajax-enabled:
 * 
 * feincms/views/base.py:
 * 
 * ...
 * 
 * def _build_page_response(page, request):
    extra_context = request._feincms_extra_context
    
    if request.is_ajax():
        template = os.path.join('ajax', page.template.path)
    else:
        template = page.template.path
    
    return render_to_response(template, {
        'feincms_page': page,
        }, context_instance=RequestContext(request, extra_context))
 * 
 * ...
 * 
 */

$(function(){
	$(ajax_links_selector).live('click', get_content);
});

$.address.externalChange(function(event) {
	if (!first_call || $.address.path() != '/') {
		var path_cleaned = location.pathname.substring(0, navilevel_substring);
		get_content(false, path_cleaned + event.value);
	} else {
		first_call = false;
	}
});

function get_content(event, url) {
	if (event) {
		event.preventDefault();
		link = $(event.target);
	}
	
	if (!url) {
		url = link.attr('rel');
	}
	
	$.address.value(url.substring(navilevel_substring));
	
	pre_ajax();
	
	setTimeout(function() {
		$.ajax({
			url		:	url,
			data	:	'ajax=true',
			success	:	update_page,
			error	:	function(XMLHttpRequest, textStatus, errorThrown) {redirect_to_url(XMLHttpRequest, textStatus, errorThrown, url)},
			dataType:	'html'
			
		});
	});
}

function update_page(data, textStatus, XMLHttpRequest) {
	var title = $(data).filter('title').text();
	$.address.title(title);
		
	$(data).filter('div').each(function(index) {
		var new_element = $(this);
		var old_element = $('#' + new_element.attr('id'))
		var new_class = new_element.attr('class');
		var old_class = old_element.removeClass('loading').attr('class');
		
		if (new_element.attr('id') == 'content') {
			new_element.addClass('loading');
		}
		
		if (new_element.attr('id') == 'moodboard') {
			new_element.children('img').hide();			
			first_image = old_element.children('img:visible').first().clone().removeClass('slideshow');
			new_element.prepend(first_image);
		}
		
		if (new_class != old_class) {
			old_element.switchClass(old_class, new_class, 300);
			setTimeout(function() {
				old_element.replaceWith(new_element);
			}, 300);
		} else {		
			old_element.replaceWith(new_element);
		}
	});
	
	bind();
	post_ajax();
}

function redirect_to_url(XMLHttpRequest, textStatus, errorThrown, url) {
	window.location = url;
}

function pre_ajax() {
	$('.footer').hide();
	$('#moodboard img:hidden').remove();
	$(content_selector).addClass('loading', 200);
}

function post_ajax() {
	$('.footer').show();
	
	setTimeout(function() {
		post_ajax_animations()
	}, 400);
}

function post_ajax_animations() {
	$(content_selector).removeClass('loading', 200);
	$('#moodboard img:first').fadeOut(300, function() {$(this).remove()});
	$('#moodboard img:first').first().next().fadeIn(300);
}