diff --git a/src/@fuse/components/fullscreen/fullscreen.component.html b/src/@fuse/components/fullscreen/fullscreen.component.html new file mode 100644 index 00000000..1dfb3e59 --- /dev/null +++ b/src/@fuse/components/fullscreen/fullscreen.component.html @@ -0,0 +1,7 @@ + + diff --git a/src/@fuse/components/fullscreen/fullscreen.component.ts b/src/@fuse/components/fullscreen/fullscreen.component.ts new file mode 100644 index 00000000..ff32aa36 --- /dev/null +++ b/src/@fuse/components/fullscreen/fullscreen.component.ts @@ -0,0 +1,164 @@ +import { ChangeDetectionStrategy, Component, Inject, OnInit, ViewEncapsulation } from '@angular/core'; +import { DOCUMENT } from '@angular/common'; +import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fullscreen.types'; + +@Component({ + selector : 'fuse-fullscreen', + templateUrl : './fullscreen.component.html', + encapsulation : ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + exportAs : 'fuseFullscreen' +}) +export class FuseFullscreenComponent implements OnInit +{ + private _fsDoc: FSDocument; + private _fsDocEl: FSDocumentElement; + private _isFullscreen: boolean = false; + + /** + * Constructor + */ + constructor(@Inject(DOCUMENT) private _document: Document) + { + this._fsDoc = _document as FSDocument; + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + this._fsDocEl = document.documentElement as FSDocumentElement; + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Toggle the fullscreen mode + */ + toggleFullscreen(): void + { + // Check if the fullscreen is open + this._isFullscreen = this._getBrowserFullscreenElement() !== null; + + // Toggle the fullscreen + if ( this._isFullscreen ) + { + this._closeFullscreen(); + } + else + { + this._openFullscreen(); + } + } + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Get browser's fullscreen element + * + * @private + */ + private _getBrowserFullscreenElement(): Element + { + if ( typeof this._fsDoc.fullscreenElement !== 'undefined' ) + { + return this._fsDoc.fullscreenElement; + } + + if ( typeof this._fsDoc.mozFullScreenElement !== 'undefined' ) + { + return this._fsDoc.mozFullScreenElement; + } + + if ( typeof this._fsDoc.msFullscreenElement !== 'undefined' ) + { + return this._fsDoc.msFullscreenElement; + } + + if ( typeof this._fsDoc.webkitFullscreenElement !== 'undefined' ) + { + return this._fsDoc.webkitFullscreenElement; + } + + throw new Error('Fullscreen mode is not supported by this browser'); + } + + /** + * Open the fullscreen + * + * @private + */ + private _openFullscreen(): void + { + if ( this._fsDocEl.requestFullscreen ) + { + this._fsDocEl.requestFullscreen(); + return; + } + + // Firefox + if ( this._fsDocEl.mozRequestFullScreen ) + { + this._fsDocEl.mozRequestFullScreen(); + return; + } + + // Chrome, Safari and Opera + if ( this._fsDocEl.webkitRequestFullscreen ) + { + this._fsDocEl.webkitRequestFullscreen(); + return; + } + + // IE/Edge + if ( this._fsDocEl.msRequestFullscreen ) + { + this._fsDocEl.msRequestFullscreen(); + return; + } + } + + /** + * Close the fullscreen + * + * @private + */ + private _closeFullscreen(): void + { + if ( this._fsDoc.exitFullscreen ) + { + this._fsDoc.exitFullscreen(); + return; + } + + // Firefox + if ( this._fsDoc.mozCancelFullScreen ) + { + this._fsDoc.mozCancelFullScreen(); + return; + } + + // Chrome, Safari and Opera + if ( this._fsDoc.webkitExitFullscreen ) + { + this._fsDoc.webkitExitFullscreen(); + return; + } + + // IE/Edge + else if ( this._fsDoc.msExitFullscreen ) + { + this._fsDoc.msExitFullscreen(); + return; + } + } +} diff --git a/src/@fuse/components/fullscreen/fullscreen.module.ts b/src/@fuse/components/fullscreen/fullscreen.module.ts new file mode 100644 index 00000000..925dabc9 --- /dev/null +++ b/src/@fuse/components/fullscreen/fullscreen.module.ts @@ -0,0 +1,22 @@ +import { NgModule } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; +import { MatIconModule } from '@angular/material/icon'; +import { MatTooltipModule } from '@angular/material/tooltip'; +import { FuseFullscreenComponent } from '@fuse/components/fullscreen/fullscreen.component'; + +@NgModule({ + declarations: [ + FuseFullscreenComponent + ], + imports : [ + MatButtonModule, + MatIconModule, + MatTooltipModule + ], + exports : [ + FuseFullscreenComponent + ] +}) +export class FuseFullscreenModule +{ +} diff --git a/src/@fuse/components/fullscreen/fullscreen.types.ts b/src/@fuse/components/fullscreen/fullscreen.types.ts new file mode 100644 index 00000000..0477a1d4 --- /dev/null +++ b/src/@fuse/components/fullscreen/fullscreen.types.ts @@ -0,0 +1,16 @@ +export interface FSDocument extends HTMLDocument +{ + mozFullScreenElement?: Element; + mozCancelFullScreen?: () => void; + msFullscreenElement?: Element; + msExitFullscreen?: () => void; + webkitFullscreenElement?: Element; + webkitExitFullscreen?: () => void; +} + +export interface FSDocumentElement extends HTMLElement +{ + mozRequestFullScreen?: () => void; + msRequestFullscreen?: () => void; + webkitRequestFullscreen?: () => void; +} diff --git a/src/@fuse/components/fullscreen/index.ts b/src/@fuse/components/fullscreen/index.ts new file mode 100644 index 00000000..15b41faf --- /dev/null +++ b/src/@fuse/components/fullscreen/index.ts @@ -0,0 +1 @@ +export * from '@fuse/components/fullscreen/public-api'; diff --git a/src/@fuse/components/fullscreen/public-api.ts b/src/@fuse/components/fullscreen/public-api.ts new file mode 100644 index 00000000..e6264e3c --- /dev/null +++ b/src/@fuse/components/fullscreen/public-api.ts @@ -0,0 +1,3 @@ +export * from '@fuse/components/fullscreen/fullscreen.component'; +export * from '@fuse/components/fullscreen/fullscreen.module'; +export * from '@fuse/components/fullscreen/fullscreen.types'; diff --git a/src/app/layout/layouts/horizontal/centered/centered.component.html b/src/app/layout/layouts/horizontal/centered/centered.component.html index 0b909060..87f3b332 100644 --- a/src/app/layout/layouts/horizontal/centered/centered.component.html +++ b/src/app/layout/layouts/horizontal/centered/centered.component.html @@ -63,6 +63,7 @@