@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
317 lines (310 loc) • 10.9 kB
JavaScript
import { EventEmitter, Component, ElementRef, Inject, Input, Output, NgModule } from '@angular/core';
import { DOCUMENT, CommonModule } from '@angular/common';
import { ButtonModule } from '@duoduo-oba/ng-devui/button';
import { __awaiter } from 'tslib';
/**
* @fileoverview added by tsickle
* Generated from: fullscreen.config.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const DEFAULT_MODE = 'immersive';
/** @type {?} */
const DEFAULT_ZINDEX = 10;
/** @type {?} */
const ESC_KEYCODE = 27;
/**
* @fileoverview added by tsickle
* Generated from: fullscreen.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class FullscreenComponent {
/**
* @param {?} elementRef
* @param {?} doc
*/
constructor(elementRef, doc) {
this.elementRef = elementRef;
this.doc = doc;
this.isFullscreen = false;
this.mode = DEFAULT_MODE;
this.zIndex = DEFAULT_ZINDEX;
this.fullscreenLaunch = new EventEmitter();
this.onFullScreenChange = (/**
* @param {?} event
* @return {?}
*/
(event) => {
if (this.currentTarget) {
/** @type {?} */
const targetElement = this.currentTarget;
if (this.doc.fullscreenElement) { // 进入全屏
this.launchNormalFullscreen(targetElement);
}
else { // 退出全屏
this.currentTarget = null;
this.exitNormalFullscreen(targetElement);
}
// F11退出全屏时，需要将全屏状态传出去
/** @type {?} */
const isFullscreen = !!this.doc.fullscreenElement;
this.fullscreenLaunch.emit({
isFullscreen
});
this.isFullscreen = isFullscreen;
}
});
this.handleFullscreen = (/**
* @return {?}
*/
() => __awaiter(this, void 0, void 0, function* () {
/** @type {?} */
const targetElement = this.elementRef.nativeElement.querySelector('[fullscreen-target]');
/** @type {?} */
let isFullscreen;
if (this.mode === 'normal') {
/** @type {?} */
const fullscreen = targetElement.classList.contains('fullscreen');
if (!fullscreen) { // 进入全屏
this.launchNormalFullscreen(targetElement);
isFullscreen = true;
}
else { // 退出全屏
this.exitNormalFullscreen(targetElement);
isFullscreen = false;
}
}
else {
this.currentTarget = targetElement;
if (this.doc.fullscreenElement) {
isFullscreen = yield this.exitImmersiveFullScreen(this.doc);
}
else {
isFullscreen = yield this.launchImmersiveFullScreen(this.doc.documentElement);
}
}
this.isFullscreen = isFullscreen;
this.fullscreenLaunch.emit({
isFullscreen
});
}));
this.handleKeyDown = (/**
* @param {?} event
* @return {?}
*/
(event) => {
if (event.keyCode === ESC_KEYCODE) { // 按ESC键退出全屏
if (this.isFullscreen) {
/** @type {?} */
const targetElement = this.elementRef.nativeElement.querySelector('[fullscreen-target]');
if (this.mode === 'normal') {
this.exitNormalFullscreen(targetElement);
}
else {
if (this.doc.fullscreenElement) {
this.exitImmersiveFullScreen(this.doc);
}
}
this.fullscreenLaunch.emit({
isFullscreen: false
});
this.isFullscreen = false;
}
}
});
}
/**
* @return {?}
*/
ngOnInit() {
document.addEventListener('fullscreenchange', this.onFullScreenChange);
document.addEventListener('keydown', this.handleKeyDown);
/** @type {?} */
const btnLaunch = this.elementRef.nativeElement.querySelector('[fullscreen-launch]');
if (btnLaunch) {
btnLaunch.addEventListener('click', this.handleFullscreen);
}
}
/**
* @private
* @param {?} targetElement
* @return {?}
*/
launchNormalFullscreen(targetElement) {
targetElement.classList.add('fullscreen');
if (this.zIndex) {
targetElement.setAttribute('style', `z-index: ${this.zIndex}`);
}
}
/**
* @private
* @param {?} targetElement
* @return {?}
*/
exitNormalFullscreen(targetElement) {
targetElement.classList.remove('fullscreen');
targetElement.style.zIndex = null;
}
/**
* @private
* @param {?} docElement
* @return {?}
*/
launchImmersiveFullScreen(docElement) {
return __awaiter(this, void 0, void 0, function* () {
/** @type {?} */
let fullscreenLaunch;
if (docElement.requestFullscreen) {
fullscreenLaunch = docElement.requestFullscreen();
}
else if (docElement.mozRequestFullScreen) {
fullscreenLaunch = docElement.mozRequestFullScreen();
}
else if (docElement.webkitRequestFullScreen) {
fullscreenLaunch = docElement.webkitRequestFullScreen();
}
else if (docElement.msRequestFullscreen) {
fullscreenLaunch = docElement.msRequestFullscreen();
}
return yield fullscreenLaunch.then((/**
* @return {?}
*/
() => !!this.doc.fullscreenElement));
});
}
/**
* @private
* @param {?} doc
* @return {?}
*/
exitImmersiveFullScreen(doc) {
return __awaiter(this, void 0, void 0, function* () {
/** @type {?} */
let fullscreenExit;
if (doc.exitFullscreen) {
fullscreenExit = doc.exitFullscreen();
}
else if (doc.mozCancelFullScreen) {
fullscreenExit = doc.mozCancelFullScreen();
}
else if (doc.webkitCancelFullScreen) {
fullscreenExit = doc.webkitCancelFullScreen();
}
else if (doc.msExitFullscreen) {
fullscreenExit = doc.msExitFullscreen();
}
return yield fullscreenExit.then((/**
* @return {?}
*/
() => !!this.doc.fullscreenElement));
});
}
/**
* @return {?}
*/
ngOnDestroy() {
document.removeEventListener('fullscreenchange', this.onFullScreenChange);
document.removeEventListener('keydown', this.handleKeyDown);
/** @type {?} */
const btnLaunch = this.elementRef.nativeElement.querySelector('[fullscreen-launch]');
if (btnLaunch) {
btnLaunch.removeEventListener('click', this.handleFullscreen);
}
}
}
FullscreenComponent.decorators = [
{ type: Component, args: [{
selector: 'd-fullscreen',
template: "<div class=\"fullscreen-container\">\r\n <ng-content select=\"[fullscreen-launch]\"></ng-content>\r\n <ng-content select=\"[fullscreen-target]\"></ng-content>\r\n</div>\r\n",
styles: [":host ::ng-deep .fullscreen{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10;overflow:auto;background-color:#fff}"]
}] }
];
/** @nocollapse */
FullscreenComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
];
FullscreenComponent.propDecorators = {
mode: [{ type: Input }],
zIndex: [{ type: Input }],
target: [{ type: Input }],
fullscreenLaunch: [{ type: Output }]
};
if (false) {
/**
* @type {?}
* @private
*/
FullscreenComponent.prototype.currentTarget;
/**
* @type {?}
* @private
*/
FullscreenComponent.prototype.isFullscreen;
/** @type {?} */
FullscreenComponent.prototype.mode;
/** @type {?} */
FullscreenComponent.prototype.zIndex;
/** @type {?} */
FullscreenComponent.prototype.target;
/** @type {?} */
FullscreenComponent.prototype.fullscreenLaunch;
/**
* @type {?}
* @private
*/
FullscreenComponent.prototype.onFullScreenChange;
/**
* @type {?}
* @private
*/
FullscreenComponent.prototype.handleFullscreen;
/**
* @type {?}
* @private
*/
FullscreenComponent.prototype.handleKeyDown;
/**
* @type {?}
* @private
*/
FullscreenComponent.prototype.elementRef;
/**
* @type {?}
* @private
*/
FullscreenComponent.prototype.doc;
}
/**
* @fileoverview added by tsickle
* Generated from: fullscreen.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class FullscreenModule {
}
FullscreenModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
ButtonModule
],
exports: [
FullscreenComponent
],
declarations: [
FullscreenComponent
]
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ng-devui-fullscreen.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { FullscreenModule, FullscreenComponent as ɵa };
//# sourceMappingURL=ng-devui-fullscreen.js.map