Now supports
* type arguments, * positional parameters and * html as content * Documentation updates
This commit is contained in:
83
src/yo/vanilla.yo.notification.ts
Normal file
83
src/yo/vanilla.yo.notification.ts
Normal file
@@ -0,0 +1,83 @@
|
||||
// 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);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user