feat(lightbox directive) closes #200

Author: MurhafSousli

projects/lightbox/src/lib/lightbox.directive.ts

@@ -0,0 +1,29 @@
+import { Directive, ElementRef, OnInit, Input, OnDestroy, Renderer2 } from '@angular/core';
+import { fromEvent, SubscriptionLike, Subscription } from 'rxjs';
+import { tap } from 'rxjs/operators';
+import { Lightbox } from './lightbox.service';
+
+@Directive({
+  selector: '[lightbox]'
+})
+export class LightboxDirective implements OnInit, OnDestroy {
+
+  clickEvent: SubscriptionLike = Subscription.EMPTY;
+
+  @Input('lightbox') index = 0;
+  @Input('gallery') id = 'root';
+
+  constructor(private _lightbox: Lightbox, private _el: ElementRef, private _renderer: Renderer2) {
+  }
+
+  ngOnInit() {
+    this._renderer.setStyle(this._el.nativeElement, 'cursor', 'pointer');
+    this.clickEvent = fromEvent(this._el.nativeElement, 'click').pipe(
+      tap(() => this._lightbox.open(this.index, this.id))
+    ).subscribe();
+  }
+
+  ngOnDestroy() {
+    this.clickEvent.unsubscribe();
+  }
+}

projects/lightbox/src/lib/lightbox.module.ts

@@ -4,6 +4,7 @@ import { Gallery, GalleryModule } from '@ngx-gallery/core';
 
 import { Lightbox } from './lightbox.service';
 import { LightboxComponent } from './lightbox.component';
+import { LightboxDirective } from './lightbox.directive';
 import { LightboxConfig } from './lightbox.model';
 import { LIGHTBOX_CONFIG } from './lightbox.token';
 
@@ -17,7 +18,11 @@ export function lightboxFactory(config: LightboxConfig, gallery: Gallery, overla
     GalleryModule
   ],
   declarations: [
-    LightboxComponent
+    LightboxComponent,
+    LightboxDirective
+  ],
+  exports: [
+    LightboxDirective
   ],
   entryComponents: [
     LightboxComponent