Add max width for popups (#7906)

mapbox · Mar 21, 2019 · 0b1e151 · 0b1e151
1 parent 337dc12
commit 0b1e151
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 3 deletions.
diff --git a/src/ui/popup.js b/src/ui/popup.js
@@ -16,7 +16,8 @@ import type {PointLike} from '@mapbox/point-geometry';
 const defaultOptions = {
     closeButton: true,
     closeOnClick: true,
-    className: ''
+    className: '',
+    maxWidth: "240px"
 };
 
 export type Offset = number | PointLike | {[Anchor]: PointLike};
@@ -26,7 +27,8 @@ export type PopupOptions = {
     closeOnClick?: boolean,
     anchor?: Anchor,
     offset?: Offset,
-    className?: string
+    className?: string,
+    maxWidth?: string
 };
 
 /**
@@ -50,6 +52,7 @@ export type PopupOptions = {
  *   - an object of {@link Point}s specifing an offset for each anchor position
  *  Negative offsets indicate left and up.
  * @param {string} [options.className] Space-separated CSS class names to add to popup container
+ * @param {string} [options.maxWidth] A string that sets the CSS property of the popup's maxWidth in pixels, eg "300px"
  * @example
  * var markerHeight = 50, markerRadius = 10, linearOffset = 25;
  * var popupOffsets = {
@@ -65,6 +68,7 @@ export type PopupOptions = {
  * var popup = new mapboxgl.Popup({offset: popupOffsets, className: 'my-class'})
  *   .setLngLat(e.lngLat)
  *   .setHTML("<h1>Hello World!</h1>")
+ *   .setMaxWidth("300px")
  *   .addTo(map);
  * @see [Display a popup](https://www.mapbox.com/mapbox-gl-js/example/popup/)
  * @see [Display a popup on hover](https://www.mapbox.com/mapbox-gl-js/example/popup-on-hover/)
@@ -231,6 +235,27 @@ export default class Popup extends Evented {
         return this.setDOMContent(frag);
     }
 
+    /**
+     * Returns the popup's max width.
+     *
+     * @returns {string} The max width of the popup.
+     */
+    getMaxWidth() {
+        return this._container.style.maxWidth;
+    }
+
+    /**
+     * Sets the popup's max width. This is setting the CSS property maxWidth. It expects a string in "Npx" format, where N is some number.
+     *
+     * @param maxWidth A string representing the pixel value for the maximum width.
+     * @returns {Popup} `this`
+     */
+    setMaxWidth(maxWidth: string) {
+        this.options.maxWidth = maxWidth;
+        this._update();
+        return this;
+    }
+
     /**
      * Sets the popup's content to the element provided as a DOM node.
      *
@@ -275,13 +300,16 @@ export default class Popup extends Evented {
             this._container = DOM.create('div', 'mapboxgl-popup', this._map.getContainer());
             this._tip       = DOM.create('div', 'mapboxgl-popup-tip', this._container);
             this._container.appendChild(this._content);
-
             if (this.options.className) {
                 this.options.className.split(' ').forEach(name =>
                     this._container.classList.add(name));
             }
         }
 
+        if (this.options.maxWidth && this._container.style.maxWidth !== this.options.maxWidth) {
+            this._container.style.maxWidth = this.options.maxWidth;
+        }
+
         if (this._map.transform.renderWorldCopies) {
             this._lngLat = smartWrap(this._lngLat, this._pos, this._map.transform);
         }

diff --git a/test/unit/ui/popup.test.js b/test/unit/ui/popup.test.js
@@ -134,6 +134,43 @@ test('Popup content can be set via setHTML', (t) => {
     t.end();
 });
 
+test('Popup width maximum defaults to 240px', (t) => {
+    const map = createMap(t);
+
+    const popup = new Popup({closeButton: false})
+        .setLngLat([0, 0])
+        .addTo(map)
+        .setHTML("<span>Test</span>");
+
+    t.equal(popup.getMaxWidth(), "240px");
+    t.end();
+});
+
+test('Popup width maximum can be set via using maxWidth option', (t) => {
+    const map = createMap(t);
+
+    const popup = new Popup({closeButton: false, maxWidth: "5px"})
+        .setLngLat([0, 0])
+        .addTo(map)
+        .setHTML("<span>Test</span>");
+
+    t.equal(popup.getMaxWidth(), "5px");
+    t.end();
+});
+
+test('Popup width maximum can be set via maxWidth', (t) => {
+    const map = createMap(t);
+
+    const popup = new Popup({closeButton: false})
+        .setLngLat([0, 0])
+        .setHTML("<span>Test</span>")
+        .setMaxWidth("5px")
+        .addTo(map);
+
+    t.equal(popup.getMaxWidth(), "5px");
+    t.end();
+});
+
 test('Popup content can be set via setDOMContent', (t) => {
     const map = createMap(t);
     const content = window.document.createElement('span');