From 09faba2f733e65d45f660e5f2b40cc1d60e3d92a Mon Sep 17 00:00:00 2001
From: Christopher Pietsch <cpietsch@gmail.com>
Date: Thu, 23 Apr 2020 15:53:08 +0200
Subject: [PATCH]  hide timeline even elements if its cramped

---
 js/timeline.js | 307 ++++++++++++++++++++++++-------------------------
 1 file changed, 153 insertions(+), 154 deletions(-)

diff --git a/js/timeline.js b/js/timeline.js
index 194e9ad..1e14d49 100644
--- a/js/timeline.js
+++ b/js/timeline.js
@@ -1,155 +1,154 @@
 function Timeline() {
-
-    var fontScaleYear = d3.scale.linear()
-        .domain([1, 9])
-        .range([9, 20])
-        .clamp(true)
-
-    var timelineFontScale = d3.scale.linear()
-        .domain([40, 8])
-        .range([2, 10])
-        .clamp(true)
-
-    var timelineScale = d3.scale.threshold()
-        .domain([3, 10, 20])
-        .range(["none", "small", "middle", "large"])
-
-    var timelineHover = false;
-    var container
-    var timeDomain
-    var fontSize = 1
-    var disabled = false
-
-    function timeline() {}
-
-    timeline.init = function (_timeDomain) {
-        timeDomain = _timeDomain
-        container = d3.select(".viz").append("div").classed("timeline", true)
-        container.style("transform", "translate(" + 0 + "px," + (canvas.height() - 30) + "px)");
-    }
-
-    timeline.rescale = function (scale) {
-        timeDomain.forEach(function (d) {
-            d.x = canvas.x(d.key);
-        });
-        fontSize = timelineFontScale(scale)
-    }
-
-    timeline.setDisabled = function (d) {
-        disabled = d
-        container.style("display", disabled ? "none" : "block")
-    }
-
-    timeline.update = function (x1, x2, scale, translate) {
-        if (disabled) return
-
-        timeDomain.forEach(function (d) {
-            d.pos = ((d.x - x1) * scale);
-            d.visible = (d.pos > (-canvas.rangeBand() * scale) && d.pos < canvas.width() + 100);
-        })
-
-        var timeY = ((canvas.height()) * scale - (-1 * translate[1]) - canvas.rangeBandImage() * scale);
-
-        container
-            .attr("class", "timeline " + timelineScale(scale * (fontSize / 2)))
-            .style("font-size", function () {
-                return fontSize * scale + "px";
-            })
-            .style("transform", "translate3d(" + 0 + "px," + timeY + "px, 0px)");
-
-        var select = container.selectAll(".container")
-            .data(timeDomain)
-
-        var enter = select
-            .enter()
-            .append("div")
-            .classed("container", true)
-            .on("mouseenter", function (d) {
-                timelineHover = true;
-                canvas.zoom.center(null);
-                // canvas.selectedImage() = null;
-            })
-            .on("mouseleave", function (d) {
-                timelineHover = false;
-            })
-
-        enter.append("div")
-            .classed("year", true)
-            .text(function (d) {
-                return d.key;
-            })
-
-        var e = enter
-            .append("div")
-            .classed("entries", true)
-            .selectAll(".entry")
-            .data(function (d) {
-                return d.values;
-            })
-            .enter()
-            .append("div")
-            .classed("entry", true)
-
-        e
-            .append("div")
-            .classed("small", true)
-            .append("div")
-            .classed("title", true)
-            .text(function (d) {
-                return d.titel;
-            })
-
-        var m = e
-            .append("div")
-            .classed("middle", true)
-
-        m
-            .append("div")
-            .classed("title", true)
-            .text(function (d) {
-                return d.titel;
-            })
-
-        m
-            .append("div")
-            .classed("text", true)
-            .text(function (d) {
-                return d.text + ".";
-            }) //…
-
-        var l = e
-            .append("div")
-            .classed("large", true)
-
-        l
-            .append("div")
-            .classed("title", true)
-            .text(function (d) {
-                return d.titel;
-            })
-
-        l
-            .append("div")
-            .classed("text", true)
-            .html(function (d) {
-                return d.text + ".<br><br>" + d.extra;
-            })
-
-        select
-            .style("transform", function (d) {
-                return "translate3d(" + parseInt(d.pos) + "px,0px,0px)";
-            })
-            .style("height", canvas.rangeBand() * scale + "px")
-            .style("width", canvas.rangeBand() * scale + "px")
-            .style("display", function (d) {
-                return d.visible ? "block" : "none";
-            })
-
-        select
-            .select(".year")
-            .style("font-size", fontScaleYear(scale) + "px")
-    }
-
-    return timeline
-
-}
\ No newline at end of file
+  var fontScaleYear = d3.scale
+    .linear()
+    .domain([1, 9])
+    .range([9, 20])
+    .clamp(true);
+
+  var timelineFontScale = d3.scale
+    .linear()
+    .domain([40, 8])
+    .range([2, 10])
+    .clamp(true);
+
+  var timelineScale = d3.scale
+    .threshold()
+    .domain([3, 10, 20])
+    .range(["none", "small", "middle", "large"]);
+
+  var timelineHover = false;
+  var container;
+  var timeDomain;
+  var fontSize = 1;
+  var disabled = false;
+
+  function timeline() {}
+
+  timeline.init = function (_timeDomain) {
+    timeDomain = _timeDomain;
+    container = d3.select(".viz").append("div").classed("timeline", true);
+    container.style(
+      "transform",
+      "translate(" + 0 + "px," + (canvas.height() - 30) + "px)"
+    );
+  };
+
+  timeline.rescale = function (scale) {
+    timeDomain.forEach(function (d) {
+      d.x = canvas.x(d.key);
+    });
+    fontSize = timelineFontScale(scale);
+  };
+
+  timeline.setDisabled = function (d) {
+    disabled = d;
+    container.style("display", disabled ? "none" : "block");
+  };
+
+  timeline.update = function (x1, x2, scale, translate) {
+    if (disabled) return;
+
+    timeDomain.forEach(function (d) {
+      d.pos = (d.x - x1) * scale;
+      d.visible =
+        d.pos > -canvas.rangeBand() * scale && d.pos < canvas.width() + 100;
+    });
+
+    var timeY =
+      canvas.height() * scale -
+      -1 * translate[1] -
+      canvas.rangeBandImage() * scale;
+
+    container
+      .attr("class", "timeline " + timelineScale(scale * (fontSize / 2)))
+      .style("font-size", function () {
+        return fontSize * scale + "px";
+      })
+      .style("transform", "translate3d(" + 0 + "px," + timeY + "px, 0px)");
+
+    var select = container.selectAll(".container").data(timeDomain);
+
+    var enter = select
+      .enter()
+      .append("div")
+      .classed("container", true)
+      .on("mouseenter", function (d) {
+        timelineHover = true;
+        canvas.zoom.center(null);
+        // canvas.selectedImage() = null;
+      })
+      .on("mouseleave", function (d) {
+        timelineHover = false;
+      });
+
+    enter
+      .append("div")
+      .classed("year", true)
+      .text(function (d) {
+        return d.key;
+      });
+
+    var e = enter
+      .append("div")
+      .classed("entries", true)
+      .selectAll(".entry")
+      .data(function (d) {
+        return d.values;
+      })
+      .enter()
+      .append("div")
+      .classed("entry", true);
+
+    e.append("div")
+      .classed("small", true)
+      .append("div")
+      .classed("title", true)
+      .text(function (d) {
+        return d.titel;
+      });
+
+    var m = e.append("div").classed("middle", true);
+
+    m.append("div")
+      .classed("title", true)
+      .text(function (d) {
+        return d.titel;
+      });
+
+    m.append("div")
+      .classed("text", true)
+      .text(function (d) {
+        return d.text + ".";
+      }); //…
+
+    var l = e.append("div").classed("large", true);
+
+    l.append("div")
+      .classed("title", true)
+      .text(function (d) {
+        return d.titel;
+      });
+
+    l.append("div")
+      .classed("text", true)
+      .html(function (d) {
+        return d.text + ".<br><br>" + d.extra;
+      });
+
+    select
+      .style("transform", function (d) {
+        return "translate3d(" + parseInt(d.pos) + "px,0px,0px)";
+      })
+      .style("height", canvas.rangeBand() * scale + "px")
+      .style("width", canvas.rangeBand() * scale + "px")
+      .style("display", function (d, i) {
+        var width = canvas.rangeBand() * scale;
+        var hideBecauseOfSpace = width / d.key.length > 5 || i % 2 == 0;
+        return hideBecauseOfSpace && d.visible ? "block" : "none";
+      });
+
+    select.select(".year").style("font-size", fontScaleYear(scale) + "px");
+  };
+
+  return timeline;
+}
-- 
GitLab