71 lines
2.8 KiB
JavaScript
71 lines
2.8 KiB
JavaScript
|
//for timeline parent library, will be accessable by main library and API library for other people to use.. default inherits orbitDesktopAPI
|
||
|
|
// Harry Bomrah
|
||
|
|
|
||
|
|
var orbitTimeline = function(dom){
|
||
|
|
t = this;
|
||
|
|
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.container = t.timelineHtml.find("#t_container");
|
||
|
|
this.initialize = function(){
|
||
|
|
t.dom.html(t.timelineHtml);
|
||
|
|
$("div.scrollbar").hide();
|
||
|
|
//var cursor = t.marker.draggable({containment:"parent","option":"cursorAt"});
|
||
|
|
var timelineScale = t.constructTimeScale();
|
||
|
|
$("#timeline_scale").html(timelineScale);
|
||
|
|
t.makeBubble("012012");
|
||
|
|
t.makeBubble("012012");
|
||
|
|
$("#test_bubble").click(function(){
|
||
|
|
t.makeBubble("062012");
|
||
|
|
})
|
||
|
|
|
||
|
|
}
|
||
|
|
this.constructTimeScale = function(){
|
||
|
|
//$.getJSON("test.json",function(){
|
||
|
|
var scale = $("<div id='scale_wrapper'></div>");
|
||
|
|
scale.append($("<div class='scale_region year'>2013</div><div class='scale_region month' data-content='012012'><div class='month_heading'>January</div><div class='bubble_list'></div></div><div class='scale_region month' data-content='062012'><div class='month_heading'>June</div><div class='bubble_list'></div></div><div class='scale_region year'>2012</div>"));
|
||
|
|
scale.find(".scale_region").each(function(){
|
||
|
|
var verticalchars = "";
|
||
|
|
var txt = $(this).text();
|
||
|
|
var margin = ($(this).width()-20)/2;
|
||
|
|
// for(c in txt){
|
||
|
|
// if($(this).hasClass('month')){
|
||
|
|
// verticalchars+="<span style='padding-left:"+margin+"px'>"+txt.charAt(c)+"</span>";
|
||
|
|
// }else
|
||
|
|
// verticalchars+="<span style='padding-left:5px'>"+txt.charAt(c)+"</span>";
|
||
|
|
// }
|
||
|
|
//$(this).html(verticalchars);
|
||
|
|
})
|
||
|
|
return scale;
|
||
|
|
//})
|
||
|
|
}
|
||
|
|
this.makeBubble = function(timestamp){
|
||
|
|
var totalul = $("#scale_wrapper").find("div[data-content="+timestamp+"] ul").length;
|
||
|
|
var targetul = $("#scale_wrapper div[data-content="+timestamp+"] div.bubble_list ul").eq(totalul-1);
|
||
|
|
if(totalul == 0){
|
||
|
|
var ul = $("<ul></ul>");
|
||
|
|
$("#scale_wrapper").find("div[data-content="+timestamp+"] div.bubble_list").append(ul);
|
||
|
|
targetul = ul;
|
||
|
|
}else{
|
||
|
|
var totalli = targetul.find("li").length;
|
||
|
|
if(totalli >= 5){
|
||
|
|
var ul = $("<ul></ul>");
|
||
|
|
$("#scale_wrapper").find("div[data-content="+timestamp+"] div.bubble_list").append(ul);
|
||
|
|
targetul = ul;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
var bubble = $("<li class='bubble'>This is test bubble.</li>");
|
||
|
|
bubble.css("margin-left","25px");
|
||
|
|
targetul.prepend(bubble);
|
||
|
|
bubble.show("bounce",{},500);
|
||
|
|
bubble.click(function(){
|
||
|
|
o.toolPopup({
|
||
|
|
parent: $(this),
|
||
|
|
html : "<div><b><u>"+timestamp+"</u></b></div>",
|
||
|
|
height: "auto",
|
||
|
|
width:"300px"
|
||
|
|
});
|
||
|
|
})//.mouseout(function(){t.oapi.toolPopup("destroy");})
|
||
|
|
}
|
||
|
|
}
|