static/js/router.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

'use strict';

var router = function(routes){
	this.routes = routes;
	this.current_id = "";
	this.tab_elements = {};
	
	this.initial_load();
	
	//This initial 'fake' call allows to initialize contents
	//and link values
	this.url_changed_callback(id_from_hash(window.location.hash));
	
	//Adds the callback along with the context of the instance
	var current_context = this;
	window.addEventListener('hashchange', function(){current_context.url_changed_callback()});
}

router.prototype.constructor = router;

router.prototype.initial_load = function() {	
	//Iterate through every route, looking for the right HTML element
	//and adding its content from an AJAX async call
	for (var id in this.routes) {
		this.tab_elements[id] = document.getElementById(id);
		
		(function(route, element) {
			$.ajax({
				url : route,
				success : function(result){
					//Loads each content page
					element.innerHTML = result;
					
					//The loaded page is surrounded by a placeholder '<div>' whose id
					//is the title set by the user in the Markdown file (if there's any)
					var inner_div = element.getElementsByTagName('div')[0];
					
					//If the user has specified a title, we change the navbar element
					//to use it
					if (inner_div.id != "") {
						document.getElementById("navbar-"+element.id).getElementsByTagName('a')[0].innerHTML = inner_div.id.split("-")[1];
					}
					
					//Finally get disposed of the placeholder inner '<div>'
					element.innerHTML = inner_div.innerHTML;
				},
				
				error: function(error) {
					console.log("Error loading file from route: " + route + " [Ignore this if you haven't setup your website content yet]")
				}
			});
		})(this.routes[id], this.tab_elements[id]);
	}
}

router.prototype.url_changed_callback = function(){
	var id = id_from_hash(window.location.hash);
	
	if (id != this.current_id){
		//Update contents each time the URL changes
		this.swap_contents(id);

		this.current_id = id;
	}
}

router.prototype.swap_contents = function(id){
	if (this.current_id != "") this.tab_elements[this.current_id].style = "display: none;";
	this.tab_elements[id].style = "display: block;";
}

var id_from_hash = function(hash) {
	if (hash == '') return default_id;
	else return hash.replace('#', '');
}