-
Notifications
You must be signed in to change notification settings - Fork 29
/
nw-desktop-notifications.html
129 lines (126 loc) · 2.86 KB
/
nw-desktop-notifications.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html>
<head>
<title>Desktop Notification</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style type="text/css">
body {
font-family : Helvetica, Arial, sans-serif;
background-color: #31322E;
color: #C9D1D5;
margin: none;
padding: none;
overflow: hidden;
-webkit-app-region: no-drag;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#notifications {
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
list-style: none;
margin: 0px;
padding: 10px 10px 10px 10px;
width: 290px;
-webkit-app-region: no-drag;
}
#notifications li {
overflow: hidden;
margin: 0px;
display: none;
cursor: pointer;
}
#notifications .icon img {
width: 30px;
float: left;
}
#notifications .title,
#notifications .description {
margin-left: 40px;
font-size: 12px;
}
#notifications .title {
font-weight: bold;
font-size: 13px;
}
#shouldstart {
display:none;
}
#closer {
border-radius: 3px;
text-align: center;
position: fixed;
right: 7px;
top: 4px;
font-size: 9px;
padding: 3px;
z-index: 10;
-webkit-app-region: no-drag;
}
#closer:hover {
border: 1px solid #ccc;
cursor: pointer;
}
</style>
</head>
<body style="-webkit-app-region: no-drag;">
<div id="closer">X</div>
<ul id='notifications'>
</ul>
<div id='shouldstart'>false</div>
<script type="text/javascript">
var LIMIT_FOR_TRUNKATING_MESSAGES = 5;
function processNotifications(){
var nlist = $('#notifications');
var n = $('#notifications > li');
var continuation = function(){
n = $('#notifications > li');
if(n.length === 0){
//lets close the window
$('#closer').click();
$('#shouldstart').text('false');
waitForKickoff();
return;
}
else if(n.length > LIMIT_FOR_TRUNKATING_MESSAGES){
var toinsert = "<li>"+
"<div class='icon'>" +
"<img src='desktop-notify.png' />" +
"</div>" +
"<div class='title'>Application Name Here</div>" +
"<div class='description'>"+n.length+" new cards.</div>" +
"</li>";
nlist.html(toinsert);
}
n = $('#notifications > li');
n.first().fadeIn('fast');
setTimeout(processNotifications, 4000);
}
if(n.first().is(':visible')){
n.first().fadeOut('fast', function(){
n.first().remove();
continuation();
});
}
else{
continuation();
}
}
function waitForKickoff(){
if($('#shouldstart').text() === 'true'){
processNotifications();
}
else{
setTimeout(waitForKickoff,40);
}
}
waitForKickoff();
</script>
</body>
</html>