Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: topdown
Fetching contributors…

Cannot retrieve contributors at this time

354 lines (231 sloc) 7.159 kb
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf-8" />
<title>Timeglider jQuery Plugin</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/aristo/jquery-ui-1.8.5.custom.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="js/timeglider/Timeglider.css" type="text/css" media="screen" title="no title" charset="utf-8">
<style type='text/css'>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#p1 {
margin:32px;
margin-bottom:0;
height:600px;
}
.methods h4 {
background-color:#F0F0F0;
color:#CC0000;
font-size:12px;
font-weight:normal;
margin-left:32px;
}
.methods ul {
list-style:none;
}
.methods ul li {
display:inline;
cursor:pointer;
font-size:12px;
margin-right:16px;
}
.test-view {
position:absolute;
top:100px;
left:100px;
width:400px;
height:200px;
border:8px solid black;
background-color:pink;
}
#map_modal_map2 {
border:4px solid black;
height:400px;
width:400px;
}
.timeglider-legend {
width:180px;
}
.scrubber {
height:32px;
margin:0px 32px;
background-color:black;
border:1px solid black;
margin-bottom:32px;
position:relative;
overflow:hidden;
}
.scrubber-handle {
height:32px;
width:150px;
background-color:green;
position:absolute;
top:0;
left:0;
}
/*
.timeglider-tick {
position:absolute;
height:900px;
font-size:11px;
background-image:url("img/dotted.png");
background-repeat:repeat;
border-top:none;
overflow:hidden;
z-index:0;
}
.timeglider-tick-label {
top:445px;
}
.tg-tick-sublabel-group {
top:455px;
}
*/
</style>
</head>
<body>
<div id='p1'></div>
<br><br><br>
<div id='p2'></div>
<div class='methods'>
<h4>goto date and zoom</h4>
<ul>
<li class='goto' date='2001-09-11 08:24:00' zoom='22'>Sept 11, 2001</li>
<li class='goto' date='today'>Today</li>
</ul>
<h4>navigation</h4>
<ul>
<li class='zoom' z='-1'>zoom in</li>
<li class='zoom' z='1'>zoom out</li>
<li class='pan-left'>pan to left</li>
<li class='pan-right'>pan to right</li>
<li id='refresh'>Refresh</li>
<li id='adjustNow'>adjustNow</li>
<li id='addEvent'>addEvent</li>
<li id='updateEvent'>updateEvent</li>
</ul>
<div class='scrolls'><a id='scrolldown'>down</a> <a id='scrollup'>up</a></div>
<h4>loading</h4>
<ul>
<li class='zoom' z='-1'><span id='loadData'>load:</span> <input size='50' type='text' id='loadDataSrc' value='json_tests/idaho.json'></li>
</ul>
</div>
</div>
<!-- 3rd party libs -->
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
<!--
<script src="js/timeglider-0.1.3.min.js" type="text/javascript"></script>
-->
<script src="js/underscore-min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/backbone-min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.tmpl.js" type="text/javascript" charset="utf-8"></script>
<script src="js/ba-debug.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/ba-tinyPubSub.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.mousewheel.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.ui.ipad.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.global.js" type="text/javascript" charset="utf-8"></script>
<script src="js/timeglider/TG_Date.js" type="text/javascript" charset="utf-8"></script>
<script src="js/timeglider/TG_Org.js" type="text/javascript" charset="utf-8"></script>
<script src="js/timeglider/TG_Timeline.js" type="text/javascript" charset="utf-8"></script>
<script src="js/timeglider/TG_TimelineView.js" type="text/javascript" charset="utf-8"></script>
<script src="js/timeglider/TG_Mediator.js" type="text/javascript" charset="utf-8"></script>
<script src="js/timeglider/timeglider.timeline.widget.js" type="text/javascript"></script>
<script type='text/javascript'>
var tg_actor = {};
$(function () {
var tg1 = $("#p1").timeline({
"min_zoom":2,
"max_zoom":60,
"show_centerline":true,
"icon_folder":"js/timeglider/icons/",
"data_source":"json_tests/js_history.json",
"show_footer":true,
"display_zoom_level":true,
"constrain_to_data":true,
"image_lane_height":60,
"loaded":function (args, data) { /* alert("loaded!"); */ }
// "tick_top":0
// "event_overflow":"scroll"
}).resizable({
stop:function(){
$(this).data("timeline").resize();
}
});
tg_actor = tg1.data("timeline");
$(".goto").click(function() {
var d = $(this).attr("date");
var z = $(this).attr("zoom");
tg_actor.goTo(d,z);
});
$(".zoom").click(function() {
var z = Number($(this).attr("z"));
tg_actor.zoom(z);
});
tg_actor.panButton($(".pan-left"), "left");
tg_actor.panButton($(".pan-right"), "right");
$("#loadData").click(function() {
var src = $("#loadDataSrc").val();
var cb_fn = function(args, timeline) {
// called after parsing data, after load
debug.log("args", args, "timeline", timeline[0].id);
};
var cb_args = {display:true};
tg_actor.loadTimeline(src, {fn:cb_fn, args:cb_args});
});
$("#refresh").click(function() {
//
var med = tg_actor.getMediator();
med.runTest();
});
$("#scrolldown").bind("click", function() {
$(".timeglider-timeline-event").animate({top:"+=100"})
})
$("#scrollup").bind("click", function() {
$(".timeglider-timeline-event").animate({top:"-=100"})
})
timeglider.eventActions = {
nagavigateTo:function(obj) {
// event object must have a "navigateTo"
// element with zoom, then ISO date delimited
// with a pipe |
// one can use
var nav = obj.navigateTo;
tg_actor.goTo(nav.focus_date,nav.zoom_level);
setTimeout(function () {
$el = $(".timeglider-timeline-event#" + obj.id);
$el.find(".timeglider-event-spanner").css({"border":"1px solid green"}); //
}, 50);
}
}
$("#adjustNow").click(function() {
tg_actor.adjustNowEvents();
});
$("#addEvent").click(function() {
var rando = Math.floor((Math.random()*1000)+1);
var impo = Math.floor((Math.random()*50)+20);
var obj = {
id:"new_" + rando,
title:"New Added Event",
startdate:"today",
importance:impo,
icon:"shapes/star_red.png",
timelines:["js_history"]
}
tg_actor.addEvent(obj);
});
$("#updateEvent").click(function() {
// specific id from specific timeline
var id="deathofflash";
var updatedEventModel = {
id:id,
"title": "Flash dies slow cancer death"
}
tg_actor.updateEvent(updatedEventModel);
});
}); // end document-ready
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.