developers
/
orbit-4-1
Archived
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Timeline design and timescale update

This commit is contained in:
Harry Bomrah 2012-07-06 16:11:03 +08:00
parent bfaed4deb4
commit 830eb8eb62
7 changed files with 91 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
Gemfile.lock
View File

@ -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 GEM
remote: http://rubygems.org/ remote: http://rubygems.org/
specs: specs:

63
app/assets/javascripts/orbitTimeline.js
View File

@ -3,7 +3,7 @@
var orbitTimeline = function(dom){ var orbitTimeline = function(dom){
t = this; t = this;
this.dom = $("#"+dom); this.dom = $(dom);
this.timelineHtml = $("<div class='t_bottom t_scale' id='timeline_scale'></div>"); this.timelineHtml = $("<div class='t_bottom t_scale' id='timeline_scale'></div>");
//this.marker = t.timelineHtml.find("#timline_marker"); //this.marker = t.timelineHtml.find("#timline_marker");
this.scale = ""; this.scale = "";
@ -18,9 +18,9 @@ var orbitTimeline = function(dom){
$("div.scrollbar").hide(); $("div.scrollbar").hide();
t.constructTimeScale(function(timelineScale){ t.constructTimeScale(function(timelineScale){
$("#timeline_scale").html(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; 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){ for(eve in t.events){
t.makeBubble(t.events[eve]); t.makeBubble(t.events[eve]);
totalul = $("#scale_wrapper ul").length totalul = $("#scale_wrapper ul").length
@ -30,7 +30,7 @@ var orbitTimeline = function(dom){
$('.tinycanvas').tinyscrollbar({ $('.tinycanvas').tinyscrollbar({
axis: 'x', axis: 'x',
onMove: function(x){ onMove: function(x){
var limit = $("#timeline_scale").width() - $(".tinycanvas .scrollbar").width(); var limit = $("#timeline_scale").outerWidth() - $(".tinycanvas .scrollbar").outerWidth();
if(t.ajaxload){ if(t.ajaxload){
if((limit - x) < 10){ if((limit - x) < 10){
t.eventAjaxLoad(function(){ t.eventAjaxLoad(function(){
@ -52,6 +52,16 @@ var orbitTimeline = function(dom){
this.constructTimeScale = function(callbackFn){ this.constructTimeScale = function(callbackFn){
var mon ="",year="",formname; var mon ="",year="",formname;
var scale = $("<div id='scale_wrapper'></div>"); 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){ $.getJSON("desktop_orbit/eventajaxload",{"event":"papers","from":t.fromdate},function(papersArray){
$.each(papersArray,function(i,pa){ $.each(papersArray,function(i,pa){
$.each(pa.papers,function(i,paper){ $.each(pa.papers,function(i,paper){
@ -64,7 +74,7 @@ var orbitTimeline = function(dom){
t.events.push(bubbleData); t.events.push(bubbleData);
if(cur_year != year){ if(cur_year != year){
year = cur_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){ if(cur_mon != mon){
mon = cur_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]; t.fromdate = [year,formname-1];
if(typeof callbackFn == "function"){ if(typeof callbackFn == "function"){
callbackFn.call(this,scale); callbackFn.call(this,scale);
@ -101,13 +111,31 @@ var orbitTimeline = function(dom){
targetul.prepend(bubble); targetul.prepend(bubble);
bubble.show(); bubble.show();
bubble.click(function(){ bubble.click(function(){
var thisbubble = $(this);
$(this).parents(dom)
.find('.bubble, .date')
.removeClass('thmc1 thmtxt');
o.toolPopup({ o.toolPopup({
parent: $(this).parent(), 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>", 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", 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){ this.eventAjaxLoad = function(callbackFn){
t.events = []; t.events = [];
@ -128,7 +156,7 @@ var orbitTimeline = function(dom){
if(cur_year != year){ if(cur_year != year){
year = cur_year; year = cur_year;
if(scale.find("div[data-content="+year+"]").length == 0){ 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){ if(cur_mon != mon){
@ -139,8 +167,8 @@ var orbitTimeline = function(dom){
}); });
}); });
if(papersArray.length != 0){ 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.ajaxload = true;
t.fromdate = [year,formname-1]; t.fromdate = [year,formname-1];
} }
@ -162,19 +190,6 @@ var orbitTimeline = function(dom){
.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"/>');
}
}); });
} }
} }

2
app/assets/javascripts/orbitdesktop.js
View File

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

14
app/assets/javascripts/orbitdesktopAPI.js
View File

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

15
app/controllers/desktop_orbit_controller.rb
View File

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

7
app/views/desktop/orbit.html.erb
View File

@ -27,16 +27,16 @@
</div> </div>
</div> </div>
<div id="holder"> <div id="holder">
<div class="time_nav"> <div class="time_nav" id="year_navigation">
<ul> <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">2012</a></li>
<li><a href="" class="wh3 hh3 admbg">2011</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">2010</a></li>
<li><a href="" class="wh3 hh3 admbg">2009</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">2008</a></li>
<li><a href="" class="wh3 hh3 admbg">2007</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> </ul>
</div> </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> <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="tinycanvas">
<div class="scrollbar sb_h vp"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div> <div class="scrollbar sb_h vp"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
<div class="viewport"> <div class="viewport">
<div id="timeline" class="overview"> <div id="timeline" class="overview">
</div> </div>
</div> </div>

2
config/routes.rb
View File

@ -205,7 +205,7 @@ Orbit::Application.routes.draw do
match '/desktop_orbit/orbit' => 'desktop_orbit#orbit' match '/desktop_orbit/orbit' => 'desktop_orbit#orbit'
match '/desktop_orbit/eventajaxload'=> 'desktop_orbit#eventajaxload' 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#create_journal'
#match '/desktop_orbit/eventajaxload' => 'desktop_publications#delete_journal' #match '/desktop_orbit/eventajaxload' => 'desktop_publications#delete_journal'