Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added support for URLs #12

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Added support for URLs #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
381fe30
Added Support for clicking on a knot to go to a specific page
KatiePF Oct 30, 2017
310e057
Added support for modals on click of knots issue #5
KatiePF Oct 31, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 36 additions & 14 deletions example/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,17 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="../src/d3.v2.min.js" type="application/javascript"></script>
<script src="../src/timeknots.js" type="application/javascript"></script>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

<script src="../src/d3.v2.min.js" type="application/javascript"></script>
<script src="../src/timeknots.js" type="application/javascript"></script>
<style>
body {
font: 18px "Helvetica Neue";
Expand All @@ -24,7 +31,7 @@ <h5><a href='https://github.com/alangrafu/timeknots'>https://github.com/alangraf
<div class="fluid-row">
<div class="span3">
<h2>Stanley Kubrick's movies</h2>
<h5>Part of Kubrick's Filmography form Wikipedia</h5>
<h5>Part of Kubrick's Filmography form Wikipedia with links to each page</h5>
<div id="timeline1" style="width:500px;"></div>
<h2>Numeric, non date data</h2>
<div id="timelineNonDate" style="width:200px;"></div>
Expand All @@ -50,13 +57,13 @@ <h5>Shows random meetings/free days</h5>
];
TimeKnots.draw("#timelineNonDate", nonDatedata, {dateDimension:false, color: "teal", width:500, showLabels: true, labelFormat: "%Y"});

var kurbickFilms = [{name:"Day of the Fight", date: "1951-04-26", img: "http://upload.wikimedia.org/wikipedia/en/thumb/c/c4/Day_of_the_Fight_title.jpg/215px-Day_of_the_Fight_title.jpg"},
{name:"The Seafarers", date:"1953-10-15", img: "http://upload.wikimedia.org/wikipedia/en/thumb/6/6c/Seafarers_title.jpg/225px-Seafarers_title.jpg"},
{name:"Lolita (1962 film)", date:"1962-06-13", img: "http://upload.wikimedia.org/wikipedia/en/thumb/7/72/LolitaPoster.jpg/215px-LolitaPoster.jpg"},
{name:"Fear and Desire", date: "1953-03-31", img: "http://upload.wikimedia.org/wikipedia/en/f/f7/Fear_and_Desire_Poster.jpg"},
{name:"Paths of Glory", date: "1957-12-25", img: "http://upload.wikimedia.org/wikipedia/en/thumb/b/bc/PathsOfGloryPoster.jpg/220px-PathsOfGloryPoster.jpg"},
{name:"A Clockwork Orange (film)", date: "1971-12-19", img: "http://upload.wikimedia.org/wikipedia/en/thumb/4/48/Clockwork_orangeA.jpg/220px-Clockwork_orangeA.jpg"},
{name:"Killer's Kiss", date: "1955-09-28", img: "http://upload.wikimedia.org/wikipedia/en/thumb/a/a6/KillersKissPoster.jpg/220px-KillersKissPoster.jpg"}
var kurbickFilms = [{name:"Day of the Fight", date: "1951-04-26",modal:"myModal", img: "http://upload.wikimedia.org/wikipedia/en/thumb/c/c4/Day_of_the_Fight_title.jpg/215px-Day_of_the_Fight_title.jpg"},
{name:"The Seafarers", date:"1953-10-15", url:"https://en.wikipedia.org/wiki/The_Seafarers", img: "http://upload.wikimedia.org/wikipedia/en/thumb/6/6c/Seafarers_title.jpg/225px-Seafarers_title.jpg"},
{name:"Lolita (1962 film)", date:"1962-06-13", url:"https://en.wikipedia.org/wiki/Lolita_(1962_film)", img: "http://upload.wikimedia.org/wikipedia/en/thumb/7/72/LolitaPoster.jpg/215px-LolitaPoster.jpg"},
{name:"Fear and Desire", date: "1953-03-31", url:"https://en.wikipedia.org/wiki/Fear_and_Desire", img: "http://upload.wikimedia.org/wikipedia/en/f/f7/Fear_and_Desire_Poster.jpg"},
{name:"Paths of Glory", date: "1957-12-25", url:"https://en.wikipedia.org/wiki/Paths_of_Glory", img: "http://upload.wikimedia.org/wikipedia/en/thumb/b/bc/PathsOfGloryPoster.jpg/220px-PathsOfGloryPoster.jpg"},
{name:"A Clockwork Orange (film)", date: "1971-12-19", url:"https://en.wikipedia.org/wiki/A_Clockwork_Orange_(film)", img: "http://upload.wikimedia.org/wikipedia/en/thumb/4/48/Clockwork_orangeA.jpg/220px-Clockwork_orangeA.jpg"},
{name:"Killer's Kiss", date: "1955-09-28", url: "https://en.wikipedia.org/wiki/Killer%27s_Kiss", img: "http://upload.wikimedia.org/wikipedia/en/thumb/a/a6/KillersKissPoster.jpg/220px-KillersKissPoster.jpg"}
];

TimeKnots.draw("#timeline1", kurbickFilms, {dateFormat: "%B %Y", color: "#696", width:500, showLabels: true, labelFormat: "%Y"});
Expand All @@ -75,7 +82,6 @@ <h5>Shows random meetings/free days</h5>
TimeKnots.draw("#timeline2", mySchedule, {horizontalLayout: false, color: "#669", height: 450, width:200, showLabels: true, labelFormat:"%H:%M"});



var agenda = new Array();
var day = 86400000;
var today = new Date();
Expand All @@ -98,6 +104,22 @@ <h5>Shows random meetings/free days</h5>

</script>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body&hellip;</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

</body>
</html>

2 changes: 1 addition & 1 deletion src/timeknots-min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 11 additions & 0 deletions src/timeknots.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,17 @@ var TimeKnots = {
.style("opacity", .9);

})
.on("click", function(d){
d3.select(this);
if(d.url != undefined) {
window.location.href = d.url;
}
if(d.modal != undefined)
{
console.log("#"+d.modal);
$("#"+d.modal).modal();
}
})
.on("mouseout", function(){
d3.select(this)
.style("fill", function(d){if(d.background != undefined){return d.background} return cfg.background}).transition()
Expand Down