From c0eb82f55a40f64025800c0ad2b6a05290576337 Mon Sep 17 00:00:00 2001
From: Indrajith K L
Date: Tue, 19 Dec 2017 14:21:29 +0530
Subject: Now supports * type arguments, * positional parameters and * html as
content * Documentation updates
---
src/config.interface.ts | 6 ---
src/index.html | 22 ----------
src/index.spec.ts | 4 +-
src/index.ts | 5 ++-
src/interfaces/config.interface.ts | 8 ++++
src/styles/style.css | 50 ++++++++++++++++++++++-
src/vanilla.yo.notification.ts | 76 ----------------------------------
src/vendor.ts | 4 --
src/yo/vanilla.yo.notification.ts | 83 ++++++++++++++++++++++++++++++++++++++
9 files changed, 144 insertions(+), 114 deletions(-)
delete mode 100644 src/config.interface.ts
delete mode 100644 src/index.html
create mode 100644 src/interfaces/config.interface.ts
delete mode 100644 src/vanilla.yo.notification.ts
delete mode 100644 src/vendor.ts
create mode 100644 src/yo/vanilla.yo.notification.ts
(limited to 'src')
diff --git a/src/config.interface.ts b/src/config.interface.ts
deleted file mode 100644
index 178a309..0000000
--- a/src/config.interface.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-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
deleted file mode 100644
index 15eaf96..0000000
--- a/src/index.html
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-
-
-
-
-
-
-
- <%= 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
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/interfaces/config.interface.ts b/src/interfaces/config.interface.ts
new file mode 100644
index 0000000..6fee8b7
--- /dev/null
+++ b/src/interfaces/config.interface.ts
@@ -0,0 +1,8 @@
+export interface Config {
+ content: string;
+ 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/vanilla.yo.notification.ts b/src/vanilla.yo.notification.ts
deleted file mode 100644
index 7b50804..0000000
--- a/src/vanilla.yo.notification.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-// 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}
-
-
-
+
+
+ ${config.content ? config.content : this.defaultConfig.content}
+
+
+