import { Directive , ElementRef , Input , NgZone , OnDestroy , OnInit , Renderer2 } from '@angular/core' ; import { SplitComponent } from '../component/split.component' ; import { getInputBoolean , getInputPositiveNumber } from '../utils' ; @ Directive ( { selector : 'as-split-area, [as-split-area]' , exportAs : 'asSplitArea' , } ) export class SplitAreaDirective implements OnInit , OnDestroy { private _order : number | null = null ; @ Input ( ) set order ( v ) { this . _order = getInputPositiveNumber ( v , null ) ; this . split . updateArea ( this , true , false ) ; } get order ( ) : number | null { return this . _order ; } private _size : number | null = null ; @ Input ( ) set size ( v ) { this . _size = getInputPositiveNumber ( v , null ) ; this . split . updateArea ( this , false , true ) ; } get size ( ) : number | null { return this . _size ; } private _minSize : number | null = null ; @ Input ( ) set minSize ( v ) { this . _minSize = getInputPositiveNumber ( v , null ) ; this . split . updateArea ( this , false , true ) ; } get minSize ( ) : number | null { return this . _minSize ; } private _maxSize : number | null = null ; @ Input ( ) set maxSize ( v ) { this . _maxSize = getInputPositiveNumber ( v , null ) ; this . split . updateArea ( this , false , true ) ; } get maxSize ( ) : number | null { return this . _maxSize ; } private _lockSize = false ; @ Input ( ) set lockSize ( v ) { this . _lockSize = getInputBoolean ( v ) ; this . split . updateArea ( this , false , true ) ; } get lockSize ( ) : boolean { return this . _lockSize ; } private _visible = true ; @ Input ( ) set visible ( v ) { this . _visible = getInputBoolean ( v ) ; if ( this . _visible ) { this . split . showArea ( this ) ; this . renderer . removeClass ( this . elRef . nativeElement , 'as-hidden' ) ; } else { this . split . hideArea ( this ) ; this . renderer . addClass ( this . elRef . nativeElement , 'as-hidden' ) ; } } get visible ( ) : boolean { return this . _visible ; } private transitionListener : Function ; private readonly lockListeners : Array < Function > = [ ] ; constructor ( private ngZone , public elRef , private renderer , private split ) { this . renderer . addClass ( this . elRef . nativeElement , 'as-split-area' ) ; } public ngOnInit ( ) { this . split . addArea ( this ) ; this . ngZone . runOutsideAngular ( ( ) => { this . transitionListener = this . renderer . listen ( this . elRef . nativeElement , 'transitionend' , ( event ) => { if ( event . propertyName === 'flex-basis' ) { this . split . notify ( 'transitionEnd' , - 1 ) ; } } ) ; } ) ; } public setStyleOrder ( value ) { this . renderer . setStyle ( this . elRef . nativeElement , 'order' , value ) ; } public setStyleFlex ( grow , shrink , basis , isMin , isMax ) { this . renderer . setStyle ( this . elRef . nativeElement , 'flex-grow' , grow ) ; this . renderer . setStyle ( this . elRef . nativeElement , 'flex-shrink' , shrink ) ; this . renderer . setStyle ( this . elRef . nativeElement , 'flex-basis' , basis ) ; if ( isMin === true ) { this . renderer . addClass ( this . elRef . nativeElement , 'as-min' ) ; } else { this . renderer . removeClass ( this . elRef . nativeElement , 'as-min' ) ; } if ( isMax === true ) { this . renderer . addClass ( this . elRef . nativeElement , 'as-max' ) ; } else { this . renderer . removeClass ( this . elRef . nativeElement , 'as-max' ) ; } } public lockEvents ( ) { this . ngZone . runOutsideAngular ( ( ) => { this . lockListeners . push ( this . renderer . listen ( this . elRef . nativeElement , 'selectstart' , ( ) => false ) ) ; this . lockListeners . push ( this . renderer . listen ( this . elRef . nativeElement , 'dragstart' , ( ) => false ) ) ; } ) ; } public unlockEvents ( ) { while ( this . lockListeners . length > 0 ) { const fct = this . lockListeners . pop ( ) ; if ( fct ) { fct ( ) ; } } } public ngOnDestroy ( ) { this . unlockEvents ( ) ; if ( this . transitionListener ) { this . transitionListener ( ) ; } this . split . removeArea ( this ) ; } public collapse ( newSize = 0 , gutter = 'right' ) { this . split . collapseArea ( this , newSize , gutter ) ; } public expand ( ) { this . split . expandArea ( this ) ; } }