fernotify 1.0.0
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/LICENSE +21 -0
- package/NOTIFICATION_SYSTEM_GUIDE.md +757 -0
- package/README.md +402 -0
- package/dist/notification-system.esm.js +929 -0
- package/dist/notification-system.esm.min.js +1 -0
- package/dist/notification-system.js +902 -0
- package/dist/notification-system.min.js +1 -0
- package/package.json +50 -0
package/README.md
ADDED
|
@@ -0,0 +1,402 @@
|
|
|
1
|
+
# Notification System
|
|
2
|
+
|
|
3
|
+
> Sistema moderno de notificaciones con animaciones fluidas y soporte completo de Dark Mode.
|
|
4
|
+
|
|
5
|
+
[](https://fernotify.pages.dev)
|
|
6
|
+
[](LICENSE)
|
|
7
|
+
[](https://www.jsdelivr.com/package/gh/Fernandocabal/fernotify)
|
|
8
|
+
|
|
9
|
+
## Características
|
|
10
|
+
|
|
11
|
+
- **4 tipos de notificaciones**: Success, Error, Warning, Info
|
|
12
|
+
- **Dark Mode automático**: Detecta el tema de tu web
|
|
13
|
+
- **Animaciones fluidas**: Powered by anime.js
|
|
14
|
+
- **Ligero y rápido**: ~10KB sin dependencias (excepto anime.js)
|
|
15
|
+
- **Accesible**: Soporte completo de teclado y ARIA
|
|
16
|
+
- **Responsive**: Se adapta a todos los tamaños de pantalla
|
|
17
|
+
- **Personalizable**: Colores, textos, temporizadores y callbacks
|
|
18
|
+
- **Sin dependencias de npm**: Usa directamente desde CDN
|
|
19
|
+
|
|
20
|
+
## Instalación
|
|
21
|
+
|
|
22
|
+
### Método 1: CDN Clásico (UMD) - Lo mas fácil 🚀
|
|
23
|
+
|
|
24
|
+
```html
|
|
25
|
+
<!-- FerNotify (todo se carga automáticamente: anime.js, Boxicons) -->
|
|
26
|
+
<script src="https://cdn.jsdelivr.net/gh/Fernandocabal/fernotify@latest/dist/notification-system.js"></script>
|
|
27
|
+
|
|
28
|
+
<!-- Usar directamente -->
|
|
29
|
+
<script>
|
|
30
|
+
notify.success('¡Listo para usar!');
|
|
31
|
+
</script>
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### Método 2: ES6 Module (Import)
|
|
35
|
+
|
|
36
|
+
```html
|
|
37
|
+
<script type="module">
|
|
38
|
+
import NotificationSystem from 'https://cdn.jsdelivr.net/gh/Fernandocabal/fernotify@latest/dist/notification-system.esm.js';
|
|
39
|
+
|
|
40
|
+
// Crear instancia global
|
|
41
|
+
window.notify = new NotificationSystem();
|
|
42
|
+
|
|
43
|
+
notify.success('¡Funcionando con módulos!');
|
|
44
|
+
</script>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
### Método 3: NPM (Node Package Manager)
|
|
48
|
+
|
|
49
|
+
```bash
|
|
50
|
+
npm install fernotify
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
Luego importa y usa en tu proyecto:
|
|
54
|
+
|
|
55
|
+
```javascript
|
|
56
|
+
import NotificationSystem from 'fernotify';
|
|
57
|
+
|
|
58
|
+
// Crear instancia
|
|
59
|
+
const notify = new NotificationSystem();
|
|
60
|
+
|
|
61
|
+
// Usar
|
|
62
|
+
notify.success('¡Instalado vía npm!');
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
Con Webpack/Vite/bundler:
|
|
66
|
+
|
|
67
|
+
```javascript
|
|
68
|
+
import NotificationSystem from 'fernotify/dist/notification-system.esm.js';
|
|
69
|
+
|
|
70
|
+
window.notify = new NotificationSystem();
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
### Versión Específica (Recomendado en producción)
|
|
74
|
+
|
|
75
|
+
```html
|
|
76
|
+
<!-- UMD -->
|
|
77
|
+
<script src="https://cdn.jsdelivr.net/gh/Fernandocabal/fernotify@1.0.0/dist/notification-system.js"></script>
|
|
78
|
+
|
|
79
|
+
<!-- ES Module -->
|
|
80
|
+
<script type="module">
|
|
81
|
+
import NotificationSystem from 'https://cdn.jsdelivr.net/gh/Fernandocabal/fernotify@1.0.0/dist/notification-system.esm.js';
|
|
82
|
+
</script>
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
## Uso Básico
|
|
86
|
+
|
|
87
|
+
### Notificaciones Rápidas
|
|
88
|
+
|
|
89
|
+
```javascript
|
|
90
|
+
// Success
|
|
91
|
+
notify.success('Operación completada exitosamente');
|
|
92
|
+
|
|
93
|
+
// Error
|
|
94
|
+
notify.error('Ocurrió un error inesperado');
|
|
95
|
+
|
|
96
|
+
// Warning
|
|
97
|
+
notify.warning('Esta acción no se puede deshacer');
|
|
98
|
+
|
|
99
|
+
// Info
|
|
100
|
+
notify.info('Hay una nueva actualización disponible');
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
### Con Título Personalizado
|
|
104
|
+
|
|
105
|
+
```javascript
|
|
106
|
+
notify.success(
|
|
107
|
+
'Tu perfil ha sido actualizado correctamente',
|
|
108
|
+
'¡Cambios Guardados!'
|
|
109
|
+
);
|
|
110
|
+
|
|
111
|
+
notify.error(
|
|
112
|
+
'No tienes permisos para realizar esta acción',
|
|
113
|
+
'Acceso Denegado'
|
|
114
|
+
);
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
### Opciones Avanzadas
|
|
118
|
+
|
|
119
|
+
```javascript
|
|
120
|
+
notify.show({
|
|
121
|
+
type: 'warning',
|
|
122
|
+
title: 'Sesión por Expirar',
|
|
123
|
+
message: '¿Deseas continuar?',
|
|
124
|
+
buttonText: 'Renovar Sesión',
|
|
125
|
+
timer: 5000, // Auto-cerrar en 5 segundos
|
|
126
|
+
onClose: () => {
|
|
127
|
+
console.log('Notificación cerrada');
|
|
128
|
+
}
|
|
129
|
+
});
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
## Dark Mode
|
|
133
|
+
|
|
134
|
+
El sistema detecta automáticamente el tema de tu web usando la clase `.dark` en el elemento `<html>`:
|
|
135
|
+
|
|
136
|
+
```javascript
|
|
137
|
+
// Activar modo oscuro
|
|
138
|
+
document.documentElement.classList.add('dark');
|
|
139
|
+
|
|
140
|
+
// Activar modo claro
|
|
141
|
+
document.documentElement.classList.remove('dark');
|
|
142
|
+
|
|
143
|
+
// Toggle
|
|
144
|
+
document.documentElement.classList.toggle('dark');
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
### Integración con Tailwind CSS
|
|
148
|
+
|
|
149
|
+
```html
|
|
150
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
151
|
+
<script>
|
|
152
|
+
tailwind.config = {
|
|
153
|
+
darkMode: 'class' // ← Configuración necesaria
|
|
154
|
+
}
|
|
155
|
+
</script>
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
Las notificaciones cambiarán automáticamente sus colores según el tema activo.
|
|
159
|
+
|
|
160
|
+
## API Completa
|
|
161
|
+
|
|
162
|
+
### `notify.show(options)`
|
|
163
|
+
|
|
164
|
+
```javascript
|
|
165
|
+
notify.show({
|
|
166
|
+
type: 'success', // 'success' | 'error' | 'warning' | 'info'
|
|
167
|
+
title: 'Título', // Opcional
|
|
168
|
+
message: 'Mensaje', // Requerido
|
|
169
|
+
buttonText: 'OK', // Opcional (default: 'OK')
|
|
170
|
+
timer: 3000, // Opcional (ms, null = sin timer)
|
|
171
|
+
allowOutsideClick: true, // Opcional (default: true)
|
|
172
|
+
allowEscapeKey: true, // Opcional (default: true)
|
|
173
|
+
hideButton: false, // Opcional (ocultar botón principal)
|
|
174
|
+
showCloseButton: false, // Opcional (mostrar X en esquina)
|
|
175
|
+
onClose: () => {} // Opcional (callback al cerrar)
|
|
176
|
+
});
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
### Métodos de Acceso Rápido
|
|
180
|
+
|
|
181
|
+
```javascript
|
|
182
|
+
notify.success(message, title?, options?)
|
|
183
|
+
notify.error(message, title?, options?)
|
|
184
|
+
notify.warning(message, title?, options?)
|
|
185
|
+
notify.info(message, title?, options?)
|
|
186
|
+
notify.close() // Cerrar la notificación actual
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
### Notificaciones de Carga (NEW) 🆕
|
|
190
|
+
|
|
191
|
+
```javascript
|
|
192
|
+
// Mostrar spinner de carga
|
|
193
|
+
notify.loading('Procesando solicitud...', 'Por favor espera');
|
|
194
|
+
|
|
195
|
+
// Cerrar la notificación de carga
|
|
196
|
+
notify.closeLoading();
|
|
197
|
+
|
|
198
|
+
// Con callback automático
|
|
199
|
+
notify.loading('Cargando...', 'Espera', {
|
|
200
|
+
timer: 3000 // Auto-cerrar en 3 segundos
|
|
201
|
+
}).then(() => {
|
|
202
|
+
console.log('Carga completada');
|
|
203
|
+
});
|
|
204
|
+
```
|
|
205
|
+
|
|
206
|
+
### Personalización de Animaciones
|
|
207
|
+
|
|
208
|
+
```javascript
|
|
209
|
+
notify.show({
|
|
210
|
+
type: 'success',
|
|
211
|
+
message: 'Animación personalizada',
|
|
212
|
+
anim: {
|
|
213
|
+
overlayDuration: 200, // Duración fade del overlay (ms)
|
|
214
|
+
overlayOpacity: 0.85, // Opacidad del overlay (0-1)
|
|
215
|
+
boxDuration: 250, // Duración animación del modal (ms)
|
|
216
|
+
boxStartScale: 0.8, // Escala inicial del modal (0-1)
|
|
217
|
+
iconRotate: 360, // Rotación del icono (grados)
|
|
218
|
+
iconDuration: 500 // Duración animación del icono (ms)
|
|
219
|
+
}
|
|
220
|
+
});
|
|
221
|
+
```
|
|
222
|
+
|
|
223
|
+
## Ejemplos de Uso
|
|
224
|
+
|
|
225
|
+
### Validación de Formulario
|
|
226
|
+
|
|
227
|
+
```javascript
|
|
228
|
+
document.getElementById('myForm').addEventListener('submit', (e) => {
|
|
229
|
+
e.preventDefault();
|
|
230
|
+
|
|
231
|
+
const email = document.getElementById('email').value;
|
|
232
|
+
|
|
233
|
+
if (!email) {
|
|
234
|
+
notify.warning('Por favor ingresa tu email');
|
|
235
|
+
return;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
// Simular envío
|
|
239
|
+
notify.success('Formulario enviado correctamente', '¡Éxito!');
|
|
240
|
+
});
|
|
241
|
+
```
|
|
242
|
+
|
|
243
|
+
### Operación Asincrónica con Carga (Recomendado)
|
|
244
|
+
|
|
245
|
+
```javascript
|
|
246
|
+
async function fetchData() {
|
|
247
|
+
// Mostrar spinner
|
|
248
|
+
notify.loading('Obteniendo datos...', 'Cargando');
|
|
249
|
+
|
|
250
|
+
try {
|
|
251
|
+
const response = await fetch('/api/data');
|
|
252
|
+
const data = await response.json();
|
|
253
|
+
|
|
254
|
+
// Cerrar loading
|
|
255
|
+
notify.closeLoading();
|
|
256
|
+
|
|
257
|
+
// Mostrar resultado
|
|
258
|
+
notify.success('Datos cargados correctamente!');
|
|
259
|
+
console.log(data);
|
|
260
|
+
} catch (error) {
|
|
261
|
+
// Cerrar loading
|
|
262
|
+
notify.closeLoading();
|
|
263
|
+
|
|
264
|
+
// Mostrar error
|
|
265
|
+
notify.error('No se pudieron cargar los datos');
|
|
266
|
+
}
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
fetchData();
|
|
270
|
+
```
|
|
271
|
+
|
|
272
|
+
### Confirmación de Operación
|
|
273
|
+
|
|
274
|
+
```javascript
|
|
275
|
+
notify.show({
|
|
276
|
+
type: 'warning',
|
|
277
|
+
title: '¿Estás seguro?',
|
|
278
|
+
message: 'Esta acción no se puede deshacer',
|
|
279
|
+
buttonText: 'Sí, continuar',
|
|
280
|
+
allowOutsideClick: false,
|
|
281
|
+
allowEscapeKey: false,
|
|
282
|
+
onClose: () => {
|
|
283
|
+
// Ejecutar acción después de confirmar
|
|
284
|
+
deleteUser();
|
|
285
|
+
}
|
|
286
|
+
});
|
|
287
|
+
```
|
|
288
|
+
|
|
289
|
+
### Notificación con Contenido HTML
|
|
290
|
+
|
|
291
|
+
```javascript
|
|
292
|
+
const form = document.createElement('form');
|
|
293
|
+
form.innerHTML = `
|
|
294
|
+
<label>Nombre:
|
|
295
|
+
<input type="text" id="name" class="px-2 py-1 border rounded" />
|
|
296
|
+
</label>
|
|
297
|
+
<button type="submit" class="mt-2 px-3 py-1 bg-blue-500 text-white rounded">
|
|
298
|
+
Enviar
|
|
299
|
+
</button>
|
|
300
|
+
`;
|
|
301
|
+
|
|
302
|
+
form.addEventListener('submit', (e) => {
|
|
303
|
+
e.preventDefault();
|
|
304
|
+
const name = form.querySelector('#name').value;
|
|
305
|
+
console.log('Nombre:', name);
|
|
306
|
+
notify.close();
|
|
307
|
+
});
|
|
308
|
+
|
|
309
|
+
notify.show({
|
|
310
|
+
title: 'Ingresa tu nombre',
|
|
311
|
+
content: form,
|
|
312
|
+
allowOutsideClick: false,
|
|
313
|
+
showCloseButton: true
|
|
314
|
+
});
|
|
315
|
+
```
|
|
316
|
+
|
|
317
|
+
## Estructura del Proyecto
|
|
318
|
+
|
|
319
|
+
```
|
|
320
|
+
notification-system/
|
|
321
|
+
├── dist/
|
|
322
|
+
│ ├── notification-system.js # UMD (uso directo en <script>)
|
|
323
|
+
│ └── notification-system.esm.js # ES Module (import/export)
|
|
324
|
+
├── docs/
|
|
325
|
+
│ ├── index.html # Demo interactiva
|
|
326
|
+
│ └── assets/
|
|
327
|
+
│ └── demo.js # Código de la demo
|
|
328
|
+
├── NOTIFICATION_SYSTEM_GUIDE.md # Guía completa
|
|
329
|
+
├── README.md
|
|
330
|
+
├── LICENSE
|
|
331
|
+
└── .gitignore
|
|
332
|
+
```
|
|
333
|
+
|
|
334
|
+
## Demo en Vivo
|
|
335
|
+
|
|
336
|
+
👉 **[Ver Demo Completa](https://fernotify.pages.dev/)**
|
|
337
|
+
|
|
338
|
+
La demo incluye:
|
|
339
|
+
- Ejemplos interactivos de todos los tipos
|
|
340
|
+
- Playground para probar opciones
|
|
341
|
+
- Documentación visual del Dark Mode
|
|
342
|
+
- Ejemplos de código copiables
|
|
343
|
+
|
|
344
|
+
## Versiones
|
|
345
|
+
|
|
346
|
+
Para usar una versión específica, usa tags en la URL del CDN:
|
|
347
|
+
|
|
348
|
+
```html
|
|
349
|
+
<!-- Última versión (auto-actualiza) -->
|
|
350
|
+
<script src="https://cdn.jsdelivr.net/gh/Fernandocabal/notification-system@latest/dist/notification-system.js"></script>
|
|
351
|
+
|
|
352
|
+
<!-- Versión fija (recomendado en producción) -->
|
|
353
|
+
<script src="https://cdn.jsdelivr.net/gh/Fernandocabal/notification-system@1.0.0/dist/notification-system.js"></script>
|
|
354
|
+
```
|
|
355
|
+
|
|
356
|
+
### Crear una nueva versión
|
|
357
|
+
|
|
358
|
+
```bash
|
|
359
|
+
git tag v1.0.0
|
|
360
|
+
git push origin v1.0.0
|
|
361
|
+
```
|
|
362
|
+
|
|
363
|
+
## Colores del Dark Mode
|
|
364
|
+
|
|
365
|
+
**Modo Claro:**
|
|
366
|
+
- Fondo del modal: `#ffffff`
|
|
367
|
+
- Texto principal: `#111827`
|
|
368
|
+
- Overlay: `rgba(0, 0, 0, 0.4)`
|
|
369
|
+
|
|
370
|
+
**Modo Oscuro:**
|
|
371
|
+
- Fondo del modal: `#0f1724`
|
|
372
|
+
- Texto principal: `#e6eef8`
|
|
373
|
+
- Overlay: `rgba(0, 0, 0, 0.6)`
|
|
374
|
+
|
|
375
|
+
## Contribuciones
|
|
376
|
+
|
|
377
|
+
Las contribuciones son bienvenidas. Por favor:
|
|
378
|
+
|
|
379
|
+
1. Fork el proyecto
|
|
380
|
+
2. Crea tu feature branch (`git checkout -b feature/AmazingFeature`)
|
|
381
|
+
3. Commit tus cambios (`git commit -m 'Add some AmazingFeature'`)
|
|
382
|
+
4. Push al branch (`git push origin feature/AmazingFeature`)
|
|
383
|
+
5. Abre un Pull Request
|
|
384
|
+
|
|
385
|
+
## Licencia
|
|
386
|
+
|
|
387
|
+
MIT License - ver [LICENSE](LICENSE) para más detalles.
|
|
388
|
+
|
|
389
|
+
## Créditos
|
|
390
|
+
|
|
391
|
+
- Animaciones: [anime.js](https://animejs.com/)
|
|
392
|
+
- Iconos: [Boxicons](https://boxicons.com/)
|
|
393
|
+
|
|
394
|
+
## Soporte
|
|
395
|
+
|
|
396
|
+
- [Documentación Completa](NOTIFICATION_SYSTEM_GUIDE.md)
|
|
397
|
+
- [Reportar un Bug](https://github.com/Fernandocabal/notification-system/issues)
|
|
398
|
+
- [Solicitar Feature](https://github.com/Fernandocabal/notification-system/issues)
|
|
399
|
+
|
|
400
|
+
---
|
|
401
|
+
|
|
402
|
+
Hecho para la comunidad de desarrolladores
|