@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
614 lines (606 loc) • 22.4 kB
JavaScript
import { Directive, ViewContainerRef, Component, ElementRef, Input, ViewChild, HostListener, Injectable, ComponentFactoryResolver, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { trim, parseInt, isNumber, assign, isUndefined } from 'lodash-es';
import { Subject, fromEvent } from 'rxjs';
import { distinctUntilChanged, debounceTime } from 'rxjs/operators';
import { PortalModule } from '@duoduo-oba/ng-devui/portal';
import { OverlayContainerRef, OverlayContainerModule } from '@duoduo-oba/ng-devui/overlay-container';
/**
* @fileoverview added by tsickle
* Generated from: drawer.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var DrawerContentDirective = /** @class */ (function () {
function DrawerContentDirective(viewContainerRef) {
this.viewContainerRef = viewContainerRef;
}
DrawerContentDirective.decorators = [
{ type: Directive, args: [{
selector: '[dDrawerContentHost]',
},] }
];
/** @nocollapse */
DrawerContentDirective.ctorParameters = function () { return [
{ type: ViewContainerRef }
]; };
return DrawerContentDirective;
}());
if (false) {
/** @type {?} */
DrawerContentDirective.prototype.viewContainerRef;
}
var DrawerComponent = /** @class */ (function () {
function DrawerComponent(elementRef) {
this.elementRef = elementRef;
this.animateState = 'void';
this.width = '300px';
this.isCover = true;
this.fullScreen = false;
this.clickDoms = [];
this.animationDone = new Subject();
}
/**
* @return {?}
*/
DrawerComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this.setWidth(this.width);
this._isCover = this.isCover === undefined ? true : this.isCover;
// some browsers(ie11 & edge) fire the animation done event twice
this.animationDoneSub = this.animationDone.pipe(distinctUntilChanged((/**
* @param {?} x
* @param {?} y
* @return {?}
*/
function (x, y) {
return x.fromState === y.fromState && x.toState === y.toState;
}))).subscribe((/**
* @param {?} event
* @return {?}
*/
function (event) {
_this.onAnimationEnd(event);
}));
};
/**
* @param {?} width
* @return {?}
*/
DrawerComponent.prototype.setWidth = /**
* @param {?} width
* @return {?}
*/
function (width) {
if (width.indexOf('%') >= 0) {
/** @type {?} */
var widthStr = trim(width, '%');
/** @type {?} */
var widthNum = parseInt(widthStr, 10);
this._width = isNumber(widthNum) ? (widthNum * window.innerWidth / 100 + 'px') : '0px';
}
else {
this._width = width;
}
this.oldWidth = this._width;
};
/**
* @return {?}
*/
DrawerComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this.animationDoneSub) {
this.animationDoneSub.unsubscribe();
}
if (this.resizeSub) {
this.resizeSub.unsubscribe();
}
};
/**
* @param {?} event
* @return {?}
*/
DrawerComponent.prototype.keydownHandler = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (this.escKeyCloseable && !this.isHaveDialogOrUpload()) {
this.hide();
}
};
/**
* @param {?} event
* @return {?}
*/
DrawerComponent.prototype.onAnimationEnd = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (this.animateState === 'void') {
this.onHidden();
}
if (this.animateState === 'in' && this.afterOpened) {
this.afterOpened();
}
};
// Will overwrite by drawer service
// Will overwrite by drawer service
/**
* @return {?}
*/
DrawerComponent.prototype.onHidden =
// Will overwrite by drawer service
/**
* @return {?}
*/
function () {
};
/**
* @return {?}
*/
DrawerComponent.prototype.show = /**
* @return {?}
*/
function () {
var _this = this;
if (!this.bodyScrollable) {
document.querySelector('body').classList.add('modal-open');
}
this.animateState = 'in';
this.isCover = this.isCover === undefined ? true : this.isCover;
if (!this.backdropCloseable || this.isCover) {
return;
}
/** @type {?} */
var documentClick = fromEvent(document, 'click');
setTimeout((/**
* @return {?}
*/
function () {
_this.subscription = documentClick.subscribe((/**
* @param {?} event
* @return {?}
*/
function (event) {
if (_this.clickDoms && _this.clickDoms.length > 0) {
_this.clickDoms.forEach((/**
* @param {?} dom
* @return {?}
*/
function (dom) {
if (dom !== null && dom.contains(event.target)) {
_this.hide();
return;
}
}));
}
else {
/** @type {?} */
var target = event.target;
// 一定要document.contains(event.target)，因为event.target可能已经不在document里了，这个时候就不能进hide了
if (_this.animateState === 'in' && (!_this.elementRef.nativeElement.contains(target) && document.body.contains(target))
&& !_this.isHaveDialogOrUpload()) {
_this.hide();
}
}
}));
}));
};
/**
* @return {?}
*/
DrawerComponent.prototype.hide = /**
* @return {?}
*/
function () {
var _this = this;
this.canHideModel().then((/**
* @param {?} canHide
* @return {?}
*/
function (canHide) {
if (!canHide) {
return;
}
if (!_this.bodyScrollable) {
document.querySelector('body').classList.remove('modal-open');
}
_this.animateState = 'void';
if (_this.subscription) {
_this.subscription.unsubscribe();
_this.subscription = undefined;
}
}));
};
// Will overwrite by drawer service
// Will overwrite by drawer service
/**
* @return {?}
*/
DrawerComponent.prototype.destroy =
// Will overwrite by drawer service
/**
* @return {?}
*/
function () { };
/**
* @return {?}
*/
DrawerComponent.prototype.isHaveDialogOrUpload = /**
* @return {?}
*/
function () {
/** @type {?} */
var dialog = document.getElementsByClassName('modal-dialog');
/** @type {?} */
var upload = document.getElementById('d-upload-temp');
return (dialog && dialog.length > 0) || upload;
};
/**
* @return {?}
*/
DrawerComponent.prototype.canHideModel = /**
* @return {?}
*/
function () {
/** @type {?} */
var hiddenResult = Promise.resolve(true);
if (this.beforeHidden) {
/** @type {?} */
var result = this.beforeHidden();
if (typeof result !== 'undefined') {
if (result.then) {
hiddenResult = result;
}
else if (result.subscribe) {
hiddenResult = ((/** @type {?} */ (result))).toPromise();
}
else {
hiddenResult = Promise.resolve(result);
}
}
}
return hiddenResult;
};
/**
* @private
* @param {?=} fullScreen
* @return {?}
*/
DrawerComponent.prototype._setFullScreen = /**
* @private
* @param {?=} fullScreen
* @return {?}
*/
function (fullScreen) {
var _this = this;
if (this._width === this.oldWidth) {
if (fullScreen === true || fullScreen === undefined) {
this._width = this._isCover ? '100%' : window.innerWidth + 'px';
if (!this._isCover) {
/** @type {?} */
var resizeEv = fromEvent(window, 'resize');
/** @type {?} */
var result = resizeEv.pipe(debounceTime(100));
this.resizeSub = result.subscribe((/**
* @param {?} ev
* @return {?}
*/
function (ev) {
_this._width = window.innerWidth + 'px';
}));
}
}
}
else {
if (!fullScreen) {
this._width = this.oldWidth;
if (this.resizeSub) {
this.resizeSub.unsubscribe();
}
}
}
};
/**
* @return {?}
*/
DrawerComponent.prototype.toggleFullScreen = /**
* @return {?}
*/
function () {
this._setFullScreen();
};
/**
* @param {?} fullScreen
* @return {?}
*/
DrawerComponent.prototype.setFullScreen = /**
* @param {?} fullScreen
* @return {?}
*/
function (fullScreen) {
this._setFullScreen(fullScreen);
};
DrawerComponent.decorators = [
{ type: Component, args: [{
selector: 'd-drawer',
template: "<div\r\n class=\"drawer\"\r\n [attr.id]=\"id\"\r\n [ngClass]=\"{ 'display-width': _isCover && animateState === 'in' }\"\r\n [style.left]=\"position === 'left' ? 0 : null\"\r\n [style.right]=\"position === 'right' ? 0 : null\"\r\n>\r\n <div\r\n class=\"overlay-wrapper\"\r\n [ngClass]=\"{ 'display-width': _isCover && animateState === 'in' }\"\r\n [style.left]=\"position === 'left' ? 0 : null\"\r\n [style.right]=\"position === 'right' ? 0 : null\"\r\n >\r\n <div class=\"overlay-backdrop\" [@fadeInOut]=\"animateState\" (click)=\"backdropCloseable && hide()\"></div>\r\n <div\r\n class=\"drawer-nav\"\r\n [ngStyle]=\"{ width: _width }\"\r\n [@flyInOut]=\"position + '-' + animateState\"\r\n (@flyInOut.done)=\"animationDone.next($event)\"\r\n [style.left]=\"position === 'left' ? 0 : null\"\r\n [style.right]=\"position === 'right' ? 0 : null\"\r\n >\r\n <div class=\"drawer-content\" cdkScrollable>\r\n <ng-template dDrawerContentHost></ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n",
animations: [
trigger('fadeInOut', [
state('void', style({ display: 'block', opacity: 0 })),
state('in', style({ display: 'block', opacity: 0.6 })),
transition('* => *', animate('300ms ease')),
]),
trigger('flyInOut', [
state('left-void', style({ transform: 'translateX(-100%)', left: 0 })),
state('left-in', style({ transform: 'none', left: 0 })),
state('right-void', style({ transform: 'translateX(100%)', right: 0 })),
state('right-in', style({ transform: 'none', right: 0 })),
transition('* => *', animate('300ms ease')),
]),
],
styles: [".drawer{position:fixed;top:0;bottom:0;z-index:1000}.overlay-wrapper{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;position:absolute;top:0;bottom:0;z-index:1000}.display-width{left:0;right:0}.overlay-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(41,48,64,.2);width:100%;height:100%}.drawer-nav{position:absolute;top:0;bottom:0;background:#fff}.drawer-content{position:absolute;top:0;left:0;right:0;bottom:0;overflow:auto;box-shadow:0 1px 20px -5px rgba(41,48,64,.2)}"]
}] }
];
/** @nocollapse */
DrawerComponent.ctorParameters = function () { return [
{ type: ElementRef }
]; };
DrawerComponent.propDecorators = {
id: [{ type: Input }],
width: [{ type: Input }],
isCover: [{ type: Input }],
fullScreen: [{ type: Input }],
drawerContentHost: [{ type: ViewChild, args: [DrawerContentDirective, { static: true },] }],
backdropCloseable: [{ type: Input }],
escKeyCloseable: [{ type: Input }],
beforeHidden: [{ type: Input }],
clickDoms: [{ type: Input }],
afterOpened: [{ type: Input }],
position: [{ type: Input }],
bodyScrollable: [{ type: Input }],
keydownHandler: [{ type: HostListener, args: ['document:keydown.escape', ['$event'],] }]
};
return DrawerComponent;
}());
if (false) {
/** @type {?} */
DrawerComponent.prototype.animateState;
/** @type {?} */
DrawerComponent.prototype.id;
/** @type {?} */
DrawerComponent.prototype.width;
/** @type {?} */
DrawerComponent.prototype.isCover;
/** @type {?} */
DrawerComponent.prototype.fullScreen;
/** @type {?} */
DrawerComponent.prototype.drawerContentHost;
/** @type {?} */
DrawerComponent.prototype.backdropCloseable;
/** @type {?} */
DrawerComponent.prototype.escKeyCloseable;
/** @type {?} */
DrawerComponent.prototype.beforeHidden;
/** @type {?} */
DrawerComponent.prototype.clickDoms;
/** @type {?} */
DrawerComponent.prototype.afterOpened;
/** @type {?} */
DrawerComponent.prototype.position;
/** @type {?} */
DrawerComponent.prototype.bodyScrollable;
/** @type {?} */
DrawerComponent.prototype._width;
/** @type {?} */
DrawerComponent.prototype.oldWidth;
/** @type {?} */
DrawerComponent.prototype._isCover;
/** @type {?} */
DrawerComponent.prototype.subscription;
/** @type {?} */
DrawerComponent.prototype.animationDone;
/** @type {?} */
DrawerComponent.prototype.animationDoneSub;
/** @type {?} */
DrawerComponent.prototype.resizeSub;
/**
* @type {?}
* @private
*/
DrawerComponent.prototype.elementRef;
}
/**
* @fileoverview added by tsickle
* Generated from: drawer.service.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var DrawerService = /** @class */ (function () {
function DrawerService(overlayContainerRef, componentFactoryResolver) {
this.overlayContainerRef = overlayContainerRef;
this.componentFactoryResolver = componentFactoryResolver;
}
/**
* @param {?} __0
* @return {?}
*/
DrawerService.prototype.open = /**
* @param {?} __0
* @return {?}
*/
function (_a) {
var drawerContentComponent = _a.drawerContentComponent, injector = _a.injector, componentFactoryResolver = _a.componentFactoryResolver, id = _a.id, width = _a.width, fullScreen = _a.fullScreen, data = _a.data, isCover = _a.isCover, clickDoms = _a.clickDoms, onClose = _a.onClose, afterOpened = _a.afterOpened, backdropCloseable = _a.backdropCloseable, escKeyCloseable = _a.escKeyCloseable, beforeHidden = _a.beforeHidden, _b = _a.destroyOnHide, destroyOnHide = _b === void 0 ? true : _b, _c = _a.position, position = _c === void 0 ? 'right' : _c, bodyScrollable = _a.bodyScrollable;
/** @type {?} */
var componentFactoryResolver_ = componentFactoryResolver || this.componentFactoryResolver;
/** @type {?} */
var drawerRef = this.overlayContainerRef.createComponent(componentFactoryResolver_.resolveComponentFactory(DrawerComponent), injector);
assign(drawerRef.instance, {
id: id,
width: width,
isCover: isCover,
clickDoms: clickDoms,
fullScreen: fullScreen,
beforeHidden: beforeHidden,
afterOpened: afterOpened,
escKeyCloseable: escKeyCloseable,
position: position,
backdropCloseable: isUndefined(backdropCloseable) ? true : backdropCloseable,
bodyScrollable: bodyScrollable
});
/** @type {?} */
var drawerContentRef = drawerRef.instance.drawerContentHost.viewContainerRef.createComponent(componentFactoryResolver_.resolveComponentFactory(drawerContentComponent), 0, injector);
assign(drawerContentRef.instance, data);
drawerRef.instance.onHidden = (/**
* @return {?}
*/
function () {
if (onClose) {
onClose();
}
if (destroyOnHide) {
setTimeout((/**
* @return {?}
*/
function () {
drawerRef.hostView.destroy();
}));
}
});
drawerRef.instance.destroy = (/**
* @return {?}
*/
function () {
if (!destroyOnHide && drawerRef.instance.animateState === 'void') {
drawerRef.hostView.destroy();
}
});
drawerRef.instance.show();
return {
drawerInstance: drawerRef.instance,
drawerContentInstance: drawerContentRef.instance
};
};
DrawerService.decorators = [
{ type: Injectable }
];
/** @nocollapse */
DrawerService.ctorParameters = function () { return [
{ type: OverlayContainerRef },
{ type: ComponentFactoryResolver }
]; };
return DrawerService;
}());
if (false) {
/**
* @type {?}
* @private
*/
DrawerService.prototype.overlayContainerRef;
/**
* @type {?}
* @private
*/
DrawerService.prototype.componentFactoryResolver;
}
/**
* @fileoverview added by tsickle
* Generated from: drawer.moudule.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var DrawerModule = /** @class */ (function () {
function DrawerModule() {
}
DrawerModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
ScrollingModule,
PortalModule,
OverlayContainerModule,
],
exports: [DrawerComponent],
declarations: [
DrawerComponent,
DrawerContentDirective
],
providers: [DrawerService],
entryComponents: [DrawerComponent]
},] }
];
return DrawerModule;
}());
/**
* @fileoverview added by tsickle
* Generated from: drawer.types.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function IDrawerOptions() { }
if (false) {
/** @type {?} */
IDrawerOptions.prototype.drawerContentComponent;
/** @type {?|undefined} */
IDrawerOptions.prototype.componentFactoryResolver;
/** @type {?|undefined} */
IDrawerOptions.prototype.injector;
/** @type {?|undefined} */
IDrawerOptions.prototype.id;
/** @type {?|undefined} */
IDrawerOptions.prototype.width;
/** @type {?|undefined} */
IDrawerOptions.prototype.isCover;
/** @type {?|undefined} */
IDrawerOptions.prototype.clickDoms;
/** @type {?|undefined} */
IDrawerOptions.prototype.fullScreen;
/** @type {?|undefined} */
IDrawerOptions.prototype.data;
/** @type {?|undefined} */
IDrawerOptions.prototype.backdropCloseable;
/** @type {?|undefined} */
IDrawerOptions.prototype.escKeyCloseable;
/** @type {?|undefined} */
IDrawerOptions.prototype.onClose;
/** @type {?|undefined} */
IDrawerOptions.prototype.afterOpened;
/** @type {?|undefined} */
IDrawerOptions.prototype.destroyOnHide;
/** @type {?|undefined} */
IDrawerOptions.prototype.position;
/** @type {?|undefined} */
IDrawerOptions.prototype.beforeHidden;
/** @type {?|undefined} */
IDrawerOptions.prototype.bodyScrollable;
}
/**
* @record
*/
function IDrawerOpenResult() { }
if (false) {
/** @type {?} */
IDrawerOpenResult.prototype.drawerInstance;
/** @type {?} */
IDrawerOpenResult.prototype.drawerContentInstance;
}
/**
* @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-drawer.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { DrawerComponent, DrawerContentDirective, DrawerModule, DrawerService };
//# sourceMappingURL=ng-devui-drawer.js.map