Add Popup methods to manipulate container class names (#8759)

.gitignore

@@ -29,3 +29,4 @@ _site
 yarn-error.log
 yarn-debug.log
 npm-debug.log
+.idea

src/ui/popup.js

@@ -338,6 +338,47 @@ export default class Popup extends Evented {
         return this;
     }
 
+    /**
+     * Adds a CSS class to the popup container element.
+     *
+     * @param {string} className Non-empty string with CSS class name to add to popup container
+     *
+     * @example
+     * let popup = new mapboxgl.Popup()
+     * popup.addClassName('some-class')
+     */
+    addClassName(className: string) {
+        this._container.classList.add(className);
+    }
+
+    /**
+     * Removes a CSS class from the popup container element.
+     *
+     * @param {string} className Non-empty string with CSS class name to remove from popup container
+     *
+     * @example
+     * let popup = new mapboxgl.Popup()
+     * popup.removeClassName('some-class')
+     */
+    removeClassName(className: string) {
+        this._container.classList.remove(className);
+    }
+
+    /**
+     * Add or remove the given CSS class on the popup container, depending on whether the container currently has that class.
+     *
+     * @param {string} className Non-empty string with CSS class name to add/remove
+     *
+     * @returns {boolean} if the class was removed return false, if class was added, then return true
+     *
+     * @example
+     * let popup = new mapboxgl.Popup()
+     * popup.toggleClassName('toggleClass')
+     */
+    toggleClassName(className: string) {
+        return this._container.classList.toggle(className);
+    }
+
     _createContent() {
         if (this._content) {
             DOM.remove(this._content);
@@ -367,6 +408,7 @@ 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');
             }

test/unit/ui/popup.test.js

@@ -495,7 +495,7 @@ test('Popup#remove is idempotent (#2395)', (t) => {
     t.end();
 });
 
-test('Popup adds classes from className option', (t) => {
+test('Popup adds classes from className option, methods for class manipulations works properly', (t) => {
     const map = createMap(t);
     const popup = new Popup({className: 'some classes'})
         .setText('Test')
@@ -505,6 +505,27 @@ test('Popup adds classes from className option', (t) => {
     const popupContainer = popup.getElement();
     t.ok(popupContainer.classList.contains('some'));
     t.ok(popupContainer.classList.contains('classes'));
+
+    popup.addClassName('addedClass');
+    t.ok(popupContainer.classList.contains('addedClass'));
+
+    popup.removeClassName('addedClass');
+    t.ok(!popupContainer.classList.contains('addedClass'));
+
+    popup.toggleClassName('toggle');
+    t.ok(popupContainer.classList.contains('toggle'));
+
+    popup.toggleClassName('toggle');
+    t.ok(!popupContainer.classList.contains('toggle'));
+
+    t.throws(() => popup.addClassName('should throw exception'), window.DOMException);
+    t.throws(() => popup.removeClassName('should throw exception'), window.DOMException);
+    t.throws(() => popup.toggleClassName('should throw exception'), window.DOMException);
+
+    t.throws(() => popup.addClassName(''), window.DOMException);
+    t.throws(() => popup.removeClassName(''), window.DOMException);
+    t.throws(() => popup.toggleClassName(''), window.DOMException);
+
     t.end();
 });