Timeline commit
This commit is contained in:
Harry Bomrah committed
1 parent
7f0267aedd
commit
555ec86403
14 files changed
+306
-57
No files matched your search
@@ -11,4 +11,5 @@
|
||||
//= require jquery.miniColors.min
|
||||
//= require bootstrap
|
||||
//= require orbitdesktopAPI
|
||||
//= require orbitTimeline
|
||||
//= require orbitdesktop
|
||||
@@ -0,0 +1,71 @@
|
||||
//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");})
|
||||
}
|
||||
}
|
||||
@@ -24,7 +24,7 @@ var orbitDesktop = function(dom){
|
||||
this.transitionTime = 500;
|
||||
this.currenthtml = "desktop.html";
|
||||
this.currentface = "home";
|
||||
this.desktopData = {"home":"","settings":"","work":"","favorite":"","apps_manager":"","sections":"","journal_p":"","appstore":""};
|
||||
this.desktopData = {"home":"","settings":"","work":"","favorite":"","apps_manager":"","sections":"","journal_p":"","appstore":"","orbit":""};
|
||||
this.tp = "";
|
||||
this.sectionList;
|
||||
this.initialize = function(){
|
||||
@@ -112,6 +112,9 @@ var orbitDesktop = function(dom){
|
||||
});
|
||||
$("a#d_appstore").click(function(){
|
||||
var target = $(this).attr("href");
|
||||
console.log(o.currenthtml);
|
||||
console.log(target);
|
||||
console.log(o.currentface);
|
||||
if(o.currenthtml!=target){
|
||||
o.desktopData[o.currentface] = $(o.contentHolder).html();
|
||||
$("#content").hide("drop",o.transitionTime,function(){
|
||||
@@ -119,6 +122,15 @@ var orbitDesktop = function(dom){
|
||||
});
|
||||
}
|
||||
});
|
||||
$("a#d_orbit").click(function(){
|
||||
var target = $(this).attr("href");
|
||||
if(o.currenthtml!=target){
|
||||
o.desktopData[o.currentface] = $(o.contentHolder).html();
|
||||
$("#content").hide("drop",o.transitionTime,function(){
|
||||
o.initializeOrbitTimeline(target);
|
||||
});
|
||||
}
|
||||
});
|
||||
$(window).resize(function(){
|
||||
var ww = $(window).width();
|
||||
$("img#thmbackground").attr({"width":ww});
|
||||
@@ -892,7 +904,24 @@ var orbitDesktop = function(dom){
|
||||
themes();
|
||||
});
|
||||
};
|
||||
|
||||
this.initializeOrbitTimeline = function(target){
|
||||
o.currenthtml = target;
|
||||
o.currentface = "orbit";
|
||||
console.log(o.currentface);
|
||||
var bindHandlers = function(){
|
||||
var timeline = new orbitTimeline("timeline");
|
||||
timeline.initialize();
|
||||
$('.tinycanvas').tinyscrollbar({ axis: 'x'});
|
||||
}
|
||||
if(!o.desktopData[o.currentface]){
|
||||
$(o.contentHolder).empty().load("/desktop_orbit/"+target,function(){
|
||||
bindHandlers();
|
||||
});
|
||||
}else{
|
||||
$(o.contentHolder).html(o.desktopData[o.currentface]);
|
||||
bindHandlers();
|
||||
}
|
||||
};
|
||||
this.initializeJournalPapers = function(target){ // this init journal papers
|
||||
o.currenthtml = target;
|
||||
o.currentface = "journal_p";
|
||||
|
||||
@@ -158,6 +158,40 @@ var orbitDesktopAPI = function(){
|
||||
callbackfn.call(this);
|
||||
}
|
||||
};
|
||||
this.toolPopup = function(settings){
|
||||
if(settings == "destroy"){
|
||||
$(".desktop_toolpopup").hide("fold",function(){
|
||||
$(this).remove();
|
||||
$(this).parent().css("position","");
|
||||
|
||||
})
|
||||
return;
|
||||
}
|
||||
if(settings.parent){
|
||||
if(settings.parent.find("div.desktop_toolpopup").length == 0){
|
||||
settings.height = (!settings.height ? "50px" : settings.height);
|
||||
settings.width = (!settings.width ? "150px" : settings.width);
|
||||
settings.html = (!settings.html ? "" : settings.html);
|
||||
var leftpos = settings.parent.width();
|
||||
var toolpopup = $("<div class='desktop_toolpopup thmc1' style='height:"+settings.height+";width:"+settings.width+"; left:"+leftpos+"px;'><span>"+settings.html+"</span></div>");
|
||||
settings.parent.css("position","relative");
|
||||
settings.parent.prepend(toolpopup);
|
||||
toolpopup.click(function(event){
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
toolpopup.show("fold",function(){
|
||||
$(document).unbind("click");
|
||||
$(document).one("click",function(e){
|
||||
toolpopup.hide("fold",function(){
|
||||
toolpopup.remove();
|
||||
settings.parent.css("position","");
|
||||
});
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
orbitDesktopAPI.prototype.notifyImgPath = "temp";
|
||||
orbitDesktopAPI.prototype.wallpaperPath = "temp";
|
||||
@@ -9,4 +9,5 @@
|
||||
*= require font-awesome
|
||||
*= require desktopmain
|
||||
*= require desktopmedia
|
||||
*= require orbitTimeline
|
||||
*/
|
||||
@@ -715,3 +715,15 @@ a:focus { outline: none; }
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
/*Tooltip popup */
|
||||
.desktop_toolpopup{
|
||||
position: absolute;
|
||||
z-index:10px;
|
||||
display: none;
|
||||
border-width:3px;
|
||||
border-radius:5px;
|
||||
border-color:black;
|
||||
font-size:15px;
|
||||
padding: 5px 0px 10px 0px;
|
||||
cursor: default;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
.t_scale{
|
||||
width:2000px;
|
||||
height:516px;
|
||||
bottom:0;
|
||||
}
|
||||
#timline_marker{
|
||||
width:100px;
|
||||
height:140px;
|
||||
opacity:0.4;
|
||||
cursor: move;
|
||||
border-style:solid;
|
||||
border-width:5px;
|
||||
border-radius:5px;
|
||||
}
|
||||
.t_scale{
|
||||
border-style:solid;
|
||||
border-width:2px;
|
||||
border-radius:5px;
|
||||
}
|
||||
#t_container{
|
||||
height:366px;
|
||||
}
|
||||
.scale_region{
|
||||
height:516px;
|
||||
border-style:solid;
|
||||
border-width:0 2px 0 2px;
|
||||
float: left;
|
||||
margin-right:1px;
|
||||
font-size:20px;
|
||||
padding:5px;
|
||||
}
|
||||
.scale_region span{
|
||||
display: block;
|
||||
}
|
||||
.month{
|
||||
|
||||
}
|
||||
.year{
|
||||
background-color: #c0bebe;
|
||||
width:30px;
|
||||
}
|
||||
.bubble{
|
||||
cursor: pointer;
|
||||
width:300px;
|
||||
height:30px;
|
||||
background:lightblue;
|
||||
border-style:solid;
|
||||
border-width:5px;
|
||||
float: left;
|
||||
border-radius:5px;
|
||||
margin-top: 10px;
|
||||
margin-bottom:10px;
|
||||
font-size:20px;
|
||||
padding:5px;
|
||||
text-align:center;
|
||||
display: none;
|
||||
}
|
||||
.month_heading{
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.bubble_list ul{
|
||||
width:350px;
|
||||
float:left;
|
||||
}
|
||||
Reference in new issue
Block a user