From d295c60fd812df22794ce0adce69595fbd069360 Mon Sep 17 00:00:00 2001 From: Juan Diego Bernal Date: Wed, 1 Apr 2020 16:35:55 +0200 Subject: [PATCH] feat(overlay): Uses the fullscreenoverlaycontainer now to properly handle fullscreen mode. --- libs/barista-components/overlay/README.md | 10 +++- .../overlay/src/overlay-module.ts | 9 ++- libs/examples/src/overlay/index.ts | 1 + .../src/overlay/overlay-examples.module.ts | 2 + .../overlay-fullscreen-example.html | 13 +++++ .../overlay-fullscreen-example.scss | 4 ++ .../overlay-fullscreen-example.ts | 55 +++++++++++++++++++ 7 files changed, 92 insertions(+), 2 deletions(-) create mode 100644 libs/examples/src/overlay/overlay-fullscreen-example/overlay-fullscreen-example.html create mode 100644 libs/examples/src/overlay/overlay-fullscreen-example/overlay-fullscreen-example.scss create mode 100644 libs/examples/src/overlay/overlay-fullscreen-example/overlay-fullscreen-example.ts diff --git a/libs/barista-components/overlay/README.md b/libs/barista-components/overlay/README.md index 7581964bd9..82f7c8bfb5 100644 --- a/libs/barista-components/overlay/README.md +++ b/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) + + | ## Overlays in use diff --git a/libs/barista-components/overlay/src/overlay-module.ts b/libs/barista-components/overlay/src/overlay-module.ts index 96b22ef31d..5d82dfbea9 100644 --- a/libs/barista-components/overlay/src/overlay-module.ts +++ b/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 {} diff --git a/libs/examples/src/overlay/index.ts b/libs/examples/src/overlay/index.ts index ec9d2a7cd1..c2b6a375b1 100644 --- a/libs/examples/src/overlay/index.ts +++ b/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'; diff --git a/libs/examples/src/overlay/overlay-examples.module.ts b/libs/examples/src/overlay/overlay-examples.module.ts index 1a04c02095..9e9bea9ac5 100644 --- a/libs/examples/src/overlay/overlay-examples.module.ts +++ b/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, diff --git a/libs/examples/src/overlay/overlay-fullscreen-example/overlay-fullscreen-example.html b/libs/examples/src/overlay/overlay-fullscreen-example/overlay-fullscreen-example.html new file mode 100644 index 0000000000..ea2d1a14f8 --- /dev/null +++ b/libs/examples/src/overlay/overlay-fullscreen-example/overlay-fullscreen-example.html @@ -0,0 +1,13 @@ +
+ + Hover me + +
+ + +

Overlay content

+ diff --git a/libs/examples/src/overlay/overlay-fullscreen-example/overlay-fullscreen-example.scss b/libs/examples/src/overlay/overlay-fullscreen-example/overlay-fullscreen-example.scss new file mode 100644 index 0000000000..16170cd14b --- /dev/null +++ b/libs/examples/src/overlay/overlay-fullscreen-example/overlay-fullscreen-example.scss @@ -0,0 +1,4 @@ +.span-container { + background: #ffffff; + width: 100%; +} diff --git a/libs/examples/src/overlay/overlay-fullscreen-example/overlay-fullscreen-example.ts b/libs/examples/src/overlay/overlay-fullscreen-example/overlay-fullscreen-example.ts new file mode 100644 index 0000000000..361b8b5eb9 --- /dev/null +++ b/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 { + 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); + } + } +}