feat(overlay): Uses the fullscreenoverlaycontainer now to properly ha…

…ndle fullscreen mode.

libs/barista-components/overlay/README.md

@@ -101,7 +101,15 @@ the following properties:
 | -------------------- | ---------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `pinnable`           | `boolean`        | `-`      | enables pinning of the overlay on click or by keyboard when the trigger is focused.                                                                                                                                                                 |
 | `originY`            | `center | edge`  | `center` | The originY defines the vertical attachment point for the overlay. By default `center` is set. `edge` defines that the vertical attachment point is set to the bottom edge if the overlay fits below the origin element and the top edge otherwise. |
-| `movementConstraint` |  `xAxis | yAxis` | -        | The movementConstraint locks the movement of the overlay to a given axis. No constraint is set by default.                                                                                                                                          |
+| `movementConstraint` |  `xAxis | yAxis` | -        | The movementConstraint locks the movement of the overlay to a given axis. No constraint is set by default.                                                                                                                                          |
+
+## Fullscreen support
+
+The Overlay component uses Angular CDK's `FullscreenOverlayContainer` in order
+to supports correct displaying of overlays in DOM elements in fullscreen mode.
+[Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen)
+
+<ba-live-example name="DtExampleOverlayFullscreen"></ba-live-example> |
 
 ## Overlays in use
 

libs/barista-components/overlay/src/overlay-module.ts

@@ -15,7 +15,11 @@
  */
 
 import { A11yModule } from '@angular/cdk/a11y';
-import { OverlayModule } from '@angular/cdk/overlay';
+import {
+  OverlayModule,
+  OverlayContainer,
+  FullscreenOverlayContainer,
+} from '@angular/cdk/overlay';
 import { PortalModule } from '@angular/cdk/portal';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
@@ -40,5 +44,8 @@ const EXPORTED_DECLARATIONS = [DtOverlayContainer, DtOverlayTrigger];
   exports: [...EXPORTED_DECLARATIONS],
   declarations: [...EXPORTED_DECLARATIONS],
   entryComponents: [DtOverlayContainer],
+  providers: [
+    { provide: OverlayContainer, useClass: FullscreenOverlayContainer },
+  ],
 })
 export class DtOverlayModule {}

libs/examples/src/overlay/index.ts

@@ -18,6 +18,7 @@ export * from './overlay-complex-content-example/overlay-complex-content-example
 export * from './overlay-default-example/overlay-default-example';
 export * from './overlay-example-dummy-component';
 export * from './overlay-examples.module';
+export * from './overlay-fullscreen-example/overlay-fullscreen-example';
 export * from './overlay-implicit-context-example/overlay-implicit-context-example';
 export * from './overlay-programmatic-example/overlay-programmatic-example';
 export * from './overlay-tile-example/overlay-tile-example';

libs/examples/src/overlay/overlay-examples.module.ts

@@ -22,6 +22,7 @@ import { DtIconModule } from '@dynatrace/barista-components/icon';
 import { DtTileModule } from '@dynatrace/barista-components/tile';
 import { DtExampleOverlayComplexContent } from './overlay-complex-content-example/overlay-complex-content-example';
 import { DtExampleOverlayDefault } from './overlay-default-example/overlay-default-example';
+import { DtExampleOverlayFullscreen } from './overlay-fullscreen-example/overlay-fullscreen-example';
 import { DtExampleOverlayImplicitContext } from './overlay-implicit-context-example/overlay-implicit-context-example';
 import { DtExampleOverlayProgrammatic } from './overlay-programmatic-example/overlay-programmatic-example';
 import { DtExampleOverlayTile } from './overlay-tile-example/overlay-tile-example';
@@ -30,6 +31,7 @@ import { DtExampleOverlayProgrammaticDummy } from './overlay-example-dummy-compo
 export const DT_OVERLAY_EXAMPLES = [
   DtExampleOverlayComplexContent,
   DtExampleOverlayDefault,
+  DtExampleOverlayFullscreen,
   DtExampleOverlayImplicitContext,
   DtExampleOverlayProgrammatic,
   DtExampleOverlayTile,

libs/examples/src/overlay/overlay-fullscreen-example/overlay-fullscreen-example.html

@@ -0,0 +1,13 @@
+<div #container class="span-container">
+  <span
+    [dtOverlay]="overlay"
+    style="cursor: pointer;"
+    [dtOverlayConfig]="config"
+  >
+    Hover me
+  </span>
+</div>
+<button (click)="requestFullscreen()">Test Fullscreen</button>
+<ng-template #overlay>
+  <p>Overlay content</p>
+</ng-template>

libs/examples/src/overlay/overlay-fullscreen-example/overlay-fullscreen-example.scss

@@ -0,0 +1,4 @@
+.span-container {
+  background: #ffffff;
+  width: 100%;
+}

libs/examples/src/overlay/overlay-fullscreen-example/overlay-fullscreen-example.ts

@@ -0,0 +1,55 @@
+/**
+ * @license
+ * Copyright 2020 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, ViewChild, ElementRef, Inject } from '@angular/core';
+
+import { DtOverlayConfig } from '@dynatrace/barista-components/overlay';
+import { DOCUMENT } from '@angular/common';
+
+@Component({
+  selector: 'dt-example-overlay-fullscreen',
+  templateUrl: 'overlay-fullscreen-example.html',
+  styleUrls: ['./overlay-fullscreen-example.scss'],
+})
+export class DtExampleOverlayFullscreen {
+  config: DtOverlayConfig = {
+    pinnable: true,
+    originY: 'center',
+  };
+
+  @ViewChild('container', { static: true }) container: ElementRef;
+
+  constructor(@Inject(DOCUMENT) private readonly document: Document) {}
+
+  async requestFullscreen(): Promise<void> {
+    try {
+      const element = this.container.nativeElement;
+      const _document = this.document as any;
+
+      if (_document.fullscreenEnabled) {
+        await element.requestFullscreen();
+      } else if (_document.webkitFullscreenEnabled) {
+        await element.webkitRequestFullscreen();
+      } else if (_document.mozFullScreenEnabled) {
+        await element.mozRequestFullScreen();
+      } else if (_document.msFullscreenEnabled) {
+        await element.msRequestFullScreen();
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+}