import { Directive , ComponentRef , HostListener , Input , ElementRef , OnDestroy , OnInit } from '@angular/core' ; import { GalleryComponent } from './gallery.component' ; import { NbDialogService } from '@nebular/theme' ; import { GalleryService } from './gallery.service' ; import * as _ from 'underscore' ; export interface GalleryItem { thumbUrl : string ; fullUrl : string ; recordedAt ? : Date ; } @ Directive ( { selector : '[ngxGallery]' } ) export class GalleryDirective implements OnDestroy , OnInit { disableClick = false ; _items : string ; dialogRef : ComponentRef < GalleryComponent > ; @ Input ( ) item : GalleryItem | GalleryItem [ ] ; @ Input ( ) items : GalleryItem [ ] = [ ] ; @ Input ( ) set disabled ( value ) { this . disableClick = value || false ; if ( this . disableClick ) { this . el . nativeElement . classList . add ( 'disabled' ) ; } else { this . el . nativeElement . classList . remove ( 'disabled' ) ; } } constructor ( private el , private nbDialogService , private galleryService ) { } @ HostListener ( 'click' , [ ] ) onClick ( ) { if ( this . disableClick ) { return ; } let items = JSON . parse ( JSON . stringify ( this . item ) ) ; items = _ . sortBy ( items , 'createdAt' ) . reverse ( ) ; const item = items instanceof Array ? items [ 0 ] : items ; this . nbDialogService . open ( GalleryComponent , { context : { items : this . items , item } , dialogClass : 'fullscreen' } ) ; } ngOnInit ( ) { const item = this . item instanceof Array ? this . item : [ this . item ] ; this . item = _ . sortBy ( item , 'createdAt' ) ; this . galleryService . appendItems ( this . item ) ; } ngOnDestroy ( ) { } }