@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
362 lines (355 loc) • 13.4 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, __generator } from 'tslib';
/**
* @fileoverview added by tsickle
* Generated from: fullscreen.config.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var DEFAULT_MODE = 'immersive';
/** @type {?} */
var DEFAULT_ZINDEX = 10;
/** @type {?} */
var ESC_KEYCODE = 27;
/**
* @fileoverview added by tsickle
* Generated from: fullscreen.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var FullscreenComponent = /** @class */ (function () {
function FullscreenComponent(elementRef, doc) {
var _this = this;
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 {?}
*/
function (event) {
if (_this.currentTarget) {
/** @type {?} */
var targetElement = _this.currentTarget;
if (_this.doc.fullscreenElement) { // 进入全屏
_this.launchNormalFullscreen(targetElement);
}
else { // 退出全屏
_this.currentTarget = null;
_this.exitNormalFullscreen(targetElement);
}
// F11退出全屏时，需要将全屏状态传出去
/** @type {?} */
var isFullscreen = !!_this.doc.fullscreenElement;
_this.fullscreenLaunch.emit({
isFullscreen: isFullscreen
});
_this.isFullscreen = isFullscreen;
}
});
this.handleFullscreen = (/**
* @return {?}
*/
function () { return __awaiter(_this, void 0, void 0, function () {
var targetElement, isFullscreen, fullscreen;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
targetElement = this.elementRef.nativeElement.querySelector('[fullscreen-target]');
if (!(this.mode === 'normal')) return [3 /*break*/, 1];
fullscreen = targetElement.classList.contains('fullscreen');
if (!fullscreen) { // 进入全屏
this.launchNormalFullscreen(targetElement);
isFullscreen = true;
}
else { // 退出全屏
this.exitNormalFullscreen(targetElement);
isFullscreen = false;
}
return [3 /*break*/, 5];
case 1:
this.currentTarget = targetElement;
if (!this.doc.fullscreenElement) return [3 /*break*/, 3];
return [4 /*yield*/, this.exitImmersiveFullScreen(this.doc)];
case 2:
isFullscreen = _a.sent();
return [3 /*break*/, 5];
case 3: return [4 /*yield*/, this.launchImmersiveFullScreen(this.doc.documentElement)];
case 4:
isFullscreen = _a.sent();
_a.label = 5;
case 5:
this.isFullscreen = isFullscreen;
this.fullscreenLaunch.emit({
isFullscreen: isFullscreen
});
return [2 /*return*/];
}
});
}); });
this.handleKeyDown = (/**
* @param {?} event
* @return {?}
*/
function (event) {
if (event.keyCode === ESC_KEYCODE) { // 按ESC键退出全屏
if (_this.isFullscreen) {
/** @type {?} */
var 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 {?}
*/
FullscreenComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
document.addEventListener('fullscreenchange', this.onFullScreenChange);
document.addEventListener('keydown', this.handleKeyDown);
/** @type {?} */
var btnLaunch = this.elementRef.nativeElement.querySelector('[fullscreen-launch]');
if (btnLaunch) {
btnLaunch.addEventListener('click', this.handleFullscreen);
}
};
/**
* @private
* @param {?} targetElement
* @return {?}
*/
FullscreenComponent.prototype.launchNormalFullscreen = /**
* @private
* @param {?} targetElement
* @return {?}
*/
function (targetElement) {
targetElement.classList.add('fullscreen');
if (this.zIndex) {
targetElement.setAttribute('style', "z-index: " + this.zIndex);
}
};
/**
* @private
* @param {?} targetElement
* @return {?}
*/
FullscreenComponent.prototype.exitNormalFullscreen = /**
* @private
* @param {?} targetElement
* @return {?}
*/
function (targetElement) {
targetElement.classList.remove('fullscreen');
targetElement.style.zIndex = null;
};
/**
* @private
* @param {?} docElement
* @return {?}
*/
FullscreenComponent.prototype.launchImmersiveFullScreen = /**
* @private
* @param {?} docElement
* @return {?}
*/
function (docElement) {
return __awaiter(this, void 0, void 0, function () {
var fullscreenLaunch;
var _this = this;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
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 [4 /*yield*/, fullscreenLaunch.then((/**
* @return {?}
*/
function () { return !!_this.doc.fullscreenElement; }))];
case 1: return [2 /*return*/, _a.sent()];
}
});
});
};
/**
* @private
* @param {?} doc
* @return {?}
*/
FullscreenComponent.prototype.exitImmersiveFullScreen = /**
* @private
* @param {?} doc
* @return {?}
*/
function (doc) {
return __awaiter(this, void 0, void 0, function () {
var fullscreenExit;
var _this = this;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
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 [4 /*yield*/, fullscreenExit.then((/**
* @return {?}
*/
function () { return !!_this.doc.fullscreenElement; }))];
case 1: return [2 /*return*/, _a.sent()];
}
});
});
};
/**
* @return {?}
*/
FullscreenComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
document.removeEventListener('fullscreenchange', this.onFullScreenChange);
document.removeEventListener('keydown', this.handleKeyDown);
/** @type {?} */
var 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 = function () { return [
{ type: ElementRef },
{ type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
]; };
FullscreenComponent.propDecorators = {
mode: [{ type: Input }],
zIndex: [{ type: Input }],
target: [{ type: Input }],
fullscreenLaunch: [{ type: Output }]
};
return FullscreenComponent;
}());
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
*/
var FullscreenModule = /** @class */ (function () {
function FullscreenModule() {
}
FullscreenModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
ButtonModule
],
exports: [
FullscreenComponent
],
declarations: [
FullscreenComponent
]
},] }
];
return FullscreenModule;
}());
/**
* @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