Popups and Fullscreen Issue...

kapalczynski

I have a .net app that I am working from that has an inset map that allows users to identify features etc. The map is not that large so I created a new DIV and used the code below to populate the popup into this new DIV OUTSIDE the map view. This works Great...

BUT the problem arises as I have a FULLSCREEN button in this map... When the user clicks the full screen button the map fills the screen as it should.... BUT when I click a feature the popup does not show because I am full screen...

Looking for a solution...

Is there a way that I can make the map popup show again when the user is in full screen? Some sort of alert that when the users goes to full screen the identify no longer goes to the new DIV but pops up the map? And when its not in Fullscreen it shows up in the new DIV?
Can I track when the FULLSCREEN button is clicked and push the results to a popup in the map view and when the button is unchecked and it goes back to SMALLSCREEN that the data is pushed to the new DIV

Or some version of this? Or maybe some other way? Any help would be greatly appreciated.

<div class="mapStyle">
    <div id="permitView" class="mainapplicationMapStyle"></div>
    <div id="features-widget" class="calcite-match-height"></div>
</div>

                const featuresWidget = new Features({
                  container: "features-widget",
                  viewModel: {
                    // Add a custom action to the widget that will open a
                    // website when it's selected.
                    actions: [
                      {
                        type: "button",
                        title: "Visitation Highlights (2022)",
                        id: "more-info",
                        icon: "information-letter"
                      }
                    ],
                    view: view
                  }
                });

                // Open the Features widget with features fetched from
                // the view click event location.
                reactiveUtils.on(
                  () => view,
                  "click",
                  (event) => {
                    featuresWidget.open({
                      location: event.mapPoint,
                      fetchFeatures: true
                    });
                  }
                );

kapalczynski

Is there a way that I can determine when the button to fullscreen is clicked or activated? Maybe I can make the popup in the map active when its been clicked? And then push the popup to the DIV when its not active?

for starters write the console.log when its clicked and get its status?

kapalczynski

Im trying this but getting error

            // FullScreen Widget
            fullscreen = new Fullscreen({
                view: view
            });
            view.ui.add(fullscreen, "top-right");

            reactiveUtils.on(fullscreenWidget.viewModel, "state", (value) => {
                    if (value === "active") {
                    console.log("========================Entered Fullscreen mode");
                }
            })

kapalczynski

BUT I am at 4.29 and think I should be using watchUtils ???? Can I get the status of FULLSCREEN from watchUtils?

kapalczynski

Side issue I updated my 4.29 reference to 4.6 and get all these errors... thoughts?

kapalczynski

Any thoughts?