gerrit.onap Code Review - sdc/sdc-workflow-designer.git/blob

   1 /**
   2  * @license
   3  * Copyright Google Inc. All Rights Reserved.
   4  *
   5  * Use of this source code is governed by an MIT-style license that can be
   6  * found in the LICENSE file at https://angular.io/license
   7  */
   8 /* tslint:disable:array-type member-access variable-name typedef
   9  only-arrow-functions directive-class-suffix component-class-suffix
  10  component-selector*/
  11 import {Injectable} from '@angular/core';
  12 import {OverlayContainer} from './overlay-container';
  13
  14 /**
  15  * The FullscreenOverlayContainer is the alternative to OverlayContainer
  16  * that supports correct displaying of overlay elements in Fullscreen mode
  17  * https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen
  18  * It should be provided in the root component that way:
  19  * providers: [
  20  *   {provide: OverlayContainer, useClass: FullscreenOverlayContainer}
  21  * ],
  22  */
  23 @Injectable()
  24 export class FullscreenOverlayContainer extends OverlayContainer {
  25   protected _createContainer(): void {
  26         super._createContainer();
  27         this._adjustParentForFullscreenChange();
  28         this._addFullscreenChangeListener(
  29                 () => this._adjustParentForFullscreenChange());
  30   }
  31
  32   private _adjustParentForFullscreenChange(): void {
  33         if (!this._containerElement) {
  34                 return;
  35         }
  36         const fullscreenElement = this.getFullscreenElement();
  37         const parent = fullscreenElement || document.body;
  38         parent.appendChild(this._containerElement);
  39   }
  40
  41   private _addFullscreenChangeListener(fn: () => void) {
  42         if (document.fullscreenEnabled) {
  43                 document.addEventListener('fullscreenchange', fn);
  44         } else if (document.webkitFullscreenEnabled) {
  45                 document.addEventListener('webkitfullscreenchange', fn);
  46         } else if ((document as any).mozFullScreenEnabled) {
  47                 document.addEventListener('mozfullscreenchange', fn);
  48         } else if ((document as any).msFullscreenEnabled) {
  49                 document.addEventListener('MSFullscreenChange', fn);
  50         }
  51   }
  52
  53   /**
  54    * When the page is put into fullscreen mode, a specific element is specified.
  55    * Only that element and its children are visible when in fullscreen mode.
  56    */
  57   getFullscreenElement(): Element {
  58         return document.fullscreenElement || document.webkitFullscreenElement ||
  59                 (document as any).mozFullScreenElement ||
  60                 (document as any).msFullscreenElement || null;
  61   }
  62 }