aboutsummaryrefslogtreecommitdiff
path: root/src/vanilla.yo.notification.ts
diff options
context:
space:
mode:
Diffstat (limited to 'src/vanilla.yo.notification.ts')
-rw-r--r--src/vanilla.yo.notification.ts76
1 files changed, 76 insertions, 0 deletions
diff --git a/src/vanilla.yo.notification.ts b/src/vanilla.yo.notification.ts
new file mode 100644
index 0000000..7b50804
--- /dev/null
+++ b/src/vanilla.yo.notification.ts
@@ -0,0 +1,76 @@
+// Import stylesheets
+import './styles/style.css';
+import { Config } from './config.interface';
+
+export default class VanillaYoNotification {
+
+ private notificationTemplate: string;
+ private defaultConfig: Config;
+ private notifInner: any;
+
+ constructor() {
+ this.defaultConfig = {
+ content: '',
+ footer: '',
+ timeout: 3000,
+ title: ''
+ }
+ this.init();
+ }
+
+ private init() {
+
+ this.buildContainers();
+
+
+ }
+
+ buildContainers(){
+ let container = document.createElement('div');
+ container.className = "notif-mainContainer topRight";
+
+ this.notifInner = document.createElement('div');
+ this.notifInner.className = "notif-inner";
+
+ container.appendChild(this.notifInner);
+ document.body.appendChild(container);
+ }
+
+
+ show(config: Config) {
+
+ let notifContainer = document.createElement('div');
+ notifContainer.className = "vanilla-yo-notification";
+
+
+ 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(() => {
+ this.destroyNotification(notifContainer);
+ }, (config.timeout ? config.timeout : this.defaultConfig.timeout));
+
+
+ }
+
+ private destroyNotification(container: Node) {
+ this.notifInner.removeChild(container);
+ }
+}
+