orbit-4-1/app/assets/javascripts/orbitTimeline.js

//for timeline parent library, will be accessable by main library and API library for other people to use.. default inherits orbitDesktopAPI
// Harry Bomrah

var orbitTimeline = function(dom){
	t = this;
	this.dom = $(dom);
	this.timelineHtml = $("<div class='t_bottom t_scale' id='timeline_scale'></div>");
	//this.marker = t.timelineHtml.find("#timline_marker");
	this.scale = "";
	//this.container = t.timelineHtml.find("#t_container");
	this.events = new Array;
	this.monthList = ["","January","February","March","April","May","June","July","August","September","October","November","December"];
	this.dt = new Date();
	this.fromdate = [t.dt.getFullYear(),t.dt.getMonth()+1];
	this.ajaxload = true;
	this.halfline = $(window).width()/2 + 200;
	this.initialize = function(){
		t.dom.html(t.timelineHtml);
		$("div.scrollbar").hide();
		t.constructTimeScale(function(timelineScale){
			$("#timeline_scale").html(timelineScale);
			var totalyearwidth =timelineScale.find(".year").length * timelineScale.find(".year").outerWidth();
			var totalul = 0;
			$(".t_scale").css({"min-width":$(".tinycanvas .viewport").width()+500 + "px"})
			for(eve in t.events){
				t.makeBubble(t.events[eve]);
				totalul = $("#scale_wrapper ul").length
				$(".t_scale").width((totalul*350) + totalyearwidth);
			}
			t.bubble_fx();
			var scrollvalue = 0;
			$('.tinycanvas').tinyscrollbar({ 
				axis: 'x',
				onMove: function(x){
					if(x > scrollvalue)
						t.timeScaleForward();
					// else
					// 	t.timeScaleBackward();
					scrollvalue = x;
					var limit = $("#timeline_scale").outerWidth() - $(".tinycanvas .scrollbar").outerWidth();
					if(t.ajaxload){
						if((limit - x) < 10){
							t.eventAjaxLoad(function(){
								var totalul = 0;
								for(eve in t.events){
									t.makeBubble(t.events[eve]);
									totalul = $("#scale_wrapper ul").length
									$(".t_scale").width((totalul*360) + totalyearwidth + 314);
								}
								$('.tinycanvas').tinyscrollbar_update(x);
								t.bubble_fx();
							});
						}
					}
				}
			});
		});		
	}
	this.constructTimeScale = function(callbackFn){
		var mon ="",year="",formname;
		var scale = $("<div id='scale_wrapper'></div>");
		$.getJSON("/desktop_orbit/gettimelinespan",{"get":"papers"},function(years){
			var $ul = $("<ul></ul>");
			var startyear = years.startyear, endyear = years.endyear,year = years.startyear;
			$ul.append('<li><a href="'+startyear+'" class="wh3 hh3 admbg active" onclick="return false;">'+startyear+'</a></li>');
			while(year > endyear){
				year--;
				$ul.append('<li><a href="'+year+'" class="wh3 hh3 admbg" onclick="return false;">'+year+'</a></li>');
			}
			$("div#orbit div#year_navigation").html($ul);
		})
		$.getJSON("/desktop_orbit/eventajaxload",{"event":"papers","from":t.fromdate},function(papersArray){
			$.each(papersArray,function(i,pa){
					$.each(pa.papers,function(i,paper){
						var dt = new Date(paper.created_at);
						var cur_mon = paper.created_at.substr(5,2);
						var cur_year = dt.getFullYear();
						var cdt = paper.created_at.substr(0,7).replace("-","");
						formname = (cur_mon.charAt(0) == "0"?cur_mon.charAt(1) : cur_mon)
						var bubbleData = {"fulldate" : t.monthList[parseInt(formname)] +", " + dt.getDate() + ", " + cur_year,"title":paper.title,"jtitle":"Harry","coauthors":paper.coauthors,"abstract":paper.abstract,"timestamp":cdt}
						t.events.push(bubbleData);
						if(cur_year != year){
							year = cur_year;
							scale.append($("<div class='group year w1 h1 hp vp thmtxt thmc1' for='"+year+"'>"+year+"</div><div class='region_year group' data-content='"+year+"'></div>"));
						} 
						if(cur_mon != mon){
							mon = cur_mon;
							var yr = scale.find("div[data-content="+year+"]");
							yr.append($("<div class='group month' data-content='"+cdt+"'><div class='month_heading vp hp'>"+t.monthList[parseInt(formname)]+"</div><div class='bubble_list'></div></div>"))					
						}
					});
				});
				//scale.append($("<div class='group year w1 h1 hp vp thmtxt thmc1'>"+year+"</div><div class='region_year group' data-content='"+(year-1)+"'></div>"));
				t.fromdate = [year,formname-1];
				if(typeof callbackFn == "function"){
					callbackFn.call(this,scale);
				}
			})		

	}
	this.makeBubble = function(bubbleData){
		var totalul = $("#scale_wrapper").find("div[data-content="+bubbleData.timestamp+"] ul").length;
		var targetul =  $("#scale_wrapper div[data-content="+bubbleData.timestamp+"] div.bubble_list ul").eq(totalul-1);
		if(totalul == 0){
			var ul = $("<ul></ul>");
			$("#scale_wrapper").find("div[data-content="+bubbleData.timestamp+"] div.bubble_list").append(ul);
			targetul = ul;
		}else{
			var totalli = targetul.find("li").length;
			if(totalli >= 5){
				var ul = $("<ul></ul>");
				$("#scale_wrapper").find("div[data-content="+bubbleData.timestamp+"] div.bubble_list").append(ul);
				targetul = ul;
			}
		}
		var bt = (bubbleData.title.length > 70? bubbleData.title.substr(0,70) + "..." : bubbleData.title);
		var bubble = $("<li class='bubble hh3 admbg vp hp'>"+bt+"<span class='date'>"+bubbleData.fulldate+"</span></li>");
		targetul.prepend(bubble);
		bubble.show();
		bubble.click(function(){
			var thisbubble = $(this);
			$(this).parents(dom)
						.find('.bubble, .date')
						.removeClass('thmc1 thmtxt');
					
			o.toolPopup({
				parent: $(this).parent(),
				html : "<div class='bubble_content'><h2>"+bubbleData.jtitle+"</h2><h3>Co-Authors</h3><span class='context'>"+bubbleData.coauthors+"</span><h3>Abstract</h3><span class='context'>"+bubbleData.abstract+"</span></div>",
				height: "392px",
				width:"310px",
				beforeClose : function(){
					$("div.bubble_arrow").remove();
					thisbubble.parents(dom)
						.find('.bubble, .date')
						.removeClass('thmc1 thmtxt');
				},
				onOpen : function(){
					thisbubble.append('<div class="bubble_arrow"/>');
				},
				beforeOpen : function(){
					thisbubble.addClass('thmc1 thmtxt');
					thisbubble.find('.date').addClass('thmtxt');
				}
			});
		})
	}
	this.eventAjaxLoad = function(callbackFn){
		t.events = [];
		var mon ="",year="",formname;
		var scale = $("#scale_wrapper");
		
			t.ajaxload = false;
			$.getJSON("/desktop_orbit/eventajaxload",{"from":t.fromdate},function(papersArray){
				$.each(papersArray,function(i,pa){
					$.each(pa.papers,function(i,paper){
						var dt = new Date(paper.created_at);
						var cur_mon = paper.created_at.substr(5,2);
						var cur_year = dt.getFullYear();
						var cdt = paper.created_at.substr(0,7).replace("-","");
						formname = (cur_mon.charAt(0) == "0"?cur_mon.charAt(1) : cur_mon)
						var bubbleData = {"fulldate" : t.monthList[parseInt(formname)] +", " + dt.getDate() + ", " + cur_year,"title":paper.title,"jtitle":"Harry","coauthors":paper.coauthors,"abstract":paper.abstract,"timestamp":cdt}
						t.events.push(bubbleData);
						if(cur_year != year){
							year = cur_year;
							if(scale.find("div[data-content="+year+"]").length == 0){
								scale.append($("<div class='group year w1 h1 hp vp thmtxt thmc1' for='"+year+"'>"+year+"</div><div class='region_year group' data-content='"+year+"'></div>"));
							}
						} 
						if(cur_mon != mon){
							mon = cur_mon;
							var yr = scale.find("div[data-content="+year+"]");
							yr.append($("<div class='group month' data-content='"+cdt+"'><div class='month_heading vp hp'>"+t.monthList[parseInt(formname)]+"</div><div class='bubble_list'></div></div>"))					
						}
					});
				});
				if(papersArray.length != 0){
					// if(scale.find("div[data-content="+(year-1)+"]").length == 0)
					// 	scale.append($("<div class='group year w1 h1 hp vp thmtxt thmc1'>"+year+"</div><div class='region_year group' data-content='"+(year-1)+"'></div>"));
					t.ajaxload = true;
					t.fromdate = [year,formname-1];
				}
				if(typeof callbackFn == "function"){
					callbackFn.call(this,scale);
				}
			})
		
	}
	this.bubble_fx = function(){
		$('.bubble').on({
			mouseover: function(){
				$(this)
					.addClass('hover')
					.append('<span class="icon-chevron-right" />');
			},
			mouseout: function(){
				$(this)
					.removeClass('hover')
					.find('.icon-chevron-right').remove();
			},
		});
	}
	this.timeScaleForward = function(){
		
		// var lastregion = regions.eq(regions.length-1);
		// if(lastregion.offset().left < halfline){
		// 	var year = lastregion.attr("data-content");
		// 	$("div#orbit div#year_navigation ul a").removeClass("active");
		// 	$("div#orbit div#year_navigation ul a[href="+year+"]").addClass("active");
		// }
		var regions = $("div.region_year");
		regions.each(function(){
			var offset = $(this).offset().left;
			if(offset < t.halfline){
				if(offset > 156){
					var year = $(this).attr("data-content");
					$("div#orbit div#year_navigation ul a").removeClass("active");
					$("div#orbit div#year_navigation ul a[href="+year+"]").addClass("active");
				}
			}
		})
	}
	this.timeScaleBackward = function(){
		var regions = $("div.region_year");
		regions.each(function(){
			var offset = $(this).offset().left * -1
			if(offset > t.halfline){
				if(offset > 156){
					var year = $(this).attr("data-content");
					$("div#orbit div#year_navigation ul a").removeClass("active");
					$("div#orbit div#year_navigation ul a[href="+year+"]").addClass("active");
				}
			}
		})
	}
	this.ajaxEventPull = function(){
		if(!t.update){
			t.update = true;
		 	$.getJSON("/desktop_orbit/ajaxeventpull",{"from":t.fromdate},function(){

		 	})
		}
	}
}