fixed tests & documentation

mapbox · Mar 15, 2019 · 392c9aa · 392c9aa
1 parent d0ff6f5
commit 392c9aa
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 17 deletions.
diff --git a/src/ui/popup.js b/src/ui/popup.js
@@ -235,19 +235,27 @@ export default class Popup extends Evented {
     }
 
     /**
-     * Sets the popup's max width.
+     * Returns the popup's max width.
      *
-     * @param pixel A string representing the pixel value for the maximum width.
-     * @returns {Popup} `this`
+     * @returns {LngLat} The max width of the popup.
      */
-    getMaxWidth() {
-      return this._container.style.maxWidth;
+    get maxWidth() {
+        return this._container.style.maxWidth;
     }
 
-    setMaxWidth(maxWidth: string) { // should this be number?
-      this.options.maxWidth = maxWidth;
-      this._update();
-      return this;
+    /**
+     * 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`
+     */
+    set maxWidth(maxWidth: string) {
+        console.log(this.options.maxWidth);
+        this.options.maxWidth = maxWidth;
+        console.log(this.options.maxWidth);
+        this._update();
     }
 
     /**
@@ -294,13 +302,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);
-            this._container.style.maxWidth = this.options.maxWidth;
             if (this.options.className) {
                 this.options.className.split(' ').forEach(name =>
                     this._container.classList.add(name));
             }
         }
 
+        if (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
@@ -142,32 +142,35 @@ test('Popup width maximum defaults to 240px', (t) => {
         .addTo(map)
         .setHTML("<span>Test</span>");
 
-    t.equal(popup.getMaxWidth(), "240px");
+    t.equal(popup.maxWidth, "240px");
     t.end();
 });
 
-test('Popup width maximum can be set via setMaxWidth option', (t) => {
+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>")
+        .setHTML("<span>Test</span>");
 
-    t.equal(popup.getMaxWidth(), "5px");
+    t.equal(popup.maxWidth, "5px");
     t.end();
 });
 
-test('Popup width maximum can be set via setMaxWidth', (t) => {
+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");
+    popup.maxWidth = "5px";
+    t.equal(popup.maxWidth, "5px");
+
+    popup.maxWidth = "15px";
+    t.equal(popup.maxWidth, "15px");
     t.end();
 });