@3dgenomes/ngx-resizable
Version:
A Resizable Split-Pane Layout for Angular6+
2 lines • 6.85 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("@3dgenomes/ngx-resizable",["exports","@angular/core","@angular/common"],e):e(((t=t||self)["3dgenomes"]=t["3dgenomes"]||{},t["3dgenomes"]["ngx-resizable"]={}),t.ng.core,t.ng.common)}(this,function(t,e,i){"use strict";var n=function(){function t(){}return t.decorators=[{type:e.Injectable,args:[{providedIn:"root"}]}],t.ctorParameters=function(){return[]},t.ngInjectableDef=e.ɵɵdefineInjectable({factory:function(){return new t},token:t,providedIn:"root"}),t}();var o=function(){function t(){}return Object.defineProperty(t.prototype,"nativeWindow",{get:function(){return window},enumerable:!0,configurable:!0}),t.decorators=[{type:e.Injectable,args:[{providedIn:"root"}]}],t.ngInjectableDef=e.ɵɵdefineInjectable({factory:function(){return new t},token:t,providedIn:"root"}),t}(),r=window,s=function(){function t(t,i){this.regionElement=t,this.windowRef=i,this.resizable=!0,this.noTransition=!1,this.rFlex=!1,this.resizeStart=new e.EventEmitter,this.resizing=new e.EventEmitter,this.resizeEnd=new e.EventEmitter,this.vx=1,this.vy=1,this.info={},this.nativeElement=this.regionElement.nativeElement}return t.prototype.ngOnInit=function(){this.rFlex||(this.resizable=!1),this.flexBasis="flexBasis"in this.nativeElement.style?"flexBasis":"webkitFlexBasis"in this.nativeElement.style?"webkitFlexBasis":"msFlexPreferredSize"in this.nativeElement.style?"msFlexPreferredSize":"flexBasis"},t.prototype.ngAfterViewInit=function(){this.style=this.windowRef.nativeWindow.getComputedStyle(this.nativeElement)},t.prototype.updateInfo=function(t){this.info.width=!1,this.info.height=!1,"x"===this.axis?this.info.width=parseInt(this.nativeElement.style[this.rFlex?this.flexBasis:"width"],10):this.info.height=parseInt(this.nativeElement.style[this.rFlex?this.flexBasis:"height"],10),this.info.id=this.nativeElement.id,this.info.evt=t},t.prototype.dragStart=function(t,e){var i=t.originalEvent;this.dragDir=e,this.axis="left"===this.dragDir||"right"===this.dragDir?"x":"y",this.start="x"===this.axis?i.clientX:i.clientY,this.w=parseInt(this.style.getPropertyValue("width"),10),this.h=parseInt(this.style.getPropertyValue("height"),10),this.resizeStart.emit({info:this.info}),this.noTransition=!0},t.prototype.dragEnd=function(t){var e=t.originalEvent;this.updateInfo(e),this.resizeEnd.emit({info:this.info}),this.noTransition=!1},t.prototype.dragging=function(t){var e=t.originalEvent,i="x"===this.axis?this.start-e.clientX:this.start-e.clientY,n=1;switch(this.dragDir){case"top":n=-1;case"bottom":var o=this.h-i*this.vy*n+"px";this.rFlex?this.flexBasis=o:this.height=o;break;case"left":n=-1;case"right":var r=this.w-i*this.vx*n+"px";this.rFlex?this.flexBasis=r:this.width=r}this.updateInfo(e),this.resizing.emit({info:this.info})},t.decorators=[{type:e.Component,args:[{selector:"rsz-layout",template:'<ng-content></ng-content>\n\n<div *ngFor=\'let direction of directions\'\n [class]="\'rg-\' + direction"\n rszDragHandle\n (DragStart)="dragStart($event, direction);"\n (DragEnd)="dragEnd($event)"\n (Drag)="dragging($event)">\n <span></span>\n</div>',providers:[{provide:"Window",useValue:r}],encapsulation:e.ViewEncapsulation.None,styles:[".content{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap}.row{-webkit-box-flex:1;flex:1;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap}.row.resizable{-webkit-box-flex:0;flex:0 0 360px}.cell{box-sizing:border-box;background:#fff;border:4px solid #f0f0f0;-webkit-box-flex:1;flex:1;min-height:60px}.cell.resizable{-webkit-box-flex:0;flex:0 0 360px}.resizable{position:relative}.resizable.no-transition{-webkit-transition:none!important;transition:none!important}.rg-none{display:none}.rg-bottom,.rg-left,.rg-right,.rg-top{display:block;width:8px;height:8px;line-height:8px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:0 0;position:absolute;z-index:1}.rg-bottom span,.rg-left span,.rg-right span,.rg-top span{position:absolute;box-sizing:border-box;display:block;border:1px solid #ccc}.rg-left span,.rg-right span{border-width:0 1px;top:50%;margin:-10px 0 0 2px;height:20px;width:4px}.rg-bottom span,.rg-top span{border-width:1px 0;left:50%;margin:2px 0 0 -10px;width:20px;height:4px}.rg-top{cursor:row-resize;width:100%;top:0;left:0;margin-top:-4px}.rg-right{cursor:col-resize;height:100%;right:0;top:0;margin-right:-8px}.rg-bottom{cursor:row-resize;width:100%;bottom:0;left:0;margin-bottom:-4px}.rg-left{cursor:col-resize;height:100%;left:0;top:0;margin-left:-8px}.content.cols{-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap}.content.cols .row{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap}.content.cols .cell{min-width:60px}.content.cols .rg-top{margin-top:-8px}.content.cols .rg-right{margin-right:-4px}.content.cols .rg-bottom{margin-bottom:-8px}.content.cols .rg-left{margin-left:-4px}"]}]}],t.ctorParameters=function(){return[{type:e.ElementRef},{type:o}]},t.propDecorators={resizable:[{type:e.HostBinding,args:["class.resizable"]}],noTransition:[{type:e.HostBinding,args:["class.no-transition"]}],width:[{type:e.HostBinding,args:["style.width"]}],height:[{type:e.HostBinding,args:["style.height"]}],flexBasis:[{type:e.HostBinding,args:["style.flex-basis"]}],directions:[{type:e.Input}],rFlex:[{type:e.Input}],resizeStart:[{type:e.Output}],resizing:[{type:e.Output}],resizeEnd:[{type:e.Output}]},t}(),a=function(){function t(){this.DragStart=new e.EventEmitter,this.Drag=new e.EventEmitter,this.DragEnd=new e.EventEmitter,this.dragging=!1}return t.prototype.onMousedown=function(t){1===t.which&&(this.dragging=!0,this.DragStart.emit({originalEvent:t}))},t.prototype.onMouseup=function(t){this.dragging&&this.DragEnd.emit({originalEvent:t}),this.dragging=!1},t.prototype.onMousemove=function(t){this.dragging&&this.Drag.emit({originalEvent:t})},t.decorators=[{type:e.Directive,args:[{selector:"[rszDragHandle]"}]}],t.propDecorators={DragStart:[{type:e.Output}],Drag:[{type:e.Output}],DragEnd:[{type:e.Output}],onMousedown:[{type:e.HostListener,args:["mousedown",["$event"]]}],onMouseup:[{type:e.HostListener,args:["document:mouseup",["$event"]]}],onMousemove:[{type:e.HostListener,args:["document:mousemove",["$event"]]}]},t}(),l=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{imports:[i.CommonModule],declarations:[s,a],exports:[s,a]}]}],t}();t.NgxResizableModule=l,t.NgxResizableService=n,t.ResizableComponent=s,t.ɵa=o,t.ɵb=a,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=3dgenomes-ngx-resizable.umd.min.js.map