2022-01-10 19:34:58 +01:00
|
|
|
export default class NotificationMessage {
|
2023-05-16 23:21:31 +02:00
|
|
|
private static _notificationArea: HTMLElement = document.getElementById("notification-area") as HTMLElement;
|
|
|
|
private static _notificationLabel: HTMLElement = document.getElementById("notification-label") as HTMLElement;
|
|
|
|
private static _notificationPanelArea: HTMLElement = document.getElementById("panel-fenetre-notification-area") as HTMLElement;
|
|
|
|
private static _notificationPanelLabel: HTMLElement = document.getElementById("panel-fenetre-notification-label") as HTMLElement;
|
2022-01-10 19:34:58 +01:00
|
|
|
private static _currentTimeout: NodeJS.Timeout | undefined;
|
2023-05-16 23:21:31 +02:00
|
|
|
|
2022-01-10 19:34:58 +01:00
|
|
|
public static ajouterNotification(message: string): void {
|
2023-05-16 23:21:31 +02:00
|
|
|
this.ajouterNotificationDiv(this._notificationArea, this._notificationLabel, message);
|
2022-01-31 19:29:33 +01:00
|
|
|
}
|
|
|
|
|
2023-05-17 23:20:58 +02:00
|
|
|
public static ajouterNotificationPanel(message: string, origine: HTMLElement): void {
|
2023-05-16 23:21:31 +02:00
|
|
|
this.ajouterNotificationDiv(this._notificationPanelArea, this._notificationPanelLabel, message);
|
2023-05-17 23:20:58 +02:00
|
|
|
const { top: topParent, left: leftParent } = origine.getBoundingClientRect();
|
|
|
|
this._notificationPanelArea.style.top = `${topParent + 30}px`;
|
|
|
|
this._notificationPanelArea.style.left = `${leftParent - this._notificationPanelArea.getBoundingClientRect().width / 2}px`;
|
2022-01-31 19:29:33 +01:00
|
|
|
}
|
|
|
|
|
2023-05-16 23:21:31 +02:00
|
|
|
private static ajouterNotificationDiv(divArea: HTMLElement, divLabel: HTMLElement, message: string): void {
|
2022-01-10 19:34:58 +01:00
|
|
|
if (this._currentTimeout) {
|
|
|
|
clearTimeout(this._currentTimeout);
|
|
|
|
this._currentTimeout = undefined;
|
|
|
|
}
|
2023-05-16 23:21:31 +02:00
|
|
|
divLabel.innerHTML = message;
|
|
|
|
divArea.style.opacity = "1";
|
2022-01-10 19:34:58 +01:00
|
|
|
this._currentTimeout = setTimeout(
|
|
|
|
(() => {
|
2023-05-16 23:21:31 +02:00
|
|
|
divArea.style.opacity = "0";
|
2022-01-12 08:36:43 +01:00
|
|
|
this._currentTimeout = setTimeout(
|
|
|
|
(() => {
|
2023-05-16 23:21:31 +02:00
|
|
|
divLabel.innerHTML = "";
|
2022-01-12 08:36:43 +01:00
|
|
|
this._currentTimeout = undefined;
|
|
|
|
}).bind(this),
|
|
|
|
1000
|
|
|
|
);
|
2022-01-10 19:34:58 +01:00
|
|
|
}).bind(this),
|
|
|
|
5000
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|