avalynx-form 1.0.2 → 1.0.4

package/README.de.md

@@ -0,0 +1,164 @@
+# AvalynxForm
+
+[![npm version](https://img.shields.io/npm/v/avalynx-form)](https://www.npmjs.com/package/avalynx-form)
+[![npm downloads](https://img.shields.io/npm/dt/avalynx-form)](https://www.npmjs.com/package/avalynx-form)
+[![jsDelivr](https://img.shields.io/jsdelivr/npm/hm/avalynx-form)](https://www.jsdelivr.com/package/npm/avalynx-form)
+[![License](https://img.shields.io/npm/l/avalynx-form)](LICENSE)
+[![Tests](https://github.com/avalynx/avalynx-form/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/avalynx/avalynx-form/actions/workflows/tests.yml)
+[![codecov](https://codecov.io/gh/avalynx/avalynx-form/branch/main/graph/badge.svg)](https://codecov.io/gh/avalynx/avalynx-form)
+[![GitHub stars](https://img.shields.io/github/stars/avalynx/avalynx-form?style=flat&logo=github)](https://github.com/avalynx/avalynx-form)
+
+AvalynxForm ist eine leichtgewichtige, anpassbare Formular-Handling-Bibliothek für Webanwendungen. Basierend auf Bootstrap >=5.3 ohne jegliche Framework-Abhängigkeiten.
+
+## Funktionen
+
+- **Formular-Handling**: Vereinfacht den Prozess der Erstellung und Verwaltung von Formularen in Ihren Webanwendungen.
+- **Bootstrap-Integration**: Entwickelt für die nahtlose Integration mit Bootstrap >= 5.3.
+- **Einfach zu bedienen**: Einfache API zur Erstellung und Verwaltung von Formularen in Ihren Webanwendungen.
+
+## Beispiel
+
+Hier ist ein einfaches Beispiel für die Verwendung von AvalynxForm in Ihrem Projekt:
+
+* [Übersicht](https://avalynx-form.jbs-newmedia.de/examples/index.html)
+* [Formular](https://avalynx-form.jbs-newmedia.de/examples/form.html)
+* [Formular mit langsamer Antwort](https://avalynx-form.jbs-newmedia.de/examples/form-slow-response.html)
+* [Formular mit AvalynxSelect](https://avalynx-form.jbs-newmedia.de/examples/form-with-avalynx-select.html)
+
+## Installation
+
+Um AvalynxForm 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 AvalynxForm korrekt funktioniert.
+
+Zuerst Bootstrap einbinden:
+
+```html
+<!-- Bootstrap -->
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js"></script>
+```
+
+Dann AvalynxForm einbinden:
+
+```html
+<script src="pfad/zu/avalynx-form.js"></script>
+```
+
+Ersetzen Sie `pfad/zu/avalynx-form.js` durch den tatsächlichen Pfad zur Datei in Ihrem Projekt.
+
+## Installation über jsDelivr ([Link](https://cdn.jsdelivr.net/npm/avalynx-form/))
+
+AvalynxForm ist auch über [jsDelivr](https://www.jsdelivr.com/) verfügbar. Sie können es wie folgt in Ihr Projekt einbinden:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/avalynx-form@1.0.4/dist/js/avalynx-form.js"></script>
+```
+
+Stellen Sie sicher, dass Sie auch die JS/CSS-Dateien von Bootstrap in Ihr Projekt einbinden, um eine korrekte Anzeige von AvalynxForm zu gewährleisten.
+
+## Installation über NPM ([Link](https://www.npmjs.com/package/avalynx-form))
+
+AvalynxForm ist auch als npm-Paket verfügbar. Sie können es mit dem folgenden Befehl zu Ihrem Projekt hinzufügen:
+
+```bash
+npm install avalynx-form
+```
+
+Nach der Installation können Sie AvalynxForm wie folgt in Ihre JavaScript-Datei importieren:
+
+```javascript
+import { AvalynxForm } from 'avalynx-form';
+```
+
+Stellen Sie sicher, dass Sie auch die JS/CSS-Dateien von Bootstrap in Ihr Projekt einbinden, um eine korrekte Anzeige von AvalynxForm zu gewährleisten.
+
+## Installation über Symfony AssetMapper
+
+```bash
+php bin/console importmap:require avalynx-form
+```
+
+Nach der Installation können Sie AvalynxForm wie folgt in Ihre JavaScript-Datei importieren:
+
+```javascript
+import { AvalynxForm } from 'avalynx-form';
+```
+
+Stellen Sie sicher, dass Sie auch die JS/CSS-Dateien von Bootstrap in Ihr Projekt einbinden, um eine korrekte Anzeige von AvalynxForm zu gewährleisten.
+
+## Installation über Symfony AssetComposer
+
+Weitere Informationen zum Symfony AssetComposer Bundle finden Sie [hier](https://github.com/jbsnewmedia/asset-composer-bundle).
+
+```twig
+{% do addAssetComposer('avalynx/avalynx-form/dist/js/avalynx-form.js') %}
+```
+
+Stellen Sie sicher, dass Sie auch die JS/CSS-Dateien von Bootstrap in Ihr Projekt einbinden, um eine korrekte Anzeige von AvalynxForm zu gewährleisten.
+
+## Installation über Composer ([Link](https://packagist.org/packages/avalynx/avalynx-form))
+
+AvalynxForm ist auch als Composer-Paket verfügbar. Sie können es mit dem folgenden Befehl zu Ihrem Projekt hinzufügen:
+
+```bash
+composer require avalynx/avalynx-form
+```
+
+Nach der Installation können Sie AvalynxForm wie folgt in Ihre HTML-Datei einbinden:
+
+```html
+<script src="vendor/avalynx/avalynx-form/dist/js/avalynx-form.js"></script>
+``` 
+
+Stellen Sie sicher, dass Sie auch die JS/CSS-Dateien von Bootstrap in Ihr Projekt einbinden, um eine korrekte Anzeige von AvalynxForm zu gewährleisten.
+
+## Verwendung
+
+Um AvalynxForm in Ihrem Projekt zu verwenden, binden Sie die JavaScript-Datei von AvalynxForm in Ihr Projekt ein und initialisieren Sie die Klasse mit dem entsprechenden Selektor.
+
+```javascript
+new AvalynxForm("myForm", {
+    apiParams: {
+        extraData1: 'wert1',
+        extraData2: 'wert2'
+    },
+    onSuccess: function(response) {
+        console.log('Formularübermittlung war erfolgreich:', response);
+    },
+    onError: function(response) {
+        console.error('Formularübermittlung fehlgeschlagen:', response);
+    }
+});
+```
+
+## Optionen
+
+AvalynxForm ermöglicht die folgenden Optionen zur Anpassung:
+
+- `id`: (string) Die ID des Elements, an das das Formular angehängt werden soll.
+- `options`: Ein Objekt, das die folgenden Schlüssel enthält:
+  - `apiParams`: (object) Zusätzliche Parameter, die mit den Formulardaten gesendet werden sollen (Standard: `{}`).
+  - `loader`: (object) Eine Instanz von AvalynxLoader, die als Loader für das Modal verwendet werden soll (Standard: `null`).
+  - `onSuccess`: (function) Eine Callback-Funktion, die ausgeführt wird, wenn die Formularübermittlung erfolgreich ist (Standard: `null`).
+  - `onError`: (function) Eine Callback-Funktion, die ausgeführt wird, wenn die Formularübermittlung fehlschlägt (Standard: `null`).
+  - `onBeforeSubmit`: (function) Eine Callback-Funktion, die vor der Formularübermittlung ausgeführt wird (Standard: `null`).
+  - `onAfterSubmit`: (function) Eine Callback-Funktion, die nach der Formularübermittlung ausgeführt wird (Standard: `null`).
+
+## Mitwirken
+
+Beiträge sind willkommen! Wenn Sie einen Beitrag leisten möchten, erstellen Sie bitte einen Fork des Repositorys und senden Sie einen Pull-Request mit Ihren Änderungen oder Verbesserungen. Wir suchen nach Beiträgen in den folgenden Bereichen:
+
+- Fehlerbehebungen
+- Funktionserweiterungen
+- Verbesserungen der Dokumentation
+
+Bevor Sie Ihren Pull-Request absenden, stellen Sie bitte sicher, dass Ihre Änderungen gut dokumentiert sind und dem bestehenden Codierungsstil des Projekts entsprechen.
+
+## Lizenz
+
+AvalynxForm ist quelloffene Software, die unter der [MIT-Lizenz](LICENSE) lizenziert ist.
+
+## Kontakt
+
+Wenn Sie Fragen, Funktionswünsche oder Probleme haben, eröffnen Sie bitte ein Issue in unserem [GitHub-Repository](https://github.com/avalynx/avalynx-form/issues) oder senden Sie einen Pull-Request.
+
+Vielen Dank, dass Sie AvalynxForm für Ihr Projekt in Betracht ziehen!

package/README.md

@@ -1,5 +1,13 @@
 # AvalynxForm
 
+[![npm version](https://img.shields.io/npm/v/avalynx-form)](https://www.npmjs.com/package/avalynx-form)
+[![npm downloads](https://img.shields.io/npm/dt/avalynx-form)](https://www.npmjs.com/package/avalynx-form)
+[![jsDelivr](https://img.shields.io/jsdelivr/npm/hm/avalynx-form)](https://www.jsdelivr.com/package/npm/avalynx-form)
+[![License](https://img.shields.io/npm/l/avalynx-form)](LICENSE)
+[![Tests](https://github.com/avalynx/avalynx-form/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/avalynx/avalynx-form/actions/workflows/tests.yml)
+[![codecov](https://codecov.io/gh/avalynx/avalynx-form/branch/main/graph/badge.svg)](https://codecov.io/gh/avalynx/avalynx-form)
+[![GitHub stars](https://img.shields.io/github/stars/avalynx/avalynx-form?style=flat&logo=github)](https://github.com/avalynx/avalynx-form)
+
 AvalynxForm is a lightweight, customizable form handling library for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
 
 ## Features
@@ -42,7 +50,7 @@ Replace `path/to/avalynx-form.js` with the actual path to the file in your proje
 AvalynxForm is also available via [jsDelivr](https://www.jsdelivr.com/). You can include it in your project like this:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/avalynx-form@1.0.2/dist/js/avalynx-form.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/avalynx-form@1.0.4/dist/js/avalynx-form.js"></script>
 ```
 
 Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxForm displays correctly.
@@ -108,7 +116,7 @@ Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxFo
 To use AvalynxForm in your project, include the AvalynxForm JavaScript file in your project and initialize the class with the appropriate selector.
 
 ```javascript
-new AvalynxForm("#myForm", {
+new AvalynxForm("myForm", {
     apiParams: {
         extraData1: 'value1',
         extraData2: 'value2'
@@ -132,6 +140,8 @@ AvalynxForm allows the following options for customization:
   - `loader`: (object) An instance of AvalynxLoader to use as the loader for the modal (default: `null`).
   - `onSuccess`: (function) A callback function to be executed when the form submission is successful (default: `null`).
   - `onError`: (function) A callback function to be executed when the form submission fails (default: `null`).
+  - `onBeforeSubmit`: (function) A callback function to be executed before the form submission (default: `null`).
+  - `onAfterSubmit`: (function) A callback function to be executed after the form submission (default: `null`).
 
 ## Contributing
 

package/dist/js/avalynx-form.esm.js

@@ -3,12 +3,12 @@
  *
  * AvalynxForm is a lightweight, customizable form handling library for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
  *
- * @version 1.0.2
+ * @version 1.0.4
  * @license MIT
- * @author https://github.com/avalynx/avalynx-datatable/graphs/contributors
+ * @author https://github.com/avalynx/avalynx-form/graphs/contributors
  * @website https://github.com/avalynx/
- * @repository https://github.com/avalynx/avalynx-datatable.git
- * @bugs https://github.com/avalynx/avalynx-datatable/issues
+ * @repository https://github.com/avalynx/avalynx-form.git
+ * @bugs https://github.com/avalynx/avalynx-form/issues
  *
  * @param {string} id - The ID of the element to attach the form to.
  * @param {object} options - An object containing the following keys:
@@ -16,6 +16,8 @@
  * @param {object} options.loader - An instance of AvalynxLoader to use as the loader for the modal (default: `null`).
  * @param {function} options.onSuccess - A callback function to be executed when the form submission is successful (default: `null`).
  * @param {function} options.onError - A callback function to be executed when the form submission fails (default: `null`).
+ * @param {function} options.onBeforeSubmit - A callback function to be executed before the form submission (default: `null`).
+ * @param {function} options.onAfterSubmit - A callback function to be executed after the form submission (default: `null`).
  *
  */
 
@@ -37,6 +39,8 @@ export class AvalynxForm {
             loader: null,
             onSuccess: null,
             onError: null,
+            onBeforeSubmit: null,
+            onAfterSubmit: null,
             ...options
         };
         this.init();
@@ -55,6 +59,12 @@ export class AvalynxForm {
     }
 
     async sendAjaxRequest() {
+        if (this.options.onBeforeSubmit) {
+            const result = this.options.onBeforeSubmit(this.form);
+            if (result === false) {
+                return;
+            }
+        }
         const action = this.form.action;
         const method = this.form.method.toUpperCase();
 
@@ -81,6 +91,9 @@ export class AvalynxForm {
             this.handleResponse(result);
         } catch (error) {
             console.error('Error during AJAX request:', error);
+            if (this.options.onError) {
+                this.options.onError(error);
+            }
         } finally {
             if (this.options.loader === null) {
                 const overlay = document.getElementById(`${this.id}-overlay`);
@@ -90,6 +103,9 @@ export class AvalynxForm {
             } else {
                 this.options.loader.load = false;
             }
+            if (this.options.onAfterSubmit) {
+                this.options.onAfterSubmit(this.form);
+            }
         }
     }
 
@@ -103,7 +119,7 @@ export class AvalynxForm {
             }
 
             if (response.redirect !== undefined) {
-                window.location.href = response.redirect;
+                this.redirect(response.redirect);
             }
         } else {
             if (response.invalid !== undefined) {
@@ -179,4 +195,13 @@ export class AvalynxForm {
             this.form.appendChild(overlay);
         }
     }
-}
+
+    redirect(url) {
+        window.location.href = url;
+    }
+}
+
+/* istanbul ignore next */
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = AvalynxForm;
+}

package/dist/js/avalynx-form.js

@@ -3,12 +3,12 @@
  *
  * AvalynxForm is a lightweight, customizable form handling library for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
  *
- * @version 1.0.2
+ * @version 1.0.4
  * @license MIT
- * @author https://github.com/avalynx/avalynx-datatable/graphs/contributors
+ * @author https://github.com/avalynx/avalynx-form/graphs/contributors
  * @website https://github.com/avalynx/
- * @repository https://github.com/avalynx/avalynx-datatable.git
- * @bugs https://github.com/avalynx/avalynx-datatable/issues
+ * @repository https://github.com/avalynx/avalynx-form.git
+ * @bugs https://github.com/avalynx/avalynx-form/issues
  *
  * @param {string} id - The ID of the element to attach the form to.
  * @param {object} options - An object containing the following keys:
@@ -16,6 +16,8 @@
  * @param {object} options.loader - An instance of AvalynxLoader to use as the loader for the modal (default: `null`).
  * @param {function} options.onSuccess - A callback function to be executed when the form submission is successful (default: `null`).
  * @param {function} options.onError - A callback function to be executed when the form submission fails (default: `null`).
+ * @param {function} options.onBeforeSubmit - A callback function to be executed before the form submission (default: `null`).
+ * @param {function} options.onAfterSubmit - A callback function to be executed after the form submission (default: `null`).
  *
  */
 
@@ -35,6 +37,8 @@ class AvalynxForm {
             loader: null,
             onSuccess: null,
             onError: null,
+            onBeforeSubmit: null,
+            onAfterSubmit: null,
             ...options
         };
         this.init();
@@ -53,6 +57,12 @@ class AvalynxForm {
     }
 
     async sendAjaxRequest() {
+        if (this.options.onBeforeSubmit) {
+            const result = this.options.onBeforeSubmit(this.form);
+            if (result === false) {
+                return;
+            }
+        }
         const action = this.form.action;
         const method = this.form.method.toUpperCase();
 
@@ -79,6 +89,9 @@ class AvalynxForm {
             this.handleResponse(result);
         } catch (error) {
             console.error('Error during AJAX request:', error);
+            if (this.options.onError) {
+                this.options.onError(error);
+            }
         } finally {
             if (this.options.loader === null) {
                 const overlay = document.getElementById(`${this.id}-overlay`);
@@ -88,6 +101,9 @@ class AvalynxForm {
             } else {
                 this.options.loader.load = false;
             }
+            if (this.options.onAfterSubmit) {
+                this.options.onAfterSubmit(this.form);
+            }
         }
     }
 
@@ -101,7 +117,7 @@ class AvalynxForm {
             }
 
             if (response.redirect !== undefined) {
-                window.location.href = response.redirect;
+                this.redirect(response.redirect);
             }
         } else {
             if (response.invalid !== undefined) {
@@ -177,8 +193,13 @@ class AvalynxForm {
             this.form.appendChild(overlay);
         }
     }
+
+    redirect(url) {
+        window.location.href = url;
+    }
 }
 
+/* istanbul ignore next */
 if (typeof module !== 'undefined' && module.exports) {
     module.exports = AvalynxForm;
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "avalynx-form",
   "title": "AvalynxForm",
   "description": "AvalynxForm is a lightweight, customizable form handling library for web applications. Based on Bootstrap >=5.3 without any framework dependencies.",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "license": "MIT",
   "main": "dist/js/avalynx-form.js",
   "module": "dist/js/avalynx-form.esm.js",
@@ -42,12 +42,12 @@
     "bootstrap": ">=5.3"
   },
   "devDependencies": {
-    "@babel/core": "^7",
-    "@babel/preset-env": "^7",
-    "babel-jest": "^29",
-    "jest": "^29",
-    "jest-environment-jsdom": "^29",
-    "shelljs": "^0",
-    "shx": "^0"
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.0",
+    "babel-jest": "^30.2.0",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "shelljs": "^0.10.0",
+    "shx": "^0.4.0"
   }
 }