feat(timeline): add an option to make the custom marker editable (#117)

* feat(timeline): add an option to make the custom marker editable (#105) * chore(docs): update the timeline document (#105) * chore(docs): add new example of custom time markers (#105) * chore(docs): add new example of editable custom time markers (#105) * chore(docs): add the links to the example overview (#105) * fix(docs): don't use foo and bar (#105)
visjs · Oct 4, 2019 · 46ea275 · 46ea275
1 parent efa4093
commit 46ea275
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 6 deletions.
diff --git a/docs/timeline/index.html b/docs/timeline/index.html
@@ -1545,12 +1545,13 @@ <h2 id="Methods">Methods</h2>
     </tr>
 
     <tr>
-      <td>setCustomTimeMarker(title [, id])</td>
+      <td>setCustomTimeMarker(title [, id, editable])</td>
       <td>none</td>
       <td>Attach a marker to the custom time bar.
         Parameter <code>title</code> is the string to be set as title of the marker.
         Parameter <code>id</code> is the id of the custom time bar which the marker is attached to, and is <code>undefined</code> by default.
         Any marker's style can be overridden by specifying css selectors such as <code>.vis-custom-time > .vis-custom-time-marker</code>, <code>.${The id of the custom time bar} > .vis-custom-time-marker</code>.
+        Parameter <code>editable</code> makes the marker editable if true and is <code>false</code> by default.
       </td>
     </tr>
 

diff --git a/examples/timeline/index.html b/examples/timeline/index.html
@@ -56,6 +56,10 @@ <h3>groups</h3>
 			<a href="./groups/visibleGroups.html">visible groups</a><br />
 			<a href="./groups/subgroupsVisibility.html">subgroup visibility</a><br />
 
+			<h3>custom time markers</h3>
+			<a href="./markers/customTimeMarkers.html">custom time markers</a><br />
+			<a href="./markers/customTimeMarkersEditable.html">editable custom time markers</a><br />
+
 			<h3>styling</h3>
 			<a href="./styling/axisOrientation.html">axis orientation</a><br />
 			<a href="./styling/customCss.html">custom CSS</a><br />

diff --git a/examples/timeline/markers/customTimeMarkers.html b/examples/timeline/markers/customTimeMarkers.html
@@ -0,0 +1,50 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Markers example</title>
+
+  <style type="text/css">
+    body, html {
+      font-family: sans-serif;
+      font-size: 11pt;
+    }
+  </style>
+
+  <script src="../../../dist/vis-timeline-graph2d.min.js"></script>
+  <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+
+</head>
+<body>
+
+<p>The Timeline has a function to add multiple custom time markers which can be dragged by the user.</p>
+<p>In this example, you can add new markers by double-clicking the timeline below and delete the markers by double-clicking it.</p>
+<p>
+  <input type="text" id="markerText" placeholder="marker text">
+</p>
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+  var container = document.getElementById('visualization');
+  var items = new vis.DataSet();
+  var customDate = new Date();
+  var options = {
+    start: new Date(Date.now() - 1000 * 60 * 60 * 24),
+    end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 6)
+  };
+  var timeline = new vis.Timeline(container, items, options);
+
+  timeline.on('doubleClick', function (properties) {
+    var eventProps = timeline.getEventProperties(properties.event);
+    if (eventProps.what === 'custom-time') {
+      timeline.removeCustomTime(eventProps.customTime);
+    } else {
+      var id = new Date().getTime();
+      var markerText = document.getElementById('markerText').value || undefined;
+      timeline.addCustomTime(eventProps.time, id);
+      timeline.setCustomTimeMarker(markerText, id);
+    }
+  });
+</script>
+</body>
+</html>
diff --git a/examples/timeline/markers/customTimeMarkersEditable.html b/examples/timeline/markers/customTimeMarkersEditable.html
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Editable markers</title>
+
+  <style type="text/css">
+    body, html {
+      font-family: sans-serif;
+      font-size: 11pt;
+    }
+  </style>
+
+  <script src="../../../dist/vis-timeline-graph2d.min.js"></script>
+  <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+
+</head>
+<body>
+
+<p>Custom time markers have an option to make the title editable.</p>
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+  var container = document.getElementById('visualization');
+  var items = new vis.DataSet();
+  var customDate = new Date();
+  var options = {
+    start: new Date(Date.now() - 1000 * 60 * 60 * 24),
+    end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 6)
+  };
+  var timeline = new vis.Timeline(container, items, options);
+
+  var id1 = new Date().getTime();
+  var id2 = new Date().getTime();
+  timeline.addCustomTime(new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 2), id1);
+  timeline.setCustomTimeMarker("This is editable", id1, true);
+  timeline.addCustomTime(new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 3), id2);
+  timeline.setCustomTimeMarker("This is not editable", id2, false);
+</script>
+</body>
+</html>
diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js
@@ -593,16 +593,17 @@ class Core {
   /**
    * Set a custom marker for the custom time bar.
    * @param {string} [title] Title of the custom marker.
-   * @param {number} [id=undefined] Id of the custom time bar.
+   * @param {number} [id=undefined] Id of the custom marker.
+   * @param {boolean} [editable=false] Make the custom marker editable.
    */
-  setCustomTimeMarker(title, id) {
+  setCustomTimeMarker(title, id, editable) {
     const customTimes = this.customTimes.filter(component => component.options.id === id);
 
     if (customTimes.length === 0) {
       throw new Error(`No custom time bar found with id ${JSON.stringify(id)}`)
     }
     if (customTimes.length > 0) {
-      customTimes[0].setCustomMarker(title);
+      customTimes[0].setCustomMarker(title, editable);
     }
   }
 

diff --git a/lib/timeline/component/CustomTime.js b/lib/timeline/component/CustomTime.js
@@ -187,13 +187,20 @@ class CustomTime extends Component {
 
   /**
    * Set custom marker.
-   * @param {string} title
+   * @param {string} [title] Title of the custom marker
+   * @param {boolean} [editable] Make the custom marker editable.
    */
-  setCustomMarker(title) {
+  setCustomMarker(title, editable) {
     const marker = document.createElement('div');
     marker.className = `vis-custom-time-marker`;
     marker.innerHTML = title;
     marker.style.position = 'absolute';
+    if (editable) {
+      marker.setAttribute('contenteditable', 'true');
+      marker.addEventListener('pointerdown', function () {
+        marker.focus();
+      });
+    }
     this.bar.appendChild(marker);
   }