Commit a0ea24b7 authored by gijs's avatar gijs

Improved scrolling with event / loop / day highlighting

parent 60cc321d
......@@ -10,6 +10,16 @@
<object id="timeline" data="timeline.svg" type="image/svg+xml" style="max-height:90vh"></object>
<script src="raphael.min.js"></script>
<script>
// lastDirection = 1;
var loopSwitch = true,
daySwitch = true,
event = 0,
day = 0,
loop = 0,
timelineSVG,
highlightpath,
timelineSegments;
const timeline = [
[
[0],
......@@ -30,17 +40,13 @@
];
function timelineSubset(loop, day, event) {
var buff = timeline[loop];
if (typeof(day) !== "undefined") {
buff = buff[day];
if(typeof(event) !== "undefined") {
buff = buff[event];
}
return timeline[loop][day][event];
}
return timeline[loop][day];
}
return buff
return timeline[loop];
}
function getLength(input) {
......@@ -64,7 +70,7 @@
// is located over the half of the path we have to insert and extra
// point (top of the loop)
function middlepointCompensation (parent, key) {
if (key > 0 && key * 2 > parent.length && parent.length % 2 == 0) {
if (key > 0 && (key + 1) * 2 > parent.length && parent.length % 2 == 0) {
return 1;
} else {
return 0;
......@@ -154,105 +160,102 @@
return pathstring
}
function highlight(start, end) {
highlightpath.setAttribute('d', makePathString(getSubpathFromSegments(timelineSegments, start, end)));
window.addEventListener('load', function () {
const timelineEl = document.querySelector('#timeline').contentDocument.rootElement,
paths = timelineEl.querySelectorAll('path'),
path = paths[5]; //document.querySelector('#timeline').contentDocument.createElement('path');
var segments = Raphael.parsePathString(paths[4].getAttribute('d'));
console.log(segments)
path.setAttribute("style", "stroke:rgb(100%,0%,0%); stroke-width:5.0;fill:none;");
var l = 1;
var d = 1;
var e = 1;
function drawActive(start, end) {
var subset = getSubpathFromSegments(segments, start+1, end-1),
pathstring = makePathString(subset);
path.setAttribute('d', pathstring);
}
function drawActiveEvent() {
drawActive(getStart(l, d, e), getEnd(l, d, e),)
}
function drawActiveDay() {
drawActive(getStart(l, d), getEnd(l, d),)
}
function drawActiveLoop() {
drawActive(getStart(l), getEnd(l))
}
function nextLoop () {
if (++l > timeline.length) {
l = 1;
}
d = 0;
e = 0;
drawActiveLoop();
}
function previousLoop() {
if (--l == 0) {
l = timeline.length;
}
d = timeline[l-1].length + 1;
e = timeline[l-1][timeline[l-1].length-1].length + 1;
drawActiveLoop();
}
}
function nextDay () {
if (++d > timeline[l-1].length) {
nextLoop();
} else {
e = 0;
drawActiveDay();
}
}
function highlightSection(loop, day, event) {
highlight(getStart(loop, day, event)+1, getEnd(loop, day, event)-1);
}
function previousDay() {
if (--d == 0) {
previousLoop();
function next () {
// highlight next event
// on loop switch higlight whole loop
// on day switch highlight whole day
// highlight previous event
if (loopSwitch) {
loopSwitch = false;
// highlight loop
highlightSection(loop, day)
} else if (daySwitch) {
daySwitch = false;
highlightSection(loop, day, event);
} else {
event++;
if (event >= timeline[loop][day].length) {
// switch day, highlight day
daySwitch = true;
day++;
if (day >= timeline[loop].length) {
// switch loop highlight whole loop
loopSwitch = true
loop++;
if (loop >= timeline.length) {
loop = 0;
}
day = 0;
highlightSection(loop);
} else {
highlightSection(loop, day);
}
event = 0;
} else {
e = timeline[Math.min(l-1, 0)][Math.min(d-1, 0)].length + 1;
drawActiveDay();
highlightSection(loop, day, event);
}
}
}
function nextEvent() {
if (++e > timeline[l-1][d-1].length) {
nextDay();
function previous () {
// highlight previous event
if (loopSwitch) {
loopSwitch = false;
// highlight loop
highlightSection(loop, day)
} else if (daySwitch) {
daySwitch = false;
// on day switch higlight whole day
// switch day, highlight day
highlightSection(loop, day, event);
} else {
event--;
if (event < 0) {
daySwitch = true;
day--;
if (day < 0) {
// switch loop highlight whole loop
loopSwitch = true
loop--;
if (loop < 0) {
loop = timeline.length-1;
}
highlightSection(loop);
day = timeline[loop].length - 1;
} else {
highlightSection(loop, day);
}
event = timeline[loop][day].length - 1;
} else {
drawActiveEvent();
highlightSection(loop, day, event);
}
}
}
function previousEvent() {
if (--e == 0) {
previousDay();
} else {
drawActiveEvent();
}
}
window.addEventListener('load', function () {
timelineSVG = document.querySelector('#timeline').contentDocument.rootElement;
const paths = timelineSVG.querySelectorAll('path');
highlightpath = paths[5]; //document.querySelector('#timeline').contentDocument.createElement('path');
timelineSegments = Raphael.parsePathString(paths[4].getAttribute('d'));
highlightpath.setAttribute("style", "stroke:rgb(100%,0%,0%); stroke-width:5.0;fill:none;");
window.addEventListener('wheel', function (e) {
(e.deltaY > 0) ? nextEvent() : previousEvent();
// drawActiveEvent();
// (e.deltaY > 0) ? nextDay() : previousDay();
// drawActiveDay();
// (e.deltaY > 0) ? nextLoop() : previousLoop();
// drawActiveLoop();
(e.deltaY > 0) ? next() : previous();
});
drawActiveEvent();
// drawActiveDay();
// drawActiveLoop();
highlightSection(loop);
});
</script>
......
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