avalynx-modal 1.0.2 → 1.0.3

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 +181 -0
  2. package/README.md +10 -2
  3. package/dist/css/avalynx-modal.css +1 -1
  4. package/dist/js/avalynx-modal.esm.js +2 -1
  5. package/dist/js/avalynx-modal.js +2 -1
  6. package/package.json +8 -9
package/README.de.md ADDED
@@ -0,0 +1,181 @@
1
+ # AvalynxModal
2
+
3
+ [![npm version](https://img.shields.io/npm/v/avalynx-modal)](https://www.npmjs.com/package/avalynx-modal)
4
+ [![npm downloads](https://img.shields.io/npm/dt/avalynx-modal)](https://www.npmjs.com/package/avalynx-modal)
5
+ [![jsDelivr](https://img.shields.io/jsdelivr/npm/hm/avalynx-modal)](https://www.jsdelivr.com/package/npm/avalynx-modal)
6
+ [![License](https://img.shields.io/npm/l/avalynx-modal)](LICENSE)
7
+ [![Tests](https://github.com/avalynx/avalynx-modal/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/avalynx/avalynx-modal/actions/workflows/tests.yml)
8
+ [![codecov](https://codecov.io/gh/avalynx/avalynx-modal/branch/main/graph/badge.svg)](https://codecov.io/gh/avalynx/avalynx-modal)
9
+ [![GitHub stars](https://img.shields.io/github/stars/avalynx/avalynx-modal?style=flat&logo=github)](https://github.com/avalynx/avalynx-modal)
10
+
11
+ AvalynxModal ist ein einfaches Modal-System für Webanwendungen mit Vollbildunterstützung. Basierend auf Bootstrap >=5.3 ohne jegliche Framework-Abhängigkeiten.
12
+
13
+ ## Funktionen
14
+
15
+ - **Anpassbare Modals**: Unterstützt verschiedene Anpassungsoptionen wie Vollbildmodus, benutzerdefinierte Titel, Hauptinhalt, Schaltflächen und mehr.
16
+ - **Bootstrap-Integration**: Entwickelt für die nahtlose Integration mit Bootstrap >= 5.3.
17
+ - **Einfach zu bedienen**: Einfache API zum Erstellen und Verwalten von Modals in Ihren Webanwendungen.
18
+
19
+ ## Beispiel
20
+
21
+ Hier ist ein einfaches Beispiel für die Verwendung von AvalynxModal in Ihrem Projekt:
22
+
23
+ * [Übersicht](https://avalynx-modal.jbs-newmedia.de/examples/index.html)
24
+ * [Einfaches Modal](https://avalynx-modal.jbs-newmedia.de/examples/modal.html)
25
+ * [Permanentes Modal](https://avalynx-modal.jbs-newmedia.de/examples/modal-permanent.html)
26
+
27
+ ## Installation
28
+
29
+ Um AvalynxModal in Ihrem Projekt zu verwenden, können Sie es direkt in Ihre HTML-Datei einbinden. Stellen Sie sicher, dass Sie Bootstrap 5.3 oder höher in Ihrem Projekt eingebunden haben, damit AvalynxModal korrekt funktioniert.
30
+
31
+ Binden Sie zuerst Bootstrap ein:
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
+
39
+ Binden Sie dann AvalynxModal ein:
40
+
41
+ ```html
42
+ <link href="path/to/avalynx-modal.css" rel="stylesheet">
43
+ <script src="path/to/avalynx-modal.js"></script>
44
+ ```
45
+
46
+ Ersetzen Sie `path/to/avalynx-modal.js` und `path/to/avalynx-modal.css` durch den tatsächlichen Pfad zu den Dateien in Ihrem Projekt.
47
+
48
+ ## Installation über jsDelivr ([Link](https://cdn.jsdelivr.net/npm/avalynx-modal/))
49
+
50
+ AvalynxModal ist auch über [jsDelivr](https://www.jsdelivr.com/) verfügbar. Sie können es wie folgt in Ihr Projekt einbinden:
51
+
52
+ ```html
53
+ <link href="https://cdn.jsdelivr.net/npm/avalynx-modal@1.0.3/dist/css/avalynx-modal.css" rel="stylesheet">
54
+ <script src="https://cdn.jsdelivr.net/npm/avalynx-modal@1.0.3/dist/js/avalynx-modal.js"></script>
55
+ ```
56
+
57
+ Stellen Sie sicher, dass Sie auch das JS/CSS von Bootstrap in Ihr Projekt einbinden, um sicherzustellen, dass AvalynxModal korrekt angezeigt wird.
58
+
59
+ ## Installation über NPM ([Link](https://www.npmjs.com/package/avalynx-modal))
60
+
61
+ AvalynxModal ist auch als npm-Paket verfügbar. Sie können es mit dem folgenden Befehl zu Ihrem Projekt hinzufügen:
62
+
63
+ ```bash
64
+ npm install avalynx-modal
65
+ ```
66
+
67
+ Nach der Installation können Sie AvalynxModal wie folgt in Ihre JavaScript-Datei importieren:
68
+
69
+ ```javascript
70
+ import { AvalynxModal } from 'avalynx-modal';
71
+ import 'avalynx-modal/dist/css/avalynx-modal.min.css';
72
+ ```
73
+
74
+ Stellen Sie sicher, dass Sie auch das JS/CSS von Bootstrap in Ihr Projekt einbinden, um sicherzustellen, dass AvalynxModal korrekt angezeigt wird.
75
+
76
+ ## Installation über Symfony AssetMapper
77
+
78
+ ```bash
79
+ php bin/console importmap:require avalynx-modal
80
+ ```
81
+
82
+ Nach der Installation können Sie AvalynxModal wie folgt in Ihre JavaScript-Datei importieren:
83
+
84
+ ```javascript
85
+ import { AvalynxModal } from 'avalynx-modal';
86
+ import 'avalynx-modal/dist/css/avalynx-modal.min.css';
87
+ ```
88
+
89
+ Stellen Sie sicher, dass Sie auch das JS/CSS von Bootstrap in Ihr Projekt einbinden, um sicherzustellen, dass AvalynxModal korrekt angezeigt wird.
90
+
91
+ ## Installation über Symfony AssetComposer
92
+
93
+ Weitere Informationen zum Symfony AssetComposer Bundle finden Sie [hier](https://github.com/jbsnewmedia/asset-composer-bundle).
94
+
95
+ ```twig
96
+ {% do addAssetComposer('avalynx/avalynx-modal/dist/css/avalynx-modal.css') %}
97
+ {% do addAssetComposer('avalynx/avalynx-modal/dist/js/avalynx-modal.js') %}
98
+ ```
99
+
100
+ Stellen Sie sicher, dass Sie auch das JS/CSS von Bootstrap in Ihr Projekt einbinden, um sicherzustellen, dass AvalynxModal korrekt angezeigt wird.
101
+
102
+ ## Installation über Composer ([Link](https://packagist.org/packages/avalynx/avalynx-modal))
103
+
104
+ AvalynxModal ist auch als Composer-Paket verfügbar. Sie können es mit dem folgenden Befehl zu Ihrem Projekt hinzufügen:
105
+
106
+ ```bash
107
+ composer require avalynx/avalynx-modal
108
+ ```
109
+
110
+ Nach der Installation können Sie AvalynxModal wie folgt in Ihre HTML-Datei einbinden:
111
+
112
+ ```html
113
+ <link href="vendor/avalynx/avalynx-modal/dist/css/avalynx-modal.css" rel="stylesheet">
114
+ <script src="vendor/avalynx/avalynx-modal/dist/js/avalynx-modal.js"></script>
115
+ ```
116
+
117
+ Stellen Sie sicher, dass Sie auch das JS/CSS von Bootstrap in Ihr Projekt einbinden, um sicherzustellen, dass AvalynxModal korrekt angezeigt wird.
118
+
119
+ ## Verwendung
120
+
121
+ Um einen Modal-Dialog zu erstellen, instanziieren Sie einfach ein neues `AvalynxModal`-Objekt mit den gewünschten Optionen:
122
+
123
+ ```javascript
124
+ new AvalynxModal("#myModal", {
125
+ modalFullscreen: true,
126
+ title: 'Mein Modal',
127
+ body: 'Dies ist der Inhalt meines Modals.',
128
+ buttons: [
129
+ {
130
+ label: 'Schließen',
131
+ class: 'btn btn-primary',
132
+ onClick: function() {
133
+ // Modal schließen
134
+ }
135
+ }
136
+ ]
137
+ });
138
+ ```
139
+
140
+ ## Optionen
141
+
142
+ AvalynxModal ermöglicht die folgenden Optionen zur Anpassung:
143
+
144
+ - `id`: (string) Die ID des Elements, an das das Modal angehängt werden soll.
145
+ - `options`: Ein Objekt, das die folgenden Schlüssel enthält:
146
+ - `modalFullscreen`: (boolean) Vollbildmodus aktivieren (Standard: `false`).
147
+ - `title`: (string) Der Titel des Modals (Standard: `''`).
148
+ - `titleIsHtml`: (boolean) Den Titel als HTML behandeln (Standard: `false`).
149
+ - `body`: (string) Der Hauptinhalt des Modals (Standard: `''`).
150
+ - `bodyIsHtml`: (boolean) Den Hauptinhalt als HTML behandeln (Standard: `false`).
151
+ - `bodyAjaxUrl`: (string) URL zum Abrufen des Hauptinhalts (Standard: `''`).
152
+ - `buttons`: (array) Ein Array von Schaltflächenobjekten. Jedes Objekt sollte ein `label`, eine `class` und eine `onClick`-Funktion haben (Standard: `[]`).
153
+ - `safeInstance`: (boolean) Die Modal-Instanz beibehalten, nachdem sie geschlossen wurde (Standard: `false`).
154
+ - `disableFullscreen`: (boolean) Die Vollbild-Schaltfläche deaktivieren (Standard: `false`).
155
+ - `disableClose`: (boolean) Die Schließen-Schaltfläche deaktivieren (Standard: `false`).
156
+ - `removeFullscreenBtn`: (boolean) Die Vollbild-Schaltfläche entfernen (Standard: `false`).
157
+ - `removeCloseBtn`: (boolean) Die Schließen-Schaltfläche entfernen (Standard: `false`).
158
+ - `loader`: (object) Eine Instanz von AvalynxLoader, die als Loader für das Modal verwendet werden soll (Standard: `null`).
159
+ - `onModalCreated`: (function) Eine Callback-Funktion, die ausgeführt wird, wenn das Modal erstellt wird (Standard: `null`).
160
+ - `onFullscreenToggled`: (function) Eine Callback-Funktion, die ausgeführt wird, wenn der Vollbildmodus umgeschaltet wird (Standard: `null`).
161
+ - `onModalClosed`: (function) Eine Callback-Funktion, die ausgeführt wird, wenn das Modal geschlossen wird (Standard: `null`).
162
+
163
+ ## Beitragen
164
+
165
+ 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 nach Beiträgen in den folgenden Bereichen:
166
+
167
+ - Fehlerbehebungen (Bug fixes)
168
+ - Funktionserweiterungen
169
+ - Dokumentationsverbesserungen
170
+
171
+ Bevor Sie Ihren Pull-Request einreichen, stellen Sie bitte sicher, dass Ihre Änderungen gut dokumentiert sind und dem bestehenden Codierungsstil des Projekts entsprechen.
172
+
173
+ ## Lizenz
174
+
175
+ AvalynxModal ist Open-Source-Software, die unter der [MIT-Lizenz](LICENSE) lizenziert ist.
176
+
177
+ ## Kontakt
178
+
179
+ Wenn Sie Fragen, Funktionswünsche oder Probleme haben, öffnen Sie bitte ein Issue in unserem [GitHub-Repository](https://github.com/avalynx/avalynx-modal/issues) oder senden Sie einen Pull-Request.
180
+
181
+ Vielen Dank, dass Sie AvalynxModal für Ihr Projekt in Betracht ziehen!
package/README.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # AvalynxModal
2
2
 
3
+ [![npm version](https://img.shields.io/npm/v/avalynx-modal)](https://www.npmjs.com/package/avalynx-modal)
4
+ [![npm downloads](https://img.shields.io/npm/dt/avalynx-modal)](https://www.npmjs.com/package/avalynx-modal)
5
+ [![jsDelivr](https://img.shields.io/jsdelivr/npm/hm/avalynx-modal)](https://www.jsdelivr.com/package/npm/avalynx-modal)
6
+ [![License](https://img.shields.io/npm/l/avalynx-modal)](LICENSE)
7
+ [![Tests](https://github.com/avalynx/avalynx-modal/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/avalynx/avalynx-modal/actions/workflows/tests.yml)
8
+ [![codecov](https://codecov.io/gh/avalynx/avalynx-modal/branch/main/graph/badge.svg)](https://codecov.io/gh/avalynx/avalynx-modal)
9
+ [![GitHub stars](https://img.shields.io/github/stars/avalynx/avalynx-modal?style=flat&logo=github)](https://github.com/avalynx/avalynx-modal)
10
+
3
11
  AvalynxModal is a simple modal system for web applications with fullscreen support. Based on Bootstrap >=5.3 without any framework dependencies.
4
12
 
5
13
  ## Features
@@ -42,8 +50,8 @@ Replace `path/to/avalynx-modal.js` and `path/to/avalynx-modal.css` with the actu
42
50
  AvalynxModal is also available via [jsDelivr](https://www.jsdelivr.com/). You can include it in your project like this:
43
51
 
44
52
  ```html
45
- <link href="https://cdn.jsdelivr.net/npm/avalynx-modal@1.0.2/dist/css/avalynx-modal.css" rel="stylesheet">
46
- <script src="https://cdn.jsdelivr.net/npm/avalynx-modal@1.0.2/dist/js/avalynx-modal.js"></script>
53
+ <link href="https://cdn.jsdelivr.net/npm/avalynx-modal@1.0.3/dist/css/avalynx-modal.css" rel="stylesheet">
54
+ <script src="https://cdn.jsdelivr.net/npm/avalynx-modal@1.0.3/dist/js/avalynx-modal.js"></script>
47
55
  ```
48
56
 
49
57
  Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxModal displays correctly.
package/dist/css/avalynx-modal.css CHANGED
@@ -3,7 +3,7 @@
3
3
  *
4
4
  * AvalynxModal is a simple modal system for web applications with fullscreen support. Based on Bootstrap >=5.3 without any framework dependencies.
5
5
  *
6
- * @version 1.0.1
6
+ * @version 1.0.3
7
7
  * @license MIT
8
8
  * @author https://github.com/avalynx/avalynx-modal/graphs/contributors
9
9
  * @website https://github.com/avalynx/
package/dist/js/avalynx-modal.esm.js CHANGED
@@ -3,7 +3,7 @@
3
3
  *
4
4
  * AvalynxModal is a simple modal system for web applications with fullscreen support. Based on Bootstrap >=5.3 without any framework dependencies.
5
5
  *
6
- * @version 1.0.1
6
+ * @version 1.0.3
7
7
  * @license MIT
8
8
  * @author https://github.com/avalynx/avalynx-modal/graphs/contributors
9
9
  * @website https://github.com/avalynx/
@@ -274,6 +274,7 @@ export class AvalynxModal {
274
274
  }
275
275
  }
276
276
 
277
+ /* istanbul ignore next */
277
278
  if (typeof module !== 'undefined' && module.exports) {
278
279
  module.exports = AvalynxModal
279
280
  }
package/dist/js/avalynx-modal.js CHANGED
@@ -3,7 +3,7 @@
3
3
  *
4
4
  * AvalynxModal is a simple modal system for web applications with fullscreen support. Based on Bootstrap >=5.3 without any framework dependencies.
5
5
  *
6
- * @version 1.0.1
6
+ * @version 1.0.3
7
7
  * @license MIT
8
8
  * @author https://github.com/avalynx/avalynx-modal/graphs/contributors
9
9
  * @website https://github.com/avalynx/
@@ -272,6 +272,7 @@ class AvalynxModal {
272
272
  }
273
273
  }
274
274
 
275
+ /* istanbul ignore next */
275
276
  if (typeof module !== 'undefined' && module.exports) {
276
277
  module.exports = AvalynxModal
277
278
  }
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "avalynx-modal",
3
3
  "title": "AvalynxModal",
4
4
  "description": "AvalynxModal is a simple modal system for web applications with fullscreen support. Based on Bootstrap >=5.3 without any framework dependencies.",
5
- "version": "1.0.2",
5
+ "version": "1.0.3",
6
6
  "license": "MIT",
7
7
  "main": "dist/js/avalynx-modal.js",
8
8
  "module": "dist/js/avalynx-modal.esm.js",
@@ -43,13 +43,12 @@
43
43
  "bootstrap": ">=5.3"
44
44
  },
45
45
  "devDependencies": {
46
- "@babel/core": "^7",
47
- "@babel/preset-env": "^7",
48
- "babel-jest": "^29",
49
- "jest": "^29",
50
- "jest-environment-jsdom": "^29",
51
- "@testing-library/jest-dom": "^6",
52
- "shelljs": "^0",
53
- "shx": "^0"
46
+ "@babel/core": "^7.29.0",
47
+ "@babel/preset-env": "^7.29.0",
48
+ "babel-jest": "^30.2.0",
49
+ "jest": "^30.2.0",
50
+ "jest-environment-jsdom": "^30.2.0",
51
+ "shelljs": "^0.10.0",
52
+ "shx": "^0.4.0"
54
53
  }
55
54
  }