Select to view content in your preferred language

Enhanced FullScreen Widget, v1.1

1259
1
10-21-2019 07:09 PM

Enhanced FullScreen Widget, v1.1

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.

Attachments
Comments
VickyWang
Esri Contributor

Hi Shay Lavi‌, 

this is nice. 

Version history
Last update:
‎12-12-2021 03:43 AM
Updated by: