diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/index.html | 22 | ||||
| -rw-r--r-- | src/index.spec.ts | 4 | ||||
| -rw-r--r-- | src/index.ts | 5 | ||||
| -rw-r--r-- | src/interfaces/config.interface.ts (renamed from src/config.interface.ts) | 2 | ||||
| -rw-r--r-- | src/styles/style.css | 50 | ||||
| -rw-r--r-- | src/vendor.ts | 4 | ||||
| -rw-r--r-- | src/yo/vanilla.yo.notification.ts (renamed from src/vanilla.yo.notification.ts) | 47 |
7 files changed, 82 insertions, 52 deletions
diff --git a/src/index.html b/src/index.html deleted file mode 100644 index 15eaf96..0000000 --- a/src/index.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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 index 64b3e49..7f96730 100644 --- a/src/index.spec.ts +++ b/src/index.spec.ts @@ -1,5 +1,5 @@ -describe('TypeScript WebPack Starter Tests', () => { - it('A good way to start building an awesome lib is by doing Unit Tests 👌🏽', () => { +describe('Vanilla Yo Notification Test', () => { + it('Initial Unit Test 👌🏽', () => { expect(true).toBe(true); }); })
\ No newline at end of file diff --git a/src/index.ts b/src/index.ts index bb3d67c..6e5bc21 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,3 +1,4 @@ -import VanillaYoNotification from "./vanilla.yo.notification"; +import VYN from "./yo/vanilla.yo.notification"; -(window as any).VanillaYoNotification = VanillaYoNotification;
\ No newline at end of file + +(window as any).VYN = VYN;
\ No newline at end of file diff --git a/src/config.interface.ts b/src/interfaces/config.interface.ts index 178a309..6fee8b7 100644 --- a/src/config.interface.ts +++ b/src/interfaces/config.interface.ts @@ -3,4 +3,6 @@ export interface Config { timeout?: number; title: string; footer?: string; + type?: string; + position?: string[]; }
\ No newline at end of file diff --git a/src/styles/style.css b/src/styles/style.css index b941e56..45e869e 100644 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -10,11 +10,25 @@ box-sizing: border-box; } -.notif-mainContainer.topRight{ +.notif-mainContainer.top-right{ top: 8px; right: 8px; } +.notif-mainContainer.bottom-right{ + bottom: 8px; + right: 8px; +} + +.notif-mainContainer.top-left{ + top: 8px; + left: 8px; +} +.notif-mainContainer.bottom-left{ + bottom: 8px; + left: 8px; +} + .notif-inner { display: flex; flex-direction: column; @@ -22,16 +36,48 @@ .vanilla-yo-notification{ width: 250px; - background: #58a758; color: white; position: relative; cursor: pointer; padding: 8px; margin-bottom: 12px; display: flex; + border-radius: 10px; + -webkit-animation-duration: 500ms;animation-duration: 500ms; +} + +.vanilla-yo-notification.error { + background: #e74c3c; +} + +.vanilla-yo-notification.warning { + background: #f39c12; +} + +.vanilla-yo-notification.success { + background: #2ecc71; +} + + + +@-webkit-keyframes fadeOut { + 0% {opacity: 1;} + 100% {opacity: 0;} + } + + @keyframes fadeOut { + 0% {opacity: 1;} + 100% {opacity: 0;} + } + +.close { + -webkit-animation-name: fadeOut; + animation-name: fadeOut; } + + .notification_header{ font-size: 15px; font-weight: bold diff --git a/src/vendor.ts b/src/vendor.ts deleted file mode 100644 index 27f2cc1..0000000 --- a/src/vendor.ts +++ /dev/null @@ -1,4 +0,0 @@ -// Application Dependencies - -import 'lodash'; - diff --git a/src/vanilla.yo.notification.ts b/src/yo/vanilla.yo.notification.ts index 7b50804..00c0583 100644 --- a/src/vanilla.yo.notification.ts +++ b/src/yo/vanilla.yo.notification.ts @@ -1,19 +1,23 @@ // Import stylesheets -import './styles/style.css'; -import { Config } from './config.interface'; +import '../styles/style.css'; +import { Config } from '../interfaces/config.interface'; -export default class VanillaYoNotification { + +export default class VYN { private notificationTemplate: string; private defaultConfig: Config; private notifInner: any; + private container: any; - constructor() { + constructor(config: Config) { this.defaultConfig = { - content: '', - footer: '', - timeout: 3000, - title: '' + content: config.content ? config.content : '', + footer: config.footer ? config.footer : '', + timeout: config.timeout ? config.timeout : 3000, + title: config.title ? config.title : '', + type: config.type ? config.type : 'success', + position: (config.position && config.position.length == 2) ? config.position : ['bottom', 'right'] } this.init(); } @@ -21,27 +25,26 @@ export default class VanillaYoNotification { private init() { this.buildContainers(); - - + + } - buildContainers(){ - let container = document.createElement('div'); - container.className = "notif-mainContainer topRight"; + buildContainers() { + this.container = document.createElement('div'); + this.container.className = `notif-mainContainer ${this.defaultConfig.position.join('-')}`; this.notifInner = document.createElement('div'); this.notifInner.className = "notif-inner"; - container.appendChild(this.notifInner); - document.body.appendChild(container); + this.container.appendChild(this.notifInner); + document.body.appendChild(this.container); } show(config: Config) { let notifContainer = document.createElement('div'); - notifContainer.className = "vanilla-yo-notification"; - + notifContainer.className = `vanilla-yo-notification ${config.type ? config.type : this.defaultConfig.type}`; this.notificationTemplate = ` <div class="notification_container"> @@ -57,20 +60,24 @@ export default class VanillaYoNotification { </div> `; - notifContainer.innerHTML = (this.notificationTemplate); + notifContainer.innerHTML = (this.notificationTemplate); this.notifInner.appendChild(notifContainer); setTimeout(() => { + notifContainer.className = notifContainer.className + ' close'; this.destroyNotification(notifContainer); }, (config.timeout ? config.timeout : this.defaultConfig.timeout)); - + } private destroyNotification(container: Node) { - this.notifInner.removeChild(container); + setTimeout(()=>{ + this.notifInner.removeChild(container); + },100); + } } |