import { Directive , ElementRef , EventEmitter } from '@angular/core' ; import { Observable , fromEvent } from 'rxjs' ; import { debounceTime } from 'rxjs/operators' ; @ Directive ( { selector : '[minds-messenger-scroll]' , inputs : [ 'emitter' , 'moreData' ] , outputs : [ 'previous' , 'next' ] , } ) export class MessengerScrollDirective { previous = new EventEmitter ( ) ; next = new EventEmitter ( ) ; scroll : Observable < any > ; element ; moreData : boolean = true ; constructor ( public _element ) { this . element = _element . nativeElement ; this . scroll = fromEvent ( this . element , 'scroll' ) ; } set emitter ( emitter ) { emitter . subscribe ( { next : ( ) => { setTimeout ( ( ) => { this . _element . nativeElement . scrollTop = this . _element . nativeElement . scrollHeight ; } ) ; } , } ) ; } ngOnInit ( ) { this . scroll . pipe ( debounceTime ( 100 ) ) . subscribe ( ( ) => { if ( ! this . moreData ) return ; if ( this . element . scrollTop <= 12 ) { this . previous . next ( true ) ; } if ( this . element . scrollTop + this . element . clientHeight >= this . element . scrollHeight - 12 ) { this . next . next ( true ) ; } } ) ; } }