diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/config.interface.ts | 6 | ||||
| -rw-r--r-- | src/index.html | 22 | ||||
| -rw-r--r-- | src/index.spec.ts | 5 | ||||
| -rw-r--r-- | src/index.ts | 3 | ||||
| -rw-r--r-- | src/styles/style.css | 38 | ||||
| -rw-r--r-- | src/vanilla.yo.notification.ts | 76 | ||||
| -rw-r--r-- | src/vendor.ts | 4 |
7 files changed, 154 insertions, 0 deletions
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 @@ +<!DOCTYPE html> +<html lang=""> + +<head> + <meta charset="utf-8"> + <meta http-equiv="x-ua-compatible" content="ie=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + + <title> + <%= htmlWebpackPlugin.options.title %> + </title> + + <meta name="description" content="<%= htmlWebpackPlugin.options.title %>"> + +</head> + +<body> + <div> You have successfully started your Typescript application using Webpack. Open your console to see your printed message from the index.ts file </div> + <p>By <a href="https://twitter.com/renaudin_yann">@renaudin_yann</a> </p> +</body> + +</html>
\ 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 = ` + <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); + } +} + 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'; + |