@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
2 lines • 8.38 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/cdk/scrolling"),require("@angular/animations"),require("lodash-es"),require("rxjs"),require("rxjs/operators"),require("ng-devui/portal"),require("ng-devui/overlay-container")):"function"==typeof define&&define.amd?define("ng-devui/drawer",["exports","@angular/core","@angular/common","@angular/cdk/scrolling","@angular/animations","lodash-es","rxjs","rxjs/operators","ng-devui/portal","ng-devui/overlay-container"],t):t(((e=e||self)["ng-devui"]=e["ng-devui"]||{},e["ng-devui"].drawer={}),e.ng.core,e.ng.common,e.ng.cdk.scrolling,e.ng.animations,e.lodashEs,e.rxjs,e.rxjs.operators,e["ng-devui"].portal,e["ng-devui"]["overlay-container"])}(this,(function(e,t,n,i,o,r,s,a,l,d){"use strict";var c=function(){function e(e){this.viewContainerRef=e}return e.decorators=[{type:t.Directive,args:[{selector:"[dDrawerContentHost]"}]}],e.ctorParameters=function(){return[{type:t.ViewContainerRef}]},e}();var p=function(){function e(e){this.elementRef=e,this.animateState="void",this.width="300px",this.isCover=!0,this.fullScreen=!1,this.clickDoms=[],this.animationDone=new s.Subject}return e.prototype.ngOnInit=function(){var e=this;this.setWidth(this.width),this._isCover=void 0===this.isCover||this.isCover,this.animationDoneSub=this.animationDone.pipe(a.distinctUntilChanged((function(e,t){return e.fromState===t.fromState&&e.toState===t.toState}))).subscribe((function(t){e.onAnimationEnd(t)}))},e.prototype.setWidth=function(e){if(e.indexOf("%")>=0){var t=r.trim(e,"%"),n=r.parseInt(t,10);this._width=r.isNumber(n)?n*window.innerWidth/100+"px":"0px"}else this._width=e;this.oldWidth=this._width},e.prototype.ngOnDestroy=function(){this.animationDoneSub&&this.animationDoneSub.unsubscribe(),this.resizeSub&&this.resizeSub.unsubscribe()},e.prototype.keydownHandler=function(e){this.escKeyCloseable&&!this.isHaveDialogOrUpload()&&this.hide()},e.prototype.onAnimationEnd=function(e){"void"===this.animateState&&this.onHidden(),"in"===this.animateState&&this.afterOpened&&this.afterOpened()},e.prototype.onHidden=function(){},e.prototype.show=function(){var e=this;if(this.bodyScrollable||document.querySelector("body").classList.add("modal-open"),this.animateState="in",this.isCover=void 0===this.isCover||this.isCover,this.backdropCloseable&&!this.isCover){var t=s.fromEvent(document,"click");setTimeout((function(){e.subscription=t.subscribe((function(t){if(e.clickDoms&&e.clickDoms.length>0)e.clickDoms.forEach((function(n){null!==n&&n.contains(t.target)&&e.hide()}));else{var n=t.target;"in"!==e.animateState||e.elementRef.nativeElement.contains(n)||!document.body.contains(n)||e.isHaveDialogOrUpload()||e.hide()}}))}))}},e.prototype.hide=function(){var e=this;this.canHideModel().then((function(t){t&&(e.bodyScrollable||document.querySelector("body").classList.remove("modal-open"),e.animateState="void",e.subscription&&(e.subscription.unsubscribe(),e.subscription=void 0))}))},e.prototype.destroy=function(){},e.prototype.isHaveDialogOrUpload=function(){var e=document.getElementsByClassName("modal-dialog"),t=document.getElementById("d-upload-temp");return e&&e.length>0||t},e.prototype.canHideModel=function(){var e=Promise.resolve(!0);if(this.beforeHidden){var t=this.beforeHidden();void 0!==t&&(e=t.then?t:t.subscribe?t.toPromise():Promise.resolve(t))}return e},e.prototype._setFullScreen=function(e){var t=this;if(this._width===this.oldWidth){if((!0===e||void 0===e)&&(this._width=this._isCover?"100%":window.innerWidth+"px",!this._isCover)){var n=s.fromEvent(window,"resize").pipe(a.debounceTime(100));this.resizeSub=n.subscribe((function(e){t._width=window.innerWidth+"px"}))}}else e||(this._width=this.oldWidth,this.resizeSub&&this.resizeSub.unsubscribe())},e.prototype.toggleFullScreen=function(){this._setFullScreen()},e.prototype.setFullScreen=function(e){this._setFullScreen(e)},e.decorators=[{type:t.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:[o.trigger("fadeInOut",[o.state("void",o.style({display:"block",opacity:0})),o.state("in",o.style({display:"block",opacity:.6})),o.transition("* => *",o.animate("300ms ease"))]),o.trigger("flyInOut",[o.state("left-void",o.style({transform:"translateX(-100%)",left:0})),o.state("left-in",o.style({transform:"none",left:0})),o.state("right-void",o.style({transform:"translateX(100%)",right:0})),o.state("right-in",o.style({transform:"none",right:0})),o.transition("* => *",o.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)}"]}]}],e.ctorParameters=function(){return[{type:t.ElementRef}]},e.propDecorators={id:[{type:t.Input}],width:[{type:t.Input}],isCover:[{type:t.Input}],fullScreen:[{type:t.Input}],drawerContentHost:[{type:t.ViewChild,args:[c,{static:!0}]}],backdropCloseable:[{type:t.Input}],escKeyCloseable:[{type:t.Input}],beforeHidden:[{type:t.Input}],clickDoms:[{type:t.Input}],afterOpened:[{type:t.Input}],position:[{type:t.Input}],bodyScrollable:[{type:t.Input}],keydownHandler:[{type:t.HostListener,args:["document:keydown.escape",["$event"]]}]},e}();var u=function(){function e(e,t){this.overlayContainerRef=e,this.componentFactoryResolver=t}return e.prototype.open=function(e){var t=e.drawerContentComponent,n=e.injector,i=e.componentFactoryResolver,o=e.id,s=e.width,a=e.fullScreen,l=e.data,d=e.isCover,c=e.clickDoms,u=e.onClose,h=e.afterOpened,f=e.backdropCloseable,y=e.escKeyCloseable,m=e.beforeHidden,v=e.destroyOnHide,b=void 0===v||v,g=e.position,w=void 0===g?"right":g,C=e.bodyScrollable,S=i||this.componentFactoryResolver,k=this.overlayContainerRef.createComponent(S.resolveComponentFactory(p),n);r.assign(k.instance,{id:o,width:s,isCover:d,clickDoms:c,fullScreen:a,beforeHidden:m,afterOpened:h,escKeyCloseable:y,position:w,backdropCloseable:!!r.isUndefined(f)||f,bodyScrollable:C});var x=k.instance.drawerContentHost.viewContainerRef.createComponent(S.resolveComponentFactory(t),0,n);return r.assign(x.instance,l),k.instance.onHidden=function(){u&&u(),b&&setTimeout((function(){k.hostView.destroy()}))},k.instance.destroy=function(){b||"void"!==k.instance.animateState||k.hostView.destroy()},k.instance.show(),{drawerInstance:k.instance,drawerContentInstance:x.instance}},e.decorators=[{type:t.Injectable}],e.ctorParameters=function(){return[{type:d.OverlayContainerRef},{type:t.ComponentFactoryResolver}]},e}();var h=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule,i.ScrollingModule,l.PortalModule,d.OverlayContainerModule],exports:[p],declarations:[p,c],providers:[u],entryComponents:[p]}]}],e}();e.DrawerComponent=p,e.DrawerContentDirective=c,e.DrawerModule=h,e.DrawerService=u,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-devui-drawer.umd.min.js.map