1 files changed, 62 insertions, 0 deletions
diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/overlay/fullscreen-overlay-container.ts b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/fullscreen-overlay-container.ts
new file mode 100644
index 00000000..0eca202d
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/fullscreen-overlay-container.ts
@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+/* tslint:disable:array-type member-access variable-name typedef
+ only-arrow-functions directive-class-suffix component-class-suffix
+ component-selector*/
+import {Injectable} from '@angular/core';
+import {OverlayContainer} from './overlay-container';
+
+/**
+ * The FullscreenOverlayContainer is the alternative to OverlayContainer
+ * that supports correct displaying of overlay elements in Fullscreen mode
+ * https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen
+ * It should be provided in the root component that way:
+ * providers: [
+ *   {provide: OverlayContainer, useClass: FullscreenOverlayContainer}
+ * ],
+ */
+@Injectable()
+export class FullscreenOverlayContainer extends OverlayContainer {
+  protected _createContainer(): void {
+	super._createContainer();
+	this._adjustParentForFullscreenChange();
+	this._addFullscreenChangeListener(
+		() => this._adjustParentForFullscreenChange());
+  }
+
+  private _adjustParentForFullscreenChange(): void {
+	if (!this._containerElement) {
+		return;
+	}
+	const fullscreenElement = this.getFullscreenElement();
+	const 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);
+	}
+  }
+
+  /**
+   * When the page is put into fullscreen mode, a specific element is specified.
+   * Only that element and its children are visible when in fullscreen mode.
+   */
+  getFullscreenElement(): Element {
+	return document.fullscreenElement || document.webkitFullscreenElement ||
+		(document as any).mozFullScreenElement ||
+		(document as any).msFullscreenElement || null;
+  }
+}