-
Notifications
You must be signed in to change notification settings - Fork 0
/
alert.js
153 lines (143 loc) · 4.89 KB
/
alert.js
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
/* global Module */
/* Magic Mirror
* Module: alert
*
* By Paul-Vincent Roll http://paulvincentroll.com
* MIT Licensed.
*/
Module.register("alert",{
defaults: {
// scale|slide|genie|jelly|flip|bouncyflip|exploader
effect: "slide",
// scale|slide|genie|jelly|flip|bouncyflip|exploader
alert_effect: "jelly",
//time a notification is displayed in seconds
display_time: 3500,
//Position
position: "center",
//shown at startup
welcome_message: false,
},
getScripts: function() {
return ["classie.js", "modernizr.custom.js", "notificationFx.js"];
},
getStyles: function() {
return ["ns-default.css"];
},
// Define required translations.
getTranslations: function() {
return {
en: "translations/en.json",
de: "translations/de.json"
};
},
show_notification: function(message) {
if (this.config.effect == "slide") {this.config.effect = this.config.effect + "-" + this.config.position;}
msg = "";
if (message.title) {
msg += "<span class='thin' style='line-height: 35px; font-size:24px' color='#4A4A4A'>" + message.title + "</span>";
}
if (message.message){
if (msg != ""){
msg+= "<br />";
}
msg += "<span class='light' style='font-size:28px;line-height: 30px;'>" + message.message + "</span>";
}
new NotificationFx({
message: msg,
layout: "growl",
effect: this.config.effect,
ttl: this.config.display_time
}).show();
},
show_alert: function(params, sender) {
var self = this;
//Set standard params if not provided by module
if (typeof params.timer === "undefined") { params.timer = null; }
if (typeof params.imageHeight === "undefined") { params.imageHeight = "80px"; }
if (typeof params.imageUrl === "undefined" && typeof params.imageFA === "undefined") {
params.imageUrl = null;
image = "";
} else if (typeof params.imageFA === "undefined"){
image = "<img src='" + (params.imageUrl).toString() + "' height=" + (params.imageHeight).toString() + " style='margin-bottom: 10px;'/><br />";
} else if (typeof params.imageUrl === "undefined"){
image = "<span class='" + "fa fa-" + params.imageFA + "' style='margin-bottom: 10px;color: #fff;font-size:" + (params.imageHeight).toString() + ";'/></span><br />";
}
//Create overlay
var overlay = document.createElement("div");
overlay.id = "overlay";
overlay.innerHTML += "<div class=\"black_overlay\"></div>";
document.body.insertBefore(overlay, document.body.firstChild);
//If module already has an open alert close it
if (this.alerts[sender.name]) {
this.hide_alert(sender);
}
//Display title and message only if they are provided in notification parameters
message ="";
if (params.title) {
message += "<span class='light' style='line-height: 35px; font-size:30px' color='#4A4A4A'>" + params.title + "</span>"
}
if (params.message) {
if (message != ""){
message += "<br />";
}
message += "<span class='thin' style='font-size:22px;line-height: 30px;'>" + params.message + "</span>";
}
//Store alert in this.alerts
this.alerts[sender.name] = new NotificationFx({
message: image + message,
effect: this.config.alert_effect,
ttl: params.timer,
al_no: "ns-alert"
});
//Show alert
this.alerts[sender.name].show();
//Add timer to dismiss alert and overlay
if (params.timer) {
setTimeout(function() {
self.hide_alert(sender);
}, params.timer);
}
},
hide_alert: function(sender) {
//Dismiss alert and remove from this.alerts
this.alerts[sender.name].dismiss();
this.alerts[sender.name] = null;
//Remove overlay
var overlay = document.getElementById("overlay");
overlay.parentNode.removeChild(overlay);
},
setPosition: function(pos) {
//Add css to body depending on the set position for notifications
var sheet = document.createElement("style");
if (pos == "center") {sheet.innerHTML = ".ns-box {margin-left: auto; margin-right: auto;text-align: center;}";}
if (pos == "right") {sheet.innerHTML = ".ns-box {margin-left: auto;text-align: right;}";}
if (pos == "left") {sheet.innerHTML = ".ns-box {margin-right: auto;text-align: left;}";}
document.body.appendChild(sheet);
},
notificationReceived: function(notification, payload, sender) {
if (notification === "SHOW_ALERT") {
if (typeof payload.type === "undefined") { payload.type = "alert"; }
if (payload.type == "alert") {
this.show_alert(payload, sender);
} else if (payload.type = "notification") {
this.show_notification(payload);
}
} else if (notification === "HIDE_ALERT") {
this.hide_alert(sender);
}
},
start: function() {
this.alerts = {};
this.setPosition(this.config.position);
if (this.config.welcome_message) {
if (this.config.welcome_message == true){
this.show_notification({title: this.translate("sysTitle"), message: this.translate("welcome")});
}
else{
this.show_notification({title: this.translate("sysTitle"), message: this.config.welcome_message});
}
}
Log.info("Starting module: " + this.name);
}
});