Skip to content

Commit f863c30

Browse files
author
Joshua Smith
committed
Version 0.1
0 parents  commit f863c30

File tree

3 files changed

+240
-0
lines changed

3 files changed

+240
-0
lines changed

‎.gitignore

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.DS_Store
2+
._.DS_Store
3+
.db
4+
thumbs.db
5+
_MACOSX
6+
__MACOSX
7+
.idea

‎notification.css

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
.notification-container {
2+
width: 300px;
3+
z-index: 500;
4+
position: fixed;
5+
right: 2px;
6+
top: 2px;
7+
color: white;
8+
text-align: left;
9+
font-size: 16px;
10+
font-family: sans-serif;
11+
}
12+
13+
.notification-container .notification-close-button {
14+
height: 25px;
15+
width: 25px;
16+
padding: 2px;
17+
margin: 5px;
18+
border-radius: 16px;
19+
border: 2px solid white;
20+
color: white;
21+
text-decoration: none;
22+
text-align: center;
23+
font-size: 12px;
24+
background: black;
25+
transition: all .3s;
26+
-moz-transition: all .3s;
27+
-webkit-transition: all .3s;
28+
-o-transition: all .3s;
29+
position: absolute;
30+
top: 0;
31+
right: 0;
32+
text-shadow: none;
33+
box-shadow: none;
34+
outline: none;
35+
}
36+
37+
.notification-container .notification-close-button:hover {
38+
text-decoration: none;
39+
color: black;
40+
background: #ccc;
41+
}
42+
43+
.notification-container .notification {
44+
opacity: 0;
45+
margin: 5px;
46+
min-height: 15px;
47+
padding: 10px;
48+
overflow: hidden;
49+
position: relative;
50+
right: 0;
51+
box-shadow: 0px 0px 30px black;
52+
border: 2px solid white;
53+
border-radius: 10px;
54+
text-overflow: ellipsis;
55+
background: rgba(0,0,0,.9);
56+
transform: translateX(100%);
57+
-moz-transform: translateX(100%);
58+
-webkit-transform: translateX(100%);
59+
-o-transform: translateX(100%);
60+
-ms-transform: translateX(100%);
61+
transition: opacity .3s, transform .3s;
62+
-moz-transition: opacity .3s, -moz-transform .3s;
63+
-webkit-transition: opacity .3s, -webkit-transform .3s;
64+
-o-transition: opacity .3s, -o-transform .3s;
65+
-ms-transition: opacity .3s, -ms-transform .3s;
66+
}
67+
68+
.notification-container .notification.shown {
69+
opacity: 1;
70+
transform: none;
71+
-moz-transform: none;
72+
-webkit-transform: none;
73+
-o-transform: none;
74+
-ms-transform: none;
75+
animation: notificationShow .2s;
76+
-moz-animation: notificationShow .2s;
77+
-webkit-animation: notificationShow .2s;
78+
-o-animation: notificationShow .2s;
79+
}
80+
81+
.notification-container .notification img {
82+
float: left;
83+
max-height: 50px;
84+
max-width: 50px;
85+
margin-right: 10px;
86+
}
87+
88+
.notification-container .notification h3 {
89+
text-align: left;
90+
margin: 0 28px 0 0;
91+
font-weight: bold;
92+
color: inherit;
93+
}
94+
95+
.notification-container .notification p {
96+
text-align: left;
97+
font-size: 14px;
98+
font-weight: normal;
99+
margin: 5px 0 0 0;
100+
}
101+
102+
103+
/* Animations */
104+
@keyframes notificationShow
105+
{
106+
from {opacity: 0;}
107+
to {opacity: .9;}
108+
}
109+
110+
@-moz-keyframes notificationShow
111+
{
112+
from {opacity: 0;}
113+
to {opacity: .9;}
114+
}
115+
116+
@-webkit-keyframes notificationShow
117+
{
118+
from {opacity: 0;}
119+
to {opacity: .9;}
120+
}
121+
122+
@-o-keyframes notificationShow
123+
{
124+
from {opacity: 0;}
125+
to {opacity: .9;}
126+
}
127+
128+
@-ms-keyframes notificationShow
129+
{
130+
from {opacity: 0;}
131+
to {opacity: .9;}
132+
}
133+
134+
135+
/* Responsive */
136+
@media (max-width: 766px) {
137+
.notification-container {
138+
width: 100%;
139+
right: 0px;
140+
left: 0px;
141+
}
142+
.notification-container .notification {
143+
margin: 0px;
144+
border-radius: 0px;
145+
border-left: none;
146+
border-right: none;
147+
transform: translateY(-100%);
148+
-moz-transform: translateY(-100%);
149+
-webkit-transform: translateY(-100%);
150+
-o-transform: translateY(-100%);
151+
-ms-transform: translateY(-100%);
152+
}
153+
.notification-container .notification + .notification {
154+
border-top: none;
155+
}
156+
}

‎notification.js

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
/* Globals */
2+
var notification = {}, notificationContainer;
3+
4+
/* Init */
5+
window.addEventListener('DOMContentLoaded', function init() {
6+
notificationContainer = document.createElement('div');
7+
notificationContainer.classList.add('notification-container');
8+
document.body.appendChild(notificationContainer);
9+
});
10+
11+
notification.show = function (title, content, icon) {
12+
// Make sure variables are equal to something...
13+
if (!title) {
14+
title = 'Notification';
15+
}
16+
if (!content) {
17+
content = (window.location + ' wants to notify you about something.');
18+
}
19+
20+
var currentNotification = null;
21+
if (navigator.mozNotification) {
22+
// Use built-in notification handler
23+
currentNotification = navigator.mozNotification.createNotification(title, content, icon);
24+
currentNotification.show();
25+
} else {
26+
// Use polyfill
27+
currentNotification = notification.create(title, content, icon);
28+
notificationContainer.appendChild(currentNotification);
29+
currentNotification.classList.add('shown');
30+
setTimeout(function () {
31+
notification.remove(currentNotification);
32+
}, 5000);
33+
}
34+
};
35+
36+
notification.create = function (title, content, icon) {
37+
// Make sure variables are equal to something...
38+
if (!title) {
39+
title = 'Notification';
40+
}
41+
if (!content) {
42+
content = (window.location + ' wants to notify you about something.');
43+
}
44+
45+
// Create notification node
46+
var tempNode = document.createElement('div');
47+
var tempNodeImage = document.createElement('img');
48+
var tempNodeTitle = document.createElement('h3');
49+
var tempNodeContent = document.createElement('p');
50+
var tempNodeCloseButton = document.createElement('button');
51+
tempNodeCloseButton.textContent = 'X';
52+
tempNodeCloseButton.classList.add('notification-close-button');
53+
tempNodeImage.src = icon;
54+
tempNodeTitle.textContent = title;
55+
tempNodeContent.textContent = content;
56+
tempNode.appendChild(tempNodeCloseButton);
57+
tempNode.appendChild(tempNodeImage);
58+
tempNode.appendChild(tempNodeTitle);
59+
tempNode.appendChild(tempNodeContent);
60+
tempNode.classList.add('notification');
61+
return tempNode;
62+
};
63+
64+
notification.remove = function (node) {
65+
if (node && node.parentNode) {
66+
node.classList.remove('shown');
67+
setTimeout(function () {
68+
notificationContainer.removeChild(node);
69+
}, 300);
70+
}
71+
}
72+
73+
window.addEventListener('click', function (event) {
74+
if (event.target.classList.contains('notification-close-button')) {
75+
notification.remove(event.target.parentNode);
76+
}
77+
});

0 commit comments

Comments
 (0)