Gazelle/static/functions/iphone.js

// We had to sacrafice a bit of the beauty of this structure to accommodate OS 1.1
// If/when we drop OS <2 just switch all onclick events to ontouchend events.

var elements; // Shortcut to handle html elements
var header = 0; // Used in swap_header
var method; //The method we use, touchend or onclick
var active_index;
var active_url;

// Get ourselves the method based on OS
method = cookie.get('method');
if (method === null) {
	if (document.createTouch) {
		method = 'touchend';
	} else {
		method = 'click';
	}
	cookie.set('method',method,365);
}

// Active
active_index = 0;
active_url = cookie.get('lastpage');
if (active_url === null) {
	active_url = 'start.php';
}

// Data sent in HTML comments
var title = null;
var back_url = null;
var back_name = null;

function main () {
	// Basic html structure utilized for transitions
	elements = {
		buttons:[$('#first_button'),$('#second_button')],
		titles:[$('#first_title'),$('#second_title')],
		pages:[$('#first_page'),$('#second_page')]
	};

	// Transform on load
	elements.pages[1].style.webkitTransform = 'translateX(100%)';

	// Set event handlers
	elements.titles[0].addEventListener(method, swap_header, false);
	elements.titles[1].addEventListener(method, swap_header, false);

	elements.buttons[0].addEventListener(method, go_back, false);
	elements.buttons[1].addEventListener(method, go_back, false);

	elements.pages[0].addEventListener('webkitTransitionEnd', transition_ended, false);
	Transitions.DEFAULTS.duration = 0.35;

	// Load the content
	ajax.get(active_url, function (response) {
		get_headers(response);
		elements.titles[0].innerHTML = title;
		elements.pages[0].innerHTML = response;
		if (back_name) {
			elements.buttons[0].textContent = back_name;
		}
	});

	// Hide the address bar
	setTimeout(function() {
		window.scrollTo(0, 1);
		setTimeout(function() {
			window.scrollTo(0, 0);
		},0);
	}, 500);
};

// Tap header to swap for ratio
function swap_header() {
	//$('#search').style.display = 'block';
}

// Back button alias
function go_back() {
	load(back_url,false);
}

// Get data from comments
function get_headers(response) {
	title = response.match(/\<\!\-\-Title\:(.+?)\-\-\>/i)[1];
	if (response.match(/\<\!\-\-Back\:(.+?)\:(.+?)\-\-\>/i)) {
		back_name = response.match(/\<\!\-\-Back\:(.+?)\:(.+?)\-\-\>/i)[1];
		back_url = response.match(/\<\!\-\-Back\:(.+?)\:(.+?)\-\-\>/i)[2];
	} else {
		back_name = null;
		back_url = null;
	}
}

// Load content
function load(url,forward,formid) {
	if (forward === undefined) {
		forward = true;
	}
	if (transitions_in_progress && document.createTouch) { // OS 2
		return;
	}
	if (moved_after_touch) {
		return;
	}
	if (formid === undefined) {
		ajax.get(url, function (response) {
			get_headers(response);
			transition_to_new_element(response, forward);
		});
		cookie.set('lastpage',url,7);
	} else {
		ajax.post(url,formid);
	}
};

// Moves
var moved_after_touch = false;
function touch_started () {
	moved_after_touch = false;
};
function touch_moved () {
	moved_after_touch = true;
};

// Transitions
var transitions_in_progress = false;
function transition_ended () {
	transitions_in_progress = false;
};
function transition_to_new_element (data, going_forward) {
	transitions_in_progress = true;

	var from_index = active_index;
	var to_index = (active_index == 1) ? 0 : 1;

	//Make other page visible
	//elements.pages[to_index].style.height = '';

	Transitions.DEFAULTS.properties = ['opacity', '-webkit-transform'];
	var transitions = new Transitions();

	transitions.add({
		element: elements.titles[from_index],
		duration: [0.5],
		properties: ['opacity'],
		from: [1],
		to: [0]
	});

	transitions.add({
		element : elements.titles[to_index],
		duration: [0.5],
		properties: ['opacity'],
		from : [0],
		to : [1]
	});

	transitions.add({
		element: elements.buttons[from_index],
		duration: [0.5],
		properties: ['opacity'],
		from: [1],
		to: [0]
	});

	transitions.add({
		element : elements.buttons[to_index],
		duration: [0.5],
		properties: ['opacity'],
		from : [0],
		to : [1]
	});

	// we only change the transform for the page transitions
	Transitions.DEFAULTS.properties = ['-webkit-transform'];

	transitions.add({
		element : elements.pages[from_index],
		from : ['translateX(0%)'],
		to : ['translateX(' + ((going_forward) ? -150 : 150) + '%)']
	});

	transitions.add({
		element : elements.pages[to_index],
		from : ['translateX(' + ((going_forward) ? 150 : -150) + '%)'],
		to : ['translateX(0%)']
	});

	elements.pages[to_index].textContent = '';
	elements.pages[to_index].innerHTML = data;
	elements.titles[to_index].textContent = title;
	elements.buttons[to_index].textContent = back_name;

	//Hide other page to avoid excess scroll at the bottom
	//elements.pages[from_index].style.height = '0px';

	active_index = to_index;

	transitions.apply();
};

// Initate main function
window.addEventListener('load', main, false);