import { AfterViewInit , Component , ElementRef , HostBinding , Inject , Input , Optional , QueryList , Renderer2 , ViewChild , ViewChildren , ViewEncapsulation } from '@angular/core' ; import { delay , map , mergeMap , startWith } from 'rxjs/operators' ; import { Observable } from 'rxjs' ; import { ObColumnPanelDirective } from './column-panel.directive' ; import { ObScrollingEvents } from '../scrolling/scrolling-events' ; import { WINDOW } from '../utilities' ; import { ObIToggleDirection } from './column-layout.model' ; import { ObUseObliqueIcons } from '../icon/icon.model' ; @ Component ( { selector : 'ob-column-layout' , exportAs : 'obColumnLayout' , templateUrl : './column-layout.component.html' , styleUrls : [ './column-layout.component.scss' ] , encapsulation : ViewEncapsulation . None , host : { class : 'ob-column-layout' } } ) export class ObColumnLayoutComponent implements AfterViewInit { @ Input ( ) left = true ; @ Input ( ) right = true ; @ Input ( ) @ HostBinding ( 'class.ob-wider-columns' ) wider = false ; @ Input ( ) @ HostBinding ( 'class.ob-no-layout' ) noLayout = false ; toggleLeftIcon$ : Observable < ObIToggleDirection > ; toggleRightIcon$ : Observable < ObIToggleDirection > ; @ HostBinding ( 'class.ob-font-awesome' ) useFontAwesomeIcon : boolean ; @ ViewChild ( 'columnLeft' ) private readonly columnLeft : ObColumnPanelDirective ; @ ViewChild ( 'columnRight' ) private readonly columnRight : ObColumnPanelDirective ; @ ViewChildren ( 'columnToggle' ) private readonly toggles : QueryList < ElementRef > ; private readonly window : Window ; constructor ( private readonly el , private readonly renderer , private readonly scroll , @ Inject ( WINDOW ) window , @ Optional ( ) @ Inject ( ObUseObliqueIcons ) useObliqueIcon ) { this . window = window ; this . useFontAwesomeIcon = ! useObliqueIcon ; } ngAfterViewInit ( ) { this . toggles . changes . pipe ( mergeMap ( ( ) => this . scroll . scrolled ) ) . subscribe ( ( ) => this . center ( ) ) ; this . toggleLeftIcon$ = this . getToggleDirection ( this . columnLeft , 'left' , 'right' ) ; this . toggleRightIcon$ = this . getToggleDirection ( this . columnRight , 'right' , 'left' ) ; } toggleLeft ( ) { if ( this . columnLeft ) { this . columnLeft . toggle ( ) ; } } toggleRight ( ) { if ( this . columnRight ) { this . columnRight . toggle ( ) ; } } private static visibleHeight ( dimension , window ) { if ( dimension . top < 0 && dimension . top + dimension . height > window . innerHeight ) { return window . innerHeight ; } else if ( dimension . top < 0 ) { return dimension . height - dimension . top ; } return window . innerHeight - dimension . top ; } private getToggleDirection ( column , expandedDirection , collapsedDirection ) { if ( column ?. toggled ) { return column . toggled . pipe ( startWith ( false ) , delay ( 0 ) , map ( collapsed => ( collapsed ? collapsedDirection : expandedDirection ) ) ) ; } } private center ( ) { const dimension = this . el . nativeElement . getBoundingClientRect ( ) ; const middle = ObColumnLayoutComponent . visibleHeight ( dimension , this . window ) / 2 ; const top = this . window . innerHeight > dimension . height ? '50%' : `${ middle }px` ; this . toggles . forEach ( toggle => this . renderer . setStyle ( toggle . nativeElement , 'top' , top ) ) ; } }