diff --git a/docs/timeline/index.html b/docs/timeline/index.html index 09a92d7e9f..3c02073d8d 100644 --- a/docs/timeline/index.html +++ b/docs/timeline/index.html @@ -1545,12 +1545,13 @@

Methods

- setCustomTimeMarker(title [, id]) + setCustomTimeMarker(title [, id, editable]) none Attach a marker to the custom time bar. Parameter title is the string to be set as title of the marker. Parameter id is the id of the custom time bar which the marker is attached to, and is undefined by default. Any marker's style can be overridden by specifying css selectors such as .vis-custom-time > .vis-custom-time-marker, .${The id of the custom time bar} > .vis-custom-time-marker. + Parameter editable makes the marker editable if true and is false by default. diff --git a/examples/timeline/index.html b/examples/timeline/index.html index 22a2f102ca..5e1a0dedc1 100644 --- a/examples/timeline/index.html +++ b/examples/timeline/index.html @@ -56,6 +56,10 @@

groups

visible groups
subgroup visibility
+

custom time markers

+ custom time markers
+ editable custom time markers
+

styling

axis orientation
custom CSS
diff --git a/examples/timeline/markers/customTimeMarkers.html b/examples/timeline/markers/customTimeMarkers.html new file mode 100644 index 0000000000..dcd0c012e4 --- /dev/null +++ b/examples/timeline/markers/customTimeMarkers.html @@ -0,0 +1,50 @@ + + + + Timeline | Markers example + + + + + + + + + +

The Timeline has a function to add multiple custom time markers which can be dragged by the user.

+

In this example, you can add new markers by double-clicking the timeline below and delete the markers by double-clicking it.

+

+ +

+ +
+ + + + \ No newline at end of file diff --git a/examples/timeline/markers/customTimeMarkersEditable.html b/examples/timeline/markers/customTimeMarkersEditable.html new file mode 100644 index 0000000000..11949d2d6e --- /dev/null +++ b/examples/timeline/markers/customTimeMarkersEditable.html @@ -0,0 +1,41 @@ + + + + Timeline | Editable markers + + + + + + + + + +

Custom time markers have an option to make the title editable.

+ +
+ + + + \ No newline at end of file diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js index d7504b6aac..91e87054c6 100644 --- 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 index b0240b4d4e..153931bf72 100644 --- 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); }