From ba9d752bde5bb24248b2cbeb599bfffa4ca90634 Mon Sep 17 00:00:00 2001 From: y_ryu Date: Sun, 29 Sep 2019 17:49:39 +0900 Subject: [PATCH 1/6] feat(timeline): add an option to make the custom marker editable (#105) --- lib/timeline/Core.js | 7 ++++--- lib/timeline/component/CustomTime.js | 11 +++++++++-- 2 files changed, 13 insertions(+), 5 deletions(-) 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); } From cf5a44be21d53afdec04670d530b61b7d6f80c5a Mon Sep 17 00:00:00 2001 From: y_ryu Date: Sun, 29 Sep 2019 18:00:27 +0900 Subject: [PATCH 2/6] chore(docs): update the timeline document (#105) --- docs/timeline/index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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. From 2f8c9e4fbbd75ff1d09533154c9cfc8e76c8c873 Mon Sep 17 00:00:00 2001 From: y_ryu Date: Fri, 4 Oct 2019 16:21:34 +0900 Subject: [PATCH 3/6] chore(docs): add new example of custom time markers (#105) --- .../timeline/markers/customTimeMarkers.html | 50 +++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 examples/timeline/markers/customTimeMarkers.html 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 From 01e5c06edf64c3bb7bff752bbebd6b17d6475e81 Mon Sep 17 00:00:00 2001 From: y_ryu Date: Fri, 4 Oct 2019 16:24:33 +0900 Subject: [PATCH 4/6] chore(docs): add new example of editable custom time markers (#105) --- .../markers/customTimeMarkersEditable.html | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 examples/timeline/markers/customTimeMarkersEditable.html diff --git a/examples/timeline/markers/customTimeMarkersEditable.html b/examples/timeline/markers/customTimeMarkersEditable.html new file mode 100644 index 0000000000..9c832ee97a --- /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 From 4a52f8b0db9d5882fd6add388885a4a0d2bfc730 Mon Sep 17 00:00:00 2001 From: y_ryu Date: Fri, 4 Oct 2019 19:04:41 +0900 Subject: [PATCH 5/6] chore(docs): add the links to the example overview (#105) --- examples/timeline/index.html | 4 ++++ 1 file changed, 4 insertions(+) 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
From 9cf487a1199da7bdcb54aa81a1fb58629188dc1f Mon Sep 17 00:00:00 2001 From: y_ryu Date: Fri, 4 Oct 2019 19:51:52 +0900 Subject: [PATCH 6/6] fix(docs): don't use foo and bar (#105) --- examples/timeline/markers/customTimeMarkersEditable.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/timeline/markers/customTimeMarkersEditable.html b/examples/timeline/markers/customTimeMarkersEditable.html index 9c832ee97a..11949d2d6e 100644 --- a/examples/timeline/markers/customTimeMarkersEditable.html +++ b/examples/timeline/markers/customTimeMarkersEditable.html @@ -30,8 +30,8 @@ }; var timeline = new vis.Timeline(container, items, options); - var id1 = "foo"; - var id2 = "bar"; + 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);