Commit 84ece21d authored by gijs's avatar gijs

Started timeline implementation

parent 4ad6e165
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Timeline</title>
</head>
<body>
<object id="timeline" data="timeline.svg" type="image/svg+xml" style="max-height:90vh"></object>
<script src="raphael.min.js"></script>
<script>
function getTarget(segment) {
if (segment[0] == 'C') {
return [segment[5], segment[6]];
} else {
return [segment[1], segment[2]];
}
}
window.addEventListener('load', function () {
const timeline = document.querySelector('#timeline').contentDocument.rootElement,
paths = timeline.querySelectorAll('path'),
path = paths[5]; //document.querySelector('#timeline').contentDocument.createElement('path');
var segments = Raphael.parsePathString(paths[4].getAttribute('d'));
path.setAttribute("style", "stroke:rgb(100%,0%,0%); stroke-width:5.0;fill:none;");
s = 0;
loop = function () {
if (segments.length > 0) {
if (s > 0 && s == segments.length) {
s = 0;
loop();
} else if (segments[s][0] !== 'C') {
s++;
loop();
} else {
getTarget(segments[s])
path.setAttribute('d', 'M' + (getTarget(segments[s-1])).join(' ') + segments[s].join(' ') + segments[s+1].join(' '))
}
} else {
console.warn('Segments empty');
}
}
timeline.appendChild(path);
loop();
window.addEventListener('wheel', function (e) {
s += (e.deltaY > 0) ? 1 : -1;
loop();
})
});
</script>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment