Merge remote-tracking branch 'cheeaun/master' into support-for-markdown-links

Conflicts:
	index.html

README.md

@@ -28,8 +28,9 @@ How to setup your own *Life*
 2. `git checkout -b gh-pages` (or any branch name you like)
 3. Make a copy of `life.example.md`, rename it to `life.md`.
 4. Add your life events into `life.md`.
-5. Commit `life.md` (not in `master` branch).
+5. Preview it on a local server. Use [`python -m SimpleHTTPServer`](http://docs.python.org/2/library/simplehttpserver.html) or [`http-server`](https://github.com/nodeapps/http-server).
-6. `git push origin gh-pages` and publish to [GitHub Pages](http://pages.github.com/).
+6. Commit `life.md` (not in `master` branch).
+7. `git push origin gh-pages` and publish to [GitHub Pages](http://pages.github.com/).
 
 How to upgrade your *Life*
 --------------------------
@@ -70,6 +71,11 @@ Datetime "syntax"
 - `~2005` - event that happen around the time in that year
 - `2005-~` - event that happen from that year and beyond (now).
 
+Other people's Lives
+--------------------
+
+Here's [a compilation of Lives from the people who has forked Life](https://github.com/cheeaun/life/wiki/Lives).
+
 License
 -------
 

config.example.json

@@ -1,4 +1,5 @@
 {
 	"customStylesheetURL": null,
-	"yearLength": 120
+	"yearLength": 120,
+	"hideAge": false
 }

index.html

@@ -2,6 +2,7 @@
 <meta charset="UTF-8">
 <title>Life</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="format-detection" content="telephone=no">
 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300">
 <style>
 *{
@@ -72,7 +73,6 @@ h1{
 	color: rgba(255,255,255,.5);
 }
 #life .event .time{
-	vertical-align: middle;
 	display: inline-block;
 	overflow: hidden;
 	height: 0;
@@ -97,11 +97,27 @@ h1{
 	var life = {
 		$title: document.getElementById('title'),
 		$el: document.getElementById('life'),
+		utils: {
+			extend: function(object){
+				var args = Array.prototype.slice.call(arguments, 1);
+				for (var i=0, source; source=args[i]; i++){
+					if (!source) continue;
+					for (var property in source){
+						object[property] = source[property];
+					}
+				}
+				return object;
+			}
+		},
+		config: {
 			yearLength: 120, // 120px per year
+			hideAge: false, // Hide age from year axis
+			customStylesheetURL: null // Custom stylesheet
+		},
 		start: function(){
 			life.loadConfig(function(config){
-				if (config.yearLength) life.yearLength = config.yearLength;
+				life.config = life.utils.extend(life.config, config);
-				if (config.customStylesheetURL) life.injectStylesheet(config.customStylesheetURL);
+				if (life.config.customStylesheetURL) life.injectStylesheet(life.config.customStylesheetURL);
 
 				life.fetch(function(response){
 					var data = life.parse(response);
@@ -193,7 +209,7 @@ h1{
 		firstYear: null,
 		renderEvent: function(d){
 			var firstYear = life.firstYear;
-			var yearLength = life.yearLength;
+			var yearLength = life.config.yearLength;
 			var monthLength = yearLength/12;
 			var dayLength = monthLength/30;
 
@@ -223,7 +239,7 @@ h1{
 				width = daysDiff*dayLength;
 			} else {
 				if (startDate){
-					width = dayLength
+					width = dayLength;
 				} else if (startMonth){
 					width = monthLength;
 				} else {
@@ -242,32 +258,48 @@ h1{
 				d.text = d.text.replace(link[0], "<a href='" + link[2] + "'" + link_attr + ">" + link[1] + "</a>");
 			}
 			
-			return '<div class="event" style="margin-left: ' + offset.toFixed(2) + 'px"><div class="time" style="width: ' + width.toFixed(2) + 'px"></div><b>' + d.time.title + '</b> ' + d.text + '&nbsp;&nbsp;</div>';
+			return '<div class="event" style="margin-left: ' + offset.toFixed(2) + 'px">'
+				+ '<div class="time" style="width: ' + width.toFixed(2) + 'px"></div>'
+				+ '<b>' + d.time.title + '</b> ' + d.text + '&nbsp;&nbsp;'
+				+ '</div>';
 			return '';
 		},
+		renderYears: function(firstYear, lastYear){
+			var dayLength = life.config.yearLength/12/30;
+			var html = '';
+			var days = 0;
+			var hideAge = life.config.hideAge;
+			for (var y=firstYear, age = 0; y<=lastYear+1; y++, age++){
+				html += '<section class="year" style="left: ' + (days*dayLength).toFixed(2) + 'px">'
+					+ y + (hideAge ? '' : (' (' + age + ')'))
+					+ '</section>';
+				days += (y % 4 == 0) ? 366 : 365;
+			}
+			return html;
+		},
 		render: function(title, data){
 			document.title = title;
 			life.$title.innerHTML = title;
 
-			var firstYear = life.firstYear = data[0].time.startYear;
+			// Get the first and last year for the year axis
-			var nowYear = new Date().getFullYear();
+			var firstYear = new Date().getFullYear();
-			var dayLength = life.yearLength/12/30;
+			var lastYear = firstYear;
+			data.forEach(function(d){
+				var time = d.time;
+				var startYear = time.startYear;
+				var endYear = time.endYear;
+				if (startYear && startYear < firstYear) firstYear = startYear;
+				if (endYear && endYear > lastYear) lastYear = endYear;
+			});
+			life.firstYear = firstYear;
 
-			html = '';
+			var html = life.renderYears(firstYear, lastYear);
-			var days = 0;
-
-			for (var y=firstYear, age = 0; y<=nowYear+1; y++, age++){
-				html += '<section class="year" style="left: ' + (days*dayLength) + 'px">' +
-					y + ' (' + age + ')' +
-					'</section>';
-				days += (y % 4 == 0) ? 366 : 365;
-			}
 			data.forEach(function(d){
 				html += life.renderEvent(d);
 			});
 			life.$el.innerHTML = html;
 		}
-	}
+	};
 
 	life.start();
 })();