Timeline ajax loading

app/assets/javascripts/desktop.js

@@ -7,7 +7,7 @@
 //= require jquery
 //= require jquery_ujs
 //= require jquery-ui
-//= require jquery.tinyscrollbar.min
+//= require jquery.tinyscrollbar
 //= require jquery.miniColors.min
 //= require bootstrap
 //= require orbitdesktopAPI

app/assets/javascripts/jquery.tinyscrollbar.js

@@ -0,0 +1,211 @@
+/*
+ * Tiny Scrollbar 1.8
+ * http://www.baijs.nl/tinyscrollbar/
+ *
+ * Copyright 2012, Maarten Baijs
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.opensource.org/licenses/gpl-2.0.php
+ *
+ * Date: 26 / 07 / 2012
+ * Depends on library: jQuery
+ *
+ */
+( function( $ ) 
+{
+    $.tiny = $.tiny || { };
+
+    $.tiny.scrollbar = {
+        options: {
+                axis       : 'y'    // vertical or horizontal scrollbar? ( x || y ).
+            ,   wheel      : 40     // how many pixels must the mouswheel scroll at a time.
+            ,   scroll     : true   // enable or disable the mousewheel.
+            ,   lockscroll : true   // return scrollwheel to browser if there is no more content.
+            ,   size       : 'auto' // set the size of the scrollbar to auto or a fixed number.
+            ,   sizethumb  : 'auto' // set the size of the thumb to auto or a fixed number.
+            ,   onMove     : function(){}
+        }
+    };
+
+    $.fn.tinyscrollbar = function( params )
+    {
+        var options = $.extend( {}, $.tiny.scrollbar.options, params );
+        
+        this.each( function()
+        { 
+            $( this ).data('tsb', new Scrollbar( $( this ), options ) ); 
+        });
+
+        return this;
+    };
+
+    $.fn.tinyscrollbar_update = function(sScroll)
+    {
+        return $( this ).data( 'tsb' ).update( sScroll ); 
+    };
+
+    function Scrollbar( root, options )
+    {
+        var oSelf       = this
+        ,   oWrapper    = root
+        ,   oViewport   = { obj: $( '.viewport', root ) }
+        ,   oContent    = { obj: $( '.overview', root ) }
+        ,   oScrollbar  = { obj: $( '.scrollbar', root ) }
+        ,   oTrack      = { obj: $( '.track', oScrollbar.obj ) }
+        ,   oThumb      = { obj: $( '.thumb', oScrollbar.obj ) }
+        ,   sAxis       = options.axis === 'x'
+        ,   sDirection  = sAxis ? 'left' : 'top'
+        ,   sSize       = sAxis ? 'Width' : 'Height'
+        ,   iScroll     = 0
+        ,   iPosition   = { start: 0, now: 0 }
+        ,   iMouse      = {}
+        ,   touchEvents = ( 'ontouchstart' in document.documentElement ) ? true : false
+        ;
+
+        function initialize()
+        {
+            oSelf.update();
+            setEvents();
+
+            return oSelf;
+        }
+
+        this.update = function( sScroll )
+        {
+            oViewport[ options.axis ] = oViewport.obj[0][ 'offset'+ sSize ];
+            oContent[ options.axis ]  = oContent.obj[0][ 'scroll'+ sSize ];
+            oContent.ratio            = oViewport[ options.axis ] / oContent[ options.axis ];
+
+            oScrollbar.obj.toggleClass( 'disable', oContent.ratio >= 1 );
+
+            oTrack[ options.axis ] = options.size === 'auto' ? oViewport[ options.axis ] : options.size;
+            oThumb[ options.axis ] = Math.min( oTrack[ options.axis ], Math.max( 0, ( options.sizethumb === 'auto' ? ( oTrack[ options.axis ] * oContent.ratio ) : options.sizethumb ) ) );
+        
+            oScrollbar.ratio = options.sizethumb === 'auto' ? ( oContent[ options.axis ] / oTrack[ options.axis ] ) : ( oContent[ options.axis ] - oViewport[ options.axis ] ) / ( oTrack[ options.axis ] - oThumb[ options.axis ] );
+            
+            iScroll = ( sScroll === 'relative' && oContent.ratio <= 1 ) ? Math.min( ( oContent[ options.axis ] - oViewport[ options.axis ] ), Math.max( 0, iScroll )) : 0;
+            iScroll = ( sScroll === 'bottom' && oContent.ratio <= 1 ) ? ( oContent[ options.axis ] - oViewport[ options.axis ] ) : isNaN( parseInt( sScroll, 10 ) ) ? iScroll : parseInt( sScroll, 10 );
+            
+            setSize();
+        };
+
+        function setSize()
+        {
+            var sCssSize = sSize.toLowerCase();
+
+            oThumb.obj.css( sDirection, iScroll / oScrollbar.ratio );
+            oContent.obj.css( sDirection, -iScroll );
+            iMouse.start = oThumb.obj.offset()[ sDirection ];
+
+            oScrollbar.obj.css( sCssSize, oTrack[ options.axis ] );
+            oTrack.obj.css( sCssSize, oTrack[ options.axis ] );
+            oThumb.obj.css( sCssSize, oThumb[ options.axis ] );
+        }
+
+        function setEvents()
+        {
+            if( ! touchEvents )
+            {
+                oThumb.obj.bind( 'mousedown', start );
+                oTrack.obj.bind( 'mouseup', drag );
+            }
+            else
+            {
+                oViewport.obj[0].ontouchstart = function( event )
+                {   
+                    if( 1 === event.touches.length )
+                    {
+                        start( event.touches[ 0 ] );
+                        event.stopPropagation();
+                    }
+                };
+            }
+
+            if( options.scroll && window.addEventListener )
+            {
+                oWrapper[0].addEventListener( 'DOMMouseScroll', wheel, false );
+                oWrapper[0].addEventListener( 'mousewheel', wheel, false );
+            }
+            else if( options.scroll )
+            {
+                oWrapper[0].onmousewheel = wheel;
+            }
+        }
+
+        function start( event )
+        {
+            var oThumbDir   = parseInt( oThumb.obj.css( sDirection ), 10 );
+            iMouse.start    = sAxis ? event.pageX : event.pageY;
+            iPosition.start = oThumbDir == 'auto' ? 0 : oThumbDir;
+            
+            if( ! touchEvents )
+            {
+                $( document ).bind( 'mousemove', drag );
+                $( document ).bind( 'mouseup', end );
+                oThumb.obj.bind( 'mouseup', end );
+            }
+            else
+            {
+                document.ontouchmove = function( event )
+                {
+                    event.preventDefault();
+                    drag( event.touches[ 0 ] );
+                };
+                document.ontouchend = end;        
+            }
+        }
+
+        function wheel( event )
+        {
+            if( oContent.ratio < 1 )
+            {
+                var oEvent = event || window.event
+                ,   iDelta = oEvent.wheelDelta ? oEvent.wheelDelta / 120 : -oEvent.detail / 3
+                ;
+
+                iScroll -= iDelta * options.wheel;
+                iScroll = Math.min( ( oContent[ options.axis ] - oViewport[ options.axis ] ), Math.max( 0, iScroll ));
+
+                oThumb.obj.css( sDirection, iScroll / oScrollbar.ratio );
+                oContent.obj.css( sDirection, -iScroll );
+
+                if( options.lockscroll || ( iScroll !== ( oContent[ options.axis ] - oViewport[ options.axis ] ) && iScroll !== 0 ) )
+                {
+                    oEvent = $.event.fix( oEvent );
+                    oEvent.preventDefault();
+                }
+            }
+            options.onMove.call(this,iScroll);
+        }
+
+        function drag( event )
+        {
+            if( oContent.ratio < 1 )
+            {
+                if( ! touchEvents )
+                {
+                    iPosition.now = Math.min( ( oTrack[ options.axis ] - oThumb[ options.axis ] ), Math.max( 0, ( iPosition.start + ( ( sAxis ? event.pageX : event.pageY ) - iMouse.start))));
+                }
+                else
+                {
+                    iPosition.now = Math.min( ( oTrack[ options.axis ] - oThumb[ options.axis ] ), Math.max( 0, ( iPosition.start + ( iMouse.start - ( sAxis ? event.pageX : event.pageY ) ))));
+                }
+
+                iScroll = iPosition.now * oScrollbar.ratio;
+                oContent.obj.css( sDirection, -iScroll );
+                oThumb.obj.css( sDirection, iPosition.now );
+            }
+        }
+        
+        function end()
+        {
+            $( document ).unbind( 'mousemove', drag );
+            $( document ).unbind( 'mouseup', end );
+            oThumb.obj.unbind( 'mouseup', end );
+            document.ontouchmove = document.ontouchend = null;
+        }
+
+        return initialize();
+    }
+
+}(jQuery));

app/assets/javascripts/orbitTimeline.js

@@ -6,57 +6,77 @@ var orbitTimeline = function(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 = t.timelineHtml.find("#timeline_scale");
+	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.initialize = function(){
 		t.dom.html(t.timelineHtml);
 		$("div.scrollbar").hide();
 		t.constructTimeScale(function(timelineScale){
-			console.log(timelineScale);
 			$("#timeline_scale").html(timelineScale);
 			var totalyearwidth =timelineScale.find(".year").length * 100;
 			var totalul = 0;
+			$(".t_scale").css({"min-width":$(".tinycanvas .viewport").width()+200 + "px"})
 			for(eve in t.events){
 				t.makeBubble(t.events[eve]);
 				totalul = $("#scale_wrapper ul").length
 				$(".t_scale").width((totalul*350) + totalyearwidth);
 			}
 			
-			$('.tinycanvas').tinyscrollbar({ axis: 'x'});
+			$('.tinycanvas').tinyscrollbar({ 
+				axis: 'x',
+				onMove: function(x){
+					var limit = $("#timeline_scale").width() - $(".tinycanvas .scrollbar").width();
+					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*350) + totalyearwidth);
+								}
+								$('.tinycanvas').tinyscrollbar_update(x);
+							});
+						}
+					}
+				}
+			});
 		});		
 	}
 	this.constructTimeScale = function(callbackFn){
-		var mon ="",year="";
+		var mon ="",year="",formname;
 		var scale = $("<div id='scale_wrapper'></div>");
-		$.getJSON("desktop_orbit/getevents",{"event":"papers"},function(journals){
+		$.getJSON("desktop_orbit/getevents",{"event":"papers","from":t.fromdate},function(papers){
-			$.each(journals,function(x,journal){
+				$.each(papers,function(i,paper){
-				$.each(journal.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("-","");
-					var formname = (cur_mon.charAt(0) == "0"?cur_mon.charAt(1) : cur_mon)
+					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":journal.title,"coauthors":paper.coauthors,"abstract":paper.abstract,"timestamp":cdt}
+					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='scale_region year'>"+(year+1)+"</div>"));
+						scale.append($("<div class='scale_region year'>"+(year+1)+"</div><div data-content='"+year+"'></div>"));
 					} 
 					if(cur_mon != mon){
 						mon = cur_mon;
-						console.log(parseInt(cur_mon));
+						var yr = scale.find("div[data-content="+year+"]");
-						scale.append($("<div class='scale_region month' data-content='"+cdt+"'><div class='month_heading'>"+t.monthList[parseInt(formname)]+"</div><div class='bubble_list'></div></div>"))					
+						yr.append($("<div class='scale_region month' data-content='"+cdt+"'><div class='month_heading'>"+t.monthList[parseInt(formname)]+"</div><div class='bubble_list'></div></div>"))					
 					}
 				});
+				scale.append($("<div class='scale_region year'>"+year+"</div><div data-content='"+(year-1)+"'></div>"));
+				t.fromdate = [year,formname-1];
+				if(typeof callbackFn == "function"){
+					callbackFn.call(this,scale);
+				}
 			})
-			scale.append($("<div class='scale_region year'>"+year+"</div>"));
-			if(typeof callbackFn == "function"){
-				callbackFn.call(this,scale);
-			}
 			
-		});
 	}
 	this.makeBubble = function(bubbleData){
 		var totalul = $("#scale_wrapper").find("div[data-content="+bubbleData.timestamp+"] ul").length;
@@ -87,4 +107,45 @@ var orbitTimeline = function(dom){
 			});
 		})//.mouseout(function(){t.oapi.toolPopup("destroy");})
 	}
+	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='scale_region year'>"+(year+1)+"</div><div data-content='"+year+"'></div>"));
+							}
+						} 
+						if(cur_mon != mon){
+							mon = cur_mon;
+							var yr = scale.find("div[data-content="+year+"]");
+							yr.append($("<div class='scale_region month' data-content='"+cdt+"'><div class='month_heading'>"+t.monthList[parseInt(formname)]+"</div><div class='bubble_list'></div></div>"))					
+						}
+					});
+				});
+				if(papersArray.length != 0){
+					scale.append($("<div class='scale_region year'>"+year+"</div><div data-content='"+(year-1)+"'></div>"));
+					t.ajaxload = true;
+					console.log(year);
+					t.fromdate = [year,formname-1];
+				}
+				if(typeof callbackFn == "function"){
+					callbackFn.call(this,scale);
+				}
+			})
+		
+	}
 }

app/assets/stylesheets/orbitTimeline.css

@@ -1,5 +1,4 @@
 .t_scale{
-	min-width:2000px;
 	height:516px;
 	bottom:0;
 }

app/controllers/desktop_orbit_controller.rb

@@ -7,12 +7,41 @@ class DesktopOrbitController< ApplicationController
 	def getevents
 		@event = params["event"]
 		@data = Array.new
+		@fromdate = params["from"]
 		case @event
 		when "papers"
-			@journals = current_user.journals
+			@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)
-			@journals.each do |journal|
+		end
-				@data << {"title"=> journal.title,"papers"=> journal.papers}
+		render :json=>@data.to_json
+	end
+
+	def eventajaxload
+		@fromdate = params["from"]
+		@fromdate[0] = Integer(@fromdate[0])
+		@fromdate[1] = Integer(@fromdate[1])
+		@totalpapers = 0
+		@lastpaper = current_user.papers.all.desc(:created_at).last
+		@data = Array.new
+		while @totalpapers < 15
+			if @lastpaper.created_at > Date.new(@fromdate[0],@fromdate[1])
+				break
 			end
+			if(@fromdate[1] == 12)
+				@papers = current_user.papers.where(:created_at.gt => Date.new(@fromdate[0],@fromdate[1]),:created_at.lt => Date.new(@fromdate[0]+1,1)).desc(:created_at)
+			else
+				@papers = current_user.papers.where(:created_at.gt => Date.new(@fromdate[0],@fromdate[1]),:created_at.lt => Date.new(@fromdate[0],@fromdate[1]+1)).desc(:created_at)
+			end
+			if(@papers.length > 0)
+				@data << {"papers" => @papers}
+			end
+			@totalpapers = @totalpapers + @papers.length
+			
+			@fromdate[1] = @fromdate[1]-1
+			if(@fromdate[1] == 0)
+				@fromdate[1] = 12
+				@fromdate[0] = @fromdate[0] - 1 
+			end
+			
 		end
 		render :json=>@data.to_json
 	end

app/models/paper.rb

@@ -9,7 +9,8 @@ class Paper
  	field :coauthors, default: "Allen, Shelly, Eric, Manson, Chris, Clara, Anna, Albee, Vincent, Devin, Chunchi, Ika, Jaoshua, Ray, Matt, Lin, Spen"
  	field :created_at, type: Date, default: ->{12.months.ago}
 
- 	belongs_to :journal
+ 	belongs_to :user
+
 
 
  end

app/models/user/user.rb

@@ -23,6 +23,7 @@ class User
   has_one :desktop, :autosave => true, :dependent => :destroy
   has_many :other_accounts, :autosave => true, :dependent => :destroy
   has_many :journals, :autosave => true, :dependent => :destroy
+  has_many :papers, :autosave => true, :dependent => :destroy
 
   belongs_to :role
   has_and_belongs_to_many :sub_roles

config/routes.rb

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