Skip to content

Commit

Permalink
refactor( EventListener ): improve EventListener types
Browse files Browse the repository at this point in the history
    - 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`
  • Loading branch information
AbrahemAlhofe committed Jun 15, 2021
1 parent 1189430 commit 3ba4ece
Show file tree
Hide file tree
Showing 5 changed files with 30 additions and 47 deletions.
17 changes: 3 additions & 14 deletions src/notyf.models.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { INotyfNotificationOptions, DeepPartial, NotyfEvent } from './notyf.options';
import EventEmitter from './utils/classes/eventEmitter';

export interface INotyfEventPayload {
target: NotyfNotification;
Expand All @@ -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 {
Expand Down
6 changes: 2 additions & 4 deletions src/notyf.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>) {
Expand Down
4 changes: 2 additions & 2 deletions src/notyf.view.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
17 changes: 0 additions & 17 deletions src/utils/classes/eventListener.ts

This file was deleted.

33 changes: 23 additions & 10 deletions src/utils/classes/timer.ts
Original file line number Diff line number Diff line change
@@ -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();

Expand All @@ -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);

}

}

0 comments on commit 3ba4ece

Please sign in to comment.