@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
555 lines (547 loc) • 19.8 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
*/
class DrawerContentDirective {
/**
* @param {?} viewContainerRef
*/
constructor(viewContainerRef) {
this.viewContainerRef = viewContainerRef;
}
}
DrawerContentDirective.decorators = [
{ type: Directive, args: [{
selector: '[dDrawerContentHost]',
},] }
];
/** @nocollapse */
DrawerContentDirective.ctorParameters = () => [
{ type: ViewContainerRef }
];
if (false) {
/** @type {?} */
DrawerContentDirective.prototype.viewContainerRef;
}
class DrawerComponent {
/**
* @param {?} elementRef
*/
constructor(elementRef) {
this.elementRef = elementRef;
this.animateState = 'void';
this.width = '300px';
this.isCover = true;
this.fullScreen = false;
this.clickDoms = [];
this.animationDone = new Subject();
}
/**
* @return {?}
*/
ngOnInit() {
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 {?}
*/
(x, y) => {
return x.fromState === y.fromState && x.toState === y.toState;
}))).subscribe((/**
* @param {?} event
* @return {?}
*/
event => {
this.onAnimationEnd(event);
}));
}
/**
* @param {?} width
* @return {?}
*/
setWidth(width) {
if (width.indexOf('%') >= 0) {
/** @type {?} */
const widthStr = trim(width, '%');
/** @type {?} */
const widthNum = parseInt(widthStr, 10);
this._width = isNumber(widthNum) ? (widthNum * window.innerWidth / 100 + 'px') : '0px';
}
else {
this._width = width;
}
this.oldWidth = this._width;
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this.animationDoneSub) {
this.animationDoneSub.unsubscribe();
}
if (this.resizeSub) {
this.resizeSub.unsubscribe();
}
}
/**
* @param {?} event
* @return {?}
*/
keydownHandler(event) {
if (this.escKeyCloseable && !this.isHaveDialogOrUpload()) {
this.hide();
}
}
/**
* @param {?} event
* @return {?}
*/
onAnimationEnd(event) {
if (this.animateState === 'void') {
this.onHidden();
}
if (this.animateState === 'in' && this.afterOpened) {
this.afterOpened();
}
}
// Will overwrite by drawer service
/**
* @return {?}
*/
onHidden() {
}
/**
* @return {?}
*/
show() {
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 {?} */
const documentClick = fromEvent(document, 'click');
setTimeout((/**
* @return {?}
*/
() => {
this.subscription = documentClick.subscribe((/**
* @param {?} event
* @return {?}
*/
(event) => {
if (this.clickDoms && this.clickDoms.length > 0) {
this.clickDoms.forEach((/**
* @param {?} dom
* @return {?}
*/
dom => {
if (dom !== null && dom.contains(event.target)) {
this.hide();
return;
}
}));
}
else {
/** @type {?} */
const 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 {?}
*/
hide() {
this.canHideModel().then((/**
* @param {?} canHide
* @return {?}
*/
(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
/**
* @return {?}
*/
destroy() { }
/**
* @return {?}
*/
isHaveDialogOrUpload() {
/** @type {?} */
const dialog = document.getElementsByClassName('modal-dialog');
/** @type {?} */
const upload = document.getElementById('d-upload-temp');
return (dialog && dialog.length > 0) || upload;
}
/**
* @return {?}
*/
canHideModel() {
/** @type {?} */
let hiddenResult = Promise.resolve(true);
if (this.beforeHidden) {
/** @type {?} */
const 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 {?}
*/
_setFullScreen(fullScreen) {
if (this._width === this.oldWidth) {
if (fullScreen === true || fullScreen === undefined) {
this._width = this._isCover ? '100%' : window.innerWidth + 'px';
if (!this._isCover) {
/** @type {?} */
const resizeEv = fromEvent(window, 'resize');
/** @type {?} */
const result = resizeEv.pipe(debounceTime(100));
this.resizeSub = result.subscribe((/**
* @param {?} ev
* @return {?}
*/
ev => {
this._width = window.innerWidth + 'px';
}));
}
}
}
else {
if (!fullScreen) {
this._width = this.oldWidth;
if (this.resizeSub) {
this.resizeSub.unsubscribe();
}
}
}
}
/**
* @return {?}
*/
toggleFullScreen() {
this._setFullScreen();
}
/**
* @param {?} fullScreen
* @return {?}
*/
setFullScreen(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 = () => [
{ 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'],] }]
};
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
*/
class DrawerService {
/**
* @param {?} overlayContainerRef
* @param {?} componentFactoryResolver
*/
constructor(overlayContainerRef, componentFactoryResolver) {
this.overlayContainerRef = overlayContainerRef;
this.componentFactoryResolver = componentFactoryResolver;
}
/**
* @param {?} __0
* @return {?}
*/
open({ drawerContentComponent, injector, componentFactoryResolver, id, width, fullScreen, data, isCover, clickDoms, onClose, afterOpened, backdropCloseable, escKeyCloseable, beforeHidden, destroyOnHide = true, position = 'right', bodyScrollable }) {
/** @type {?} */
const componentFactoryResolver_ = componentFactoryResolver || this.componentFactoryResolver;
/** @type {?} */
const drawerRef = this.overlayContainerRef.createComponent(componentFactoryResolver_.resolveComponentFactory(DrawerComponent), injector);
assign(drawerRef.instance, {
id,
width,
isCover,
clickDoms,
fullScreen,
beforeHidden,
afterOpened,
escKeyCloseable,
position,
backdropCloseable: isUndefined(backdropCloseable) ? true : backdropCloseable,
bodyScrollable
});
/** @type {?} */
const drawerContentRef = drawerRef.instance.drawerContentHost.viewContainerRef.createComponent(componentFactoryResolver_.resolveComponentFactory(drawerContentComponent), 0, injector);
assign(drawerContentRef.instance, data);
drawerRef.instance.onHidden = (/**
* @return {?}
*/
() => {
if (onClose) {
onClose();
}
if (destroyOnHide) {
setTimeout((/**
* @return {?}
*/
() => {
drawerRef.hostView.destroy();
}));
}
});
drawerRef.instance.destroy = (/**
* @return {?}
*/
() => {
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 = () => [
{ type: OverlayContainerRef },
{ type: ComponentFactoryResolver }
];
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
*/
class DrawerModule {
}
DrawerModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
ScrollingModule,
PortalModule,
OverlayContainerModule,
],
exports: [DrawerComponent],
declarations: [
DrawerComponent,
DrawerContentDirective
],
providers: [DrawerService],
entryComponents: [DrawerComponent]
},] }
];
/**
* @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