aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorIndrajith K L2017-12-19 14:21:29 +0530
committerIndrajith K L2017-12-19 14:21:29 +0530
commitc0eb82f55a40f64025800c0ad2b6a05290576337 (patch)
treecce2a386dea2508de10d6a6bb58f492329173434 /src
parentab0d224a293dfb2e6f2f70fd1f8180f6957c15be (diff)
downloadvanilla-yo-notification-c0eb82f55a40f64025800c0ad2b6a05290576337.tar.gz
vanilla-yo-notification-c0eb82f55a40f64025800c0ad2b6a05290576337.tar.bz2
vanilla-yo-notification-c0eb82f55a40f64025800c0ad2b6a05290576337.zip
Now supports
* type arguments, * positional parameters and * html as content * Documentation updates
Diffstat (limited to 'src')
-rw-r--r--src/index.html22
-rw-r--r--src/index.spec.ts4
-rw-r--r--src/index.ts5
-rw-r--r--src/interfaces/config.interface.ts (renamed from src/config.interface.ts)2
-rw-r--r--src/styles/style.css50
-rw-r--r--src/vendor.ts4
-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);
+
}
}