@ -8,7 +8,11 @@
import { Directive , EmbeddedViewRef , Input , OnChanges , OnDestroy , Renderer2 , SimpleChanges , TemplateRef , ViewContainerRef } from '@angular/core' ; import { Directive , EmbeddedViewRef , Input , OnChanges , OnDestroy , Renderer2 , SimpleChanges , TemplateRef , ViewContainerRef } from '@angular/core' ;
import { Subscription } from 'rxjs' ; import { Subscription } from 'rxjs' ;
import { ModalView , Types } from '@app/framework/internal' ; import {
DialogModel ,
ModalModel ,
Types
} from '@app/framework/internal' ;
import { RootViewComponent } from './root-view.component' ; import { RootViewComponent } from './root-view.component' ;
@ -21,7 +25,7 @@ export class ModalViewDirective implements OnChanges, OnDestroy {
private renderedView : EmbeddedViewRef < any > | null = null ; private renderedView : EmbeddedViewRef < any > | null = null ;
@Input ( 'sqxModalView' ) @Input ( 'sqxModalView' )
public modalView : ModalView | any ; public modalView : DialogModel | ModalModel | any ;
@Input ( 'sqxModalViewOnRoot' ) @Input ( 'sqxModalViewOnRoot' )
public placeOnRoot = false ; public placeOnRoot = false ;
@ -29,6 +33,9 @@ export class ModalViewDirective implements OnChanges, OnDestroy {
@Input ( 'sqxModalViewCloseAuto' ) @Input ( 'sqxModalViewCloseAuto' )
public closeAuto = true ; public closeAuto = true ;
@Input ( 'sqxModalViewCloseAlways' )
public closeAlways = false ;
constructor ( constructor (
private readonly templateRef : TemplateRef < any > , private readonly templateRef : TemplateRef < any > ,
private readonly renderer : Renderer2 , private readonly renderer : Renderer2 ,
@ -38,9 +45,10 @@ export class ModalViewDirective implements OnChanges, OnDestroy {
} }
public ngOnDestroy() { public ngOnDestroy() {
this . stopListening ( ) ; this . unsubscribeToModal ( ) ;
this . unsubscribeToClick ( ) ;
if ( Types . is ( this . modalView , ModalView ) ) { if ( Types . is ( this . modalView , Dialog Model ) || Types . is ( this . mod alView, ModalModel ) ) {
this . modalView . hide ( ) ; this . modalView . hide ( ) ;
} }
} }
@ -50,12 +58,9 @@ export class ModalViewDirective implements OnChanges, OnDestroy {
return ; return ;
} }
if ( this . subscription ) { this . unsubscribeToModal ( ) ;
this . subscription . unsubscribe ( ) ;
this . subscription = null ;
}
if ( Types . is ( this . modalView , ModalView ) ) { if ( Types . is ( this . modalView , DialogModel ) || Types . is ( this . modalView , ModalModel ) ) {
this . subscription = this . subscription =
this . modalView . isOpen . subscribe ( isOpen = > { this . modalView . isOpen . subscribe ( isOpen = > {
this . update ( isOpen ) ; this . update ( isOpen ) ;
@ -71,11 +76,9 @@ export class ModalViewDirective implements OnChanges, OnDestroy {
} }
if ( isOpen && ! this . renderedView ) { if ( isOpen && ! this . renderedView ) {
if ( this . placeOnRoot ) { const container = this . getContainer ( ) ;
this . renderedView = this . rootView . viewContainer . createEmbeddedView ( this . templateRef ) ;
} else { this . renderedView = container . createEmbeddedView ( this . templateRef ) ;
this . renderedView = this . viewContainer . createEmbeddedView ( this . templateRef ) ;
}
if ( this . renderedView . rootNodes [ 0 ] . style ) { if ( this . renderedView . rootNodes [ 0 ] . style ) {
this . renderer . setStyle ( this . renderedView . rootNodes [ 0 ] , 'display' , 'block' ) ; this . renderer . setStyle ( this . renderedView . rootNodes [ 0 ] , 'display' , 'block' ) ;
@ -85,18 +88,21 @@ export class ModalViewDirective implements OnChanges, OnDestroy {
this . startListening ( ) ; this . startListening ( ) ;
} ) ; } ) ;
} else if ( ! isOpen && this . renderedView ) { } else if ( ! isOpen && this . renderedView ) {
this . renderedView = null ; const container = this . getContainer ( ) ;
const containerIndex = container . indexOf ( this . renderedView ) ;
if ( this . placeOnRoot ) { container . remove ( containerIndex ) ;
this . rootView . viewContainer . clear ( ) ;
} else {
this . viewContainer . clear ( ) ;
}
this . stopListening ( ) ; this . renderedView = null ;
this . unsubscribeToClick ( ) ;
} }
} }
private getContainer() {
return this . placeOnRoot ? this . rootView.viewContainer : this.viewContainer ;
}
private startListening() { private startListening() {
if ( ! this . closeAuto ) { if ( ! this . closeAuto ) {
return ; return ;
@ -112,7 +118,7 @@ export class ModalViewDirective implements OnChanges, OnDestroy {
return ; return ;
} }
if ( this . modalView . closeAlways ) { if ( this . closeAlways ) {
this . modalView . hide ( ) ; this . modalView . hide ( ) ;
} else { } else {
try { try {
@ -133,7 +139,14 @@ export class ModalViewDirective implements OnChanges, OnDestroy {
} ) ; } ) ;
} }
private stopListening() { private unsubscribeToModal() {
if ( this . subscription ) {
this . subscription . unsubscribe ( ) ;
this . subscription = null ;
}
}
private unsubscribeToClick() {
if ( this . documentClickListener ) { if ( this . documentClickListener ) {
this . documentClickListener ( ) ; this . documentClickListener ( ) ;
this . documentClickListener = null ; this . documentClickListener = null ;
Sebastian
8 years ago
