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

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

@ -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)
scale.append($("<div class='group year w1 h1 hp vp thmtxt thmc1'>"+year+"</div><div class='region_year group' data-content='"+(year-1)+"'></div>"));
// 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];
}
@ -152,29 +180,16 @@ var orbitTimeline = function(dom){
}
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();
},
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"/>');
}
});
mouseover: function(){
$(this)
.addClass('hover')
.append('<span class="icon-chevron-right" />');
},
mouseout: function(){
$(this)
.removeClass('hover')
.find('.icon-chevron-right').remove();
},
});
}
}

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

@ -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]){

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

@ -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);
});
})
});

17
app/controllers/desktop_orbit_controller.rb
View File

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

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

@ -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>

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/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'