a-notification
Version:
simple customizable notification box
45 lines (42 loc) • 1.45 kB
text/typescript
export function notification(message: string, type: 'success' | 'info' | 'warning' | 'error' | 'dark', duration: number, customClass?: string): void {
let backgroundColor;
switch (type) {
case 'success':
backgroundColor = '#2e7d32';
break;
case 'info':
backgroundColor = '#00897b';
break;
case 'warning':
backgroundColor = '#ff6f00';
break;
case 'error':
backgroundColor = '#c62828';
break;
case 'dark':
backgroundColor = '#212121';
break;
default:
backgroundColor = '#212121';
}
var timestamp = new Date().getTime();
const divId = `a-notification-${timestamp}`;
const divTemp = document.createElement('div');
const textTemp = document.createElement('p');
textTemp.append(message);
divTemp.appendChild(textTemp);
divTemp.id = divId;
divTemp.className = customClass;
divTemp.style.width = '230px';
divTemp.style.height = '5vh';
divTemp.style.position = 'fixed';
divTemp.style.bottom = '20px';
divTemp.style.right = '20px';
divTemp.style.padding = '0 20px';
divTemp.style.color = '#ffff';
divTemp.style.backgroundColor = backgroundColor;
document.querySelector('body').appendChild(divTemp);
setTimeout(function(){
document.getElementById(divId).remove();
}, duration);
}