Timeline design and timescale update

Gemfile.lock

@@ -1,3 +1,18 @@
+GIT
+  remote: git://github.com/amatsuda/kaminari.git
+  revision: 82a38e07db1ca1598c8daf073a8f6be22ae714d6
+  specs:
+    kaminari (0.13.0)
+      actionpack (>= 3.0.0)
+      activesupport (>= 3.0.0)
+
+PATH
+  remote: vendor/impressionist
+  specs:
+    impressionist (1.1.1)
+      httpclient (~> 2.2)
+      nokogiri (~> 1.5)
+
 GEM
   remote: http://rubygems.org/
   specs:

app/assets/javascripts/orbitTimeline.js

@@ -3,7 +3,7 @@
 
 var orbitTimeline = function(dom){
 	t = this;
-	this.dom = $("#"+dom);
+	this.dom = $(dom);
 	this.timelineHtml = $("<div class='t_bottom t_scale' id='timeline_scale'></div>");
 	//this.marker = t.timelineHtml.find("#timline_marker");
 	this.scale = "";
@@ -18,9 +18,9 @@ var orbitTimeline = function(dom){
 		$("div.scrollbar").hide();
 		t.constructTimeScale(function(timelineScale){
 			$("#timeline_scale").html(timelineScale);
-			var totalyearwidth =timelineScale.find(".year").length * 200;
+			var totalyearwidth =timelineScale.find(".year").length * timelineScale.find(".year").outerWidth();
 			var totalul = 0;
-			$(".t_scale").css({"min-width":$(".tinycanvas .viewport").width()+200 + "px"})
+			$(".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
@@ -30,7 +30,7 @@ var orbitTimeline = function(dom){
 			$('.tinycanvas').tinyscrollbar({ 
 				axis: 'x',
 				onMove: function(x){
-					var limit = $("#timeline_scale").width() - $(".tinycanvas .scrollbar").width();
+					var limit = $("#timeline_scale").outerWidth() - $(".tinycanvas .scrollbar").outerWidth();
 					if(t.ajaxload){
 						if((limit - x) < 10){
 							t.eventAjaxLoad(function(){
@@ -52,6 +52,16 @@ var orbitTimeline = function(dom){
 	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){
@@ -64,7 +74,7 @@ var orbitTimeline = function(dom){
 						t.events.push(bubbleData);
 						if(cur_year != year){
 							year = cur_year;
-							scale.append($("<div class='group year w1 h1 hp vp thmtxt thmc1'>"+(year+1)+"</div><div class='region_year group' data-content='"+year+"'></div>"));
+							scale.append($("<div class='group year w1 h1 hp vp thmtxt thmc1'>"+year+"</div><div class='region_year group' data-content='"+year+"'></div>"));
 						} 
 						if(cur_mon != mon){
 							mon = cur_mon;
@@ -73,7 +83,7 @@ var orbitTimeline = function(dom){
 						}
 					});
 				});
-				scale.append($("<div class='group year w1 h1 hp vp thmtxt thmc1'>"+year+"</div><div class='region_year group' data-content='"+(year-1)+"'></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);
@@ -101,13 +111,31 @@ var orbitTimeline = function(dom){
 		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"
+				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');
+				}
 			});
-		})//.mouseout(function(){t.oapi.toolPopup("destroy");})
+		})
 	}
 	this.eventAjaxLoad = function(callbackFn){
 		t.events = [];
@@ -128,7 +156,7 @@ var orbitTimeline = function(dom){
 						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'>"+(year+1)+"</div><div class='region_year group' data-content='"+year+"'></div>"));
+								scale.append($("<div class='group year w1 h1 hp vp thmtxt thmc1'>"+year+"</div><div class='region_year group' data-content='"+year+"'></div>"));
 							}
 						} 
 						if(cur_mon != mon){
@@ -139,8 +167,8 @@ var orbitTimeline = function(dom){
 					});
 				});
 				if(papersArray.length != 0){
-					if(scale.find("div[data-content="+(year-1)+"]").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>"));
+					// 	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];
 				}
@@ -152,29 +180,16 @@ var orbitTimeline = function(dom){
 	}
 	this.bubble_fx = function(){
 		$('.bubble').on({
-				mouseover: function(){
+			mouseover: function(){
-					$(this)
+				$(this)
-						.addClass('hover')
+					.addClass('hover')
-						.append('<span class="icon-chevron-right" />');
+					.append('<span class="icon-chevron-right" />');
-				},
+			},
-				mouseout: function(){
+			mouseout: function(){
-					$(this)
+				$(this)
-						.removeClass('hover')
+					.removeClass('hover')
-						.find('.icon-chevron-right').remove();
+					.find('.icon-chevron-right').remove();
-				},
+			},
-				click: function(){
+		});
-					$(this)
-						.parents('#timeline')
-						.find('.bubble, .date')
-						.removeClass('thmc1 thmtxt');
-					$(this)
-						.addClass('thmc1 thmtxt');
-					$(this)
-						.find('.date')
-						.addClass('thmtxt');
-					$(this)
-						.append('<div class="bubble_arrow"/>');
-				}
-			});
 	}
 }

app/assets/javascripts/orbitdesktop.js

@@ -923,7 +923,7 @@ var orbitDesktop = function(dom){
 		o.currenthtml = target;
 		o.currentface = "orbit";
 		var bindHandlers = function(){
-			var timeline = new orbitTimeline("timeline");
+			var timeline = new orbitTimeline("#timeline");
 			timeline.initialize();
 		}
 		if(!o.desktopData[o.currentface]){

app/assets/javascripts/orbitdesktopAPI.js

@@ -163,7 +163,6 @@ var orbitDesktopAPI = function(){
 			$(".desktop_toolpopup").hide("fold",function(){
 				$(this).remove();
 				$(this).parent().css("position","");
-
 			})
 			return;
 		}
@@ -172,6 +171,14 @@ var orbitDesktopAPI = function(){
 				settings.height = (!settings.height ? "50px" : settings.height);
 				settings.width = (!settings.width ? "150px" : settings.width);
 				settings.html = (!settings.html ?  "" : settings.html);
+
+				//Events
+				settings.onClose = (!settings.onClose ?  function(){} : settings.onClose);
+				settings.beforeOpen = (!settings.beforeOpen ?  function(){} : settings.beforeOpen);
+				settings.onOpen = (!settings.onOpen ?  function(){} : settings.onOpen);
+				settings.beforeClose = (!settings.beforeClose ?  function(){} : settings.beforeClose);
+				//Events end
+
 				var leftpos = settings.parent.outerWidth();
 				var toolpopup = $("<div class='desktop_toolpopup' style='height:"+settings.height+";width:"+settings.width+"; left:"+leftpos+"px;'>"+settings.html+"</div>");
 				settings.parent.css("position","relative");
@@ -179,13 +186,16 @@ var orbitDesktopAPI = function(){
 				toolpopup.click(function(event){
 					event.stopPropagation();
 				});
-				
+				settings.beforeOpen.call(this);
 				toolpopup.show("fold",function(){
+					settings.onOpen.call(this);
 					$(document).unbind("click");
 					$(document).one("click",function(e){
+						settings.beforeClose.call(this);
 						toolpopup.hide("fold",function(){
 							toolpopup.remove();
 							settings.parent.css("position","");
+							settings.onClose.call(this);
 						});						
 					})
 				});				

app/controllers/desktop_orbit_controller.rb

@@ -4,15 +4,16 @@ class DesktopOrbitController< ApplicationController
 		render "desktop/orbit", :layout => false
 	end
 
-	def getevents
+	def gettimelinespan
-		@event = params["event"]
+		@get = params['get']
-		@data = Array.new
+		case @get
-		@fromdate = params["from"]
+			when "papers"
-		case @event
+				firstpaper = current_user.papers.all.first
-		when "papers"
+				lastpaper = current_user.papers.all.desc(:created_at).last
-			@data = current_user.papers.where(:created_at.gt => Date.new(Integer(@fromdate[0]),Integer(@fromdate[1])-1),:created_at.lt => Date.new(Integer(@fromdate[0]),Integer(@fromdate[1])+1)).desc(:created_at)
+				endyear = Integer(lastpaper.created_at.strftime("%Y"))
+				startyear = Integer(firstpaper.created_at.strftime("%Y"))
 		end
-		render :json=>@data.to_json
+		render :json=>{"startyear"=>startyear,"endyear"=>endyear}.to_json
 	end
 
 	def eventajaxload

app/views/desktop/orbit.html.erb

@@ -27,16 +27,16 @@
 		</div>
 	</div>
 	<div id="holder">
-		<div class="time_nav">
+		<div class="time_nav" id="year_navigation">
 			<ul>
-				<li><a href="" class="wh3 hh3 admbg active">2013</a></li>
+				<!-- <li><a href="" class="wh3 hh3 admbg active">2013</a></li>
 				<li><a href="" class="wh3 hh3 admbg">2012</a></li>
 				<li><a href="" class="wh3 hh3 admbg">2011</a></li>
 				<li><a href="" class="wh3 hh3 admbg">2010</a></li>
 				<li><a href="" class="wh3 hh3 admbg">2009</a></li>
 				<li><a href="" class="wh3 hh3 admbg">2008</a></li>
 				<li><a href="" class="wh3 hh3 admbg">2007</a></li>
-				<li><a href="" class="wh3 hh3 admbg">2006</a></li>
+				<li><a href="" class="wh3 hh3 admbg">2006</a></li> -->
 			</ul>
 		</div>
 		<div class="time_nav_c wh3 hh2"><a href=""><span class="icon-chevron-left"></span></a><a href=""><span class="icon-chevron-right"></span></a></div>
@@ -44,7 +44,6 @@
 			<div class="tinycanvas">
 			<div class="scrollbar sb_h vp"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
 			<div class="viewport">
-			
 				<div id="timeline" class="overview">
 				</div>
 			</div>

config/routes.rb

@@ -205,7 +205,7 @@ Orbit::Application.routes.draw do
 
   match '/desktop_orbit/orbit' => 'desktop_orbit#orbit'
   match '/desktop_orbit/eventajaxload'=> 'desktop_orbit#eventajaxload'
-  match '/desktop_orbit/getevents' => 'desktop_orbit#getevents'
+  match '/desktop_orbit/gettimelinespan' => 'desktop_orbit#gettimelinespan'
 
    #match '/desktop_orbit/eventajaxload' => 'desktop_publications#create_journal'
   #match '/desktop_orbit/eventajaxload' => 'desktop_publications#delete_journal'