initial commit

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);
+    }
+}
+