feat(timeline): add markers to custom time bars (#86)

* feat(timeline): add markers to custom time bars (#84)

* chore(docs): update the document (#84)

* fix(docs): move the description to the timeline document (#84)

docs/timeline/index.html

@@ -1543,6 +1543,16 @@ <h2 id="Methods">Methods</h2>
       </td>
     </tr>
 
+    <tr>
+      <td>setCustomTimeMarker(title [, id])</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>.
+      </td>
+    </tr>
+
     <tr>
       <td>setCustomTimeTitle(title [, id])</td>
       <td>none</td>

lib/timeline/Core.js

@@ -589,6 +589,22 @@ class Core {
     return customTimes[0].getCustomTime();
   }
 
+  /**
+   * 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.
+   */
+  setCustomTimeMarker(title, id) {
+    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);
+    }
+  }
+
   /**
    * Set a custom title for the custom time bar.
    * @param {string} [title] Custom title

lib/timeline/component/CustomTime.js

@@ -185,6 +185,18 @@ class CustomTime extends Component {
     return new Date(this.customTime.valueOf());
   }
 
+  /**
+   * Set custom marker.
+   * @param {string} title
+   */
+  setCustomMarker(title) {
+    const marker = document.createElement('div');
+    marker.className = `vis-custom-time-marker`;
+    marker.innerHTML = title;
+    marker.style.position = 'absolute';
+    this.bar.appendChild(marker);
+  }
+
   /**
     * Set custom title.
     * @param {Date | number | string} title

lib/timeline/component/css/customtime.css

@@ -3,4 +3,15 @@
   width: 2px;
   cursor: move;
   z-index: 1;
+}
+
+.vis-custom-time > .vis-custom-time-marker {
+  background-color: inherit;
+  color: white;
+  font-size: 12px;
+  white-space: nowrap;
+  padding: 3px 5px;
+  top: 0px;
+  cursor: initial;
+  z-index: inherit;
 }