saurabh
/
orbit-basic
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

timeline change

This commit is contained in:
devin 2012-07-05 16:23:13 +08:00
parent 312e63f242
commit bfaed4deb4
6 changed files with 158 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/timeline/pp.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

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

@ -26,7 +26,7 @@ var orbitTimeline = function(dom){
totalul = $("#scale_wrapper ul").length totalul = $("#scale_wrapper ul").length
$(".t_scale").width((totalul*350) + totalyearwidth); $(".t_scale").width((totalul*350) + totalyearwidth);
} }
t.bubble_fx();
$('.tinycanvas').tinyscrollbar({ $('.tinycanvas').tinyscrollbar({
axis: 'x', axis: 'x',
onMove: function(x){ onMove: function(x){
@ -38,9 +38,10 @@ var orbitTimeline = function(dom){
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
$(".t_scale").width((totalul*350) + totalyearwidth); $(".t_scale").width((totalul*360) + totalyearwidth + 314);
} }
$('.tinycanvas').tinyscrollbar_update(x); $('.tinycanvas').tinyscrollbar_update(x);
t.bubble_fx();
}); });
} }
} }
@ -63,16 +64,16 @@ 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 data-content='"+year+"'></div>")); scale.append($("<div class='group year w1 h1 hp vp thmtxt thmc1'>"+(year+1)+"</div><div class='region_year group' data-content='"+year+"'></div>"));
} }
if(cur_mon != mon){ if(cur_mon != mon){
mon = cur_mon; mon = cur_mon;
var yr = scale.find("div[data-content="+year+"]"); var yr = scale.find("div[data-content="+year+"]");
yr.append($("<div class='group month' data-content='"+cdt+"'><div class='month_heading'>"+t.monthList[parseInt(formname)]+"</div><div class='bubble_list'></div></div>")) 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 thmtxt thmc1'>"+year+"</div><div 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,10 +102,10 @@ var orbitTimeline = function(dom){
bubble.show(); bubble.show();
bubble.click(function(){ bubble.click(function(){
o.toolPopup({ o.toolPopup({
parent: $(this), parent: $(this).parent(),
html : "<div><h3>"+bubbleData.jtitle+"</h3><span><h2>Co-Authors: </h2>"+bubbleData.coauthors+"</span><span><h2>Abstract: </h2>"+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: "auto", height: "392px",
width:"300px" width:"310px"
}); });
})//.mouseout(function(){t.oapi.toolPopup("destroy");}) })//.mouseout(function(){t.oapi.toolPopup("destroy");})
} }
@ -127,19 +128,19 @@ 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='scale_region year'>"+(year+1)+"</div><div data-content='"+year+"'></div>")); scale.append($("<div class='group year w1 h1 hp vp thmtxt thmc1'>"+(year+1)+"</div><div class='region_year group' data-content='"+year+"'></div>"));
} }
} }
if(cur_mon != mon){ if(cur_mon != mon){
mon = cur_mon; mon = cur_mon;
var yr = scale.find("div[data-content="+year+"]"); 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>")) 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(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='scale_region year'>"+year+"</div><div 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];
} }
@ -149,4 +150,31 @@ 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"/>');
}
});
}
} }

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

@ -172,8 +172,8 @@ 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);
var leftpos = settings.parent.width(); var leftpos = settings.parent.outerWidth();
var toolpopup = $("<div class='desktop_toolpopup' style='height:"+settings.height+";width:"+settings.width+"; left:"+leftpos+"px;'><span>"+settings.html+"</span></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");
settings.parent.prepend(toolpopup); settings.parent.prepend(toolpopup);
toolpopup.click(function(event){ toolpopup.click(function(event){

7
app/assets/stylesheets/desktopmain.css
View File

@ -69,9 +69,10 @@ a:focus { outline: none; }
min-width: 800px; min-width: 800px;
} }
#side { #side {
width: 156px; width: 60px;
height: 516px; height: 516px;
position: absolute; position: absolute;
margin-right: 96px;
top: 120px; top: 120px;
left: 0; left: 0;
z-index: 10; z-index: 10;
@ -737,9 +738,9 @@ a:focus { outline: none; }
position: absolute; position: absolute;
z-index: 10px; z-index: 10px;
display: none; display: none;
padding: 10px; padding: 12px;
cursor: default; cursor: default;
background-color: #ccc; background-color: #fff;
} }
.desktop_toolpopup span { .desktop_toolpopup span {
margin: 3px 0 3px 0; margin: 3px 0 3px 0;

104
app/assets/stylesheets/orbitTimeline.css.erb
View File

@ -1,11 +1,43 @@
#orbit .viewport {
background: -1px 4px url(<%= asset_path "timeline/ruler.png" %>) repeat-x;
}
.time_nav a, .time_nav_c a {
display: block;
}
.time_nav {
position: absolute;
left: -60px;
top: 0;
}
.time_nav a {
line-height: 60px;
text-align: center;
font-size: 18px;
}
.time_nav .active {
background-color: #333;
color: #fff;
}
.time_nav_c {
position: absolute;
left: -60px;
bottom: 0;
background-color: #efefef;
}
.time_nav_c a {
width: 30px;
height: 36px;
float: left;
line-height: 36px;
text-align: center;
}
.t_scale { .t_scale {
height: 516px; height: 516px;
background: 0 0 url(<%= asset_path "timeline/ruler.png" %>) repeat-x;
} }
#scale_wrapper { #scale_wrapper {
overflow: hidden; overflow: hidden;
padding: 36px 0 0 12px; padding: 24px 0 0 12px;
background: 0 60px url(<%= asset_path "timeline/date_connector.png" %>) repeat-x; background: 0 48px url(<%= asset_path "timeline/date_connector.png" %>) repeat-x;
} }
#timline_marker { #timline_marker {
width:100px; width:100px;
@ -24,18 +56,26 @@
.group { .group {
margin-right: 48px; margin-right: 48px;
} }
.month {} .month {
}
.year { .year {
font-size: 30px; font-size: 30px;
margin-right: 24px; margin-right: 24px;
border-right: solid 12px #efefef; border-right: solid 12px #efefef;
border-left: solid 12px #efefef;
}
.region_year {
position: relative;
} }
.month_heading { .month_heading {
color: #333; color: #333;
font-family: 'Open sans', sans-serif; font-family: 'Open sans', sans-serif;
font-size: 21px; font-size: 21px;
background-color: #efefef;
display: inline-block; display: inline-block;
margin-top: -10px;
padding-top: 22px;
background: #efefef 9px 0 url(<%= asset_path "timeline/pp.png" %>) no-repeat;
} }
.bubble_list ul { .bubble_list ul {
@ -52,4 +92,58 @@
font-size: 12px; font-size: 12px;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
margin-bottom: 12px; margin-bottom: 12px;
position: relative;
}
.date {
display: block;
padding: 8px 0 0 0;
color: #999;
}
.bubble_arrow {
width: 0;
height: 0;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-right: 14px solid #fff;
position: absolute;
right: -1px;
top: 50%;
margin-top: -14px;
z-index: 99;
}
.bubble .icon-chevron-right {
position: absolute;
top: 0;
right: 0;
width: 15px;
height: 74px;
line-height: 74px;
font-size: 15px;
}
.desktop_toolpopup {
z-index: 9;
border: solid 1px #ccc;
font-family: Arial, sans-serif;
color: #666;
font-size: 12px;
}
.desktop_toolpopup h2 {
font-size: 18px;
padding: 0 0 20px 0;
margin: 0 0 20px 0;
border-bottom: solid 1px #d7d7d7;
color: #333;
}
.desktop_toolpopup h3 {
font-size: 15px;
padding: 0 0 20px 0;
margin: 20px 0 0 0;
color: #333;
}
.desktop_toolpopup .bubble_content {
overflow: hidden;
height: 368px;
}
.desktop_toolpopup .context {
line-height: 1.5em;
} }

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

@ -27,13 +27,25 @@
</div> </div>
</div> </div>
<div id="holder"> <div id="holder">
<div class="time_nav">
<ul>
<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>
</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>
<div id="" class="ph admbg"> <div id="" class="ph admbg">
<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>
</div> </div>