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
|
/**
* Class for controlling the Notification banner
*/
export default class BannerController {
/**
* Creates references to objects and hides notification banner
* @param {string} bannerId ID of Notification Banner
* @param {string} textP ID of Notification Banner text field
* @param {string} dismissBtn ID of dismiss button
* @param {string} notificationBadge ID of badge (# of notifications)
*/
constructor(bannerId, textP, dismissBtn, notificationBadge) {
this.ids = {bannerId, textP, dismissBtn, notificationBadge};
this.banner = document.getElementById(bannerId);
this.bannerText = document.getElementById(textP);
this.dismissBtn = document.getElementById(dismissBtn);
this.notificationBadge = document.getElementById(notificationBadge);
this.bannerMsgs = [];
// Hide Banner after JS loading finished
this.banner.classList.add('hidden');
}
/**
* Registers dismissing via the dismiss button
*/
register() {
this.dismissBtn.addEventListener('click', () => {
this.dismissCurrent();
});
}
/**
* Reloads the object
*/
refresh() {
this.banner = document.getElementById(this.ids.bannerId);
this.bannerText = document.getElementById(this.ids.textP);
this.dismissBtn = document.getElementById(this.ids.dismissBtn);
this.notificationBadge = document.getElementById(
this.ids.notificationBadge);
this.bannerMsgs = [];
// Hide Banner after JS loading finished
this.banner.classList.add('hidden');
}
/**
* Pushes a new message to the notification banner and shows it
* @param {string} name Name to register notification (referenced in hide)
* @param {string} text Notification text
*/
show(name, text) {
let bannerItem = {name, text, 'html': false};
this.bannerMsgs.push(bannerItem);
this.update();
}
/**
* Removes notification from banner
* @param {string} name Name, that the notification was registered under
*/
hide(name) {
if (!name) {
this.bannerMsgs = [];
this.banner.classList.add('hidden');
} else {
for (let i = 0; i < this.bannerMsgs.length; i++) {
if (this.bannerMsgs[i].name == name) {
this.bannerMsgs.splice(i, 1);
}
}
this.update();
}
}
/**
* Dismisses the currently shown message
*/
dismissCurrent() {
this.hide(this.current);
}
/**
* Updates the notification banner with the most recent message
*/
update() {
if (this.bannerMsgs.length === 0) {
this.banner.classList.add('hidden');
return;
}
const lastNotification = this.bannerMsgs[this.bannerMsgs.length - 1];
const name = lastNotification.name;
const text = lastNotification.text;
const html = lastNotification.html;
this.banner.classList.remove('hidden');
if (html) this.bannerText.innerHTML = text;
else this.bannerText.innerText = text;
this.current = name;
// Update notification badge
if (this.bannerMsgs.length < 2) {
this.notificationBadge.classList.add('hidden');
} else if (this.bannerMsgs.length > 9) {
this.notificationBadge.classList.remove('hidden');
this.notificationBadge.textContent = '∞';
} else {
this.notificationBadge.classList.remove('hidden');
this.notificationBadge.textContent = this.bannerMsgs.length.toString();
}
}
}
|
