add className option to Popup constructor

mapbox · Apr 11, 2018 · 4ebba60 · 4ebba60
1 parent 6b96d69
commit 4ebba60
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 2 deletions.
diff --git a/src/ui/popup.js b/src/ui/popup.js
@@ -23,7 +23,8 @@ export type PopupOptions = {
     closeButton: boolean,
     closeOnClick: boolean,
     anchor: Anchor,
-    offset: Offset
+    offset: Offset,
+    className: String
 };
 
 /**
@@ -46,8 +47,10 @@ export type PopupOptions = {
  *   - a {@link PointLike} specifying a constant offset
  *   - an object of {@link Point}s specifing an offset for each anchor position
  *  Negative offsets indicate left and up.
+ *  @param {string} [options.className] A string with classes that will be added to popup container
  * @example
  * var markerHeight = 50, markerRadius = 10, linearOffset = 25;
+ * var popupContainerClassName = ['some', 'additional', 'class']
  * var popupOffsets = {
  *  'top': [0, 0],
  *  'top-left': [0,0],
@@ -58,7 +61,7 @@ export type PopupOptions = {
  *  'left': [markerRadius, (markerHeight - markerRadius) * -1],
  *  'right': [-markerRadius, (markerHeight - markerRadius) * -1]
  *  };
- * var popup = new mapboxgl.Popup({offset:popupOffsets})
+ * var popup = new mapboxgl.Popup({offset:popupOffsets, className: popupContainerClassName})
  *   .setLngLat(e.lngLat)
  *   .setHTML("<h1>Hello World!</h1>")
  *   .addTo(map);
@@ -274,6 +277,14 @@ export default class Popup extends Evented {
             this._lngLat = smartWrap(this._lngLat, this._pos, this._map.transform);
         }
 
+        const className: String = this.options.className;
+
+        if (className) {
+            className.split(' ').forEach((clsName) => {
+                this._container.classList.add(clsName);
+            });
+        }
+
         const pos = this._pos = this._map.project(this._lngLat);
 
         let anchor: Anchor = this.options.anchor;

diff --git a/test/unit/ui/popup.test.js b/test/unit/ui/popup.test.js
@@ -446,3 +446,19 @@ test('Popup#remove is idempotent (#2395)', (t) => {
     t.equal(map.getContainer().querySelectorAll('.mapboxgl-popup').length, 0);
     t.end();
 });
+
+test('Popup#add classes from className option', (t) => {
+    const map = createMap();
+    const classNames = ['some', 'classes'];
+    new Popup({
+        className: classNames.join(' ')
+    })
+        .setText("Test")
+        .setLngLat([0, 0])
+        .addTo(map);
+
+    const popupContainer = map.getContainer().querySelector('.mapboxgl-popup');
+
+    t.ok(popupContainer.classList.contains(classNames[0]) && popupContainer.classList.contains(classNames[1]));
+    t.end();
+});