ng-devui
Version:
DevUI components based on Angular
238 lines (232 loc) • 11.8 kB
JavaScript
import { DOCUMENT, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { EventEmitter, Component, Inject, Input, Output, NgModule } from '@angular/core';
import { ButtonModule } from 'ng-devui/button';
const DEFAULT_MODE = 'immersive';
const DEFAULT_ZINDEX = 10;
const ESC_KEYCODE = 27;
class FullscreenComponent {
constructor(doc, elementRef, render) {
this.doc = doc;
this.elementRef = elementRef;
this.render = render;
this.mode = DEFAULT_MODE;
this.zIndex = DEFAULT_ZINDEX;
this.fullscreenLaunch = new EventEmitter();
this.isFullscreen = false;
this.onFullScreenChange = (event) => {
if (this.currentTarget) {
const targetElement = this.currentTarget;
if (this.doc.fullscreenElement || this.doc.msFullscreenElement || this.doc.webkitFullscreenElement) {
this.addFullScreenStyle();
this.launchNormalFullscreen(targetElement);
}
else {
this.removeFullScreenStyle();
this.currentTarget = null;
this.exitNormalFullscreen(targetElement);
}
// F11退出全屏时，需要将全屏状态传出去
const isFullscreen = !!(this.doc.fullscreenElement || this.doc.msFullscreenElement || this.doc.webkitFullscreenElement);
this.fullscreenLaunch.emit({ isFullscreen });
this.isFullscreen = isFullscreen;
}
};
this.handleFullscreen = () => {
const targetElement = this.elementRef.nativeElement.querySelector('[fullscreen-target]');
const fullscreen = this.mode === 'normal'
? targetElement.classList.contains('fullscreen')
: !!(this.doc.fullscreenElement || this.doc.msFullscreenElement || this.doc.webkitFullscreenElement);
this.beforeChangeCheck(fullscreen, 'click', async () => {
this.isFullscreen =
this.mode === 'normal'
? this.normalFullscreenCallback(fullscreen, targetElement)
: await this.immersiveFullScreenCallback(fullscreen, targetElement);
this.fullscreenLaunch.emit({ isFullscreen: this.isFullscreen });
});
};
this.handleKeyDown = (event) => {
// 按ESC键退出全屏
if (event.keyCode === ESC_KEYCODE && this.isFullscreen) {
this.beforeChangeCheck(this.isFullscreen, 'esc', () => {
const targetElement = this.elementRef.nativeElement.querySelector('[fullscreen-target]');
if (this.mode === 'normal') {
this.removeFullScreenStyle();
this.exitNormalFullscreen(targetElement);
}
else if (this.doc.fullscreenElement) {
this.exitImmersiveFullScreen(this.doc);
}
this.isFullscreen = false;
this.fullscreenLaunch.emit({ isFullscreen: false });
});
}
};
this.document = this.doc;
}
ngOnInit() {
this.document.addEventListener('fullscreenchange', this.onFullScreenChange);
this.document.addEventListener('MSFullscreenChange', this.onFullScreenChange);
this.document.addEventListener('webkitfullscreenchange', this.onFullScreenChange);
this.document.addEventListener('keydown', this.handleKeyDown);
}
ngAfterViewInit() {
const btnLaunch = this.elementRef.nativeElement.querySelector('[fullscreen-launch]');
if (btnLaunch) {
btnLaunch.addEventListener('click', this.handleFullscreen);
}
}
ngOnDestroy() {
this.document.removeEventListener('fullscreenchange', this.onFullScreenChange);
this.document.removeEventListener('MSFullscreenChange', this.onFullScreenChange);
this.document.removeEventListener('webkitfullscreenchange', this.onFullScreenChange);
this.document.removeEventListener('keydown', this.handleKeyDown);
const btnLaunch = this.elementRef.nativeElement.querySelector('[fullscreen-launch]');
if (btnLaunch) {
btnLaunch.removeEventListener('click', this.handleFullscreen);
}
}
launchNormalFullscreen(targetElement) {
targetElement.classList.add('fullscreen');
if (this.zIndex) {
targetElement.setAttribute('style', `z-index: ${this.zIndex}`);
}
}
exitNormalFullscreen(targetElement) {
targetElement.classList.remove('fullscreen');
targetElement.style.zIndex = null;
}
async launchImmersiveFullScreen(docElement) {
let fullscreenLaunch;
if (docElement.requestFullscreen) {
fullscreenLaunch = docElement.requestFullscreen();
}
else if (docElement.mozRequestFullScreen) {
fullscreenLaunch = docElement.mozRequestFullScreen();
}
else if (docElement.webkitRequestFullScreen) {
fullscreenLaunch = Promise.resolve(docElement.webkitRequestFullScreen());
}
else if (docElement.msRequestFullscreen) {
fullscreenLaunch = Promise.resolve(docElement.msRequestFullscreen());
}
return await fullscreenLaunch.then(() => !!this.doc.fullscreenElement);
}
async exitImmersiveFullScreen(doc) {
let fullscreenExit;
if (doc.exitFullscreen) {
fullscreenExit = doc.exitFullscreen();
}
else if (doc.mozCancelFullScreen) {
fullscreenExit = doc.mozCancelFullScreen();
}
else if (doc.webkitCancelFullScreen) {
fullscreenExit = Promise.resolve(doc.webkitCancelFullScreen());
}
else if (doc.msExitFullscreen) {
fullscreenExit = Promise.resolve(doc.msExitFullscreen());
}
return await fullscreenExit.then(() => !!this.doc.fullscreenElement);
}
canChange(isFullscreen, trigger) {
let changeResult = Promise.resolve(true);
if (this.beforeChange) {
const result = this.beforeChange(isFullscreen, trigger);
if (typeof result !== 'undefined') {
if (result.then) {
changeResult = result;
}
else if (result.subscribe) {
changeResult = result.toPromise();
}
else {
changeResult = Promise.resolve(result);
}
}
}
return changeResult;
}
beforeChangeCheck(fullscreen, trigger, func) {
this.canChange(fullscreen, trigger).then((permission) => permission && func());
}
normalFullscreenCallback(fullscreen, targetElement) {
if (fullscreen) {
this.removeFullScreenStyle();
this.exitNormalFullscreen(targetElement);
return false;
}
else {
this.addFullScreenStyle();
this.launchNormalFullscreen(targetElement);
return true;
}
}
async immersiveFullScreenCallback(fullscreen, targetElement) {
this.currentTarget = targetElement;
return fullscreen ? await this.exitImmersiveFullScreen(this.doc) : await this.launchImmersiveFullScreen(this.doc.documentElement);
}
addFullScreenStyle() {
if (this.container) {
this.render.addClass(this.container, 'devui-container-fullscreen');
}
else {
this.render.addClass(this.document.getElementsByTagName('html')[0], 'devui-fullscreen');
}
}
removeFullScreenStyle() {
if (this.container) {
this.render.removeClass(this.container, 'devui-container-fullscreen');
}
else {
this.render.removeClass(this.document.getElementsByTagName('html')[0], 'devui-fullscreen');
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FullscreenComponent, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FullscreenComponent, selector: "d-fullscreen", inputs: { mode: "mode", zIndex: "zIndex", target: "target", container: "container", beforeChange: "beforeChange" }, outputs: { fullscreenLaunch: "fullscreenLaunch" }, ngImport: i0, template: "<div class=\"fullscreen-container\">\n <ng-content select=\"[fullscreen-launch]\"></ng-content>\n <ng-content select=\"[fullscreen-target]\"></ng-content>\n</div>\n", styles: [":host ::ng-deep .fullscreen{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10;overflow:auto;background-color:var(--devui-base-bg, #ffffff)}::ng-deep .devui-fullscreen{overflow:hidden}::ng-deep .devui-container-fullscreen{transform:translateZ(0)}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FullscreenComponent, decorators: [{
type: Component,
args: [{ selector: 'd-fullscreen', preserveWhitespaces: false, template: "<div class=\"fullscreen-container\">\n <ng-content select=\"[fullscreen-launch]\"></ng-content>\n <ng-content select=\"[fullscreen-target]\"></ng-content>\n</div>\n", styles: [":host ::ng-deep .fullscreen{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10;overflow:auto;background-color:var(--devui-base-bg, #ffffff)}::ng-deep .devui-fullscreen{overflow:hidden}::ng-deep .devui-container-fullscreen{transform:translateZ(0)}\n"] }]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { mode: [{
type: Input
}], zIndex: [{
type: Input
}], target: [{
type: Input
}], container: [{
type: Input
}], beforeChange: [{
type: Input
}], fullscreenLaunch: [{
type: Output
}] } });
class FullscreenModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FullscreenModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: FullscreenModule, declarations: [FullscreenComponent], imports: [CommonModule,
ButtonModule], exports: [FullscreenComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FullscreenModule, imports: [CommonModule,
ButtonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FullscreenModule, decorators: [{
type: NgModule,
args: [{
imports: [
CommonModule,
ButtonModule
],
exports: [
FullscreenComponent
],
declarations: [
FullscreenComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { DEFAULT_MODE, DEFAULT_ZINDEX, ESC_KEYCODE, FullscreenComponent, FullscreenModule };
//# sourceMappingURL=ng-devui-fullscreen.mjs.map