feat(LoadClick): added loadClickEventType & loadClickPreventDefault ⚡

Jaspero · Jan 30, 2020 · a25be92 · a25be92
1 parent c90edfc
commit a25be92
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 46 deletions.
diff --git a/README.md b/README.md
@@ -182,9 +182,11 @@ Listens for the emitted click event on the target element and add loading class.
 
 | name                     | type            | default   | description                              |
 | ------------------------ | --------------- | --------- | ---------------------------------------- |
-| jpLoadClick              | Observable<any> |  false    |  |
-| loadClickClass           | string          | 'loading' |  |
-| loadClickStopPropagation | boolean         | false     |  |
+| jpLoadClick              | Observable<any> |  false    |  
+| loadClickClass           | string          | 'loading' |  
+| loadClickStopPropagation | boolean         | false     |  
+| loadClickEventType       | string          | 'click'   |  
+| loadClickPreventDefault  | boolean         | false     |  
 
 ## Pipes
 

diff --git a/projects/ng-helpers/src/directives/load-click/load-click.directive.ts b/projects/ng-helpers/src/directives/load-click/load-click.directive.ts
@@ -1,10 +1,4 @@
-import {
-  Directive,
-  ElementRef,
-  HostListener, Inject,
-  Input,
-  Renderer2
-} from '@angular/core';
+import {Directive, ElementRef, Inject, Input, OnInit, Renderer2} from '@angular/core';
 import {Observable} from 'rxjs';
 import {finalize, takeUntil} from 'rxjs/operators';
 import {RxDestroy} from '../../helpers/rx-destroy';
@@ -17,7 +11,7 @@ import {LOAD_CLICK_CLASS} from './load-click-class.const';
  */
 
 @Directive({selector: '[jpLoadClick]'})
-export class LoadClickDirective extends RxDestroy {
+export class LoadClickDirective extends RxDestroy implements OnInit {
   constructor(
     private _el: ElementRef,
     private _renderer: Renderer2,
@@ -29,29 +23,44 @@ export class LoadClickDirective extends RxDestroy {
   @Input()
   jpLoadClick: () => Observable<any>;
 
+  @Input()
+  loadClickEventType = 'click';
+
   @Input()
   loadClickStopPropagation = false;
 
+  @Input()
+  loadClickPreventDefault = false;
+
   @Input()
   loadClickClass: string;
 
-  @HostListener('click', ['$event'])
-  click(event) {
-    const defaultClass = this.loadClickClass || this._defaultLoadClickClass;
+  ngOnInit() {
+    this._renderer.listen(
+      this._el.nativeElement,
+      this.loadClickEventType,
+      event => {
+        const defaultClass = this.loadClickClass || this._defaultLoadClickClass;
+
+        if (this.loadClickStopPropagation) {
+          event.stopPropagation();
+        }
 
-    if (this.loadClickStopPropagation) {
-      event.stopPropagation();
-    }
+        if (this.loadClickPreventDefault) {
+          event.preventDefault();
+        }
 
-    this._renderer.addClass(this._el.nativeElement, defaultClass);
+        this._renderer.addClass(this._el.nativeElement, defaultClass);
 
-    this.jpLoadClick()
-      .pipe(
-        finalize(() =>
-          this._renderer.removeClass(this._el.nativeElement, defaultClass)
-        ),
-        takeUntil(this.destroyed$)
-      )
-      .subscribe();
+        this.jpLoadClick()
+          .pipe(
+            finalize(() =>
+              this._renderer.removeClass(this._el.nativeElement, defaultClass)
+            ),
+            takeUntil(this.destroyed$)
+          )
+          .subscribe();
+      }
+    );
   }
 }
diff --git a/projects/ng-helpers/src/directives/stop-propagation/stop-propagation.directive.ts b/projects/ng-helpers/src/directives/stop-propagation/stop-propagation.directive.ts
@@ -1,13 +1,4 @@
-import {
-  Directive,
-  Output,
-  EventEmitter,
-  Renderer2,
-  ElementRef,
-  OnDestroy,
-  OnInit,
-  Input
-} from '@angular/core';
+import {Directive, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2} from '@angular/core';
 
 /**
  * Used for preventing propagation on event calls event.stopPropagation())
@@ -18,7 +9,7 @@ import {
 @Directive({
   selector: '[jpStopPropagation]'
 })
-export class StopPropagationDirective implements OnInit, OnDestroy {
+export class StopPropagationDirective implements OnInit {
   constructor(private _renderer: Renderer2, private _el: ElementRef) {}
 
   /**
@@ -38,10 +29,8 @@ export class StopPropagationDirective implements OnInit, OnDestroy {
    */
   @Output() jpStopPropagation = new EventEmitter();
 
-  private _eventListener: any;
-
   ngOnInit() {
-    this._eventListener = this._renderer.listen(
+    this._renderer.listen(
       this._el.nativeElement,
       this.stopPropagationEventType,
       event => {
@@ -64,12 +53,6 @@ export class StopPropagationDirective implements OnInit, OnDestroy {
     );
   }
 
-  ngOnDestroy() {
-    try {
-      this._eventListener.unsubscribe();
-    } catch (e) {}
-  }
-
   private sp(event) {
     event.stopPropagation();
     this.jpStopPropagation.emit(event);