diff --git a/src/notyf.models.ts b/src/notyf.models.ts index 2e3d09c..05cc328 100644 --- a/src/notyf.models.ts +++ b/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> = {}; - - constructor(public options: DeepPartial) {} - - 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) { super() } } export interface IRenderedNotification { diff --git a/src/notyf.ts b/src/notyf.ts index af25712..ea3c8bf 100644 --- a/src/notyf.ts +++ b/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) { diff --git a/src/notyf.view.ts b/src/notyf.view.ts index 40a5be9..934c3bf 100644 --- a/src/notyf.view.ts +++ b/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 diff --git a/src/utils/classes/eventListener.ts b/src/utils/classes/eventListener.ts deleted file mode 100644 index 4478307..0000000 --- a/src/utils/classes/eventListener.ts +++ /dev/null @@ -1,17 +0,0 @@ -type EventCallback = (event: any) => void; - -export default class EventeListener { - protected listeners: Partial> = {}; - - constructor() {} - - public on(eventType: string, cb: EventCallback) { - const callbacks = this.listeners[eventType] || []; - this.listeners[eventType] = callbacks.concat([cb]); - } - - protected triggerEvent(eventType: string, event?: any) { - const callbacks = this.listeners[eventType] || []; - callbacks.forEach((callback: EventCallback) => callback(event)); - } -} diff --git a/src/utils/classes/timer.ts b/src/utils/classes/timer.ts index 2a1e586..5a684a8 100644 --- a/src/utils/classes/timer.ts +++ b/src/utils/classes/timer.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 + +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); + } }