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.title ? config.title : this.defaultConfig.title} +
+
+ ${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