avalynx-alert 1.0.3 → 1.0.5

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.
Files changed (6) hide show
  1. package/README.de.md +146 -0
  2. package/README.md +12 -5
  3. package/dist/css/avalynx-alert.css +1 -1
  4. package/dist/js/avalynx-alert.esm.js +37 -30
  5. package/dist/js/avalynx-alert.js +32 -29
  6. package/package.json +8 -8
package/README.de.md ADDED
@@ -0,0 +1,146 @@
1
+ # AvalynxAlert
2
+
3
+ [![npm Version](https://img.shields.io/npm/v/avalynx-alert)](https://www.npmjs.com/package/avalynx-alert)
4
+ [![npm Downloads](https://img.shields.io/npm/dt/avalynx-alert)](https://www.npmjs.com/package/avalynx-alert)
5
+ [![jsDelivr](https://img.shields.io/jsdelivr/npm/hm/avalynx-alert)](https://www.jsdelivr.com/package/npm/avalynx-alert)
6
+ [![Lizenz](https://img.shields.io/npm/l/avalynx-alert)](LICENSE)
7
+ [![Tests](https://github.com/avalynx/avalynx-alert/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/avalynx/avalynx-alert/actions/workflows/tests.yml)
8
+ [![codecov](https://codecov.io/gh/avalynx/avalynx-alert/branch/main/graph/badge.svg)](https://codecov.io/gh/avalynx/avalynx-alert)
9
+
10
+ AvalynxAlert ist ein leichtgewichtiges, eigenständiges Benachrichtigungssystem für Web‑Anwendungen. Es nutzt Bootstrap (ab Version 5.3) und bietet anpassbare Alerts, die flexibel auf dem Bildschirm positioniert werden können.
11
+
12
+ ## Funktionen
13
+
14
+ - Verschiedene Alert‑Typen: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`.
15
+ - Flexible Positionierung: `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right`.
16
+ - Steuerbare Dauer: Anzeigezeit in Millisekunden konfigurierbar.
17
+ - Schließbar: Optional kann ein Schließen‑Button angezeigt werden.
18
+ - Automatisches Schließen: Alerts können nach Ablauf der Dauer automatisch ausgeblendet werden.
19
+ - Einfache API: Schlanke Verwendung ohne Framework‑Abhängigkeiten.
20
+
21
+ ## Beispiele
22
+
23
+ - Übersicht: https://avalynx-alert.jbs-newmedia.de/examples/index.html
24
+ - Einfacher Alert: https://avalynx-alert.jbs-newmedia.de/examples/simple-alert.html
25
+ - Zufällige Alerts: https://avalynx-alert.jbs-newmedia.de/examples/random-alerts.html
26
+ - Callback bei Schließen: https://avalynx-alert.jbs-newmedia.de/examples/callback-onclose.html
27
+ - Zufällige Alerts alle 3 Sekunden: https://avalynx-alert.jbs-newmedia.de/examples/random-alerts-every-3s.html
28
+
29
+ ## Einbindung (direkt im HTML)
30
+
31
+ Stellen Sie sicher, dass Bootstrap 5.3 (oder neuer) eingebunden ist.
32
+
33
+ ```html
34
+ <!-- Bootstrap -->
35
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css" rel="stylesheet">
36
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js"></script>
37
+
38
+ <!-- AvalynxAlert -->
39
+ <link href="path/to/avalynx-alert.css" rel="stylesheet">
40
+ <script src="path/to/avalynx-alert.js"></script>
41
+ ```
42
+
43
+ Ersetzen Sie `path/to/avalynx-alert.*` durch die tatsächlichen Pfade in Ihrem Projekt.
44
+
45
+ ## Einbindung via jsDelivr (CDN)
46
+
47
+ ```html
48
+ <link href="https://cdn.jsdelivr.net/npm/avalynx-alert@1.0.5/dist/css/avalynx-alert.css" rel="stylesheet">
49
+ <script src="https://cdn.jsdelivr.net/npm/avalynx-alert@1.0.5/dist/js/avalynx-alert.js"></script>
50
+ ```
51
+
52
+ Bootstrap JS/CSS muss zusätzlich geladen werden.
53
+
54
+ ## Installation via NPM (https://www.npmjs.com/package/avalynx-alert)
55
+
56
+ ```bash
57
+ npm install avalynx-alert
58
+ ```
59
+
60
+ Danach in JavaScript importieren:
61
+
62
+ ```javascript
63
+ import { AvalynxAlert } from 'avalynx-alert';
64
+ import 'avalynx-alert/dist/css/avalynx-alert.css';
65
+ ```
66
+
67
+ Bootstrap JS/CSS muss zusätzlich geladen werden.
68
+
69
+ ## Installation via Symfony AssetMapper
70
+
71
+ ```bash
72
+ php bin/console importmap:require avalynx-alert
73
+ ```
74
+
75
+ Danach in JavaScript importieren:
76
+
77
+ ```javascript
78
+ import { AvalynxAlert } from 'avalynx-alert';
79
+ import 'avalynx-alert/dist/css/avalynx-alert.css';
80
+ ```
81
+
82
+ Bootstrap JS/CSS muss zusätzlich geladen werden.
83
+
84
+ ## Installation via Symfony AssetComposer
85
+
86
+ Weitere Informationen: https://github.com/jbsnewmedia/asset-composer-bundle
87
+
88
+ ```twig
89
+ {% do addAssetComposer('avalynx/avalynx-alert/dist/css/avalynx-alert.css') %}
90
+ {% do addAssetComposer('avalynx/avalynx-alert/dist/js/avalynx-alert.js') %}
91
+ ```
92
+
93
+ Bootstrap JS/CSS muss zusätzlich geladen werden.
94
+
95
+ ## Installation via Composer (PHP) (https://packagist.org/packages/avalynx/avalynx-alert)
96
+
97
+ ```bash
98
+ composer require avalynx/avalynx-alert
99
+ ```
100
+
101
+ Einbindung in HTML:
102
+
103
+ ```html
104
+ <link href="vendor/avalynx/avalynx-alert/dist/css/avalynx-alert.css" rel="stylesheet">
105
+ <script src="vendor/avalynx/avalynx-alert/dist/js/avalynx-alert.js"></script>
106
+ ```
107
+
108
+ Bootstrap JS/CSS muss zusätzlich geladen werden.
109
+
110
+ ## Verwendung
111
+
112
+ Einen Alert erzeugen Sie so:
113
+
114
+ ```javascript
115
+ new AvalynxAlert('Ihre Nachricht', 'success', {
116
+ duration: 5000,
117
+ position: 'top-right',
118
+ closeable: true,
119
+ autoClose: true,
120
+ width: '400px'
121
+ });
122
+ ```
123
+
124
+ ## Optionen
125
+
126
+ - `message` (string): Anzuzeigende Nachricht (Standard: `''`).
127
+ - `type` (string): Einer von `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark` (Standard: `info`).
128
+ - `options` (object):
129
+ - `duration` (number): Anzeigezeit in Millisekunden (Standard: `5000`).
130
+ - `position` (string): `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right` (Standard: `top-center`).
131
+ - `closeable` (boolean): Ob der Nutzer den Alert schließen kann (Standard: `true`).
132
+ - `autoClose` (boolean): Ob der Alert nach Ablauf automatisch geschlossen wird (Standard: `true`).
133
+ - `width` (string): Breite des Alerts (Standard: `400px`).
134
+ - `onClose` (function): Callback, das beim Schließen ausgeführt wird (Standard: `null`).
135
+
136
+ ## Mitwirken
137
+
138
+ Beiträge sind willkommen! Bitte erstellen Sie einen Fork und senden Sie einen Pull Request. Achten Sie dabei auf konsistenten Code‑Stil und ausreichende Dokumentation.
139
+
140
+ ## Lizenz
141
+
142
+ AvalynxAlert steht unter der [MIT‑Lizenz](LICENSE).
143
+
144
+ ## Kontakt
145
+
146
+ Fragen, Feature‑Wünsche oder Probleme? Bitte ein Issue im [GitHub‑Repository](https://github.com/avalynx/avalynx-alert/issues) eröffnen oder einen Pull Request stellen.
package/README.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # AvalynxAlert
2
2
 
3
+ [![npm version](https://img.shields.io/npm/v/avalynx-alert)](https://www.npmjs.com/package/avalynx-alert)
4
+ [![npm downloads](https://img.shields.io/npm/dt/avalynx-alert)](https://www.npmjs.com/package/avalynx-alert)
5
+ [![jsDelivr](https://img.shields.io/jsdelivr/npm/hm/avalynx-alert)](https://www.jsdelivr.com/package/npm/avalynx-alert)
6
+ [![License](https://img.shields.io/npm/l/avalynx-alert)](LICENSE)
7
+ [![Tests](https://github.com/avalynx/avalynx-alert/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/avalynx/avalynx-alert/actions/workflows/tests.yml)
8
+ [![codecov](https://codecov.io/gh/avalynx/avalynx-alert/branch/main/graph/badge.svg)](https://codecov.io/gh/avalynx/avalynx-alert)
9
+
3
10
  AvalynxAlert is a lightweight, dependency-free alert system designed for web applications. It leverages Bootstrap (version 5.3 or higher) to provide a seamless integration with your project, offering a range of customizable alerts that can be positioned anywhere on the screen.
4
11
 
5
12
  ## Features
@@ -47,8 +54,8 @@ Replace `path/to/avalynx-alert.js` and `path/to/avalynx-alert.css` with the actu
47
54
  AvalynxAlert is also available via [jsDelivr](https://www.jsdelivr.com/). You can include it in your project like this:
48
55
 
49
56
  ```html
50
- <link href="https://cdn.jsdelivr.net/npm/avalynx-alert@1.0.3/dist/css/avalynx-alert.css" rel="stylesheet">
51
- <script src="https://cdn.jsdelivr.net/npm/avalynx-alert@1.0.3/dist/js/avalynx-alert.js"></script>
57
+ <link href="https://cdn.jsdelivr.net/npm/avalynx-alert@1.0.5/dist/css/avalynx-alert.css" rel="stylesheet">
58
+ <script src="https://cdn.jsdelivr.net/npm/avalynx-alert@1.0.5/dist/js/avalynx-alert.js"></script>
52
59
  ```
53
60
 
54
61
  Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxAlert displays correctly.
@@ -65,7 +72,7 @@ After installing, you can import AvalynxAlert into your JavaScript file like thi
65
72
 
66
73
  ```javascript
67
74
  import { AvalynxAlert } from 'avalynx-alert';
68
- import 'avalynx-alert/dist/css/avalynx-alert.min.css';
75
+ import 'avalynx-alert/dist/css/avalynx-alert.css';
69
76
  ```
70
77
 
71
78
  Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxAlert displays correctly.
@@ -80,7 +87,7 @@ After installing, you can import AvalynxAlert into your JavaScript file like thi
80
87
 
81
88
  ```javascript
82
89
  import { AvalynxAlert } from 'avalynx-alert';
83
- import 'avalynx-alert/dist/css/avalynx-alert.min.css';
90
+ import 'avalynx-alert/dist/css/avalynx-alert.css';
84
91
  ```
85
92
 
86
93
  Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxAlert displays correctly.
@@ -135,7 +142,7 @@ AvalynxAlert allows the following options for customization:
135
142
  - `type`: (string) The type of alert. One of (`primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`) (default: `'info'`).
136
143
  - `options`: An object containing the following keys:
137
144
  - `duration`: (number) Duration in milliseconds for the alert to be displayed (default: `5000`).
138
- - `position`: (string) Position of the alert on the screen. One of `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right` (default: `'top-right'`).
145
+ - `position`: (string) Position of the alert on the screen. One of `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right` (default: `'top-center'`).
139
146
  - `closeable`: (boolean) Whether the alert can be closed by the user (default: `true`).
140
147
  - `autoClose`: (boolean) Whether the alert will close automatically after the duration (default: `true`).
141
148
  - `width`: (string) The width of the alert (default: `400px`).
package/dist/css/avalynx-alert.css CHANGED
@@ -3,7 +3,7 @@
3
3
  *
4
4
  * A simple alert system for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
5
5
  *
6
- * @version 1.0.2
6
+ * @version 1.0.5
7
7
  * @license MIT
8
8
  * @author https://github.com/avalynx/avalynx-alert/graphs/contributors
9
9
  * @website https://github.com/avalynx/
package/dist/js/avalynx-alert.esm.js CHANGED
@@ -3,7 +3,7 @@
3
3
  *
4
4
  * A simple alert system for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
5
5
  *
6
- * @version 1.0.2
6
+ * @version 1.0.5
7
7
  * @license MIT
8
8
  * @author https://github.com/avalynx/avalynx-alert/graphs/contributors
9
9
  * @website https://github.com/avalynx/
@@ -26,11 +26,11 @@ import * as bootstrap from 'bootstrap';
26
26
 
27
27
  export class AvalynxAlert {
28
28
  constructor(message, type, options = {}) {
29
+ this.message = message;
30
+ this.type = type;
29
31
  if (options === null || typeof options !== 'object') {
30
32
  options = {};
31
33
  }
32
- this.message = message;
33
- this.type = type;
34
34
  this.options = {
35
35
  duration: options.duration || 5000,
36
36
  position: options.position || 'top-center',
@@ -65,32 +65,34 @@ export class AvalynxAlert {
65
65
  container.style.zIndex = '1000';
66
66
  container.classList.add('container-fluid');
67
67
 
68
- if (this.options.position === 'top-left') {
69
- container.style.position = 'fixed';
70
- container.style.top = '10px';
71
- container.style.left = '0px';
72
- } else if (this.options.position === 'top-center') {
73
- container.style.position = 'fixed';
74
- container.style.top = '10px';
75
- container.style.left = '50%';
76
- container.style.transform = 'translateX(-50%)';
77
- } else if (this.options.position === 'top-right') {
78
- container.style.position = 'fixed';
79
- container.style.top = '10px';
80
- container.style.right = '0px';
81
- } else if (this.options.position === 'bottom-left') {
82
- container.style.position = 'fixed';
83
- container.style.bottom = '10px';
84
- container.style.left = '0px';
85
- } else if (this.options.position === 'bottom-center') {
86
- container.style.position = 'fixed';
87
- container.style.bottom = '10px';
88
- container.style.left = '50%';
89
- container.style.transform = 'translateX(-50%)';
90
- } else if (this.options.position === 'bottom-right') {
91
- container.style.position = 'fixed';
92
- container.style.bottom = '10px';
93
- container.style.right = '0px';
68
+ // Positioning
69
+ container.style.position = 'fixed';
70
+ switch (this.options.position) {
71
+ case 'top-left':
72
+ container.style.top = '10px';
73
+ container.style.left = '0px';
74
+ break;
75
+ case 'top-center':
76
+ container.style.top = '10px';
77
+ container.style.left = '50%';
78
+ container.style.transform = 'translateX(-50%)';
79
+ break;
80
+ case 'top-right':
81
+ container.style.top = '10px';
82
+ container.style.right = '0px';
83
+ break;
84
+ case 'bottom-left':
85
+ container.style.bottom = '10px';
86
+ container.style.left = '0px';
87
+ break;
88
+ case 'bottom-center':
89
+ container.style.bottom = '10px';
90
+ container.style.left = '50%';
91
+ container.style.transform = 'translateX(-50%)';
92
+ break;
93
+ default: // 'bottom-right'
94
+ container.style.bottom = '10px';
95
+ container.style.right = '0px';
94
96
  }
95
97
 
96
98
  document.body.appendChild(container);
@@ -143,4 +145,9 @@ export class AvalynxAlert {
143
145
  }, this.options.duration);
144
146
  }
145
147
  }
146
- }
148
+ }
149
+
150
+ /* istanbul ignore next */
151
+ if (typeof module !== 'undefined' && module.exports) {
152
+ module.exports = AvalynxAlert;
153
+ }
package/dist/js/avalynx-alert.js CHANGED
@@ -3,7 +3,7 @@
3
3
  *
4
4
  * A simple alert system for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
5
5
  *
6
- * @version 1.0.2
6
+ * @version 1.0.5
7
7
  * @license MIT
8
8
  * @author https://github.com/avalynx/avalynx-alert/graphs/contributors
9
9
  * @website https://github.com/avalynx/
@@ -24,11 +24,11 @@
24
24
 
25
25
  class AvalynxAlert {
26
26
  constructor(message, type, options = {}) {
27
+ this.message = message;
28
+ this.type = type;
27
29
  if (options === null || typeof options !== 'object') {
28
30
  options = {};
29
31
  }
30
- this.message = message;
31
- this.type = type;
32
32
  this.options = {
33
33
  duration: options.duration || 5000,
34
34
  position: options.position || 'top-center',
@@ -63,32 +63,34 @@ class AvalynxAlert {
63
63
  container.style.zIndex = '1000';
64
64
  container.classList.add('container-fluid');
65
65
 
66
- if (this.options.position === 'top-left') {
67
- container.style.position = 'fixed';
68
- container.style.top = '10px';
69
- container.style.left = '0px';
70
- } else if (this.options.position === 'top-center') {
71
- container.style.position = 'fixed';
72
- container.style.top = '10px';
73
- container.style.left = '50%';
74
- container.style.transform = 'translateX(-50%)';
75
- } else if (this.options.position === 'top-right') {
76
- container.style.position = 'fixed';
77
- container.style.top = '10px';
78
- container.style.right = '0px';
79
- } else if (this.options.position === 'bottom-left') {
80
- container.style.position = 'fixed';
81
- container.style.bottom = '10px';
82
- container.style.left = '0px';
83
- } else if (this.options.position === 'bottom-center') {
84
- container.style.position = 'fixed';
85
- container.style.bottom = '10px';
86
- container.style.left = '50%';
87
- container.style.transform = 'translateX(-50%)';
88
- } else if (this.options.position === 'bottom-right') {
89
- container.style.position = 'fixed';
90
- container.style.bottom = '10px';
91
- container.style.right = '0px';
66
+ // Positioning
67
+ container.style.position = 'fixed';
68
+ switch (this.options.position) {
69
+ case 'top-left':
70
+ container.style.top = '10px';
71
+ container.style.left = '0px';
72
+ break;
73
+ case 'top-center':
74
+ container.style.top = '10px';
75
+ container.style.left = '50%';
76
+ container.style.transform = 'translateX(-50%)';
77
+ break;
78
+ case 'top-right':
79
+ container.style.top = '10px';
80
+ container.style.right = '0px';
81
+ break;
82
+ case 'bottom-left':
83
+ container.style.bottom = '10px';
84
+ container.style.left = '0px';
85
+ break;
86
+ case 'bottom-center':
87
+ container.style.bottom = '10px';
88
+ container.style.left = '50%';
89
+ container.style.transform = 'translateX(-50%)';
90
+ break;
91
+ default: // 'bottom-right'
92
+ container.style.bottom = '10px';
93
+ container.style.right = '0px';
92
94
  }
93
95
 
94
96
  document.body.appendChild(container);
@@ -143,6 +145,7 @@ class AvalynxAlert {
143
145
  }
144
146
  }
145
147
 
148
+ /* istanbul ignore next */
146
149
  if (typeof module !== 'undefined' && module.exports) {
147
150
  module.exports = AvalynxAlert;
148
151
  }
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "avalynx-alert",
3
3
  "title": "AvalynxAlert",
4
4
  "description": "AvalynxAlert is a simple alert system for web applications. Based on Bootstrap >=5.3 without any framework dependencies.",
5
- "version": "1.0.3",
5
+ "version": "1.0.5",
6
6
  "license": "MIT",
7
7
  "main": "dist/js/avalynx-alert.js",
8
8
  "module": "dist/js/avalynx-alert.esm.js",
@@ -44,12 +44,12 @@
44
44
  "bootstrap": ">=5.3"
45
45
  },
46
46
  "devDependencies": {
47
- "@babel/core": "^7",
48
- "@babel/preset-env": "^7",
49
- "babel-jest": "^29",
50
- "jest": "^29",
51
- "jest-environment-jsdom": "^29",
52
- "shelljs": "^0",
53
- "shx": "^0"
47
+ "@babel/core": "^7.29.0",
48
+ "@babel/preset-env": "^7.29.0",
49
+ "babel-jest": "^30.2.0",
50
+ "jest": "^30.2.0",
51
+ "jest-environment-jsdom": "^30.2.0",
52
+ "shelljs": "^0.10.0",
53
+ "shx": "^0.4.0"
54
54
  }
55
55
  }