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
|
/*
vim: set et ts=3 sw=3 sts=3:
InfCloud - the open source CalDAV/CardDAV Web Client
Copyright (C) 2011-2023
B. Stack <bgstack15@gmail.com>
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
// InfCloud/CalDAVZap location for this image
const img_cal = "images/banner_calendar.svg";
const notification_attempts = 10;
const notification_ms = 200;
// Due to how browsers/css work with colors, you can pass #000000 or web safe color names.
var colors = Array("red","orange","yellow","green","blue","purple","black","white","brown");
function colorizeSvg(inSvg, oldColor, newColor) {
// In case we have to do more than `s//g` in the future.
return inSvg.replaceAll(oldColor, newColor);
}
function SendColorizedNotification(_title, _body, _icon, _tag, _color) {
// given _icon as path on server, get contents and adjust the main color in it to desired color.
// The 585858 is the specific color of the calendar.svg we intend to replace.
const xhr = new XMLHttpRequest();
xhr.open("GET",_icon);
xhr.onload = () => {
// Ref: https://stackoverflow.com/questions/28450471/convert-inline-svg-to-base64-string
newSvg = colorizeSvg(xhr.responseText,"#585858",_color);
encodedData = window.btoa(newSvg); // turn it into the base64 stream
encodedData = "data:image/svg+xml;base64," + encodedData; // prepend the type of stream
SendNotification(_title, _body, encodedData, _tag, _color);
}
xhr.send();
}
function SendNotification(_title, _body, _icon, _tag) {
// From: https://developer.mozilla.org/en-US/docs/Web/API/notification
if (!("Notification" in window)) {
// Check if the browser supports notifications
alert("This browser does not support desktop notification");
} else if (Notification.permission === "granted") {
// Check whether notification permissions have already been granted;
// if so, create a notification
console.log("trying option 1");
const notification = new Notification(String(_title), { tag: _tag, body: _body, icon: _icon });
// …
} else if (Notification.permission !== "denied") {
// We need to ask the user for permission
Notification.requestPermission().then((permission) => {
// If the user accepts, let's create a notification
if (permission === "granted") {
console.log("trying option 2");
const notification = new Notification(String(_title), { tag: _tag, body: _body, icon: _icon });
// …
}
});
}
// At last, if the user has denied notifications, and you
// want to be respectful there is no need to bother them anymore.
console.log("trying option 3");
}
function SendNotificationManyTimes(_title, _body, _icon, _tag) {
// From: https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API
if (Notification?.permission === "granted") {
// If the user agreed to get notified
// Let's try to send ten notifications
let i = 0;
// Using an interval cause some browsers (including Firefox) are blocking notifications if there are too much in a certain time.
const interval = setInterval(() => {
// Thanks to the tag, we should only see the "Hi! 9" notification
const n = new Notification(String(_title), { tag: _tag, body: _body, icon: _icon });
//const n = new Notification(`Hi! breakfast ${i}`, { tag: "soManyNotification", body: "this is body?", icon: img });
if (i === (notification_attempts-1)) {
clearInterval(interval);
}
i++;
}, notification_ms);
} else if (Notification && Notification.permission !== "denied") {
// If the user hasn't told if they want to be notified or not
// Note: because of Chrome, we are not sure the permission property
// is set, therefore it's unsafe to check for the "default" value.
Notification.requestPermission().then((status) => {
// If the user said okay
if (status === "granted") {
let i = 0;
// Using an interval cause some browsers (including Firefox) are blocking notifications if there are too much in a certain time.
const interval = setInterval(() => {
// Thanks to the tag, we should only see the "Hi! 9" notification
const n = new Notification(String(_title), { tag: _tag, body: _body, icon: _icon });
if (i === (notification_attempts-1)) {
clearInterval(interval);
}
i++;
}, notification_ms);
} else {
// Otherwise, we can fallback to a regular modal alert
alert(String(_title)+": "+String(_body));
}
});
} else {
// If the user refuses to get notified, we can fallback to a regular modal alert
alert(String(_title)+": "+String(_body));
}
}
function getRandomColor() {
return colors[Math.floor(Math.random()*colors.length)];
}
function clickTestNotification()
{
console.log("inside the click listener function");
SendColorizedNotification("sample calendar appointment","in 0 minutes",img_cal,"",getRandomColor());
}
|
