import { NgWidgetContainer } from '../directives/NgWidgetContainer' ; import { NgWidget } from '../directives/NgWidget' ; import { INgWidgetPosition , INgWidgetSize } from '../interfaces/INgDraggableWidgetConfig' ; import { Component , Directive , ElementRef , Renderer , EventEmitter , Host , ViewEncapsulation , Type , ComponentRef , KeyValueDiffer , KeyValueDiffers , OnInit , OnDestroy , DoCheck , ViewContainerRef , Output } from '@angular/core' ; @ Component ( { selector : 'ng-widget-placeholder' , template : '' } ) export class NgWidgetPlaceholder implements OnInit { private _size : INgWidgetSize ; private _position : INgWidgetPosition ; private _ngWidgetContainer : NgWidgetContainer ; private _cascadeMode : string ; constructor ( private _ngEl , private _renderer ) { } public registerGrid ( ngGrid ) { this . _ngWidgetContainer = ngGrid ; } public ngOnInit ( ) { this . _renderer . setElementClass ( this . _ngEl . nativeElement , 'widget-placeholder' , true ) ; if ( this . _ngWidgetContainer . autoStyle ) this . _renderer . setElementStyle ( this . _ngEl . nativeElement , 'position' , 'absolute' ) ; } public setSize ( newSize ) { this . _size = newSize ; this . _recalculateDimensions ( ) ; } public setGridPosition ( newPosition ) { this . _position = newPosition ; this . _recalculatePosition ( ) ; } public setCascadeMode ( cascade ) { this . _cascadeMode = cascade ; switch ( cascade ) { case 'up' : case 'left' : default : this . _renderer . setElementStyle ( this . _ngEl . nativeElement , 'left' , '0px' ) ; this . _renderer . setElementStyle ( this . _ngEl . nativeElement , 'top' , '0px' ) ; this . _renderer . setElementStyle ( this . _ngEl . nativeElement , 'right' , null ) ; this . _renderer . setElementStyle ( this . _ngEl . nativeElement , 'bottom' , null ) ; break ; case 'right' : this . _renderer . setElementStyle ( this . _ngEl . nativeElement , 'right' , '0px' ) ; this . _renderer . setElementStyle ( this . _ngEl . nativeElement , 'top' , '0px' ) ; this . _renderer . setElementStyle ( this . _ngEl . nativeElement , 'left' , null ) ; this . _renderer . setElementStyle ( this . _ngEl . nativeElement , 'bottom' , null ) ; break ; case 'down' : this . _renderer . setElementStyle ( this . _ngEl . nativeElement , 'left' , '0px' ) ; this . _renderer . setElementStyle ( this . _ngEl . nativeElement , 'bottom' , '0px' ) ; this . _renderer . setElementStyle ( this . _ngEl . nativeElement , 'right' , null ) ; this . _renderer . setElementStyle ( this . _ngEl . nativeElement , 'top' , null ) ; break ; } } private _setDimensions ( w , h ) { this . _renderer . setElementStyle ( this . _ngEl . nativeElement , 'width' , w + 'px' ) ; this . _renderer . setElementStyle ( this . _ngEl . nativeElement , 'height' , h + 'px' ) ; } private _setPosition ( x , y ) { switch ( this . _cascadeMode ) { case 'up' : case 'left' : default : this . _renderer . setElementStyle ( this . _ngEl . nativeElement , 'transform' , 'translate(' + x + 'px, ' + y + 'px)' ) ; break ; case 'right' : this . _renderer . setElementStyle ( this . _ngEl . nativeElement , 'transform' , 'translate(' + - x + 'px, ' + y + 'px)' ) ; break ; case 'down' : this . _renderer . setElementStyle ( this . _ngEl . nativeElement , 'transform' , 'translate(' + x + 'px, ' + - y + 'px)' ) ; break ; } } private _recalculatePosition ( ) { const x = ( this . _ngWidgetContainer . colWidth + this . _ngWidgetContainer . marginLeft + this . _ngWidgetContainer . marginRight ) * ( this . _position . col - 1 ) + this . _ngWidgetContainer . marginLeft ; const y = ( this . _ngWidgetContainer . rowHeight + this . _ngWidgetContainer . marginTop + this . _ngWidgetContainer . marginBottom ) * ( this . _position . row - 1 ) + this . _ngWidgetContainer . marginTop ; this . _setPosition ( x , y ) ; } private _recalculateDimensions ( ) { const w = ( this . _ngWidgetContainer . colWidth * this . _size . x ) + ( ( this . _ngWidgetContainer . marginLeft + this . _ngWidgetContainer . marginRight ) * ( this . _size . x - 1 ) ) ; const h = ( this . _ngWidgetContainer . rowHeight * this . _size . y ) + ( ( this . _ngWidgetContainer . marginTop + this . _ngWidgetContainer . marginBottom ) * ( this . _size . y - 1 ) ) ; this . _setDimensions ( w , h ) ; } }