avalynx-alert 1.0.5 → 1.0.6
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 +1 -1
- package/README.de.md +78 -54
- package/README.md +12 -9
- package/dist/css/avalynx-alert.css +2 -2
- package/dist/js/avalynx-alert.esm.js +3 -4
- package/dist/js/avalynx-alert.js +3 -4
- package/package.json +2 -2
package/LICENSE
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
MIT License
|
|
2
2
|
|
|
3
|
-
Copyright (c) 2024 Juergen Schwind an the
|
|
3
|
+
Copyright (c) 2024 Juergen Schwind an the AvalynxAlert Authors
|
|
4
4
|
|
|
5
5
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
6
|
of this software and associated documentation files (the "Software"), to deal
|
package/README.de.md
CHANGED
|
@@ -1,115 +1,129 @@
|
|
|
1
1
|
# AvalynxAlert
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.com/package/avalynx-alert)
|
|
4
|
+
[](https://www.npmjs.com/package/avalynx-alert)
|
|
5
|
+
[](https://www.jsdelivr.com/package/npm/avalynx-alert)
|
|
6
|
+
[](LICENSE)
|
|
7
|
+
[](https://github.com/avalynx/avalynx-alert/actions/workflows/tests.yml)
|
|
8
|
+
[](https://codecov.io/gh/avalynx/avalynx-alert)
|
|
9
|
+
[](https://github.com/avalynx/avalynx-alert)
|
|
9
10
|
|
|
10
|
-
AvalynxAlert ist ein leichtgewichtiges, eigenständiges Benachrichtigungssystem für Web
|
|
11
|
+
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
|
|
|
12
13
|
## Funktionen
|
|
13
14
|
|
|
14
|
-
- Verschiedene Alert
|
|
15
|
-
- Flexible Positionierung
|
|
16
|
-
- Steuerbare Dauer
|
|
17
|
-
- Schließbar
|
|
18
|
-
- Automatisches Schließen
|
|
19
|
-
- Einfache API
|
|
15
|
+
- **Verschiedene Alert-Typen**: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`.
|
|
16
|
+
- **Flexible Positionierung**: `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right`.
|
|
17
|
+
- **Steuerbare Dauer**: Anzeigezeit in Millisekunden konfigurierbar.
|
|
18
|
+
- **Schließbar**: Optional kann ein Schließen-Button angezeigt werden.
|
|
19
|
+
- **Automatisches Schließen**: Alerts können nach Ablauf der Dauer automatisch ausgeblendet werden.
|
|
20
|
+
- **Einfache API**: Schlanke Verwendung ohne Framework-Abhängigkeiten.
|
|
20
21
|
|
|
21
22
|
## Beispiele
|
|
22
23
|
|
|
23
|
-
|
|
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
|
|
24
|
+
Hier ist ein einfaches Beispiel für die Verwendung von AvalynxAlert in Ihrem Projekt:
|
|
28
25
|
|
|
29
|
-
|
|
26
|
+
* [Übersicht](https://avalynx-alert.jbs-newmedia.de/examples/index.html)
|
|
27
|
+
* [Einfacher Alert](https://avalynx-alert.jbs-newmedia.de/examples/simple-alert.html)
|
|
28
|
+
* [Zufällige Alerts](https://avalynx-alert.jbs-newmedia.de/examples/random-alerts.html)
|
|
29
|
+
* [Callback bei Schließen](https://avalynx-alert.jbs-newmedia.de/examples/callback-onclose.html)
|
|
30
|
+
* [Zufällige Alerts alle 3 Sekunden](https://avalynx-alert.jbs-newmedia.de/examples/random-alerts-every-3s.html)
|
|
30
31
|
|
|
31
|
-
|
|
32
|
+
## Installation
|
|
33
|
+
|
|
34
|
+
Um AvalynxAlert in Ihrem Projekt zu verwenden, können Sie es direkt in Ihre HTML-Datei einbinden. Stellen Sie sicher, dass Bootstrap 5.3 oder höher in Ihrem Projekt enthalten ist, damit AvalynxAlert korrekt funktioniert.
|
|
35
|
+
|
|
36
|
+
Zuerst Bootstrap einbinden:
|
|
32
37
|
|
|
33
38
|
```html
|
|
34
39
|
<!-- Bootstrap -->
|
|
35
40
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
36
41
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
42
|
+
```
|
|
37
43
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
44
|
+
Dann AvalynxAlert einbinden:
|
|
45
|
+
|
|
46
|
+
```html
|
|
47
|
+
<link href="pfad/zu/avalynx-alert.css" rel="stylesheet">
|
|
48
|
+
<script src="pfad/zu/avalynx-alert.js"></script>
|
|
41
49
|
```
|
|
42
50
|
|
|
43
|
-
Ersetzen Sie `
|
|
51
|
+
Ersetzen Sie `pfad/zu/avalynx-alert.*` durch den tatsächlichen Pfad zu den Dateien in Ihrem Projekt.
|
|
52
|
+
|
|
53
|
+
## Installation über jsDelivr ([Link](https://cdn.jsdelivr.net/npm/avalynx-alert/))
|
|
44
54
|
|
|
45
|
-
|
|
55
|
+
AvalynxAlert ist auch über [jsDelivr](https://www.jsdelivr.com/) verfügbar. Sie können es wie folgt in Ihr Projekt einbinden:
|
|
46
56
|
|
|
47
57
|
```html
|
|
48
|
-
<link href="https://cdn.jsdelivr.net/npm/avalynx-alert@1.0.
|
|
49
|
-
<script src="https://cdn.jsdelivr.net/npm/avalynx-alert@1.0.
|
|
58
|
+
<link href="https://cdn.jsdelivr.net/npm/avalynx-alert@1.0.6/dist/css/avalynx-alert.css" rel="stylesheet">
|
|
59
|
+
<script src="https://cdn.jsdelivr.net/npm/avalynx-alert@1.0.6/dist/js/avalynx-alert.js"></script>
|
|
50
60
|
```
|
|
51
61
|
|
|
52
|
-
Bootstrap JS/CSS
|
|
62
|
+
Stellen Sie sicher, dass Sie auch Bootstrap JS/CSS in Ihr Projekt einbinden, um eine korrekte Anzeige von AvalynxAlert zu gewährleisten.
|
|
53
63
|
|
|
54
|
-
## Installation
|
|
64
|
+
## Installation über NPM ([Link](https://www.npmjs.com/package/avalynx-alert))
|
|
65
|
+
|
|
66
|
+
AvalynxAlert ist auch als NPM-Paket verfügbar. Sie können es mit dem folgenden Befehl zu Ihrem Projekt hinzufügen:
|
|
55
67
|
|
|
56
68
|
```bash
|
|
57
69
|
npm install avalynx-alert
|
|
58
70
|
```
|
|
59
71
|
|
|
60
|
-
|
|
72
|
+
Nach der Installation können Sie AvalynxAlert wie folgt in Ihre JavaScript-Datei importieren:
|
|
61
73
|
|
|
62
74
|
```javascript
|
|
63
75
|
import { AvalynxAlert } from 'avalynx-alert';
|
|
64
76
|
import 'avalynx-alert/dist/css/avalynx-alert.css';
|
|
65
77
|
```
|
|
66
78
|
|
|
67
|
-
Bootstrap JS/CSS
|
|
79
|
+
Stellen Sie sicher, dass Sie auch Bootstrap JS/CSS in Ihr Projekt einbinden, um eine korrekte Anzeige von AvalynxAlert zu gewährleisten.
|
|
68
80
|
|
|
69
|
-
## Installation
|
|
81
|
+
## Installation über Symfony AssetMapper
|
|
70
82
|
|
|
71
83
|
```bash
|
|
72
84
|
php bin/console importmap:require avalynx-alert
|
|
73
85
|
```
|
|
74
86
|
|
|
75
|
-
|
|
87
|
+
Nach der Installation können Sie AvalynxAlert wie folgt in Ihre JavaScript-Datei importieren:
|
|
76
88
|
|
|
77
89
|
```javascript
|
|
78
90
|
import { AvalynxAlert } from 'avalynx-alert';
|
|
79
91
|
import 'avalynx-alert/dist/css/avalynx-alert.css';
|
|
80
92
|
```
|
|
81
93
|
|
|
82
|
-
Bootstrap JS/CSS
|
|
94
|
+
Stellen Sie sicher, dass Sie auch Bootstrap JS/CSS in Ihr Projekt einbinden, um eine korrekte Anzeige von AvalynxAlert zu gewährleisten.
|
|
83
95
|
|
|
84
|
-
## Installation
|
|
96
|
+
## Installation über Symfony AssetComposer
|
|
85
97
|
|
|
86
|
-
Weitere Informationen
|
|
98
|
+
Weitere Informationen zum Symfony AssetComposer Bundle finden Sie [hier](https://github.com/jbsnewmedia/asset-composer-bundle).
|
|
87
99
|
|
|
88
100
|
```twig
|
|
89
101
|
{% do addAssetComposer('avalynx/avalynx-alert/dist/css/avalynx-alert.css') %}
|
|
90
102
|
{% do addAssetComposer('avalynx/avalynx-alert/dist/js/avalynx-alert.js') %}
|
|
91
103
|
```
|
|
92
104
|
|
|
93
|
-
Bootstrap JS/CSS
|
|
105
|
+
Stellen Sie sicher, dass Sie auch Bootstrap JS/CSS in Ihr Projekt einbinden, um eine korrekte Anzeige von AvalynxAlert zu gewährleisten.
|
|
106
|
+
|
|
107
|
+
## Installation über Composer ([Link](https://packagist.org/packages/avalynx/avalynx-alert))
|
|
94
108
|
|
|
95
|
-
|
|
109
|
+
AvalynxAlert ist auch als Composer-Paket verfügbar. Sie können es mit dem folgenden Befehl zu Ihrem Projekt hinzufügen:
|
|
96
110
|
|
|
97
111
|
```bash
|
|
98
112
|
composer require avalynx/avalynx-alert
|
|
99
113
|
```
|
|
100
114
|
|
|
101
|
-
|
|
115
|
+
Nach der Installation können Sie AvalynxAlert wie folgt in Ihre HTML-Datei einbinden:
|
|
102
116
|
|
|
103
117
|
```html
|
|
104
118
|
<link href="vendor/avalynx/avalynx-alert/dist/css/avalynx-alert.css" rel="stylesheet">
|
|
105
119
|
<script src="vendor/avalynx/avalynx-alert/dist/js/avalynx-alert.js"></script>
|
|
106
120
|
```
|
|
107
121
|
|
|
108
|
-
Bootstrap JS/CSS
|
|
122
|
+
Stellen Sie sicher, dass Sie auch Bootstrap JS/CSS in Ihr Projekt einbinden, um eine korrekte Anzeige von AvalynxAlert zu gewährleisten.
|
|
109
123
|
|
|
110
124
|
## Verwendung
|
|
111
125
|
|
|
112
|
-
Einen Alert erzeugen Sie
|
|
126
|
+
Einen Alert erzeugen Sie, indem Sie ein neues `AvalynxAlert`-Objekt mit den gewünschten Optionen instanziieren:
|
|
113
127
|
|
|
114
128
|
```javascript
|
|
115
129
|
new AvalynxAlert('Ihre Nachricht', 'success', {
|
|
@@ -123,24 +137,34 @@ new AvalynxAlert('Ihre Nachricht', 'success', {
|
|
|
123
137
|
|
|
124
138
|
## Optionen
|
|
125
139
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
- `
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
140
|
+
AvalynxAlert ermöglicht die folgenden Optionen zur Anpassung:
|
|
141
|
+
|
|
142
|
+
- `message`: (string) Die anzuzeigende Nachricht (Standard: `''`).
|
|
143
|
+
- `type`: (string) Der Typ des Alerts. Einer von (`primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`) (Standard: `'info'`).
|
|
144
|
+
- `options`: Ein Objekt, das die folgenden Schlüssel enthält:
|
|
145
|
+
- `duration`: (number) Anzeigezeit in Millisekunden (Standard: `5000`).
|
|
146
|
+
- `position`: (string) Position des Alerts auf dem Bildschirm. Einer von `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right` (Standard: `'top-center'`).
|
|
147
|
+
- `closeable`: (boolean) Ob der Nutzer den Alert schließen kann (Standard: `true`).
|
|
148
|
+
- `autoClose`: (boolean) Ob der Alert nach Ablauf automatisch geschlossen wird (Standard: `true`).
|
|
149
|
+
- `width`: (string) Breite des Alerts (Standard: `'400px'`).
|
|
150
|
+
- `onClose`: (function) Eine Callback-Funktion, die beim Schließen ausgeführt wird (Standard: `null`).
|
|
135
151
|
|
|
136
|
-
##
|
|
152
|
+
## Beitragen
|
|
137
153
|
|
|
138
|
-
Beiträge sind willkommen!
|
|
154
|
+
Beiträge sind willkommen! Wenn Sie etwas beitragen möchten, forken Sie bitte das Repository und senden Sie einen Pull-Request mit Ihren Änderungen oder Verbesserungen. Wir suchen Beiträge in den folgenden Bereichen:
|
|
155
|
+
|
|
156
|
+
- Fehlerbehebungen (Bug fixes)
|
|
157
|
+
- Funktionserweiterungen
|
|
158
|
+
- Dokumentationsverbesserungen
|
|
159
|
+
|
|
160
|
+
Bevor Sie Ihren Pull-Request einreichen, stellen Sie bitte sicher, dass Ihre Änderungen gut dokumentiert sind und dem bestehenden Codestil des Projekts entsprechen.
|
|
139
161
|
|
|
140
162
|
## Lizenz
|
|
141
163
|
|
|
142
|
-
AvalynxAlert
|
|
164
|
+
AvalynxAlert ist quelloffene Software, die unter der [MIT-Lizenz](LICENSE) lizenziert ist.
|
|
143
165
|
|
|
144
166
|
## Kontakt
|
|
145
167
|
|
|
146
|
-
Fragen,
|
|
168
|
+
Wenn Sie Fragen, Funktionswünsche oder Probleme haben, eröffnen Sie bitte ein Issue in unserem [GitHub-Repository](https://github.com/avalynx/avalynx-alert/issues) oder reichen Sie einen Pull-Request ein.
|
|
169
|
+
|
|
170
|
+
Vielen Dank, dass Sie AvalynxAlert für Ihr Projekt in Betracht ziehen!
|
package/README.md
CHANGED
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
# AvalynxAlert
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.com/package/avalynx-alert)
|
|
4
|
+
[](https://www.npmjs.com/package/avalynx-alert)
|
|
5
|
+
[](https://packagist.org/packages/avalynx/avalynx-alert)
|
|
6
|
+
[](https://packagist.org/packages/avalynx/avalynx-alert)
|
|
7
|
+
[](https://www.jsdelivr.com/package/npm/avalynx-alert)
|
|
8
|
+
[](LICENSE)
|
|
9
|
+
[](https://github.com/avalynx/avalynx-alert/actions/workflows/tests.yml)
|
|
10
|
+
[](https://codecov.io/gh/avalynx/avalynx-alert)
|
|
11
|
+
[](https://github.com/avalynx/avalynx-alert)
|
|
9
12
|
|
|
10
13
|
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.
|
|
11
14
|
|
|
@@ -18,7 +21,7 @@ AvalynxAlert is a lightweight, dependency-free alert system designed for web app
|
|
|
18
21
|
- **AutoClose Functionality**: Alerts can automatically disappear after a certain period.
|
|
19
22
|
- **Easy to Use**: Simple API for creating and managing alerts within your web applications.
|
|
20
23
|
|
|
21
|
-
##
|
|
24
|
+
## Examples
|
|
22
25
|
|
|
23
26
|
Here's a simple example of how to use AvalynxAlert in your project:
|
|
24
27
|
|
|
@@ -54,8 +57,8 @@ Replace `path/to/avalynx-alert.js` and `path/to/avalynx-alert.css` with the actu
|
|
|
54
57
|
AvalynxAlert is also available via [jsDelivr](https://www.jsdelivr.com/). You can include it in your project like this:
|
|
55
58
|
|
|
56
59
|
```html
|
|
57
|
-
<link href="https://cdn.jsdelivr.net/npm/avalynx-alert@1.0.
|
|
58
|
-
<script src="https://cdn.jsdelivr.net/npm/avalynx-alert@1.0.
|
|
60
|
+
<link href="https://cdn.jsdelivr.net/npm/avalynx-alert@1.0.6/dist/css/avalynx-alert.css" rel="stylesheet">
|
|
61
|
+
<script src="https://cdn.jsdelivr.net/npm/avalynx-alert@1.0.6/dist/js/avalynx-alert.js"></script>
|
|
59
62
|
```
|
|
60
63
|
|
|
61
64
|
Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxAlert displays correctly.
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* AvalynxAlert
|
|
3
3
|
*
|
|
4
|
-
*
|
|
4
|
+
* AvalynxAlert is a simple alert system for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
|
|
5
5
|
*
|
|
6
|
-
* @version 1.0.
|
|
6
|
+
* @version 1.0.6
|
|
7
7
|
* @license MIT
|
|
8
8
|
* @author https://github.com/avalynx/avalynx-alert/graphs/contributors
|
|
9
9
|
* @website https://github.com/avalynx/
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* AvalynxAlert
|
|
3
3
|
*
|
|
4
|
-
*
|
|
4
|
+
* AvalynxAlert is a simple alert system for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
|
|
5
5
|
*
|
|
6
|
-
* @version 1.0.
|
|
6
|
+
* @version 1.0.6
|
|
7
7
|
* @license MIT
|
|
8
8
|
* @author https://github.com/avalynx/avalynx-alert/graphs/contributors
|
|
9
9
|
* @website https://github.com/avalynx/
|
|
@@ -65,7 +65,6 @@ export class AvalynxAlert {
|
|
|
65
65
|
container.style.zIndex = '1000';
|
|
66
66
|
container.classList.add('container-fluid');
|
|
67
67
|
|
|
68
|
-
// Positioning
|
|
69
68
|
container.style.position = 'fixed';
|
|
70
69
|
switch (this.options.position) {
|
|
71
70
|
case 'top-left':
|
|
@@ -90,7 +89,7 @@ export class AvalynxAlert {
|
|
|
90
89
|
container.style.left = '50%';
|
|
91
90
|
container.style.transform = 'translateX(-50%)';
|
|
92
91
|
break;
|
|
93
|
-
default:
|
|
92
|
+
default:
|
|
94
93
|
container.style.bottom = '10px';
|
|
95
94
|
container.style.right = '0px';
|
|
96
95
|
}
|
package/dist/js/avalynx-alert.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* AvalynxAlert
|
|
3
3
|
*
|
|
4
|
-
*
|
|
4
|
+
* AvalynxAlert is a simple alert system for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
|
|
5
5
|
*
|
|
6
|
-
* @version 1.0.
|
|
6
|
+
* @version 1.0.6
|
|
7
7
|
* @license MIT
|
|
8
8
|
* @author https://github.com/avalynx/avalynx-alert/graphs/contributors
|
|
9
9
|
* @website https://github.com/avalynx/
|
|
@@ -63,7 +63,6 @@ class AvalynxAlert {
|
|
|
63
63
|
container.style.zIndex = '1000';
|
|
64
64
|
container.classList.add('container-fluid');
|
|
65
65
|
|
|
66
|
-
// Positioning
|
|
67
66
|
container.style.position = 'fixed';
|
|
68
67
|
switch (this.options.position) {
|
|
69
68
|
case 'top-left':
|
|
@@ -88,7 +87,7 @@ class AvalynxAlert {
|
|
|
88
87
|
container.style.left = '50%';
|
|
89
88
|
container.style.transform = 'translateX(-50%)';
|
|
90
89
|
break;
|
|
91
|
-
default:
|
|
90
|
+
default:
|
|
92
91
|
container.style.bottom = '10px';
|
|
93
92
|
container.style.right = '0px';
|
|
94
93
|
}
|
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.
|
|
5
|
+
"version": "1.0.6",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"main": "dist/js/avalynx-alert.js",
|
|
8
8
|
"module": "dist/js/avalynx-alert.esm.js",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"package.json"
|
|
26
26
|
],
|
|
27
27
|
"author": {
|
|
28
|
-
"name": "Juergen Schwind an the
|
|
28
|
+
"name": "Juergen Schwind an the AvalynxAlert Authors",
|
|
29
29
|
"url": "https://github.com/avalynx/avalynx-alert/graphs/contributors"
|
|
30
30
|
},
|
|
31
31
|
"homepage": "https://github.com/avalynx/",
|