From 81e0fc927bdef8c61ae184e47fbe2af5e4aae689 Mon Sep 17 00:00:00 2001
From: sbosse <sbosse@uni-bremen.de>
Date: Mon, 21 Jul 2025 22:55:05 +0200
Subject: [PATCH] Mon 21 Jul 22:43:21 CEST 2025

---
 .../timeline/editing/updateDataOnEvent.html   | 90 +++++++++++++++++++
 1 file changed, 90 insertions(+)
 create mode 100644 js/dos/ext/vis/examples/timeline/editing/updateDataOnEvent.html
diff --git a/js/dos/ext/vis/examples/timeline/editing/updateDataOnEvent.html b/js/dos/ext/vis/examples/timeline/editing/updateDataOnEvent.html
new file mode 100644
index 0000000..aedb885
--- /dev/null
+++ b/js/dos/ext/vis/examples/timeline/editing/updateDataOnEvent.html
@@ -0,0 +1,90 @@
+<html>
+<head>
+  <title>Timeline | Update data on event</title>
+
+  <style type="text/css">
+    body {
+      font: 11pt verdana;
+    }
+
+    .vis.timeline .item.past {
+      filter: alpha(opacity=50);
+      opacity: 0.5;
+    }
+  </style>
+
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script src="../../googleAnalytics.js"></script>
+</head>
+
+<body>
+<p style="width: 600px;">
+  When the custom time bar is shown, the user can drag this bar to a specific
+  time. The Timeline sends an event that the custom time is changed, after
+  which the contents of the timeline can be changed according to the specified
+  time in past or future.
+</p>
+
+<div id="customTime">&nbsp;</div>
+<p></p>
+
+<div id="mytimeline"></div>
+
+
+<script>
+  // create a data set
+  var data = new vis.DataSet([
+    {
+      id: 1,
+      start: new Date((new Date()).getTime() - 60 * 1000),
+      end: new Date(),
+      content: 'Dynamic event'
+    }
+  ]);
+
+  // specify options
+  var options = {
+    showCurrentTime: true
+  };
+
+  // create a timeline
+  var container = document.getElementById('mytimeline');
+  timeline = new vis.Timeline(container, data, options);
+
+  timeline.addCustomTime(new Date());
+
+  // add event listener
+  timeline.on('timechange', function (event) {
+    document.getElementById("customTime").innerHTML = "Custom Time: " + event.time;
+
+    var item = data.get(1);
+    if (event.time > item.start) {
+      item.end = new Date(event.time);
+      var now = new Date();
+      if (event.time < now) {
+        item.content = "Dynamic event (past)";
+        item.className = 'past';
+      }
+      else if (event.time > now) {
+        item.content = "Dynamic event (future)";
+        item.className = 'future';
+      }
+      else  {
+        item.content = "Dynamic event (now)";
+        item.className = 'now';
+      }
+
+      data.update(item);
+    }
+  });
+
+  // set a custom range from -2 minute to +3 minutes current time
+  var start = new Date((new Date()).getTime() - 2 * 60 * 1000);
+  var end   = new Date((new Date()).getTime() + 3 * 60 * 1000);
+  timeline.setWindow(start, end, {animation: false});
+
+</script>
+
+</body>
+</html>
