fix(overlay): make overlay work in fullscreen mode

[quanterion]

This allows all overlay-based components like dialog, menu, tooltip etc work in full screen mode https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen

Implementation moves overlay container into fullscreen element and back to document.body as user navigates between fullscreen and non-fullscreen modes. Apps not using fullscreen mode are unaffected.

fixes #1628

PS: I added Fullscreen button near to RTL one to test fix across all components
PPS: I have no idea about tests for this fix, any advice?

[quanterion]

@jelbourn can you review my PR? It would be great to have this fix in next release.

[jelbourn]

@quanterion working my way here- I need to set aside a chunk of time to look at the issue.

[jelbourn]

Thanks for your patience on this one. I took a look at the issue and think a cleaner approach would be to introduce a new type of OverlayContainer that handles the fullscreen parts. It would look something like this:

@Injectable()
export class FullscreenFriendlyOverlayContainer extends OverlayContainer {
  protected _createContainer(): void {
    super._createContainer();

    this._addFullscreenChangeListener(() => this._adjustParentForFullscreenChange());
  }

  private _adjustParentForFullscreenChange(): void {
    if (!this._containerElement) {
      return;
    }

    let fullscreenElement = this._getFullscreenElement();
    let parent = fullscreenElement || document.body;
    parent.appendChild(this._containerElement);
  }

  private _addFullscreenChangeListener(fn: () => void) {
    if (document.fullscreenEnabled) {
      document.addEventListener('fullscreenchange', fn);
    } else if (document.webkitFullscreenEnabled) {
      document.addEventListener('webkitfullscreenchange', fn);
    } else if ((document as any).mozFullScreenEnabled) {
      document.addEventListener('mozfullscreenchange', fn);
    } else if ((document as any).msFullscreenEnabled) {
      document.addEventListener('MSFullscreenChange', fn);
    }
  }

  private _getFullscreenElement(): Element {
    return document.fullscreenElement ||
        document.webkitFullscreenElement ||
        (document as any).mozFullScreenElement ||
        (document as any).msFullscreenElement ||
        null;
  }
}

To use this container instead of the default, you would add a new provider to your app:

providers: [
  {provide: OverlayContainer, useClass: FullscreenFriendlyOverlayContainer},
]

Doing it this way has a couple of advantages:

• All of the code dealing with fullscreen is encapsulated within a single class.
• If an app isn't using FullscreenFriendlyOverlayContainer, the code can be completely dropped by optimizers like Closure Compiler and rollup. This is good, since most apps don't need to deal with fullscreen.

Would you be willing up update your PR to use this approach and add the appropriate tests / comments / docs?

[quanterion]

@jelbourn implemented it in a new PR #1949, please close this

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}