add call to update and check before classList

mapbox · Sep 17, 2019 · 102ec0c · 102ec0c
1 parent 4a61c42
commit 102ec0c
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 6 deletions.
diff --git a/src/ui/popup.js b/src/ui/popup.js
@@ -113,7 +113,9 @@ export default class Popup extends Evented {
         if (this._trackPointer) {
             this._map.on('mousemove', (e) => { this._update(e.point); });
             this._map.on('mouseup', (e) => { this._update(e.point); });
-            this._container.classList.add('mapboxgl-popup-track-pointer');
+            if (this._container) {
+                this._container.classList.add('mapboxgl-popup-track-pointer');
+            }
             this._map._canvasContainer.classList.add('mapboxgl-track-pointer');
         } else {
             this._map.on('move', this._update);
@@ -210,7 +212,9 @@ export default class Popup extends Evented {
         if (this._map) {
             this._map.on('move', this._update);
             this._map.off('mousemove');
-            this._container.classList.remove('mapboxgl-popup-track-pointer');
+            if (this._container) {
+                this._container.classList.remove('mapboxgl-popup-track-pointer');
+            }
             this._map._canvasContainer.classList.remove('mapboxgl-track-pointer');
         }
 
@@ -225,12 +229,14 @@ export default class Popup extends Evented {
     trackPointer() {
         this._trackPointer = true;
         this._pos = null;
-
+        this._update();
         if (this._map) {
             this._map.off('move', this._update);
             this._map.on('mousemove', (e) => { this._update(e.point); });
             this._map.on('drag', (e) => { this._update(e.point); });
-            this._container.classList.add('mapboxgl-popup-track-pointer');
+            if (this._container) {
+                this._container.classList.add('mapboxgl-popup-track-pointer');
+            }
             this._map._canvasContainer.classList.add('mapboxgl-track-pointer');
         }
 
@@ -349,7 +355,6 @@ export default class Popup extends Evented {
     }
 
     _update(cursor: PointLike) {
-
         const hasPosition = this._lngLat || this._trackPointer;
 
         if (!this._map || !hasPosition || !this._content) { return; }
@@ -362,7 +367,9 @@ export default class Popup extends Evented {
                 this.options.className.split(' ').forEach(name =>
                     this._container.classList.add(name));
             }
-
+            if (this._trackPointer) {
+                this._container.classList.add('mapboxgl-popup-track-pointer');
+            }
         }
 
         if (this.options.maxWidth && this._container.style.maxWidth !== this.options.maxWidth) {

diff --git a/test/unit/ui/popup.test.js b/test/unit/ui/popup.test.js
@@ -531,6 +531,30 @@ test('Pointer-tracked popup is tagged with right class', (t) => {
     t.end();
 });
 
+test('Pointer-tracked popup with content set later is tagged with right class ', (t) => {
+    const map = createMap(t);
+    const popup = new Popup()
+        .trackPointer()
+        .addTo(map);
+
+    popup.setText("Test");
+
+    t.equal(popup._container.classList.value.includes('mapboxgl-popup-track-pointer'), true);
+    t.end();
+});
+
+test('Pointer-tracked popup that is set afterwards is tagged with right class ', (t) => {
+    const map = createMap(t);
+    const popup = new Popup()
+        .addTo(map);
+
+    popup.setText("Test");
+    popup.trackPointer();
+
+    t.equal(popup._container.classList.value.includes('mapboxgl-popup-track-pointer'), true);
+    t.end();
+});
+
 test('Pointer-tracked popup can be repositioned with setLngLat', (t) => {
     const map = createMap(t);
     const popup = new Popup()
@@ -540,6 +564,7 @@ test('Pointer-tracked popup can be repositioned with setLngLat', (t) => {
         .addTo(map);
 
     t.deepEqual(popup._pos, map.project([0, 0]));
+    t.equal(popup._container.classList.value.includes('mapboxgl-popup-track-pointer'), false);
     t.end();
 });