Prevent adding lots of custom time marker divs (visjs#1653)

When calling setCustomTimeMarker(), if there's an existing marker, remove it before adding a new one fixes visjs#1652
metrica-sports · Jun 19, 2023 · 94683cf · 94683cf
1 parent b67c346
commit 94683cf
Showing 1 changed file with 14 additions and 11 deletions.
diff --git a/lib/timeline/component/CustomTime.js b/lib/timeline/component/CustomTime.js
@@ -205,28 +205,31 @@ class CustomTime extends Component {
    * @param {boolean} [editable] Make the custom marker editable.
    */
   setCustomMarker(title, editable) {
-    const marker = document.createElement('div');
-    marker.className = `vis-custom-time-marker`;
-    marker.innerHTML = util.xss(title);
-    marker.style.position = 'absolute';
+    if (this.marker) {
+      this.bar.removeChild(this.marker);
+    }
+    this.marker = document.createElement('div');
+    this.marker.className = `vis-custom-time-marker`;
+    this.marker.innerHTML = util.xss(title);
+    this.marker.style.position = 'absolute';
 
     if (editable) {
-      marker.setAttribute('contenteditable', 'true');
-      marker.addEventListener('pointerdown', function () {
-        marker.focus();
+      this.marker.setAttribute('contenteditable', 'true');
+      this.marker.addEventListener('pointerdown', function () {
+        this.marker.focus();
       });
-      marker.addEventListener('input', this._onMarkerChange.bind(this));
+      this.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) {
+      this.marker.title = title;
+      this.marker.addEventListener('blur', function (event) {
         if (this.title != event.target.innerHTML) {
           this._onMarkerChanged(event);
           this.title = event.target.innerHTML;
         }
       }.bind(this));
     }
 
-    this.bar.appendChild(marker);
+    this.bar.appendChild(this.marker);
   }
 
   /**