-
Notifications
You must be signed in to change notification settings - Fork 0
/
SimoFlashMessage.js
125 lines (113 loc) · 3.08 KB
/
SimoFlashMessage.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
/**
* @author SE, MG
*/
class SimoFlashMessage {
/**
* @author SE, MG
*/
constructor() {
this.handleAjaxErrorResponse = this.handleAjaxErrorResponse.bind(this);
$(document).on('click', '.simo-flash-message-close', function() {
$(this).closest('.simo-flash-message').remove();
});
if ($('#simo-flash-message-container').length === 0) {
$('body').prepend('<div id="simo-flash-message-container"></div>');
}
}
/**
* @author SE, MG
* @param {string} title
* @param {string} message
* @return {void}
*/
showError(title, message) {
this._show(title, message, 'simo-flash-message-error', 'far fa-times', true);
}
/**
* @author SE, MG
* @param {string} title
* @param {string} message
* @return {void}
*/
showWarning(title, message) {
this._show(title, message, 'simo-flash-message-warning', 'far fa-exclamation-triangle', false);
}
/**
* @author SE, MG
* @param {string} title
* @param {string} message
* @return {void}
*/
showSuccess(title, message) {
this._show(title, message, 'simo-flash-message-success', 'far fa-check', false);
}
/**
* @author SE, MG
* @param {string} title
* @param {string} message
* @return {void}
*/
showInfo(title, message) {
this._show(title, message, 'simo-flash-message-info', 'far fa-info-circle', false)
}
/**
* @author SE, MG
* @param {string} title
* @param {string} message
* @param {string} alertClass
* @param {string} iconClass
* @param {boolean} showPermanent
* @return {void}
*/
_show(title, message, alertClass, iconClass, showPermanent) {
let date = new Date();
let currentTime = date.toLocaleTimeString('de-DE');
let template = `
<div class="simo-flash-message" style="display: none;min-width: 200px;">
<div class="simo-flash-message-content ${alertClass}">
<button type="button" class="simo-flash-message-close" aria-hidden="true">x</button>
<div style="text-transform: uppercase;">
<span class="simo-flash-message-icon ${iconClass}"></span> <strong class="simo-flash-message-head">${title}</strong>
</div>
<div style="margin-top:5px;" class="simo-flash-message-body">
${message}
</div>
<div class="simo-flash-message-time">${currentTime}</div>
</div>
</div>`;
let addedMessage = $(template).appendTo('#simo-flash-message-container');
this._fade(addedMessage, showPermanent);
}
/**
* @author SE, MG
* @param {string} addedMessage
* @param {boolean} showPermanent
* @return {void}
*/
_fade(addedMessage, showPermanent) {
$(addedMessage).fadeIn(500);
if (true === showPermanent) {
return;
}
$(addedMessage).delay(2000).fadeOut(1500, function() {
$(this).remove();
});
$(addedMessage).on('mouseover', function() {
$(this).stop(true).fadeIn(0);
});
$(addedMessage).on('mouseout', function() {
$(this).delay(2000).fadeOut(1500, function() {
$(this).remove();
});
});
}
/**
* @author SE
* @param {jqXHR} jqXhr
* @return {void}
*/
handleAjaxErrorResponse(jqXhr) {
let response = jqXhr.responseText;
this.showError('Request error Occured', response);
}
}