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

initial commit

Browse Source
This commit is contained in:
Indrajith K L
2017-12-18 17:02:00 +05:30
commit 22e4705a9c
18 changed files with 415 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/config.interface.ts Normal file
View File

@@ -0,0 +1,6 @@
export interface Config {
content: string;
timeout?: number;
title: string;
footer?: string;
}

22
src/index.html Normal file
View File

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

5
src/index.spec.ts Normal file
View File

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

3
src/index.ts Normal file
View File

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

38
src/styles/style.css Normal file
View File

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

76
src/vanilla.yo.notification.ts Normal file
View File

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

4
src/vendor.ts Normal file
View File

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