From 74ca7a99223329dc1e6ae12004cbb5d9b0801073 Mon Sep 17 00:00:00 2001
From: y_ryu <maguchi579@gmail.com>
Date: Tue, 8 Oct 2019 13:57:15 +0900
Subject: [PATCH 1/4] feat(timeline): add an event which is fired when the
marker title has been changed
---
lib/timeline/component/CustomTime.js | 18 ++++++++++++++++++
1 file changed, 18 insertions(+)
diff --git a/lib/timeline/component/CustomTime.js b/lib/timeline/component/CustomTime.js
index 153931bf72..f11ec8f6dc 100644
--- a/lib/timeline/component/CustomTime.js
+++ b/lib/timeline/component/CustomTime.js
@@ -195,12 +195,15 @@ class CustomTime extends Component {
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();
});
+ marker.addEventListener('input', this._onMarkerInput.bind(this));
}
+
this.bar.appendChild(marker);
}
@@ -267,6 +270,21 @@ class CustomTime extends Component {
event.stopPropagation();
}
+ /**
+ * Perform input operating.
+ * @param {Event} event
+ * @private
+ */
+ _onMarkerInput(event) {
+ this.body.emitter.emit('markerinput', {
+ id: this.options.id,
+ title: event.target.innerHTML,
+ event
+ });
+
+ event.stopPropagation();
+ }
+
/**
* Find a custom time from an event target:
* searches for the attribute 'custom-time' in the event target's element tree
From 676a5a60adc346acbd8a165e806b42b0e602f6eb Mon Sep 17 00:00:00 2001
From: y_ryu <maguchi579@gmail.com>
Date: Wed, 9 Oct 2019 13:04:02 +0900
Subject: [PATCH 2/4] feat(timeline): add an event which is fired when an
alteration to the marker title is committed
---
lib/timeline/component/CustomTime.js | 23 +++++++++++++++++++++++
1 file changed, 23 insertions(+)
diff --git a/lib/timeline/component/CustomTime.js b/lib/timeline/component/CustomTime.js
index f11ec8f6dc..ec4de24085 100644
--- a/lib/timeline/component/CustomTime.js
+++ b/lib/timeline/component/CustomTime.js
@@ -202,6 +202,14 @@ class CustomTime extends Component {
marker.focus();
});
marker.addEventListener('input', this._onMarkerInput.bind(this));
+ // The editable div element has no onchange event, so here emulates the onchange event.
+ marker.title = title;
+ marker.addEventListener('blur', function (event) {
+ if (this.title != event.target.innerHTML) {
+ this._onMarkerChange(event);
+ this.title = event.target.innerHTML;
+ };
+ }.bind(this));
}
this.bar.appendChild(marker);
@@ -285,6 +293,21 @@ class CustomTime extends Component {
event.stopPropagation();
}
+ /**
+ * Perform change operating.
+ * @param {Event} event
+ * @private
+ */
+ _onMarkerChange(event) {
+ this.body.emitter.emit('markerchange', {
+ id: this.options.id,
+ title: event.target.innerHTML,
+ event
+ });
+
+ event.stopPropagation();
+ }
+
/**
* Find a custom time from an event target:
* searches for the attribute 'custom-time' in the event target's element tree
From b3ba129cae7a645c0ad50b918b3a5795e4615637 Mon Sep 17 00:00:00 2001
From: y_ryu <maguchi579@gmail.com>
Date: Wed, 9 Oct 2019 13:21:22 +0900
Subject: [PATCH 3/4] chore(docs): update the timeline document
---
docs/timeline/index.html | 28 ++++++++++++++++++++++++++++
1 file changed, 28 insertions(+)
diff --git a/docs/timeline/index.html b/docs/timeline/index.html
index 3c02073d8d..5989fea8d6 100644
--- a/docs/timeline/index.html
+++ b/docs/timeline/index.html
@@ -1900,6 +1900,34 @@ <h2 id="Events">Events</h2>
</td>
</tr>
+ <tr>
+ <td>markerinput</td>
+ <td>
+ <ul>
+ <li><code>id</code> (Number or String): custom time bar id which the marker is attached to.</li>
+ <li><code>title</code> (Date): the marker title.</li>
+ <li><code>event</code> (Object): original event triggering the markerinput.</li>
+ </ul>
+ </td>
+ <td>Fired when the marker title has been changed.
+ Only available when the marker is editable.
+ </td>
+ </tr>
+
+ <tr>
+ <td>markerchange</td>
+ <td>
+ <ul>
+ <li><code>id</code> (Number or String): custom time bar id which the marker is attached to.</li>
+ <li><code>title</code> (Date): the marker title.</li>
+ <li><code>event</code> (Object): original event triggering the markerchange.</li>
+ </ul>
+ </td>
+ <td>Fired when an alteration to the marker title is committed.
+ Only available when the marker is editable.
+ </td>
+ </tr>
+
</table>
<h2 id="Editing_Items">Editing Items</h2>
From 6f224e2b93a3b01cdeab22a6ee3a2d687a8b7ea7 Mon Sep 17 00:00:00 2001
From: y_ryu <maguchi579@gmail.com>
Date: Mon, 14 Oct 2019 15:13:02 +0900
Subject: [PATCH 4/4] chore(timeline,docs): rename the custom events
---
docs/timeline/index.html | 8 ++++----
lib/timeline/component/CustomTime.js | 14 +++++++-------
2 files changed, 11 insertions(+), 11 deletions(-)
diff --git a/docs/timeline/index.html b/docs/timeline/index.html
index 5989fea8d6..b9ed9a8e08 100644
--- a/docs/timeline/index.html
+++ b/docs/timeline/index.html
@@ -1901,12 +1901,12 @@ <h2 id="Events">Events</h2>
</tr>
<tr>
- <td>markerinput</td>
+ <td>markerchange</td>
<td>
<ul>
<li><code>id</code> (Number or String): custom time bar id which the marker is attached to.</li>
<li><code>title</code> (Date): the marker title.</li>
- <li><code>event</code> (Object): original event triggering the markerinput.</li>
+ <li><code>event</code> (Object): original event triggering the markerchange.</li>
</ul>
</td>
<td>Fired when the marker title has been changed.
@@ -1915,12 +1915,12 @@ <h2 id="Events">Events</h2>
</tr>
<tr>
- <td>markerchange</td>
+ <td>markerchanged</td>
<td>
<ul>
<li><code>id</code> (Number or String): custom time bar id which the marker is attached to.</li>
<li><code>title</code> (Date): the marker title.</li>
- <li><code>event</code> (Object): original event triggering the markerchange.</li>
+ <li><code>event</code> (Object): original event triggering the markerchanged.</li>
</ul>
</td>
<td>Fired when an alteration to the marker title is committed.
diff --git a/lib/timeline/component/CustomTime.js b/lib/timeline/component/CustomTime.js
index ec4de24085..0b5678acb5 100644
--- a/lib/timeline/component/CustomTime.js
+++ b/lib/timeline/component/CustomTime.js
@@ -201,12 +201,12 @@ class CustomTime extends Component {
marker.addEventListener('pointerdown', function () {
marker.focus();
});
- marker.addEventListener('input', this._onMarkerInput.bind(this));
- // The editable div element has no onchange event, so here emulates the onchange event.
+ marker.addEventListener('input', this._onMarkerChange.bind(this));
+ // The editable div element has no change event, so here emulates the change event.
marker.title = title;
marker.addEventListener('blur', function (event) {
if (this.title != event.target.innerHTML) {
- this._onMarkerChange(event);
+ this._onMarkerChanged(event);
this.title = event.target.innerHTML;
};
}.bind(this));
@@ -283,8 +283,8 @@ class CustomTime extends Component {
* @param {Event} event
* @private
*/
- _onMarkerInput(event) {
- this.body.emitter.emit('markerinput', {
+ _onMarkerChange(event) {
+ this.body.emitter.emit('markerchange', {
id: this.options.id,
title: event.target.innerHTML,
event
@@ -298,8 +298,8 @@ class CustomTime extends Component {
* @param {Event} event
* @private
*/
- _onMarkerChange(event) {
- this.body.emitter.emit('markerchange', {
+ _onMarkerChanged(event) {
+ this.body.emitter.emit('markerchanged', {
id: this.options.id,
title: event.target.innerHTML,
event