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 @@
+ diff --git a/src/app/layout/layouts/horizontal/centered/centered.module.ts b/src/app/layout/layouts/horizontal/centered/centered.module.ts index 3b0130b2..450eda48 100644 --- a/src/app/layout/layouts/horizontal/centered/centered.module.ts +++ b/src/app/layout/layouts/horizontal/centered/centered.module.ts @@ -5,6 +5,7 @@ import { MatButtonModule } from '@angular/material/button'; import { MatDividerModule } from '@angular/material/divider'; import { MatIconModule } from '@angular/material/icon'; import { MatMenuModule } from '@angular/material/menu'; +import { FuseFullscreenModule } from '@fuse/components/fullscreen'; import { FuseNavigationModule } from '@fuse/components/navigation'; import { MessagesModule } from 'app/layout/common/messages/messages.module'; import { NotificationsModule } from 'app/layout/common/notifications/notifications.module'; @@ -25,6 +26,7 @@ import { CenteredLayoutComponent } from 'app/layout/layouts/horizontal/centered/ MatDividerModule, MatIconModule, MatMenuModule, + FuseFullscreenModule, FuseNavigationModule, MessagesModule, NotificationsModule, diff --git a/src/app/layout/layouts/horizontal/enterprise/enterprise.component.html b/src/app/layout/layouts/horizontal/enterprise/enterprise.component.html index fcc99e67..fac87df3 100644 --- a/src/app/layout/layouts/horizontal/enterprise/enterprise.component.html +++ b/src/app/layout/layouts/horizontal/enterprise/enterprise.component.html @@ -46,6 +46,7 @@
+ diff --git a/src/app/layout/layouts/horizontal/enterprise/enterprise.module.ts b/src/app/layout/layouts/horizontal/enterprise/enterprise.module.ts index f3897da1..4fe29e6c 100644 --- a/src/app/layout/layouts/horizontal/enterprise/enterprise.module.ts +++ b/src/app/layout/layouts/horizontal/enterprise/enterprise.module.ts @@ -5,6 +5,7 @@ import { MatButtonModule } from '@angular/material/button'; import { MatDividerModule } from '@angular/material/divider'; import { MatIconModule } from '@angular/material/icon'; import { MatMenuModule } from '@angular/material/menu'; +import { FuseFullscreenModule } from '@fuse/components/fullscreen'; import { FuseNavigationModule } from '@fuse/components/navigation'; import { MessagesModule } from 'app/layout/common/messages/messages.module'; import { NotificationsModule } from 'app/layout/common/notifications/notifications.module'; @@ -25,6 +26,7 @@ import { EnterpriseLayoutComponent } from 'app/layout/layouts/horizontal/enterpr MatDividerModule, MatIconModule, MatMenuModule, + FuseFullscreenModule, FuseNavigationModule, MessagesModule, NotificationsModule, diff --git a/src/app/layout/layouts/horizontal/material/material.component.html b/src/app/layout/layouts/horizontal/material/material.component.html index c6e8ca7f..6e385702 100644 --- a/src/app/layout/layouts/horizontal/material/material.component.html +++ b/src/app/layout/layouts/horizontal/material/material.component.html @@ -52,6 +52,7 @@
+ diff --git a/src/app/layout/layouts/horizontal/material/material.module.ts b/src/app/layout/layouts/horizontal/material/material.module.ts index f2060f55..1a2de438 100644 --- a/src/app/layout/layouts/horizontal/material/material.module.ts +++ b/src/app/layout/layouts/horizontal/material/material.module.ts @@ -5,6 +5,7 @@ import { MatButtonModule } from '@angular/material/button'; import { MatDividerModule } from '@angular/material/divider'; import { MatIconModule } from '@angular/material/icon'; import { MatMenuModule } from '@angular/material/menu'; +import { FuseFullscreenModule } from '@fuse/components/fullscreen'; import { FuseNavigationModule } from '@fuse/components/navigation'; import { MessagesModule } from 'app/layout/common/messages/messages.module'; import { NotificationsModule } from 'app/layout/common/notifications/notifications.module'; @@ -25,6 +26,7 @@ import { MaterialLayoutComponent } from 'app/layout/layouts/horizontal/material/ MatDividerModule, MatIconModule, MatMenuModule, + FuseFullscreenModule, FuseNavigationModule, MessagesModule, NotificationsModule, diff --git a/src/app/layout/layouts/horizontal/modern/modern.component.html b/src/app/layout/layouts/horizontal/modern/modern.component.html index 7d27029b..502e0179 100644 --- a/src/app/layout/layouts/horizontal/modern/modern.component.html +++ b/src/app/layout/layouts/horizontal/modern/modern.component.html @@ -55,6 +55,7 @@
+ diff --git a/src/app/layout/layouts/horizontal/modern/modern.module.ts b/src/app/layout/layouts/horizontal/modern/modern.module.ts index 1beb0fb3..9e8a88a6 100644 --- a/src/app/layout/layouts/horizontal/modern/modern.module.ts +++ b/src/app/layout/layouts/horizontal/modern/modern.module.ts @@ -5,6 +5,7 @@ import { MatButtonModule } from '@angular/material/button'; import { MatDividerModule } from '@angular/material/divider'; import { MatIconModule } from '@angular/material/icon'; import { MatMenuModule } from '@angular/material/menu'; +import { FuseFullscreenModule } from '@fuse/components/fullscreen'; import { FuseNavigationModule } from '@fuse/components/navigation'; import { MessagesModule } from 'app/layout/common/messages/messages.module'; import { NotificationsModule } from 'app/layout/common/notifications/notifications.module'; @@ -25,6 +26,7 @@ import { ModernLayoutComponent } from 'app/layout/layouts/horizontal/modern/mode MatDividerModule, MatIconModule, MatMenuModule, + FuseFullscreenModule, FuseNavigationModule, MessagesModule, NotificationsModule, diff --git a/src/app/layout/layouts/vertical/classic/classic.component.html b/src/app/layout/layouts/vertical/classic/classic.component.html index 274bd165..5eaf76da 100644 --- a/src/app/layout/layouts/vertical/classic/classic.component.html +++ b/src/app/layout/layouts/vertical/classic/classic.component.html @@ -36,6 +36,7 @@
+ diff --git a/src/app/layout/layouts/vertical/classic/classic.module.ts b/src/app/layout/layouts/vertical/classic/classic.module.ts index e9ae97c0..764838e0 100644 --- a/src/app/layout/layouts/vertical/classic/classic.module.ts +++ b/src/app/layout/layouts/vertical/classic/classic.module.ts @@ -5,6 +5,7 @@ import { MatButtonModule } from '@angular/material/button'; import { MatDividerModule } from '@angular/material/divider'; import { MatIconModule } from '@angular/material/icon'; import { MatMenuModule } from '@angular/material/menu'; +import { FuseFullscreenModule } from '@fuse/components/fullscreen'; import { FuseNavigationModule } from '@fuse/components/navigation'; import { MessagesModule } from 'app/layout/common/messages/messages.module'; import { NotificationsModule } from 'app/layout/common/notifications/notifications.module'; @@ -25,6 +26,7 @@ import { ClassicLayoutComponent } from 'app/layout/layouts/vertical/classic/clas MatDividerModule, MatIconModule, MatMenuModule, + FuseFullscreenModule, FuseNavigationModule, MessagesModule, NotificationsModule, diff --git a/src/app/layout/layouts/vertical/classy/classy.component.html b/src/app/layout/layouts/vertical/classy/classy.component.html index a052742d..d64cee03 100644 --- a/src/app/layout/layouts/vertical/classy/classy.component.html +++ b/src/app/layout/layouts/vertical/classy/classy.component.html @@ -66,6 +66,7 @@
+ diff --git a/src/app/layout/layouts/vertical/classy/classy.module.ts b/src/app/layout/layouts/vertical/classy/classy.module.ts index aa980b28..bde2c852 100644 --- a/src/app/layout/layouts/vertical/classy/classy.module.ts +++ b/src/app/layout/layouts/vertical/classy/classy.module.ts @@ -6,6 +6,7 @@ import { MatDividerModule } from '@angular/material/divider'; import { MatIconModule } from '@angular/material/icon'; import { MatMenuModule } from '@angular/material/menu'; import { FuseNavigationModule } from '@fuse/components/navigation'; +import { FuseFullscreenModule } from '@fuse/components/fullscreen/fullscreen.module'; import { MessagesModule } from 'app/layout/common/messages/messages.module'; import { NotificationsModule } from 'app/layout/common/notifications/notifications.module'; import { SearchModule } from 'app/layout/common/search/search.module'; @@ -25,6 +26,7 @@ import { ClassyLayoutComponent } from 'app/layout/layouts/vertical/classy/classy MatDividerModule, MatIconModule, MatMenuModule, + FuseFullscreenModule, FuseNavigationModule, MessagesModule, NotificationsModule, diff --git a/src/app/layout/layouts/vertical/compact/compact.component.html b/src/app/layout/layouts/vertical/compact/compact.component.html index edc293da..a47272a0 100644 --- a/src/app/layout/layouts/vertical/compact/compact.component.html +++ b/src/app/layout/layouts/vertical/compact/compact.component.html @@ -31,6 +31,7 @@
+ diff --git a/src/app/layout/layouts/vertical/compact/compact.module.ts b/src/app/layout/layouts/vertical/compact/compact.module.ts index 65b4b06c..873a4d15 100644 --- a/src/app/layout/layouts/vertical/compact/compact.module.ts +++ b/src/app/layout/layouts/vertical/compact/compact.module.ts @@ -5,6 +5,7 @@ import { MatButtonModule } from '@angular/material/button'; import { MatDividerModule } from '@angular/material/divider'; import { MatIconModule } from '@angular/material/icon'; import { MatMenuModule } from '@angular/material/menu'; +import { FuseFullscreenModule } from '@fuse/components/fullscreen'; import { FuseNavigationModule } from '@fuse/components/navigation'; import { MessagesModule } from 'app/layout/common/messages/messages.module'; import { NotificationsModule } from 'app/layout/common/notifications/notifications.module'; @@ -25,6 +26,7 @@ import { CompactLayoutComponent } from 'app/layout/layouts/vertical/compact/comp MatDividerModule, MatIconModule, MatMenuModule, + FuseFullscreenModule, FuseNavigationModule, MessagesModule, NotificationsModule, diff --git a/src/app/layout/layouts/vertical/dense/dense.component.html b/src/app/layout/layouts/vertical/dense/dense.component.html index 6124b399..10e3bcd6 100644 --- a/src/app/layout/layouts/vertical/dense/dense.component.html +++ b/src/app/layout/layouts/vertical/dense/dense.component.html @@ -40,6 +40,7 @@
+ diff --git a/src/app/layout/layouts/vertical/dense/dense.module.ts b/src/app/layout/layouts/vertical/dense/dense.module.ts index 122a3f47..2d3e9f03 100644 --- a/src/app/layout/layouts/vertical/dense/dense.module.ts +++ b/src/app/layout/layouts/vertical/dense/dense.module.ts @@ -5,6 +5,7 @@ import { MatButtonModule } from '@angular/material/button'; import { MatDividerModule } from '@angular/material/divider'; import { MatIconModule } from '@angular/material/icon'; import { MatMenuModule } from '@angular/material/menu'; +import { FuseFullscreenModule } from '@fuse/components/fullscreen'; import { FuseNavigationModule } from '@fuse/components/navigation'; import { MessagesModule } from 'app/layout/common/messages/messages.module'; import { NotificationsModule } from 'app/layout/common/notifications/notifications.module'; @@ -25,6 +26,7 @@ import { DenseLayoutComponent } from 'app/layout/layouts/vertical/dense/dense.co MatDividerModule, MatIconModule, MatMenuModule, + FuseFullscreenModule, FuseNavigationModule, MessagesModule, NotificationsModule, diff --git a/src/app/layout/layouts/vertical/futuristic/futuristic.component.html b/src/app/layout/layouts/vertical/futuristic/futuristic.component.html index c1373ded..59608b1a 100644 --- a/src/app/layout/layouts/vertical/futuristic/futuristic.component.html +++ b/src/app/layout/layouts/vertical/futuristic/futuristic.component.html @@ -45,6 +45,7 @@
+ diff --git a/src/app/layout/layouts/vertical/futuristic/futuristic.module.ts b/src/app/layout/layouts/vertical/futuristic/futuristic.module.ts index aeffe4b1..c1f0d61f 100644 --- a/src/app/layout/layouts/vertical/futuristic/futuristic.module.ts +++ b/src/app/layout/layouts/vertical/futuristic/futuristic.module.ts @@ -5,6 +5,7 @@ import { MatButtonModule } from '@angular/material/button'; import { MatDividerModule } from '@angular/material/divider'; import { MatIconModule } from '@angular/material/icon'; import { MatMenuModule } from '@angular/material/menu'; +import { FuseFullscreenModule } from '@fuse/components/fullscreen'; import { FuseNavigationModule } from '@fuse/components/navigation'; import { MessagesModule } from 'app/layout/common/messages/messages.module'; import { NotificationsModule } from 'app/layout/common/notifications/notifications.module'; @@ -25,6 +26,7 @@ import { FuturisticLayoutComponent } from 'app/layout/layouts/vertical/futuristi MatDividerModule, MatIconModule, MatMenuModule, + FuseFullscreenModule, FuseNavigationModule, MessagesModule, NotificationsModule, diff --git a/src/app/layout/layouts/vertical/thin/thin.component.html b/src/app/layout/layouts/vertical/thin/thin.component.html index 4a5f783b..5ebc6e43 100644 --- a/src/app/layout/layouts/vertical/thin/thin.component.html +++ b/src/app/layout/layouts/vertical/thin/thin.component.html @@ -32,6 +32,7 @@
+ diff --git a/src/app/layout/layouts/vertical/thin/thin.module.ts b/src/app/layout/layouts/vertical/thin/thin.module.ts index 7eb78060..a9231930 100644 --- a/src/app/layout/layouts/vertical/thin/thin.module.ts +++ b/src/app/layout/layouts/vertical/thin/thin.module.ts @@ -5,6 +5,7 @@ import { MatButtonModule } from '@angular/material/button'; import { MatDividerModule } from '@angular/material/divider'; import { MatIconModule } from '@angular/material/icon'; import { MatMenuModule } from '@angular/material/menu'; +import { FuseFullscreenModule } from '@fuse/components/fullscreen'; import { FuseNavigationModule } from '@fuse/components/navigation'; import { MessagesModule } from 'app/layout/common/messages/messages.module'; import { NotificationsModule } from 'app/layout/common/notifications/notifications.module'; @@ -25,6 +26,7 @@ import { ThinLayoutComponent } from 'app/layout/layouts/vertical/thin/thin.compo MatDividerModule, MatIconModule, MatMenuModule, + FuseFullscreenModule, FuseNavigationModule, MessagesModule, NotificationsModule,