From f6e8bb1c6040c1b7751a58609b5458eea1d95a3e Mon Sep 17 00:00:00 2001
From: srosse <none@none>
Date: Fri, 8 Jul 2016 12:17:09 +0200
Subject: [PATCH] OO-2057: the dots follow the curve during transition
---
.../js/jquery/openolat/jquery.timeline.js | 55 ++++++-------------
1 file changed, 18 insertions(+), 37 deletions(-)
diff --git a/src/main/webapp/static/js/jquery/openolat/jquery.timeline.js b/src/main/webapp/static/js/jquery/openolat/jquery.timeline.js
index c7a40251221..414870fcad5 100644
--- a/src/main/webapp/static/js/jquery/openolat/jquery.timeline.js
+++ b/src/main/webapp/static/js/jquery/openolat/jquery.timeline.js
@@ -109,65 +109,45 @@
slideUp = function() {
endTime = endTime + (365 * 24 * 60 * 60 * 1000);
startTime = startTime + (365 * 24 * 60 * 60 * 1000);
- updateTimeline();
+ updateTimeline(true);
}
slideDown = function() {
endTime = endTime - (365 * 24 * 60 * 60 * 1000);
startTime = startTime - (365 * 24 * 60 * 60 * 1000);
- updateTimeline();
+ updateTimeline(false);
}
- updateTimeline = function() {
+ updateTimeline = function(up) {
curveY.domain([startTime, endTime]);
y.domain([startTime, endTime]);
drawAxis();
- //drawCurve();
- drawDots();
+ drawDots(up);
}
drawAxis = function() {
svg.select('.y').call(yAxis);
}
- drawDots = function() {
+ drawDots = function(up) {
var dots = svg.selectAll('.dot')
.data(data, idKey);
dots
.transition()
- .attr("cx", function(d) { return lineX(curvedX(curveY(d.time))); })
+ .duration(1000)
+ .ease("linear")
+ .attrTween("cx", function(d) {
+ return function(t) {
+ var delta = (1.0 - t) * (365 * 24 * 60 * 60 * 1000);
+ var time = up ? (d.time + delta) : (d.time - delta);
+ return lineX(curvedX(curveY(time)));
+ };
+ })
+ //.attr("cx", function(d) { return lineX(curvedX(curveY(d.time))); })
.attr("cy", function(d) { return y(d.time); });
}
-
- translateAlong = function translateAlong(path) {
- var l = path.getTotalLength();
- return function(i) {
- return function(t) {
- var p = path.getPointAtLength(t * l);
- return "translate(" + p.x + "," + p.y + ")";//Move marker
- }
- }
- }
-
- var lineData = [];
- var linePath;
-
- drawCurve = function() {
-
- var numOfData = lineData.length;
- for(var i=numOfData; i<numOfData + (maxCurveY*20); i++) {
- lineData.push({y: (i == 0 ? 0 : i / 20.0)});
- }
-
- var linePath = svg.append("path")
- .data([lineData])
- .attr("d", lineGenerator)
- .attr("class", "o_timeline_curve");
-
-
- }
timelineItems = function($obj, settings) {
// x-axis
@@ -188,12 +168,13 @@
.attr("dx", "-.71em")
.style("text-anchor", "end")
.text("Date");
-
+
+ var lineData = [];
for(var i=0; i<(maxCurveY*20); i++) {
lineData.push({y: (i == 0 ? 0 : i / 20.0)});
}
- linePath = svg.append("path")
+ var linePath = svg.append("path")
.data([lineData])
.attr("d", lineGenerator)
.attr("class", "o_timeline_curve");
--
GitLab