84 lines
2.4 KiB
TypeScript
84 lines
2.4 KiB
TypeScript
// Import stylesheets
|
|
import '../styles/style.css';
|
|
import { Config } from '../interfaces/config.interface';
|
|
|
|
|
|
export default class VYN {
|
|
|
|
private notificationTemplate: string;
|
|
private defaultConfig: Config;
|
|
private notifInner: any;
|
|
private container: any;
|
|
|
|
constructor(config: Config) {
|
|
this.defaultConfig = {
|
|
content: config.content ? config.content : '',
|
|
footer: config.footer ? config.footer : '',
|
|
timeout: config.timeout ? config.timeout : 3000,
|
|
title: config.title ? config.title : '',
|
|
type: config.type ? config.type : 'success',
|
|
position: (config.position && config.position.length == 2) ? config.position : ['bottom', 'right']
|
|
}
|
|
this.init();
|
|
}
|
|
|
|
private init() {
|
|
|
|
this.buildContainers();
|
|
|
|
|
|
}
|
|
|
|
buildContainers() {
|
|
this.container = document.createElement('div');
|
|
this.container.className = `notif-mainContainer ${this.defaultConfig.position.join('-')}`;
|
|
|
|
this.notifInner = document.createElement('div');
|
|
this.notifInner.className = "notif-inner";
|
|
|
|
this.container.appendChild(this.notifInner);
|
|
document.body.appendChild(this.container);
|
|
}
|
|
|
|
|
|
show(config: Config) {
|
|
|
|
let notifContainer = document.createElement('div');
|
|
notifContainer.className = `vanilla-yo-notification ${config.type ? config.type : this.defaultConfig.type}`;
|
|
|
|
this.notificationTemplate = `
|
|
<div class="notification_container">
|
|
<div class="notification_header">
|
|
${config.title ? config.title : this.defaultConfig.title}
|
|
</div>
|
|
<div class="notification_body">
|
|
${config.content ? config.content : this.defaultConfig.content}
|
|
</div>
|
|
<div class="notification_footer">
|
|
${config.footer ? config.footer : this.defaultConfig.footer}
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
|
|
notifContainer.innerHTML = (this.notificationTemplate);
|
|
this.notifInner.appendChild(notifContainer);
|
|
|
|
|
|
setTimeout(() => {
|
|
notifContainer.className = notifContainer.className + ' close';
|
|
this.destroyNotification(notifContainer);
|
|
}, (config.timeout ? config.timeout : this.defaultConfig.timeout));
|
|
|
|
|
|
}
|
|
|
|
private destroyNotification(container: Node) {
|
|
setTimeout(()=>{
|
|
this.notifInner.removeChild(container);
|
|
},100);
|
|
|
|
}
|
|
}
|
|
|