Enhanced FullScreen Widget, v1.1

1 Kudo

Hello,

I made a few (simple) adjustments to the full-screen widget that now allows the user to have a complete full-screen and map-focused experience, by hiding all* widgets.

The screen will be cleaned of all buttons, which includes the search bar, widgets icons, scale-bar, coordinates, etc.. until the user exits from full-screen mode.
The widget hides open widgets as given in a list - currently configured through the code itself (widget.js), as a parameter named "supportedWidgets". It's an array that holds the keywords of the widget name to be closed. I'll consider extracting this setting to a configuration screen with enough demand.
Open widgets that are not configured in the list will remain on-screen.
The header of the map will not be hidden.
The full-screen widget icon will remain on-screen with lower opacity, located at the top left corner, to allow the user to exit full-screen mode. Once the user exists full-screen, the icon will return to its original location with full opacity.

Before -

After -

Deployment:

1. Add the default full-screen widget to your Web AppBuilder application and save.

2. Overwrite the fullscreen folder with the custom code provided.

Bonus feature - Attaching the widget to the F11 key:

Open MapManager.js under the jimu.js folder on the application.

Add the following code inside the "_publishMapEvent" function -

        on(
          window,
          'keydown',
          (e) => {
            if (e.key === "F11") {
              var fs = WidgetManager.getInstance().getWidgetsByName('FullScreen');
              if (fs.length > 0) {
                fs = fs[0];
                fs._onFullScreenClick();
              }
            }
          }
        );‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Happy to receive feedbacks. Quite simple, but hopefully some people will find it usefull.

Cheers,

Shay.

VickyWang · ‎02-23-2020

Hi Shay Lavi‌,

this is nice.