indrajith/vanilla-yo-notification
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Now supports

Browse Source 
* type arguments,
* positional parameters and
* html as content
* Documentation updates
This commit is contained in:
Indrajith K L
2017-12-19 14:21:29 +05:30
parent ab0d224a29
commit c0eb82f55a
36 changed files with 1192 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/index.html
View File

@@ -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>

4
src/index.spec.ts
View File

@@ -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);
});
})

5
src/index.ts
View File

@@ -1,3 +1,4 @@
import VanillaYoNotification from "./vanilla.yo.notification";
import VYN from "./yo/vanilla.yo.notification";
(window as any).VanillaYoNotification = VanillaYoNotification;
(window as any).VYN = VYN;

2
src/config.interface.ts → src/interfaces/config.interface.ts
View File

@@ -3,4 +3,6 @@ export interface Config {
timeout?: number;
title: string;
footer?: string;
type?: string;
position?: string[];
}

50
src/styles/style.css
View File

@@ -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,15 +36,47 @@
.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;

4
src/vendor.ts
View File

@@ -1,4 +0,0 @@
// Application Dependencies
import 'lodash';

47
src/vanilla.yo.notification.ts → src/yo/vanilla.yo.notification.ts
View File

@@ -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);
}
}