Add multiple time segments for interrupted events.

README.md

@@ -74,6 +74,7 @@ Datetime "syntax"
 - `2001-2005`, `10/2001-02/03/2005` - event that happen within the two dates
 - `~2005` - event that happen around the time in that year
 - `2005-~` - event that happen from that year and beyond (now).
+- `01/2001-06/2001,09/2001-01/2002` - event that was interrupted.  Use any of the above syntax separated by commas, in chronological order.
 
 Other people's Lives
 --------------------

index.html

@@ -81,13 +81,16 @@
 	font-weight: normal;
 	color: rgba(255,255,255,.5);
 }
+#life .event .times{
+	display: inline-block;
+	margin-right: 10px;
+}
 #life .event .time{
 	display: inline-block;
 	overflow: hidden;
 	height: 0;
 	border: 4px solid #fff;
 	border-radius: 4px;
-	margin-right: 10px;
 	opacity: .3;
 	position: relative;
 	left: -2px;
@@ -168,7 +171,7 @@ <h1 id="title">Life</h1>
 			var list = response.match(/\-\s+[^\n\r]+/ig);
 			var data = [];
 			list.forEach(function(l){
-				var matches = l.match(/\-\s+([\d\/\-\~]+)\s(.*)/i);
+				var matches = l.match(/\-\s+([\d\/\-\~,]+)\s(.*)/i);
 				var time = matches[1];
 				var text = matches[2];
 				data.push({
@@ -200,6 +203,26 @@ <h1 id="title">Life</h1>
 				data[point + 'Date'] = parseInt(t[0], 10);
 				data[point + 'Month'] = parseInt(t[1], 10);
 				data[point + 'Year'] = parseInt(t[2], 10);
+			} else if (/\d,/.test(time)){ // TIME-TIME,TIME-TIME
+				var strs = time.split(',');
+				var times = new Array(strs.length);
+				strs.forEach(function(str, i){
+					times[i] = life.parseTime(str);
+				});
+				data.intervals = times;
+				// Copy first and last.
+				var startTime = times[0];
+				var endTime = times[times.length - 1];
+				for (var k in startTime) { data[k] = startTime[k] }
+				if (endTime.endYear != null){
+					data.endDate = endTime.endDate;
+					data.endMonth = endTime.endMonth;
+					data.endYear = endTime.endYear;
+				} else {
+					data.endDate = endTime.startDate;
+					data.endMonth = endTime.startMonth;
+					data.endYear = endTime.startYear;
+				}
 			} else if (/\d\-/.test(time)){ // TIME-TIME
 				var splitTime = time.split('-');
 				var startTime = life.parseTime(splitTime[0]);
@@ -212,17 +235,16 @@ <h1 id="title">Life</h1>
 				data.endMonth = now.getMonth()+1;
 				data.endDate = now.getDate();
 			}
-			data.title = time;
+			data.title = time.replace(/,/, ', ');
 			return data;
 		},
 		firstYear: null,
-		renderEvent: function(d){
+		measureEventLine: function(time){
 			var firstYear = life.firstYear;
 			var yearLength = life.config.yearLength;
 			var monthLength = yearLength/12;
 			var dayLength = monthLength/30;
 
-			var time = d.time;
 			var estimate = time.estimate;
 			var startYear = time.startYear;
 			var startMonth = time.startMonth;
@@ -232,12 +254,6 @@ <h1 id="title">Life</h1>
 			var endDate = time.endDate;
 			var width = 0;
 
-			// Calculate offset
-			var startTime = new Date(firstYear, 0, 1);
-			var endTime = new Date(startYear, startMonth ? startMonth-1 : 0, startDate || 1);
-			var daysDiff = (endTime - startTime)/(24*60*60*1000);
-			offset = daysDiff*dayLength;
-
 			// Calculate width
 			if (endYear){
 				var _endMonth = endMonth ? endMonth-1 : 11;
@@ -256,6 +272,51 @@ <h1 id="title">Life</h1>
 				}
 			}
 
+			return width;
+		},
+		renderEventLines: function(d, buffer, totalLeftOffset){
+			var intervals = d.time.intervals || [d.time];
+			buffer = buffer || [];
+			totalLeftOffset = totalLeftOffset || 0;
+			buffer.push('<div class="times">');
+			intervals.forEach(function(time){
+				var width = life.measureEventLine(time);
+				var offset = life.measureTimeOffset(time);
+				var marginLeft = offset - totalLeftOffset;
+				buffer.push('<div class="time" style="width: ');
+				buffer.push(width.toFixed(2));
+				buffer.push('px; margin-left: ');
+				buffer.push(marginLeft.toFixed(2));
+				buffer.push('px"></div>');
+
+				// Add twice the border width.
+				var outerWidth = width + 2 * 4;
+				totalLeftOffset += outerWidth + marginLeft;
+			});
+			buffer.push('</div>');
+			return buffer;
+		},
+		measureTimeOffset: function(time){
+			var firstYear = life.firstYear;
+			var yearLength = life.config.yearLength;
+			var monthLength = yearLength/12;
+			var dayLength = monthLength/30;
+
+			var startYear = time.startYear;
+			var startMonth = time.startMonth;
+			var startDate = time.startDate;
+
+			var startTime = new Date(firstYear, 0, 1);
+			var endTime = new Date(startYear, startMonth ? startMonth-1 : 0, startDate || 1);
+			var daysDiff = (endTime - startTime)/(24*60*60*1000);
+			return daysDiff*dayLength;
+		},
+		renderEvent: function(d){
+			var time = d.time;
+
+			// Calculate offset
+			var offset = life.measureTimeOffset(time);
+
 			// Parse Markdown links in the text
 			// credit: http://stackoverflow.com/a/9268827
 			var link = null;
@@ -267,11 +328,13 @@ <h1 id="title">Life</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 '';
+			// Use a buffer and join only once to reduce string concat memory waste.
+			var buffer = [];
+			buffer.push('<div class="event" style="margin-left: ' + offset.toFixed(2) + 'px">');
+			life.renderEventLines(d, buffer, offset);
+			buffer.push('<b>' + d.time.title + '</b> ' + d.text + '&nbsp;&nbsp;');
+			buffer.push('</div>');
+			return buffer.join('');
 		},
 		renderYears: function(firstYear, lastYear){
 			var dayLength = life.config.yearLength/12/30;