From 22e4705a9cde1ec45fac032721af6d47ef60566b Mon Sep 17 00:00:00 2001
From: Indrajith K L
Date: Mon, 18 Dec 2017 17:02:00 +0530
Subject: initial commit
---
src/config.interface.ts | 6 ++++
src/index.html | 22 ++++++++++++
src/index.spec.ts | 5 +++
src/index.ts | 3 ++
src/styles/style.css | 38 +++++++++++++++++++++
src/vanilla.yo.notification.ts | 76 ++++++++++++++++++++++++++++++++++++++++++
src/vendor.ts | 4 +++
7 files changed, 154 insertions(+)
create mode 100644 src/config.interface.ts
create mode 100644 src/index.html
create mode 100644 src/index.spec.ts
create mode 100644 src/index.ts
create mode 100644 src/styles/style.css
create mode 100644 src/vanilla.yo.notification.ts
create mode 100644 src/vendor.ts
(limited to 'src')
diff --git a/src/config.interface.ts b/src/config.interface.ts
new file mode 100644
index 0000000..178a309
--- /dev/null
+++ b/src/config.interface.ts
@@ -0,0 +1,6 @@
+export interface Config {
+ content: string;
+ timeout?: number;
+ title: string;
+ footer?: string;
+}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..15eaf96
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
+
+ <%= htmlWebpackPlugin.options.title %>
+
+
+
+
+
+
+
+ You have successfully started your Typescript application using Webpack. Open your console to see your printed message from the index.ts file
+ By @renaudin_yann
+
+
+
\ No newline at end of file
diff --git a/src/index.spec.ts b/src/index.spec.ts
new file mode 100644
index 0000000..64b3e49
--- /dev/null
+++ b/src/index.spec.ts
@@ -0,0 +1,5 @@
+describe('TypeScript WebPack Starter Tests', () => {
+ it('A good way to start building an awesome lib is by doing Unit Tests 👌🏽', () => {
+ expect(true).toBe(true);
+ });
+})
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
new file mode 100644
index 0000000..bb3d67c
--- /dev/null
+++ b/src/index.ts
@@ -0,0 +1,3 @@
+import VanillaYoNotification from "./vanilla.yo.notification";
+
+(window as any).VanillaYoNotification = VanillaYoNotification;
\ No newline at end of file
diff --git a/src/styles/style.css b/src/styles/style.css
new file mode 100644
index 0000000..b941e56
--- /dev/null
+++ b/src/styles/style.css
@@ -0,0 +1,38 @@
+
+
+.notif-mainContainer {
+ z-index: 999;
+ position: fixed;
+ width: 350px;
+ max-width: 98%;
+ font-family: "Segoe UI","Tahoma","Calibri","Verdana",sans-serif;
+ color: #999;
+ box-sizing: border-box;
+}
+
+.notif-mainContainer.topRight{
+ top: 8px;
+ right: 8px;
+}
+
+.notif-inner {
+ display: flex;
+ flex-direction: column;
+}
+
+.vanilla-yo-notification{
+ width: 250px;
+ background: #58a758;
+ color: white;
+ position: relative;
+ cursor: pointer;
+ padding: 8px;
+ margin-bottom: 12px;
+ display: flex;
+}
+
+
+.notification_header{
+ font-size: 15px;
+ font-weight: bold
+}
\ No newline at end of file
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 = `
+
+
+
+ ${config.content ? config.content : this.defaultConfig.content}
+
+
+
+ `;
+
+ 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);
+ }
+}
+
diff --git a/src/vendor.ts b/src/vendor.ts
new file mode 100644
index 0000000..27f2cc1
--- /dev/null
+++ b/src/vendor.ts
@@ -0,0 +1,4 @@
+// Application Dependencies
+
+import 'lodash';
+
--
cgit v1.2.3