avalynx-form 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Juergen Schwind an the Avalynx-Form Authors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,142 @@
+# AvalynxForm
+
+AvalynxForm is a lightweight, customizable form handling library for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
+
+## Features
+
+- **Form Handling**: Simplifies the process of creating and managing forms in your web applications.
+- **Bootstrap Integration**: Designed for seamless integration with Bootstrap >= 5.3.
+- **Easy to Use**: Simple API for creating and managing forms within your web applications.
+
+## Example
+
+Here's a simple example of how to use AvalynxForm in your project:
+
+* [Overview](https://avalynx-form.jbs-newmedia.de/examples/index.html)
+* [Form](https://avalynx-form.jbs-newmedia.de/examples/form.html)
+
+## Installation
+
+To use AvalynxForm in your project, you can directly include it in your HTML file. Ensure you have Bootstrap 5.3 or higher included in your project for AvalynxForm to work correctly.
+
+First, include Bootstrap:
+
+```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>
+```
+
+Then, include AvalynxForm:
+
+```html
+<script src="path/to/avalynx-form.js"></script>
+```
+
+Replace `path/to/avalynx-form.js` with the actual path to the file in your project.
+
+## Installation via jsDelivr ([Link](https://cdn.jsdelivr.net/npm/avalynx-form/))
+
+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@0.0.1/dist/js/avalynx-form.js"></script>
+```
+
+Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxForm displays correctly.
+
+## Installation via NPM ([Link](https://www.npmjs.com/package/avalynx-form))
+
+AvalynxForm is also available as a npm package. You can add it to your project with the following command:
+
+```bash
+npm install avalynx-form
+```
+
+After installing, you can import AvalynxForm into your JavaScript file like this:
+
+```javascript
+import { AvalynxForm } from 'avalynx-form';
+```
+
+Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxForm displays correctly.
+
+## Installation via Symfony AssetMapper
+
+```bash
+php bin/console importmap:require avalynx-form
+```
+
+After installing, you can import AvalynxForm into your JavaScript file like this:
+
+```javascript
+import { AvalynxForm } from 'avalynx-form';
+```
+
+Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxForm displays correctly.
+
+## Installation via Composer ([Link](https://packagist.org/packages/avalynx/avalynx-form))
+
+AvalynxForm is also available as a Composer package. You can add it to your project with the following command:
+
+```bash
+composer require avalynx/avalynx-form
+```
+
+After installing, you can import AvalynxForm into your HTML file like this:
+
+```html
+<script src="vendor/avalynx/avalynx-form/dist/js/avalynx-form.js"></script>
+``` 
+
+Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxForm displays correctly.
+
+## Usage
+
+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", {
+    apiParams: {
+        extraData1: 'value1',
+        extraData2: 'value2'
+    },
+    onSuccess: function(response) {
+        console.log('Form submission was successful:', response);
+    },
+    onError: function(response) {
+        console.error('Form submission failed:', response);
+    }
+});
+```
+
+## Options
+
+AvalynxForm allows the following options for customization:
+
+- `id`: (string) The ID of the element to attach the form to.
+- `options`: An object containing the following keys:
+  - `apiParams`: (object) Additional parameters to be sent with the form data (default: `{}`).
+  - `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`).
+
+## Contributing
+
+Contributions are welcome! If you'd like to contribute, please fork the repository and submit a pull request with your changes or improvements. We're looking for contributions in the following areas:
+
+- Bug fixes
+- Feature enhancements
+- Documentation improvements
+
+Before submitting your pull request, please ensure your changes are well-documented and follow the existing coding style of the project.
+
+## License
+
+AvalynxForm is open-sourced software licensed under the [MIT license](LICENSE).
+
+## Contact
+
+If you have any questions, feature requests, or issues, please open an issue on our [GitHub repository](https://github.com/avalynx/avalynx-form/issues) or submit a pull request.
+
+Thank you for considering AvalynxForm for your project!

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

@@ -0,0 +1,177 @@
+/**
+ * AvalynxForm
+ *
+ * AvalynxForm is a lightweight, customizable form handling library for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
+ *
+ * @version 0.0.1
+ * @license MIT
+ * @author https://github.com/avalynx/avalynx-datatable/graphs/contributors
+ * @website https://github.com/avalynx/
+ * @repository https://github.com/avalynx/avalynx-datatable.git
+ * @bugs https://github.com/avalynx/avalynx-datatable/issues
+ *
+ * @param {string} id - The ID of the element to attach the form to.
+ * @param {object} options - An object containing the following keys:
+ * @param {object} options.apiParams - Additional parameters to be sent with the form data (default: `{}`).
+ * @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`).
+ *
+ */
+
+export class AvalynxForm {
+    constructor(id, options = {}) {
+        this.form = document.getElementById(id);
+        if (this.form === null) {
+            console.error("AvalynxForm: Element with id '" + id + "' not found");
+            return;
+        }
+        this.id = id;
+        this.options = {
+            apiParams: {},
+            loader: null,
+            onSuccess: null,
+            onError: null,
+            ...options
+        };
+        this.init();
+    }
+
+    init() {
+        this.setupSubmitHandler();
+        this.setupOverlayAndLoader();
+    }
+
+    setupSubmitHandler() {
+        this.form.addEventListener('submit', (event) => {
+            event.preventDefault();
+            this.sendAjaxRequest();
+        });
+    }
+
+    async sendAjaxRequest() {
+        const action = this.form.action;
+        const method = this.form.method.toUpperCase();
+
+        const formData = new FormData(this.form);
+
+        for (const [key, value] of Object.entries(this.options.apiParams)) {
+            formData.append(key, value);
+        }
+
+        try {
+            if (this.options.loader === null) {
+                const overlay = document.getElementById(`${this.id}-overlay`);
+                overlay.style.display = 'flex';
+            } else {
+                this.options.loader.load = true;
+            }
+
+            const response = await fetch(action, {
+                method: method,
+                body: formData,
+            });
+
+            const result = await response.json();
+            this.handleResponse(result);
+        } catch (error) {
+            console.error('Error during AJAX request:', error);
+        } finally {
+            if (this.options.loader === null) {
+                const overlay = document.getElementById(`${this.id}-overlay`);
+                if (overlay) {
+                    overlay.style.display = 'none';
+                }
+            } else {
+                this.options.loader.load = false;
+            }
+        }
+    }
+
+    handleResponse(response) {
+        if (response.debug_msg !== undefined) {
+            alert(response.debug_msg);
+        }
+        if ((response.success !== undefined) && (response.success === true)) {
+            if (this.options.onSuccess) {
+                this.options.onSuccess(response);
+            }
+
+            if (response.redirect !== undefined) {
+                window.location.href = response.redirect;
+            }
+        } else {
+            if (response.invalid !== undefined) {
+                for (const [key, value] of Object.entries(response.invalid)) {
+                    this.showInvalidFeedback(key, value);
+                }
+            }
+
+            if (response.valid !== undefined) {
+                for (const [key, value] of Object.entries(response.valid)) {
+                    this.clearInvalidFeedback(key);
+                }
+            }
+
+            if (this.options.onError) {
+                this.options.onError(response);
+            }
+        }
+    }
+
+    showInvalidFeedback(key, value) {
+        const elements = document.querySelectorAll(`#${key}, [name="${key}"], [name="${key}[]"], [name^="${key}["]`);
+        elements.forEach(element => {
+            const parentElement = element.closest('.form-group') || element.parentElement;
+            if (parentElement !== null) {
+                const spanElement = parentElement.querySelector('.invalid-feedback');
+                element.classList.add('is-invalid');
+                if (spanElement !== null) {
+                    spanElement.innerHTML = value;
+                    spanElement.style.display = 'block';
+                }
+            }
+        });
+    }
+
+    clearInvalidFeedback(key) {
+        const elements = document.querySelectorAll(`#${key}, [name="${key}"], [name="${key}[]"], [name^="${key}["]`);
+        elements.forEach(element => {
+            const parentElement = element.closest('.form-group') || element.parentElement;
+            if (parentElement !== null) {
+                const spanElement = parentElement.querySelector('.invalid-feedback');
+                element.classList.remove('is-invalid');
+                if (spanElement !== null) {
+                    spanElement.innerHTML = " ";
+                    spanElement.style.display = 'none';
+                }
+            }
+        });
+    }
+
+    setupOverlayAndLoader() {
+        if (this.options.loader === null) {
+            this.form.style.position = 'relative';
+            const overlay = document.createElement('div');
+            overlay.id = `${this.id}-overlay`;
+            overlay.style.position = 'absolute';
+            overlay.style.top = 0;
+            overlay.style.left = 0;
+            overlay.style.width = '100%';
+            overlay.style.height = '100%';
+            overlay.style.display = 'none';
+            overlay.style.alignItems = 'center';
+            overlay.style.justifyContent = 'center';
+            overlay.style.backgroundColor = 'rgba(var(--bs-body-bg-rgb, 0, 0, 0), 0.7)';
+            overlay.style.zIndex = '1000';
+
+            const spinner = document.createElement('div');
+            spinner.className = 'spinner-border text-primary';
+            spinner.role = 'status';
+            spinner.innerHTML = '<span class="visually-hidden">Loading...</span>';
+
+            overlay.appendChild(spinner);
+            this.form.appendChild(overlay);
+        }
+    }
+}

package/dist/js/avalynx-form.js

@@ -0,0 +1,177 @@
+/**
+ * AvalynxForm
+ *
+ * AvalynxForm is a lightweight, customizable form handling library for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
+ *
+ * @version 0.0.1
+ * @license MIT
+ * @author https://github.com/avalynx/avalynx-datatable/graphs/contributors
+ * @website https://github.com/avalynx/
+ * @repository https://github.com/avalynx/avalynx-datatable.git
+ * @bugs https://github.com/avalynx/avalynx-datatable/issues
+ *
+ * @param {string} id - The ID of the element to attach the form to.
+ * @param {object} options - An object containing the following keys:
+ * @param {object} options.apiParams - Additional parameters to be sent with the form data (default: `{}`).
+ * @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`).
+ *
+ */
+
+class AvalynxForm {
+    constructor(id, options = {}) {
+        this.form = document.getElementById(id);
+        if (this.form === null) {
+            console.error("AvalynxForm: Element with id '" + id + "' not found");
+            return;
+        }
+        this.id = id;
+        this.options = {
+            apiParams: {},
+            loader: null,
+            onSuccess: null,
+            onError: null,
+            ...options
+        };
+        this.init();
+    }
+
+    init() {
+        this.setupSubmitHandler();
+        this.setupOverlayAndLoader();
+    }
+
+    setupSubmitHandler() {
+        this.form.addEventListener('submit', (event) => {
+            event.preventDefault();
+            this.sendAjaxRequest();
+        });
+    }
+
+    async sendAjaxRequest() {
+        const action = this.form.action;
+        const method = this.form.method.toUpperCase();
+
+        const formData = new FormData(this.form);
+
+        for (const [key, value] of Object.entries(this.options.apiParams)) {
+            formData.append(key, value);
+        }
+
+        try {
+            if (this.options.loader === null) {
+                const overlay = document.getElementById(`${this.id}-overlay`);
+                overlay.style.display = 'flex';
+            } else {
+                this.options.loader.load = true;
+            }
+
+            const response = await fetch(action, {
+                method: method,
+                body: formData,
+            });
+
+            const result = await response.json();
+            this.handleResponse(result);
+        } catch (error) {
+            console.error('Error during AJAX request:', error);
+        } finally {
+            if (this.options.loader === null) {
+                const overlay = document.getElementById(`${this.id}-overlay`);
+                if (overlay) {
+                    overlay.style.display = 'none';
+                }
+            } else {
+                this.options.loader.load = false;
+            }
+        }
+    }
+
+    handleResponse(response) {
+        if (response.debug_msg !== undefined) {
+            alert(response.debug_msg);
+        }
+        if ((response.success !== undefined) && (response.success === true)) {
+            if (this.options.onSuccess) {
+                this.options.onSuccess(response);
+            }
+
+            if (response.redirect !== undefined) {
+                window.location.href = response.redirect;
+            }
+        } else {
+            if (response.invalid !== undefined) {
+                for (const [key, value] of Object.entries(response.invalid)) {
+                    this.showInvalidFeedback(key, value);
+                }
+            }
+
+            if (response.valid !== undefined) {
+                for (const [key, value] of Object.entries(response.valid)) {
+                    this.clearInvalidFeedback(key);
+                }
+            }
+
+            if (this.options.onError) {
+                this.options.onError(response);
+            }
+        }
+    }
+
+    showInvalidFeedback(key, value) {
+        const elements = document.querySelectorAll(`#${key}, [name="${key}"], [name="${key}[]"], [name^="${key}["]`);
+        elements.forEach(element => {
+            const parentElement = element.closest('.form-group') || element.parentElement;
+            if (parentElement !== null) {
+                const spanElement = parentElement.querySelector('.invalid-feedback');
+                element.classList.add('is-invalid');
+                if (spanElement !== null) {
+                    spanElement.innerHTML = value;
+                    spanElement.style.display = 'block';
+                }
+            }
+        });
+    }
+
+    clearInvalidFeedback(key) {
+        const elements = document.querySelectorAll(`#${key}, [name="${key}"], [name="${key}[]"], [name^="${key}["]`);
+        elements.forEach(element => {
+            const parentElement = element.closest('.form-group') || element.parentElement;
+            if (parentElement !== null) {
+                const spanElement = parentElement.querySelector('.invalid-feedback');
+                element.classList.remove('is-invalid');
+                if (spanElement !== null) {
+                    spanElement.innerHTML = " ";
+                    spanElement.style.display = 'none';
+                }
+            }
+        });
+    }
+
+    setupOverlayAndLoader() {
+        if (this.options.loader === null) {
+            this.form.style.position = 'relative';
+            const overlay = document.createElement('div');
+            overlay.id = `${this.id}-overlay`;
+            overlay.style.position = 'absolute';
+            overlay.style.top = 0;
+            overlay.style.left = 0;
+            overlay.style.width = '100%';
+            overlay.style.height = '100%';
+            overlay.style.display = 'none';
+            overlay.style.alignItems = 'center';
+            overlay.style.justifyContent = 'center';
+            overlay.style.backgroundColor = 'rgba(var(--bs-body-bg-rgb, 0, 0, 0), 0.7)';
+            overlay.style.zIndex = '1000';
+
+            const spinner = document.createElement('div');
+            spinner.className = 'spinner-border text-primary';
+            spinner.role = 'status';
+            spinner.innerHTML = '<span class="visually-hidden">Loading...</span>';
+
+            overlay.appendChild(spinner);
+            this.form.appendChild(overlay);
+        }
+    }
+}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "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": "0.0.1",
+  "license": "MIT",
+  "main": "dist/js/avalynx-form.js",
+  "module": "dist/js/avalynx-form.esm.js",
+  "files": [
+    "dist/js/avalynx-form.js",
+    "dist/js/avalynx-form.esm.js"
+  ],
+  "keywords": [
+    "avalynx",
+    "form",
+    "validation",
+    "input",
+    "bootstrap",
+    "bootstrap5",
+    "component"
+  ],
+  "ignore": [
+    "package.json"
+  ],
+  "author": {
+    "name": "Juergen Schwind an the Avalynx-Form Team",
+    "url": "https://github.com/avalynx/avalynx-form/graphs/contributors"
+  },
+  "homepage": "https://github.com/avalynx/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/avalynx/avalynx-form.git"
+  },
+  "bugs": {
+    "url": "https://github.com/avalynx/avalynx-form/issues"
+  },
+  "scripts": {
+    "test": "jest",
+    "build": "shx rm -rf dist; shx mkdir -p dist/js/; shx cp src/js/avalynx-form.js dist/js/avalynx-form.js; shx cp src/js/avalynx-form.js dist/js/avalynx-form.esm.js; node build.js dist/js/avalynx-form.esm.js"
+  },
+  "dependencies": {
+    "bootstrap": ">=5.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7",
+    "@babel/preset-env": "^7",
+    "babel-jest": "^29",
+    "jest": "^29",
+    "jest-environment-jsdom": "^29",
+    "shelljs": "^0",
+    "shx": "^0"
+  }
+}