Allow edits to popup container class while the popup is not on the map #10889

SnailBones · 2021-07-21T18:49:02Z

Currently, addClassName, removeClassName and toggleClassName all have no effect when called before the popup is added to the map, and all have an incorrect example.

In this P.R. I add a Popup._classList Set that keeps track of the added classes, pushing them to the DOM whenever the popup is added to the map.

At @arindam1993 and @rreusser's suggestion, the popup now uses a Set to keep track of its classes, rewriting the element classList on every update to the popup. This creates a single source of truth and prevents strange behavior when toggling a default class. However, for users who are bypassing the methods to directly manipulate the element classList, this is a breaking change.

Other changes:

Returns for addClassName and removeClassName to allow for method chaining.
Since refactoring, popups no longer throw errors for addinglremoving/toggling invalid strings. (Classes with whitespace instead add multiple classes to the DOM). Lines checking for errors in tests have been removed.
Moved class maniuplation function from anchor.js into marker.js since it is no longer shared by popup.js.

Launch Checklist

Allow addClassName to be called when popup is not on map.
~~Add warnings for incorrect user actions (calling removeClassName and toggleClassName before popup is on map).~~
~~Fix examples for removeClassName and toggleClassName~~
Allow removeClassName and toggleClassName to be called when popup is not on map.
Tests for addClassName.
Tests for removeClassName and toggleClassName.
add an entry inside this element for inclusion in the mapbox-gl-js changelog: <changelog>Popup.addClassName, removeClassName and toggleClassName work while the popup is not on the map, and no longer throw DOM errors for invalid class names. Directly modifying the popup container CSS class no longer works, all edits should use these functions. </changelog>
Implement Set with one-way update.

arindam1993 · 2021-07-21T21:10:16Z

I'd be a fan of moving the classList out from the container and onto an array(or Set maybe? 🤔 ) on the Popup instance itself.
That way we could lift the restriction on remove and toggle as well, and implement a one-way update form this.classList -> this._container.classList whenever changes are triggered.

karimnaaji · 2021-07-21T21:11:47Z

@SnailBones I believe the failed CI tests are unrelated to your PR. I would pull in @arindam1993 's change from yesterday (780a0bb) either rebasing or merging from latest main, as you prefer.

SnailBones · 2021-07-21T21:15:21Z

I'd be a fan of moving the classList out from the container and onto an array(or Set maybe? 🤔 ) on the Popup instance itself.
That way we could lift the restriction on remove and toggle as well, and implement a one-way update form this.classList -> this._container.classList whenever changes are triggered.

@arindam1993 What do you think of the implementation with another DOM element here?

* Pin to chrome version 91 * Pin chrome version for test-browser

rreusser

Leaving some super nitpicky details as a review, but I rather like @arindam1993's suggestion of using a Set here. It's not without precedence in GL JS, though I'm not 100.0% sure this usage was definitely intentional and didn't just happen to sneak through:

mapbox-gl-js/src/util/mapbox.js

Line 573 in 780a0bb

const authenticatedMaps = new Set();

I guess spread with ... works as well for concatenating…

classList = new Set()
// Set(0) {}
classList.add('foo')
// Set(1) {"foo"}
classList.add('bar')
// Set(2) {"foo", "bar"}
[...classList].join(' ')
// "foo bar"

src/ui/popup.js

Co-authored-by: Ricky Reusser <rreusser@users.noreply.github.com>

SnailBones · 2021-07-21T21:28:12Z

classList = new Set()
// Set(0) {}
classList.add('foo')
// Set(1) {"foo"}
classList.add('bar')
// Set(2) {"foo", "bar"}
[...classList].join(' ')
// "foo bar"

@rreusser That's a clever implementation! I'm still struggling to understand what the use case is though. Do you have an example of when it might be necessary to manipulate classes in a popup before it has been added to the map?

rreusser · 2021-07-21T21:33:00Z

Ah, I wasn't 100% certain whether we wanted to preemptively create all of the DOM elements (I imagine they're relatively lightweight, but how many would people create?), so I thought maybe instead of lifting the DOM element's classList onto an instance property (link below, from the PR), we could maybe just track the classList as a set, then concatenate and set it on an inserted DOM element directly whenever it changes.

https://github.com/mapbox/mapbox-gl-js/pull/10143/files#diff-de43205af4d4066c2e22519c9f5fa5e52ff160ed43091938190addbe4b46f4a0R117

ryanhamley · 2021-07-21T22:01:23Z

I can imagine a situation in which popups are set up with a default theme and users can change that theme before they're added to the map, which would make remove and toggle useful. I agree with the idea of maintaining a class list per popup instance that can be updated without a DOM element and then the DOM element can be updated as is if it exists. IMO, we should avoid creating DOM elements unless absolutely necessary since DOM creation can be time- and memory-consuming.

* updates to flyto * no trailing spaces

Merge with main

src/ui/popup.js

rreusser

Looks good! I'm somewhere between "request changes" and "approve" since the PR as-is looks good to me, but if it's reasonable to remove a source of truth and simply overwrite the container classes whenever they change, that would be my top preference, if only to avoid a potential corner case in which they get out of sync.

src/ui/popup.js

rreusser · 2021-07-22T21:50:45Z

src/ui/popup.js

     *
     * @example
     * let popup = new mapboxgl.Popup()
     * popup.addClassName('some-class')
     */
    addClassName(className: string) {
+        this._classList.add(className);
        if (this._container) {
            this._container.classList.add(className);


What do you think about overwriting classes with something like this._applyClassList() which would look like:

_applyClassList () { if (!this._container) return; this._container.className = [...this._classList.values()].join(' '); }

My main concern is that we have two independent sources of truth which we hope remain synchronized. But since we don't allow a user-supplied container anyway, so I don't think there should be a case where this would prevent you from accomplishing some behavior you couldn't simply achieve by using the supplied API.

However, this could be a breaking change if someone was previously manipulating the container class directly.

I don't think there's a valid reason for anyone to manipulate the container class directly right now. (Still doesn't mean that no one's doing it.)

It wouldn't be quite as simple as overwriting: the container element has additional default classes. So this:

const popup = new Popup({className: 'some classes'});

creates this element:

<div class="mapboxgl-popup mapboxgl-popup-anchor-bottom yellow"></div>

Good point! Just wanted to be sure.

I did find one weird edge case: if the user toggles one of the default classes:

popup.toggleClassName('mapboxgl-popup');

This removes the item from the container while adding it to the list.

I'm sure we could fix this, but I'm not sure what the correct behavior would be or if it's worth the lift and added complexity just to solve a very specific edge case.

rreusser · 2021-07-22T21:57:03Z

src/ui/popup.js

-            if (this.options.className) {
-                this.options.className.split(' ').forEach(name =>
+            if (this._classList) {
+                this._classList.forEach(name =>


If we overwrote classes, then I think this._container.className = [...this._classList.values()].join(' ') would be the simplest way to accomplish this.

rreusser

Nice work on this, @SnailBones! Switching my review to approve. 👍 👏

src/ui/popup.js

…updateClassList

SnailBones · 2021-07-24T00:10:34Z

test/unit/ui/popup.test.js


-    t.throws(() => popup.addClassName(''), window.DOMException);


Since DOM is no longer directly updated, these functions no longer throw an error.

SnailBones · 2021-07-24T00:13:36Z

src/ui/popup.js

@@ -600,10 +619,9 @@ export default class Popup extends Evented {
 }

 function normalizeOffset(offset: ?Offset) {
-    if (!offset) {
-        return normalizeOffset(new Point(0, 0));


Seemed like a strange case for recursion here

I believe I've seen this style, especially in the symbol code, where it runs modified values through a different branch of the same function, but TBH I find it slightly hard to follow, so that if otherwise equivalent, I prefer your change 👍

karimnaaji · 2021-07-28T14:53:56Z

@SnailBones You added a 'breaking change' label to this PR, is this breaking only in the way that popups were throwing errors on adding/removing/toggling and not anymore or is it something else?

If it's breaking and requires user code changes, is there any transition that our users should follow once we release concerning this behavior? I'm interested to know the extent of this breaking change and whether it warrants an extra note on the CHANGELOG.

SnailBones · 2021-07-28T15:39:37Z

Two breaking changes.

First as you mention, the lack of throwing errors on invalid popup class names.

Also, if a user has directly modified classList/className instead of using the popup functions, this change means that updates will reset classes added or removed in this way. The fix here would be ensuring that all modifications to the CSS class are performed with the three functions.

I think that both of these breaking changes should only affect very rare edge cases. The former could be an issue if an app allowed for custom popup CSS classes (I can't think of a good reason for that, but maybe there's a reason it was in the unit tests.) The latter is something that users shouldn't be doing, but I don't think we can say with certainty that they're not.

SnailBones · 2021-07-28T17:24:54Z

Just updated the changelog to:
Popup.addClassName, removeClassName and toggleClassName work while the popup is not on the map, and no longer throw DOM errors for invalid class names. Directly modifying the popup container CSS class no longer works, all edits should use these functions.

arindam1993

Nice cleanup @SnailBones.
Just one more suggestion, otherwise its a 🟢 from me!
I don't think this counts as a breaking change since it would be a bit weird if someone was actually relying on classnames getting lost.

rreusser

Looks great! Despite having pointed out a couple nits, this looks great, and I'd opt to merge as-is.

I think @arindam1993 is probably right that we're fine not considering this a breaking change. In some sense, literally any fix is breaking if people relied upon broken behavior, so it's probably safe to explain it clearly in the changelog but consider it really just a fix for something people may have been doing which would have had undefined results.

src/ui/popup.js

rreusser · 2021-08-02T20:09:45Z

src/ui/popup.js

+        if (this._trackPointer) {
+            classes.add('mapboxgl-popup-track-pointer');
+        }
+        this._container.className = [...classes].join(' ');


I think this could be rearranged to reduce a set allocation (spread to arrray, then .push optional classes, then join), but it's so far down in the list of memory usage, that I fully support the above 👍

rreusser · 2021-08-02T20:11:02Z

src/ui/popup.js

@@ -539,46 +582,22 @@ export default class Popup extends Evented {
            this._lngLat = smartWrap(this._lngLat, this._pos, this._map.transform);
        }

-        if (this._trackPointer && !cursor) return;
+        if (!this._trackPointer || cursor) {


Nit: Is there a reason for inverting the conditional? Early return can be nice to de-nest code when otherwise equivalent. Nothing blocking here for me though.

My thinking was to remove the early return allowing this. _updateClassList() to be called in any condition. I realize there's another call inside here, I'll double-check and see if I can remove that.

Yup it was redundant! (Oops) Fixed in latest commit.

rreusser · 2021-08-02T20:15:30Z

src/ui/popup.js

@@ -600,10 +619,9 @@ export default class Popup extends Evented {
 }

 function normalizeOffset(offset: ?Offset) {
-    if (!offset) {
-        return normalizeOffset(new Point(0, 0));


I believe I've seen this style, especially in the symbol code, where it runs modified values through a different branch of the same function, but TBH I find it slightly hard to follow, so that if otherwise equivalent, I prefer your change 👍

addClassName method can be called before the popup is on map

4bd9639

SnailBones added api 📝 bug 🐞 labels Jul 21, 2021

SnailBones linked an issue Jul 21, 2021 that may be closed by this pull request

popup addClassName has no effect before the popup is on the map #9677

Closed

SnailBones added 3 commits July 21, 2021 13:25

Added tests

4b98354

Updating incorrect examples

1e2f063

Added console.warn error messages for incorrect function use

c523598

SnailBones marked this pull request as ready for review July 21, 2021 20:38

Pin chrome to version 91 (#10887)

051be6b

* Pin to chrome version 91 * Pin chrome version for test-browser

rreusser suggested changes Jul 21, 2021

View reviewed changes

src/ui/popup.js Outdated Show resolved Hide resolved

src/ui/popup.js Outdated Show resolved Hide resolved

src/ui/popup.js Outdated Show resolved Hide resolved

src/ui/popup.js Show resolved Hide resolved

SnailBones and others added 3 commits July 21, 2021 15:19

Update src/ui/popup.js

646002a

Co-authored-by: Ricky Reusser <rreusser@users.noreply.github.com>

Fixed asterisks for jsdoc

bca4cfb

Removing else with early return

aba074b

SnailBones added the feature 🍏 label Jul 22, 2021

HeyStenson and others added 3 commits July 22, 2021 15:22

Updates to flyTo docs (#10890)

774d41e

* updates to flyto * no trailing spaces

Added _classList Set to Popup

f67bb87

Merge branch 'main' into aidan/popup-class-name

0c3349e

Merge with main

SnailBones commented Jul 22, 2021

View reviewed changes

src/ui/popup.js Outdated Show resolved Hide resolved

rreusser reviewed Jul 22, 2021

View reviewed changes

rreusser approved these changes Jul 22, 2021

View reviewed changes

arindam1993 reviewed Jul 22, 2021

View reviewed changes

src/ui/popup.js Outdated Show resolved Hide resolved

SnailBones added 2 commits July 22, 2021 16:52

Trim and split on any whitespace as Ricky suggested

da5268b

Update documentation for @returns

acfa889

SnailBones changed the title ~~Fix to popup addClassName has no effect before the popup is on the map~~ Allow edits to popup container class while the popup is not on the map Jul 22, 2021

SnailBones added 2 commits July 23, 2021 17:57

Refactored so that changes to the container are always performed by _…

5d7b61d

…updateClassList

Inlining function from anchor.js to marker.js

b9e20fa

SnailBones commented Jul 24, 2021

View reviewed changes

SnailBones added the breaking change ⚠️ Requires a backwards-incompatible change to the API label Jul 24, 2021

SnailBones requested review from rreusser and arindam1993 July 24, 2021 00:36

Typo fix

fd70ead

SnailBones added the refactoring 🏗️ label Jul 26, 2021

arindam1993 approved these changes Aug 2, 2021

View reviewed changes

rreusser approved these changes Aug 2, 2021

View reviewed changes

SnailBones added 2 commits August 2, 2021 15:10

Small changes from suggestions

aa89bc2

Merge branch 'main' into aidan/popup-class-name

3e0a353

SnailBones removed the breaking change ⚠️ Requires a backwards-incompatible change to the API label Aug 2, 2021

Aadding ;s to examples

745581b

SnailBones merged commit e0d6a56 into main Aug 2, 2021

SnailBones deleted the aidan/popup-class-name branch August 2, 2021 23:09

SnailBones added this to the v2.4.2 milestone Sep 9, 2021

SnailBones mentioned this pull request Sep 15, 2021

Changelog updated for v2.5.0-beta.1 #11022

Merged

10 tasks

joshuacrew mentioned this pull request Jan 14, 2022

Selecting a different Marker when a Marker already has it's Popup in view leads to a crash when using maplibre-gl 2.0.0-prerelease 6. visgl/react-map-gl#1685

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow edits to popup container class while the popup is not on the map #10889

Allow edits to popup container class while the popup is not on the map #10889

SnailBones commented Jul 21, 2021 •

edited

Loading

arindam1993 commented Jul 21, 2021 •

edited

Loading

karimnaaji commented Jul 21, 2021 •

edited

Loading

SnailBones commented Jul 21, 2021

rreusser left a comment

SnailBones commented Jul 21, 2021

rreusser commented Jul 21, 2021 •

edited

Loading

ryanhamley commented Jul 21, 2021

rreusser left a comment

rreusser Jul 22, 2021

SnailBones Jul 22, 2021 •

edited

Loading

rreusser Jul 22, 2021

SnailBones Jul 22, 2021

rreusser Jul 22, 2021

rreusser left a comment

SnailBones Jul 24, 2021

SnailBones Jul 24, 2021

rreusser Aug 2, 2021

karimnaaji commented Jul 28, 2021 •

edited

Loading

SnailBones commented Jul 28, 2021

SnailBones commented Jul 28, 2021

arindam1993 left a comment

rreusser left a comment

rreusser Aug 2, 2021

SnailBones Aug 2, 2021

rreusser Aug 2, 2021

SnailBones Aug 2, 2021 •

edited

Loading

SnailBones Aug 2, 2021

rreusser Aug 2, 2021


		t.throws(() => popup.addClassName(''), window.DOMException);

Allow edits to popup container class while the popup is not on the map #10889

Allow edits to popup container class while the popup is not on the map #10889

Conversation

SnailBones commented Jul 21, 2021 • edited Loading

Launch Checklist

arindam1993 commented Jul 21, 2021 • edited Loading

karimnaaji commented Jul 21, 2021 • edited Loading

SnailBones commented Jul 21, 2021

rreusser left a comment

Choose a reason for hiding this comment

SnailBones commented Jul 21, 2021

rreusser commented Jul 21, 2021 • edited Loading

ryanhamley commented Jul 21, 2021

rreusser left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SnailBones Jul 22, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rreusser left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

karimnaaji commented Jul 28, 2021 • edited Loading

SnailBones commented Jul 28, 2021

SnailBones commented Jul 28, 2021

arindam1993 left a comment

Choose a reason for hiding this comment

rreusser left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SnailBones Aug 2, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SnailBones commented Jul 21, 2021 •

edited

Loading

arindam1993 commented Jul 21, 2021 •

edited

Loading

karimnaaji commented Jul 21, 2021 •

edited

Loading

rreusser commented Jul 21, 2021 •

edited

Loading

SnailBones Jul 22, 2021 •

edited

Loading

karimnaaji commented Jul 28, 2021 •

edited

Loading

SnailBones Aug 2, 2021 •

edited

Loading