Preliminary support for rows (called tags)

compiled/css/themes/dark.css

@@ -65,7 +65,7 @@
 .slider .nav-next{float:right;text-align:right;}.slider .nav-next .icon{margin-left:61px;background-image:url(themes/timeline-dark.png);background-repeat:no-repeat;background-position:-184px 0;width:24px;height:24px;height:24px;overflow:hidden;}
 .slider .nav-next .date,.slider .nav-next .title{text-align:right;padding-right:15px;}
 .slider .nav-next:hover .icon{margin-left:66px;}
-.slider .slider-item{position:absolute;width:700px;height:100%;padding:0px;margin:0px;display:table;overflow-x:hidden;overflow-y:auto;}.slider .slider-item .content{display:table-cell;vertical-align:middle;}.slider .slider-item .content .pad-top .text .container{padding-top:15px;}
+.slider .slider-item{position:absolute;width:700px;height:100%;padding:0px;margin:0px;display:table;overflow-y:auto;}.slider .slider-item .content{display:table-cell;vertical-align:middle;}.slider .slider-item .content .pad-top .text .container{padding-top:15px;}
 .slider .slider-item .content .pad-right .text .container{padding-right:15px;}
 .slider .slider-item .content .pad-left .text .container{padding-left:30px;}
 .slider .slider-item .content .pad-left .media.text-media .media-wrapper .media-container{border:none;background-color:#1a1a1a;}
@@ -113,6 +113,9 @@
 .vmm-timeline .navigation .timenav-background{position:absolute;cursor:move;top:0px;left:0px;height:150px;width:100%;background-color:#262626;}.vmm-timeline .navigation .timenav-background .timenav-interval-background{position:absolute;top:151px;left:0px;background:#1a1a1a;width:100%;height:49px;-webkit-box-shadow:-1px -1px 7px rgba(0, 0, 0, 0.1);-moz-box-shadow:-1px -1px 7px rgba(0, 0, 0, 0.1);box-shadow:-1px -1px 7px rgba(0, 0, 0, 0.1);}.vmm-timeline .navigation .timenav-background .timenav-interval-background .top-highlight{position:absolute;top:-1px;left:0px;z-index:30;width:100%;height:1px;background:#1a1a1a;filter:alpha(opacity=50);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;-webkit-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.2);-moz-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.2);box-shadow:1px 1px 5px rgba(0, 0, 0, 0.2);}
 .vmm-timeline .navigation .timenav-background .timenav-line{position:absolute;top:0px;left:50%;width:3px;height:150px;background:#0bd4e3;z-index:201;-webkit-box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);}
 .vmm-timeline .navigation .timenav-background .timenav-indicator{position:absolute;top:-1px;left:50%;z-index:202;background-image:url(themes/timeline-dark.png);background-repeat:no-repeat;background-position:-160px -48px;width:24px;height:24px;}
+.vmm-timeline .navigation .timenav-background .timenav-tag{height:50px;}.vmm-timeline .navigation .timenav-background .timenav-tag div{height:50px;display:table;}.vmm-timeline .navigation .timenav-background .timenav-tag div h3{display:table-cell;vertical-align:middle;padding-left:65px;font-size:15px;color:#000000;}
+.vmm-timeline .navigation .timenav-background .timenav-tag-row-2{background:#2e2e2e;}
+.vmm-timeline .navigation .timenav-background .timenav-tag-row-3{background:#262626;}
 .vmm-timeline .navigation .timenav{position:absolute;top:0px;left:-250px;z-index:1;}.vmm-timeline .navigation .timenav .content{position:relative;}.vmm-timeline .navigation .timenav .content .marker.start{display:none;}
 .vmm-timeline .navigation .timenav .content .marker.active .dot{background:#0bd4e3;z-index:200;}
 .vmm-timeline .navigation .timenav .content .marker.active .line{z-index:199;background:#0bd4e3;width:1px;}.vmm-timeline .navigation .timenav .content .marker.active .line .event-line{background:#0bd4e3;filter:alpha(opacity=75);-khtml-opacity:0.75;-moz-opacity:0.75;opacity:0.75;}
@@ -148,7 +151,7 @@
 .vmm-timeline h1,.vmm-timeline h2,.vmm-timeline h3,.vmm-timeline h4,.vmm-timeline h5,.vmm-timeline h6{font-weight:normal;color:#ffffff;text-transform:none;}.vmm-timeline h1 a,.vmm-timeline h2 a,.vmm-timeline h3 a,.vmm-timeline h4 a,.vmm-timeline h5 a,.vmm-timeline h6 a{color:#999999;}
 .vmm-timeline h1 small,.vmm-timeline h2 small,.vmm-timeline h3 small,.vmm-timeline h4 small,.vmm-timeline h5 small,.vmm-timeline h6 small{color:#999999;}
 .vmm-timeline h1.date,.vmm-timeline h2.date,.vmm-timeline h3.date,.vmm-timeline h4.date,.vmm-timeline h5.date,.vmm-timeline h6.date{font-weight:bold;}
-.vmm-timeline h2.start{font-size:36px;line-height:38px;margin-bottom:15px;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-wrap:break-word;}
+.vmm-timeline h2.start{font-size:36px;line-height:38px;margin-bottom:15px;}
 .vmm-timeline h1{margin-bottom:15px;font-size:32px;line-height:34px;}.vmm-timeline h1 small{font-size:18px;}
 .vmm-timeline h2{margin-bottom:15px;font-size:28px;line-height:30px;}.vmm-timeline h2 small{font-size:14px;line-height:16px;}
 .vmm-timeline h2.date{font-size:16px;line-height:18px;margin-bottom:3.75px;color:#999999;}

compiled/css/timeline.css

@@ -65,7 +65,7 @@
 .slider .nav-next{float:right;text-align:right;}.slider .nav-next .icon{margin-left:61px;background-image:url(timeline.png);background-repeat:no-repeat;background-position:-184px 0;width:24px;height:24px;height:24px;overflow:hidden;}
 .slider .nav-next .date,.slider .nav-next .title{text-align:right;padding-right:15px;}
 .slider .nav-next:hover .icon{margin-left:66px;}
-.slider .slider-item{position:absolute;width:700px;height:100%;padding:0px;margin:0px;display:table;overflow-x:hidden;overflow-y:auto;}.slider .slider-item .content{display:table-cell;vertical-align:middle;}.slider .slider-item .content .pad-top .text .container{padding-top:15px;}
+.slider .slider-item{position:absolute;width:700px;height:100%;padding:0px;margin:0px;display:table;overflow-y:auto;}.slider .slider-item .content{display:table-cell;vertical-align:middle;}.slider .slider-item .content .pad-top .text .container{padding-top:15px;}
 .slider .slider-item .content .pad-right .text .container{padding-right:15px;}
 .slider .slider-item .content .pad-left .text .container{padding-left:30px;}
 .slider .slider-item .content .pad-left .media.text-media .media-wrapper .media-container{border:none;background-color:#ffffff;}
@@ -113,6 +113,9 @@
 .vmm-timeline .navigation .timenav-background{position:absolute;cursor:move;top:0px;left:0px;height:150px;width:100%;background-color:#e9e9e9;}.vmm-timeline .navigation .timenav-background .timenav-interval-background{position:absolute;top:151px;left:0px;background:#ffffff;width:100%;height:49px;-webkit-box-shadow:-1px -1px 7px rgba(0, 0, 0, 0.1);-moz-box-shadow:-1px -1px 7px rgba(0, 0, 0, 0.1);box-shadow:-1px -1px 7px rgba(0, 0, 0, 0.1);}.vmm-timeline .navigation .timenav-background .timenav-interval-background .top-highlight{position:absolute;top:-1px;left:0px;z-index:30;width:100%;height:1px;background:#ffffff;filter:alpha(opacity=50);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;-webkit-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.2);-moz-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.2);box-shadow:1px 1px 5px rgba(0, 0, 0, 0.2);}
 .vmm-timeline .navigation .timenav-background .timenav-line{position:absolute;top:0px;left:50%;width:3px;height:150px;background:#0088cc;z-index:201;-webkit-box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);}
 .vmm-timeline .navigation .timenav-background .timenav-indicator{position:absolute;top:-1px;left:50%;z-index:202;background-image:url(timeline.png);background-repeat:no-repeat;background-position:-160px -48px;width:24px;height:24px;}
+.vmm-timeline .navigation .timenav-background .timenav-tag{height:50px;}.vmm-timeline .navigation .timenav-background .timenav-tag div{height:50px;display:table;}.vmm-timeline .navigation .timenav-background .timenav-tag div h3{display:table-cell;vertical-align:middle;padding-left:65px;font-size:15px;color:#9d9d9d;}
+.vmm-timeline .navigation .timenav-background .timenav-tag-row-2{background:#f1f1f1;}
+.vmm-timeline .navigation .timenav-background .timenav-tag-row-3{background:#e9e9e9;}
 .vmm-timeline .navigation .timenav{position:absolute;top:0px;left:-250px;z-index:1;}.vmm-timeline .navigation .timenav .content{position:relative;}.vmm-timeline .navigation .timenav .content .marker.start{display:none;}
 .vmm-timeline .navigation .timenav .content .marker.active .dot{background:#0088cc;z-index:200;}
 .vmm-timeline .navigation .timenav .content .marker.active .line{z-index:199;background:#0088cc;width:1px;}.vmm-timeline .navigation .timenav .content .marker.active .line .event-line{background:#0088cc;filter:alpha(opacity=75);-khtml-opacity:0.75;-moz-opacity:0.75;opacity:0.75;}
@@ -148,7 +151,7 @@
 .vmm-timeline h1,.vmm-timeline h2,.vmm-timeline h3,.vmm-timeline h4,.vmm-timeline h5,.vmm-timeline h6{font-weight:normal;color:#000000;text-transform:none;}.vmm-timeline h1 a,.vmm-timeline h2 a,.vmm-timeline h3 a,.vmm-timeline h4 a,.vmm-timeline h5 a,.vmm-timeline h6 a{color:#999999;}
 .vmm-timeline h1 small,.vmm-timeline h2 small,.vmm-timeline h3 small,.vmm-timeline h4 small,.vmm-timeline h5 small,.vmm-timeline h6 small{color:#999999;}
 .vmm-timeline h1.date,.vmm-timeline h2.date,.vmm-timeline h3.date,.vmm-timeline h4.date,.vmm-timeline h5.date,.vmm-timeline h6.date{font-weight:bold;}
-.vmm-timeline h2.start{font-size:36px;line-height:38px;margin-bottom:15px;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-wrap:break-word;}
+.vmm-timeline h2.start{font-size:36px;line-height:38px;margin-bottom:15px;}
 .vmm-timeline h1{margin-bottom:15px;font-size:32px;line-height:34px;}.vmm-timeline h1 small{font-size:18px;}
 .vmm-timeline h2{margin-bottom:15px;font-size:28px;line-height:30px;}.vmm-timeline h2 small{font-size:14px;line-height:16px;}
 .vmm-timeline h2.date{font-size:16px;line-height:18px;margin-bottom:3.75px;color:#999999;}

compiled/js/timeline.js

@@ -3591,13 +3591,29 @@ if(typeof VMM != 'undefined' && typeof VMM.Util == 'undefined') {
 		
 		/* CUSTOM SORT
 		================================================== */
-		
 		customSort: function(a, b) {
 			var a1= a, b1= b;
 			if(a1== b1) return 0;
 			return a1> b1? 1: -1;
 		},
 		
+		/* Remove Duplicates from Array
+		================================================== */
+		deDupeArray: function(arr) {
+			var i,
+				len=arr.length,
+				out=[],
+				obj={};
+
+			for (i=0;i<len;i++) {
+				obj[arr[i]]=0;
+			}
+			for (i in obj) {
+				out.push(i);
+			}
+			return out;
+		},
+		
 		/* Given an int or decimal, turn that into string in $xxx,xxx.xx format.
 		================================================== */
 		number2money: function(n, symbol, padding) {
@@ -6104,6 +6120,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
 					_date.fulldate			=	_date.startdate.getTime();
 					_date.text				=	data.date[i].text;
 					_date.content			=	"";
+					_date.tag				=	data.date[i].tag;
 					
 					
 					_dates.push(_date);
@@ -6189,7 +6206,7 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
 		trace("VMM.Timeline.TimeNav");
 		
 		var events = {}, timespan = {}, layout = parent;
-		var data = [], era_markers = [], markers = [], interval_array = [], interval_major_array = [], eras, content;
+		var data = [], era_markers = [], markers = [], interval_array = [], interval_major_array = [], eras, content, tags = [];
 		
 		var current_marker		= 	0;
 		var _active				=	false;
@@ -6794,19 +6811,34 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
 				}
 				
 				// CONTROL ROW POSITION
-				if (pos - lpos < (config.nav.marker.width + config.spacing)) {
+				if (tags.length > 0) {
-					if (row < config.nav.rows.length - 1) {
+					
-						row ++;
+					for (var k = 0; k < tags.length; k++) {
+						trace("TAGS: " + tags[k])
+						if (k < config.nav.rows.length) {
+							if (markers[i].tag == tags[k]) {
+								trace("tag match " + k);
+								row = k;
+							}
+						}
+					}
+					
+				} else {
+					if (pos - lpos < (config.nav.marker.width + config.spacing)) {
+						if (row < config.nav.rows.length - 1) {
+							row ++;
 						
+						} else {
+							row = 0;
+							row_depth ++;
+						}
 					} else {
+						row_depth = 0;
 						row = 0;
-						row_depth ++;
 					}
-				} else {
-					row_depth = 0;
-					row = 0;
 				}
 				
+				
 				// SET LAST MARKER POSITION
 				lpos = pos;
 				
@@ -7247,7 +7279,8 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
 					marker: 			_marker,
 					flag: 				_marker_flag,
 					lineevent: 			_marker_line_event,
-					type: 				"marker"
+					type: 				"marker",
+					tag:				data[i].tag
 				};
 				
 				
@@ -7257,12 +7290,30 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
 					_marker_obj.type = "start";
 				}
 				
+				if (data[i].tag) {
+					tags.push(data[i].tag);
+				}
+				
 				markers.push(_marker_obj);
 				
 				
 				
 			}
 			
+			// CREATE TAGS
+			tags = VMM.Util.deDupeArray(tags);
+			
+			for(var k = 0; k < tags.length; k++) {
+				if (k < config.nav.rows.length) {
+					var tag_element = VMM.appendAndGetElement($timebackground, "<div>", "timenav-tag");
+					VMM.Lib.addClass(tag_element, "timenav-tag-row-" + (k+1));
+					VMM.appendElement(tag_element, "<div><h3>" + tags[k] + "</h3></div>");
+				}
+				
+			}
+			
+			
+			
 			// CREATE ERAS
 			for(var j = 0; j < eras.length; j++) {
 				
@@ -7556,6 +7607,10 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.DataObj == 'undefin
 							},
 				            "tags": 							"Optional"
 						};
+						if (dd.gsx$tag.$t) {
+							_date.tag = dd.gsx$tag.$t;
+							trace("TAG " + _date.tag);
+						}
 						_data_obj.timeline.date.push(_date);
 					}
 				};

source/js/VMM.Timeline.DataObj.js

@@ -261,6 +261,10 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.DataObj == 'undefin
 							},
 				            "tags": 							"Optional"
 						};
+						if (dd.gsx$tag.$t) {
+							_date.tag = dd.gsx$tag.$t;
+							trace("TAG " + _date.tag);
+						}
 						_data_obj.timeline.date.push(_date);
 					}
 				};

source/js/VMM.Timeline.TimeNav.js

@@ -7,7 +7,7 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
 		trace("VMM.Timeline.TimeNav");
 		
 		var events = {}, timespan = {}, layout = parent;
-		var data = [], era_markers = [], markers = [], interval_array = [], interval_major_array = [], eras, content;
+		var data = [], era_markers = [], markers = [], interval_array = [], interval_major_array = [], eras, content, tags = [];
 		
 		var current_marker		= 	0;
 		var _active				=	false;
@@ -612,19 +612,34 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
 				}
 				
 				// CONTROL ROW POSITION
-				if (pos - lpos < (config.nav.marker.width + config.spacing)) {
+				if (tags.length > 0) {
-					if (row < config.nav.rows.length - 1) {
+					
-						row ++;
+					for (var k = 0; k < tags.length; k++) {
+						trace("TAGS: " + tags[k])
+						if (k < config.nav.rows.length) {
+							if (markers[i].tag == tags[k]) {
+								trace("tag match " + k);
+								row = k;
+							}
+						}
+					}
+					
+				} else {
+					if (pos - lpos < (config.nav.marker.width + config.spacing)) {
+						if (row < config.nav.rows.length - 1) {
+							row ++;
 						
+						} else {
+							row = 0;
+							row_depth ++;
+						}
 					} else {
+						row_depth = 0;
 						row = 0;
-						row_depth ++;
 					}
-				} else {
-					row_depth = 0;
-					row = 0;
 				}
 				
+				
 				// SET LAST MARKER POSITION
 				lpos = pos;
 				
@@ -1065,7 +1080,8 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
 					marker: 			_marker,
 					flag: 				_marker_flag,
 					lineevent: 			_marker_line_event,
-					type: 				"marker"
+					type: 				"marker",
+					tag:				data[i].tag
 				};
 				
 				
@@ -1075,12 +1091,30 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
 					_marker_obj.type = "start";
 				}
 				
+				if (data[i].tag) {
+					tags.push(data[i].tag);
+				}
+				
 				markers.push(_marker_obj);
 				
 				
 				
 			}
 			
+			// CREATE TAGS
+			tags = VMM.Util.deDupeArray(tags);
+			
+			for(var k = 0; k < tags.length; k++) {
+				if (k < config.nav.rows.length) {
+					var tag_element = VMM.appendAndGetElement($timebackground, "<div>", "timenav-tag");
+					VMM.Lib.addClass(tag_element, "timenav-tag-row-" + (k+1));
+					VMM.appendElement(tag_element, "<div><h3>" + tags[k] + "</h3></div>");
+				}
+				
+			}
+			
+			
+			
 			// CREATE ERAS
 			for(var j = 0; j < eras.length; j++) {
 				

source/js/VMM.Timeline.js

@@ -463,6 +463,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
 					_date.fulldate			=	_date.startdate.getTime();
 					_date.text				=	data.date[i].text;
 					_date.content			=	"";
+					_date.tag				=	data.date[i].tag;
 					
 					
 					_dates.push(_date);

source/js/VMM.Util.js

@@ -63,13 +63,29 @@ if(typeof VMM != 'undefined' && typeof VMM.Util == 'undefined') {
 		
 		/* CUSTOM SORT
 		================================================== */
-		
 		customSort: function(a, b) {
 			var a1= a, b1= b;
 			if(a1== b1) return 0;
 			return a1> b1? 1: -1;
 		},
 		
+		/* Remove Duplicates from Array
+		================================================== */
+		deDupeArray: function(arr) {
+			var i,
+				len=arr.length,
+				out=[],
+				obj={};
+
+			for (i=0;i<len;i++) {
+				obj[arr[i]]=0;
+			}
+			for (i in obj) {
+				out.push(i);
+			}
+			return out;
+		},
+		
 		/* Given an int or decimal, turn that into string in $xxx,xxx.xx format.
 		================================================== */
 		number2money: function(n, symbol, padding) {

source/less/Typography.less

@@ -71,12 +71,6 @@
 		line-height: 38px;
 		
 		margin-bottom: @base-space;
-		-webkit-hyphens:auto;
-		   -moz-hyphens:auto;
-		    -ms-hyphens:auto;
-		        hyphens:auto;
-		word-wrap:break-word;
-		
 	}
 	h1 {
 		margin-bottom: @base-space;

source/less/VMM.Slider.less

@@ -144,7 +144,7 @@
 		margin:0px;
 		//overflow: hidden;
 		display:table;
-		overflow-x:hidden;
+		//overflow-x:hidden;
 		overflow-y:auto;
 		
 		.content {

source/less/VMM.Timeline.TimeNav.less

@@ -140,6 +140,48 @@
 				
 			}
 			
+			.timenav-tag {
+				//margin-top:1px;
+				//height:@navigation-time-height - 8;
+				//margin-bottom:7px;
+				height:@navigation-time-height;
+				//background: @color-theme;
+				div {
+					height:@navigation-time-height;
+					display:table;
+					h3 {
+						display:table-cell;
+						vertical-align:middle;
+						padding-left:@navigation-time-height + @base-space;
+						font-size:@base-font;
+						color: darken(@color-background-dark, 30%);
+						//font-weight: bold;
+					}
+					
+				}
+				
+			}
+			.timenav-tag-row-1 {
+				//background:@color-theme-complement;
+				//background: fadeout(desaturate(@color-theme, 70%), 70%);
+				//background: darken(@color-background-dark, 10%); 
+				//background:@color-background-dark;
+				//background: lighten(@color-background-dark, 6%);
+			}
+			.timenav-tag-row-2 {
+				//background: @color-theme-complement-dark;
+				//background: fadeout(@color-theme-complement-dark, 70%); 
+				//background: fadeout(desaturate(@color-theme, 70%), 60%);
+				background: lighten(@color-background-dark, 3%); 
+			}
+			.timenav-tag-row-3 {
+				//background:@color-theme-complement-darker;
+				//background: fadeout(@color-theme-complement-darker, 70%);
+				//background: fadeout(desaturate(@color-theme, 70%), 50%);
+				//background: lighten(@color-background-dark, 10%);
+				background:@color-background-dark;
+			}
+			
 		}
 		
 		.timenav {

source/less/Variables.less

@@ -6,6 +6,7 @@
 @color-theme-dark:				darken(@color-theme, 15);
 @color-theme-complement:		spin(@color-theme, 180);
 @color-theme-complement-dark:	darken(@color-theme-complement, 15);
+@color-theme-complement-darker:	darken(@color-theme-complement, 30);
 
 @color-theme-split1:			spin(@color-theme, -158);
 @color-theme-split2:			spin(@color-theme, 158);