purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-08 03:25:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

(@fuse/fullscreen) Refactor FuseFullscreen to use new Fullscreen API

Browse Source
This commit is contained in:
Sercan Yemen 2024-03-11 10:28:32 +03:00
parent cedd61f71b
commit cd45a802c8
3 changed files with 24 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

161
src/@fuse/components/fullscreen/fullscreen.component.ts
View File

@ -1,46 +1,27 @@
import { DOCUMENT, NgTemplateOutlet } from '@angular/common'; import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
import { ChangeDetectionStrategy, Component, Inject, Input, OnInit, TemplateRef, ViewEncapsulation } from '@angular/core'; import { ChangeDetectionStrategy, Component, Inject, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip'; import { MatTooltipModule } from '@angular/material/tooltip';
import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fullscreen.types';
@Component({ @Component({
selector : 'fuse-fullscreen', selector: 'fuse-fullscreen',
templateUrl : './fullscreen.component.html', templateUrl: './fullscreen.component.html',
encapsulation : ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
exportAs : 'fuseFullscreen', exportAs: 'fuseFullscreen',
standalone : true, standalone: true,
imports : [MatButtonModule, MatTooltipModule, NgTemplateOutlet, MatIconModule], imports: [MatButtonModule, MatTooltipModule, NgTemplateOutlet, MatIconModule],
}) })
export class FuseFullscreenComponent implements OnInit export class FuseFullscreenComponent
{ {
@Input() iconTpl: TemplateRef<any>; @Input() iconTpl: TemplateRef<any>;
@Input() tooltip: string; @Input() tooltip: string;
private _fsDoc: FSDocument;
private _fsDocEl: FSDocumentElement;
private _isFullscreen: boolean = false;
/** /**
* Constructor * Constructor
*/ */
constructor(@Inject(DOCUMENT) private _document: Document) 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 // @ Public methods
@ -51,121 +32,27 @@ export class FuseFullscreenComponent implements OnInit
*/ */
toggleFullscreen(): void toggleFullscreen(): void
{ {
// Check if the fullscreen is open if (!this._document.fullscreenEnabled)
this._isFullscreen = this._getBrowserFullscreenElement() !== null; {
console.log('Fullscreen is not available in this browser.');
return;
}
// Check if the fullscreen is already open
const fullScreen = this._document.fullscreenElement;
// Toggle the fullscreen // Toggle the fullscreen
if ( this._isFullscreen ) if (fullScreen)
{ {
this._closeFullscreen(); this._document.exitFullscreen();
} }
else else
{ {
this._openFullscreen(); this._document.documentElement.requestFullscreen()
} .catch(() =>
} {
console.error('Entering fullscreen mode failed.');
// ----------------------------------------------------------------------------------------------------- });
// @ 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;
} }
} }
} }

16
src/@fuse/components/fullscreen/fullscreen.types.ts
View File

@ -1,16 +0,0 @@
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;
}

1
src/@fuse/components/fullscreen/public-api.ts
View File

@ -1,2 +1 @@
export * from '@fuse/components/fullscreen/fullscreen.component'; export * from '@fuse/components/fullscreen/fullscreen.component';
export * from '@fuse/components/fullscreen/fullscreen.types';