flicker-alerts 1.0.35 → 1.0.37
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.js +66 -9
- package/package.json +2 -2
package/index.js
CHANGED
@@ -1,3 +1,6 @@
|
|
1
|
+
|
2
|
+
|
3
|
+
|
1
4
|
const FlickerAlerts = {
|
2
5
|
showAlert: function ({ type, title, message, timer = 3000, position = 'top-right' }) {
|
3
6
|
if (typeof window !== 'undefined' && typeof document !== 'undefined') {
|
@@ -6,8 +9,8 @@ const FlickerAlerts = {
|
|
6
9
|
container = document.createElement('div');
|
7
10
|
container.id = 'alerts-container';
|
8
11
|
container.style.position = 'fixed';
|
9
|
-
container.style.top =
|
10
|
-
container.style.left =
|
12
|
+
container.style.top = 0;
|
13
|
+
container.style.left = 0;
|
11
14
|
container.style.width = '100vw';
|
12
15
|
container.style.height = '100vh';
|
13
16
|
container.style.pointerEvents = 'none';
|
@@ -15,7 +18,8 @@ const FlickerAlerts = {
|
|
15
18
|
}
|
16
19
|
|
17
20
|
const alertBox = document.createElement('div');
|
18
|
-
alertBox.className = `notification ${type}
|
21
|
+
alertBox.className = `notification ${type}`;
|
22
|
+
alertBox.classList.add(position);
|
19
23
|
|
20
24
|
// Ícone
|
21
25
|
const icon = document.createElement('div');
|
@@ -32,14 +36,15 @@ const FlickerAlerts = {
|
|
32
36
|
// Divisor
|
33
37
|
const divider = document.createElement('div');
|
34
38
|
divider.className = 'divider';
|
39
|
+
console.log(`Created divider for ${type}`); // Para depuração
|
35
40
|
alertBox.appendChild(divider);
|
36
|
-
|
41
|
+
|
37
42
|
// Conteúdo
|
38
43
|
const content = document.createElement('div');
|
39
44
|
content.innerHTML = `<div class="title">${title}</div><div class="message">${message}</div>`;
|
40
45
|
alertBox.appendChild(content);
|
41
46
|
|
42
|
-
// Barra de
|
47
|
+
// Barra de carregamento
|
43
48
|
const progressBar = document.createElement('div');
|
44
49
|
progressBar.className = 'progress-bar';
|
45
50
|
progressBar.style.animationDuration = `${timer}ms`;
|
@@ -70,16 +75,42 @@ const FlickerAlerts = {
|
|
70
75
|
},
|
71
76
|
};
|
72
77
|
|
78
|
+
|
79
|
+
|
80
|
+
|
81
|
+
// Botões de teste - Eles podem ser removidos se não forem necessários
|
82
|
+
if (typeof document !== 'undefined') {
|
83
|
+
document.getElementById('success-btn')?.addEventListener('click', () => {
|
84
|
+
FlickerAlerts.showAlert({ type: 'success', title: 'Sucesso!', message: 'Essa mensagem é personalizável.' });
|
85
|
+
});
|
86
|
+
|
87
|
+
document.getElementById('info-btn')?.addEventListener('click', () => {
|
88
|
+
FlickerAlerts.showAlert({ type: 'info', title: 'Informação!', message: 'Essa mensagem é personalizável.' });
|
89
|
+
});
|
90
|
+
|
91
|
+
document.getElementById('warning-btn')?.addEventListener('click', () => {
|
92
|
+
FlickerAlerts.showAlert({ type: 'warning', title: 'Alerta!', message: 'Essa mensagem é personalizável.' });
|
93
|
+
});
|
94
|
+
|
95
|
+
document.getElementById('error-btn')?.addEventListener('click', () => {
|
96
|
+
FlickerAlerts.showAlert({ type: 'danger', title: 'Erro!', message: 'Essa mensagem é personalizável.' });
|
97
|
+
});
|
98
|
+
}
|
99
|
+
|
100
|
+
// Exportação
|
101
|
+
|
102
|
+
|
103
|
+
|
73
104
|
const FlickerModals = {
|
74
|
-
showModal: function ({ type, title, message,
|
105
|
+
showModal: function ({ type, title, message, onConfirm, onCancel }) {
|
75
106
|
if (typeof window !== 'undefined' && typeof document !== 'undefined') {
|
76
107
|
let container = document.getElementById('modals-container');
|
77
108
|
if (!container) {
|
78
109
|
container = document.createElement('div');
|
79
110
|
container.id = 'modals-container';
|
80
111
|
container.style.position = 'fixed';
|
81
|
-
container.style.top =
|
82
|
-
container.style.left =
|
112
|
+
container.style.top = 0;
|
113
|
+
container.style.left = 0;
|
83
114
|
container.style.width = '100vw';
|
84
115
|
container.style.height = '100vh';
|
85
116
|
container.style.pointerEvents = 'none';
|
@@ -176,4 +207,30 @@ const FlickerModals = {
|
|
176
207
|
}
|
177
208
|
};
|
178
209
|
|
179
|
-
|
210
|
+
// Botões de teste - Eles podem ser removidos se não forem necessários
|
211
|
+
if (typeof document !== 'undefined') {
|
212
|
+
document.getElementById('modal-warning-btn')?.addEventListener('click', () => {
|
213
|
+
FlickerModals.showModal({
|
214
|
+
type: 'warning',
|
215
|
+
title: 'Tem certeza que deseja aceitar?',
|
216
|
+
message: 'Você tem certeza que deseja aceitar isso?',
|
217
|
+
onConfirm: () => { console.log('Confirmado!'); },
|
218
|
+
onCancel: () => { console.log('Cancelado!'); }
|
219
|
+
});
|
220
|
+
});
|
221
|
+
|
222
|
+
document.getElementById('modal-delete-btn')?.addEventListener('click', () => {
|
223
|
+
FlickerModals.showModal({
|
224
|
+
type: 'delete',
|
225
|
+
title: 'Tem certeza que deseja deletar?',
|
226
|
+
message: 'Você tem certeza que deseja deletar isso?',
|
227
|
+
onConfirm: () => { console.log('Deletado com sucesso!'); },
|
228
|
+
onCancel: () => { console.log('Cancelado!'); }
|
229
|
+
});
|
230
|
+
});
|
231
|
+
}
|
232
|
+
|
233
|
+
|
234
|
+
|
235
|
+
|
236
|
+
export default FlickerAlerts;
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "flicker-alerts",
|
3
|
-
"version": "1.0.
|
3
|
+
"version": "1.0.37",
|
4
4
|
"description": "Biblioteca para alertas animados",
|
5
5
|
"main": "index.js",
|
6
6
|
"types": "index.d.ts",
|
@@ -16,6 +16,6 @@
|
|
16
16
|
"author": "https://www.linkedin.com/in/bruno-carneiro-9a51aa190/",
|
17
17
|
"license": "MIT",
|
18
18
|
"dependencies": {
|
19
|
-
"flicker-alerts": "^1.0.
|
19
|
+
"flicker-alerts": "^1.0.37"
|
20
20
|
}
|
21
21
|
}
|