Full screen mode hides Dialogs

[JariHanah]

Describe the bug

When the user clicks on the Full screen mode on google maps, the CustomButtons that shows Dialogs stop showing the Dialogs.

1 I couldn't find a way to listen to this full screen event. 2 I couldn't find api to revert to non full screen mode to show dialog when button is clicked. 3 not sure if this was a Google issue, browser issue, or plugin issue.

Image shows the full screen button, with other buttons that could show a dialog.

Expected behavior

Expected/wish. 1 have the ability to switch screen modes programmatically. 2 OR give the user a hint that the dialog cannot be shown when in full screen mode, when he clicks the button. 3 or Dialog does show above map in full screen mode.

Minimal reproducible example

No response

Add-on Version

1.13.00

Vaadin Version

24.3

Additional information

No response

[paodb]

I've been looking into this issue, and it doesn't appear to be a bug at first glance. When Google Maps is in full screen mode, it makes its inner div occupy the entire screen, making everything outside of it not visible. You can find some explanations here & here.

To complicate matters further, a Vaadin dialog is an overlay, which means its behavior in full screen mode is uncertain.

One possible solution could be adding an API to toggle full screen mode, which might help with this use case. This post could be a useful starting point for that.

I will update the ticket if I find any solutions or workarounds.

[paodb]

Hi @JariHanah. I found a way to know if the map is showing in fullScreen mode and make it go back to not fullScreen if you want a custom control button to open a dialog. Here's my example:

@Route("test")
public class MyTestView extends VerticalLayout {

  private Boolean isFullScreen = false;

  public MyTestView() {
    this.setSizeFull();
    GoogleMap gmaps = new GoogleMap("YOUR_API_KEY", null, null);
    gmaps.setMapType(MapType.ROADMAP);
    gmaps.setSizeFull();
    add(gmaps);

    Button openDialogButton = new Button("Open Dialog", e -> {
      Dialog d = new Dialog(new Span("I'm a dialog"));
      d.setWidth("150px");
      d.setHeight("150px");
      if (isFullScreen) { // if full screen is on, close it so dialog can be visible
        this.closeFullScreen(gmaps);
      }
      d.open();
    });
    openDialogButton.getElement().getStyle().set("background", "white");
    openDialogButton.getElement().getStyle().set("color", "black");

    CustomControl customControl = new CustomControl(openDialogButton, ControlPosition.TOP_CENTER);
    gmaps.setCustomControls(customControl);

    // listen to fullscreenchange event to know if map is in full screen mode
    gmaps.getElement().addEventListener("fullscreenchange", e -> {
      gmaps.getElement()
          .executeJs(
              "var isFullScreen = document.fullScreen ||\r\n" 
                  + " document.mozFullScreen ||\r\n"
                  + " document.webkitIsFullScreen;\r\n" 
                  + " return isFullScreen;")
          .then(Boolean.class, this::setIsFullScreen);
    });
  }

  public Boolean getIsFullScreen() {
    return isFullScreen;
  }

  public void setIsFullScreen(Boolean isFullScreen) {
    this.isFullScreen = isFullScreen;
  }

  // close full screen mode
  private void closeFullScreen(GoogleMap map) {
    if (isFullScreen) {
      map.getElement().executeJs("document.exitFullScreen = true; document.exitFullscreen();");
    }
  }
}

We're still investigating and discussing what we should add in the component's API and what not so hope this helps to your use case at least for now.

[JariHanah]

Beautiful, it worked!

[paodb]

It was discussed on today's planning meeting and we will be adding to the API a way to know if the full screen is on and the possibility to close it programatically.

[paodb]

Hello @JariHanah we added to the component a listener addFullScreenListener to know if the map is being shown in full screen or not and a method to close it closeFullScreen if it is in that mode. With that, the previous example can be done like this:

private boolean isFullScreen = false;

public MyTestView() {
  this.setSizeFull();
  GoogleMap gmaps = new GoogleMap("YOUR_API_KEY", null, null);
  gmaps.setMapType(MapType.ROADMAP);
  gmaps.setSizeFull();
  add(gmaps);

  Button openDialogButton = new Button("Open Dialog", e -> {
      Dialog d = new Dialog(new Span("I'm a dialog"));
      d.setWidth("150px");
      d.setHeight("150px");
      if (isFullScreen) { 
         // if full screen is on, close it so dialog can be visible
         gmaps.closeFullScreen();
      }
      d.open();
  });
  openDialogButton.getElement().getStyle().set("background", "white");
  openDialogButton.getElement().getStyle().set("color", "black");

  CustomControl customControl = new CustomControl(openDialogButton, ControlPosition.TOP_CENTER);
  gmaps.setCustomControls(customControl);

  // add listener to know if full screen mode is on 
  gmaps.addFullScreenListener(e -> this.isFullScreen = e.isFullScreen());
}

This should be expected in version 2.0.0 that was not release yet. But we will inform you when is out.

[paodb]

The updates mentioned in the previous comment are now part of new released version 2.0.0.