https://www.evreux.fr/app/plugins/stratis-wp-dev-tools/assets/js/WPNotification.js?ver=3.2.1

1class WPNotification {
2	constructor() {
3		this.createContainer();
4		this.activeNotification = null;
5		this.checkStoredNotification();
6	}
7
8	createContainer() {
9		const wp_admin    = document.getElementById( 'wpadminbar' );
10		const top         = wp_admin ? wp_admin.offsetHeight + 'px' : '8%';
11		this.container    = document.createElement( 'div' );
12		this.container.id = 'wpdt-wp-notification-container';
13		document.body.insertBefore( this.container, document.body.firstChild );
14		this.container.style.position      = 'fixed';
15		this.container.style.top           = top;
16		this.container.style.width         = '100%';
17		this.container.style.zIndex        = '9999';
18		this.container.style.display       = 'flex';
19		this.container.style.flexDirection = 'column';
20		this.container.style.alignItems    = 'center';
21	}
22
23	checkStoredNotification() {
24		const notificationType    = sessionStorage.getItem( 'wpNotificationType' );
25		const notificationMessage = sessionStorage.getItem( 'wpNotificationMessage' );
26		if (notificationType && notificationMessage) {
27			this.show( notificationType, notificationMessage );
28			sessionStorage.removeItem( 'wpNotificationType' );
29			sessionStorage.removeItem( 'wpNotificationMessage' );
30		}
31	}
32
33	show(type, message) {
34		if (this.activeNotification) {
35			this.closeNotification( this.activeNotification );
36		}
37
38		const notification = document.createElement( 'div' );
39		notification.classList.add( 'wpdt-wp-notification', `wpdt-wp-notification-${type}` );
40		notification.innerText = message;
41
42		const closeButton = document.createElement( 'span' );
43		closeButton.classList.add( 'wpdt-wp-notification-close' );
44		closeButton.innerHTML = '×';
45		notification.appendChild( closeButton );
46
47		notification.style.margin       = '10px';
48		notification.style.padding      = '10px 30px';
49		notification.style.borderRadius = '4px';
50		notification.style.boxShadow    = '0 2px 4px rgba(0,0,0,0.2)';
51		notification.style.color        = '#fff';
52		notification.style.fontSize     = '14px';
53		notification.style.fontFamily   = 'Arial, sans-serif';
54		notification.style.maxWidth     = '90%';
55		notification.style.position     = 'relative';
56
57		switch (type) {
58			case 'success':
59				notification.style.backgroundColor = '#4CAF50';
60			break;
61			case 'error':
62				notification.style.backgroundColor = '#F44336';
63			break;
64			case 'alert':
65				notification.style.backgroundColor = '#FF9800';
66			break;
67			default:
68				notification.style.backgroundColor = '#333';
69			break;
70		}
71
72		this.container.appendChild( notification );
73		this.activeNotification = notification;
74
75		setTimeout(
76			() => {
77              notification.style.opacity    = '1';
78              notification.style.transition = 'opacity 0.5s';
79			},
80			100
81		);
82
83		closeButton.addEventListener( 'click', () => this.closeNotification( notification ) );
84		document.addEventListener(
85			'click',
86			(e) => {
87              if ( ! notification.contains( e.target )) {
88                  this.closeNotification( notification );
89              }
90			},
91			{ once: true }
92		);
93
94		setTimeout(
95			() => {
96            this.closeNotification( notification );
97			},
98			60000
99		); // 60 seconds
100	}
101
102	closeNotification(notification) {
103		notification.style.opacity = '0';
104		setTimeout(
105			() => {
106            if (this.container.contains( notification )) {
107                this.container.removeChild( notification );
108                this.activeNotification = null;
109            }
110			},
111			500
112		);
113	}
114}