refactor( EventListener ): improve EventListener types

    - change name of `EventListener" to `EventEmitter`
    - add `EventMap` generic
        | `EventMap` includes events and their payloads
    - make `EventEmitter.targgetEvent` method public
    - make `Timer` passes their event map to `EventEmitter`
    - make `NotyfNotification` extends `EventEmitter`
    - pass `target` as the target property on event "dimiss" and event "click" on `Notyf`
    - pass `notification` as the target property to events "mouseover" and "mouseleave" on `NotyfView`

Author: AbrahemAlhofe

src/notyf.models.ts

@@ -1,4 +1,5 @@
 import { INotyfNotificationOptions, DeepPartial, NotyfEvent } from './notyf.options';
+import EventEmitter from './utils/classes/eventEmitter';
 
 export interface INotyfEventPayload {
   target: NotyfNotification;
@@ -7,20 +8,8 @@ export interface INotyfEventPayload {
 
 export type NotyfEventCallback = (payload: INotyfEventPayload) => void;
 
-export class NotyfNotification {
-  private listeners: Partial<Record<NotyfEvent, NotyfEventCallback[]>> = {};
-
-  constructor(public options: DeepPartial<INotyfNotificationOptions>) {}
-
-  public on(eventType: NotyfEvent, cb: NotyfEventCallback) {
-    const callbacks = this.listeners[eventType] || [];
-    this.listeners[eventType] = callbacks.concat([cb]);
-  }
-
-  triggerEvent(eventType: NotyfEvent, event?: Event) {
-    const callbacks = this.listeners[eventType] || [];
-    callbacks.forEach((cb) => cb({ target: this, event }));
-  }
+export class NotyfNotification extends EventEmitter<{ [ K in NotyfEvent ]: INotyfEventPayload }> {
+  constructor(public options: DeepPartial<INotyfNotificationOptions>) { super() }
 }
 
 export interface IRenderedNotification {

src/notyf.ts

@@ -30,12 +30,10 @@ export default class Notyf {
 
     this.view.on(NotyfEvent.Dismiss, ({ target, event }) => {
       this._removeNotification(target);
-      // tslint:disable-next-line: no-string-literal
-      target['triggerEvent'](NotyfEvent.Dismiss, event);
+      target.triggerEvent(NotyfEvent.Dismiss, { target, event });
     });
 
-    // tslint:disable-next-line: no-string-literal
-    this.view.on(NotyfEvent.Click, ({ target, event }) => target['triggerEvent'](NotyfEvent.Click, event));
+    this.view.on(NotyfEvent.Click, ({ target, event }) => target.triggerEvent(NotyfEvent.Click, { target, event }));
   }
 
   public error(payload: string | Partial<INotyfNotificationOptions>) {

src/notyf.view.ts

@@ -197,11 +197,11 @@ export class NotyfView {
     );
 
     notificationElem.addEventListener('mouseover', event =>
-      notification.triggerEvent(NotyfEvent.MouseOver, event)
+      notification.triggerEvent(NotyfEvent.MouseOver, { target: notification, event })
     )
 
     notificationElem.addEventListener('mouseleave', event =>
-      notification.triggerEvent(NotyfEvent.MouseLeave, event)
+      notification.triggerEvent(NotyfEvent.MouseLeave, { target: notification, event })
     )
 
     // Adjust margins depending on whether its an upper or lower notification

src/utils/classes/eventListener.ts

@@ -1,6 +1,9 @@
-import EventListener from './eventListener';
+import EventEmitter from './eventEmitter';
 
-export default class Timer extends EventListener {
+type TimerEvents = "finished" | "pause" | "resume"
+type TimerEventMap = Record<TimerEvents, undefined>
+
+export default class Timer extends EventEmitter< TimerEventMap > {
 
   private startTime: number = Date.now();
 
@@ -12,34 +15,44 @@ export default class Timer extends EventListener {
     return this.duration - (this.lastTime - this.startTime);
   }
 
-  constructor(public duration: number) {
+  constructor( public duration: number ) {
+
     super();
 
     this.timer = setTimeout(() => {
-      this.triggerEvent('finished');
+
+      this.triggerEvent('finished', undefined);
 
       this.lastTime = Date.now();
+    
     }, duration);
+  
   }
 
   pause() {
-    this.triggerEvent('pause');
 
     clearTimeout(this.timer);
 
     this.lastTime = Date.now();
+    
+    this.triggerEvent('pause', undefined);
+
   }
 
   resume() {
-    this.triggerEvent('resume');
-
+    
     clearTimeout(this.timer);
-
+    
     this.timer = setTimeout(() => {
-      this.triggerEvent('finished');
-
+      
+      this.triggerEvent('finished', undefined);
+      
       this.lastTime = Date.now();
+
     }, this.leftTime);
+
+    this.triggerEvent('resume', undefined);
+  
   }
 
 }