avalynx-modal 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Juergen Schwind an the Avalynx-Modal 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,162 @@
+# AvalynxModal
+
+AvalynxModal is a simple modal system for web applications with fullscreen support. Based on Bootstrap >=5.3 without any framework dependencies.
+
+## Features
+
+- **Customizable Modals**: Supports various customization options like fullscreen mode, custom title, body content, buttons, and more.
+- **Bootstrap Integration**: Designed for seamless integration with Bootstrap >= 5.3.
+- **Easy to Use**: Simple API for creating and managing modals within your web applications.
+
+## Example
+
+Here's a simple example of how to use AvalynxModal in your project:
+
+* [Overview](https://avalynx-modal.jbs-newmedia.de/examples/index.html)
+* [Simple Modal](https://avalynx-modal.jbs-newmedia.de/examples/modal.html)
+* [Modal Permanent](https://avalynx-modal.jbs-newmedia.de/examples/modal-permanent.html)
+
+## Installation
+
+To use AvalynxModal 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 AvalynxModal 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 AvalynxModal:
+
+```html
+<link href="path/to/avalynx-modal.css" rel="stylesheet">
+<script src="path/to/avalynx-modal.js"></script>
+```
+
+Replace `path/to/avalynx-modal.js` and `path/to/avalynx-modal.css` with the actual path to the files in your project.
+
+## Installation via jsDelivr ([Link](https://cdn.jsdelivr.net/npm/avalynx-modal/))
+
+AvalynxModal is also available via [jsDelivr](https://www.jsdelivr.com/). You can include it in your project like this:
+
+```html
+<link href="https://cdn.jsdelivr.net/npm/avalynx-modal@0.0.1/dist/css/avalynx-modal.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/avalynx-modal@0.0.1/dist/js/avalynx-modal.js"></script>
+```
+
+Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxModal displays correctly.
+
+## Installation via NPM ([Link](https://www.npmjs.com/package/avalynx-modal))
+
+AvalynxModal is also available as a npm package. You can add it to your project with the following command:
+
+```bash
+npm install avalynx-modal
+```
+
+After installing, you can import AvalynxModal into your JavaScript file like this:
+
+```javascript
+import { AvalynxModal } from 'avalynx-modal';
+import 'avalynx-modal/dist/css/avalynx-modal.min.css';
+```
+
+Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxModal displays correctly.
+
+## Installation via Symfony AssetMapper
+
+```bash
+php bin/console importmap:require avalynx-modal
+```
+
+After installing, you can import AvalynxModal into your JavaScript file like this:
+
+```javascript
+import { AvalynxModal } from 'avalynx-modal';
+import 'avalynx-modal/dist/css/avalynx-modal.min.css';
+```
+
+Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxModal displays correctly.
+
+## Installation via Composer ([Link](https://packagist.org/packages/avalynx/avalynx-modal))
+
+AvalynxModal is also available as a Composer package. You can add it to your project with the following command:
+
+```bash
+composer require avalynx/avalynx-modal
+```
+
+After installing, you can import AvalynxModal into your HTML file like this:
+
+```html
+<link href="vendor/avalynx/avalynx-modal/dist/css/avalynx-modal.css" rel="stylesheet">
+<script src="vendor/avalynx/avalynx-modal/dist/js/avalynx-modal.js"></script>
+``` 
+
+Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxModal displays correctly.
+
+## Usage
+
+To create a modal dialog, simply instantiate a new `AvalynxModal` object with the desired options:
+
+```javascript
+new AvalynxModal("#myModal", {
+  modalFullscreen: true,
+  title: 'My Modal',
+  body: 'This is the body of my modal.',
+  buttons: [
+    {
+      label: 'Close',
+      class: 'btn btn-primary',
+      onClick: function() {
+        // Close modal
+      }
+    }
+  ]
+});
+```
+
+## Options
+
+AvalynxModal allows the following options for customization:
+
+- `id`: (string) The ID of the element to attach the modal to.
+- `options`: An object containing the following keys:
+    - `modalFullscreen`: (boolean) Enable fullscreen mode (default: `false`).
+    - `title`: (string) The title of the modal (default: `''`).
+    - `titleIsHtml`: (boolean) Treat the title as HTML (default: `false`).
+    - `body`: (string) The body content of the modal (default: `''`).
+    - `bodyIsHtml`: (boolean) Treat the body content as HTML (default: `false`).
+    - `bodyAjaxUrl`: (string) URL to fetch the body content from (default: `''`).
+    - `buttons`: (array) An array of button objects. Each object should have a `label`, `class`, and `onClick` function (default: `[]`).
+    - `safeInstance`: (boolean) Keep the modal instance after it's closed (default: `false`).
+    - `disableFullscreen`: (boolean) Disable the fullscreen button (default: `false`).
+    - `disableClose`: (boolean) Disable the close button (default: `false`).
+    - `removeFullscreenBtn`: (boolean) Remove the fullscreen button (default: `false`).
+    - `removeCloseBtn`: (boolean) Remove the close button (default: `false`).
+    - `loader`: (object) An instance of AvalynxLoader to use as the loader for the modal (default: `null`).
+    - `onModalCreated`: (function) A callback function to execute when the modal is created (default: `null`).
+    - `onFullscreenToggled`: (function) A callback function to execute when the fullscreen mode is toggled (default: `null`).
+    - `onModalClosed`: (function) A callback function to execute when the modal is closed (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
+
+AvalynxModal 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-modal/issues) or submit a pull request.
+
+Thank you for considering AvalynxModal for your project!

package/dist/css/avalynx-modal.css

@@ -0,0 +1,46 @@
+/**
+ * AvalynxModal
+ *
+ * AvalynxModal is a simple modal system for web applications with fullscreen support. Based on Bootstrap >=5.3 without any framework dependencies.
+ *
+ * @version 0.0.1
+ * @license MIT
+ * @author https://github.com/avalynx/avalynx-modal/graphs/contributors
+ * @website https://github.com/avalynx/
+ * @repository https://github.com/avalynx/avalynx-modal.git
+ * @bugs https://github.com/avalynx/avalynx-modal/issues
+ *
+ */
+
+.avalynx-modal .avalynx-modal-dialog {
+    max-width: 95%;
+    max-height: 95%;
+    width: 800px;
+    height: 600px;
+}
+
+.avalynx-modal .avalynx-modal-btn-fullscreen {
+    --avalynx-modal-btn-fullscreen-bg: url("data:image/svg+xml,%3c!--!Font%20Awesome%20Free%206.5.2%20by%20%40fontawesome%20-%20https%3a//fontawesome.com%20License%20-%20https%3a//fontawesome.com/license/free%20Copyright%202024%20Fonticons%2c%20Inc.--%3e%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM96 96H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H96c-17.7 0-32-14.3-32-32s14.3-32 32-32z' fill='%23000'/%3e%3c/svg%3e");
+    background: transparent var(--avalynx-modal-btn-fullscreen-bg) center/2em auto no-repeat;
+}
+
+.avalynx-modal .avalynx-modal-dialog .modal-fullscreen .avalynx-modal-btn-fullscreen {
+    --avalynx-modal-btn-fullscreen-bg: url("data:image/svg+xml,%3c!--!Font%20Awesome%20Free%206.5.2%20by%20%40fontawesome%20-%20https%3a//fontawesome.com%20License%20-%20https%3a//fontawesome.com/license/free%20Copyright%202024%20Fonticons%2c%20Inc.--%3e%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M32 416c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H32z'/%3e%3c/svg%3e");
+    background: transparent var(--avalynx-modal-btn-fullscreen-bg) center/2em auto no-repeat;
+}
+
+.avalynx-modal .avalynx-modal-btn-fullscreen:focus,
+.avalynx-modal .avalynx-modal-btn-close:focus {
+    box-shadow: none;
+}
+
+.avalynx-modal .avalynx-modal-btn-close {
+    --avalynx-modal-btn-close-bg: url("data:image/svg+xml,%3c!--!Font%20Awesome%20Free%206.5.2%20by%20%40fontawesome%20-%20https%3a//fontawesome.com%20License%20-%20https%3a//fontawesome.com/license/free%20Copyright%202024%20Fonticons%2c%20Inc.--%3e%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z'/%3e%3c/svg%3e");
+    background: transparent var(--avalynx-modal-btn-close-bg) center/2em auto no-repeat;
+}
+
+.avalynx-modal .modal-header .btn-close {
+    margin-left: calc(0.5 * var(--bs-modal-header-padding-y));
+    margin-right: 0rem;
+}
+

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

@@ -0,0 +1,267 @@
+/**
+ * AvalynxModal
+ *
+ * AvalynxModal is a simple modal system for web applications with fullscreen support. Based on Bootstrap >=5.3 without any framework dependencies.
+ *
+ * @version 0.0.1
+ * @license MIT
+ * @author https://github.com/avalynx/avalynx-modal/graphs/contributors
+ * @website https://github.com/avalynx/
+ * @repository https://github.com/avalynx/avalynx-modal.git
+ * @bugs https://github.com/avalynx/avalynx-modal/issues
+ *
+ * @param {string} id - The ID of the element to attach the modal to.
+ * @param {object} options - An object containing the following keys:
+ * @param {boolean} options.modalFullscreen - Enable fullscreen mode (default: false).
+ * @param {string} options.title - The title of the modal (default: '').
+ * @param {boolean} options.titleIsHtml - Treat the title as HTML (default: false).
+ * @param {string} options.body - The body content of the modal (default: '').
+ * @param {boolean} options.bodyIsHtml - Treat the body content as HTML (default: false).
+ * @param {string} options.bodyAjaxUrl - URL to fetch the body content from (default: '').
+ * @param {array} options.buttons - An array of button objects. Each object should have a `label`, `class`, and `onClick` function (default: []).
+ * @param {boolean} options.safeInstance - Keep the modal instance after it's closed (default: false).
+ * @param {boolean} options.disableFullscreen - Disable the fullscreen button (default: false).
+ * @param {boolean} options.disableClose - Disable the close button (default: false).
+ * @param {boolean} options.removeFullscreenBtn - Remove the fullscreen button (default: false).
+ * @param {boolean} options.removeCloseBtn - Remove the close button (default: false).
+ * @param {object} options.loader - An instance of AvalynxLoader to use as the loader for the modal (default: null).
+ * @param {function} options.onModalCreated - A callback function to execute when the modal is created (default: null).
+ * @param {function} options.onFullscreenToggled - A callback function to execute when the fullscreen mode is toggled (default: null).
+ * @param {function} options.onModalClosed - A callback function to execute when the modal is closed (default: null).
+ *
+ */
+
+import * as bootstrap from 'bootstrap';
+
+export class AvalynxModal {
+    constructor(id, options = {}, language = {}) {
+        this.id = id;
+        this.options = {
+            modalFullscreen: false,
+            title: '',
+            titleIsHtml: false,
+            body: '',
+            bodyIsHtml: false,
+            bodyAjaxUrl: '',
+            buttons: [],
+            safeInstance: false,
+            disableFullscreen: false,
+            disableClose: false,
+            removeFullscreenBtn: false,
+            removeCloseBtn: false,
+            loader: null,
+            onModalCreated: null,
+            onFullscreenToggled: null,
+            onModalClosed: null,
+            ...options
+        };
+        this.language = {
+            ...language
+        };
+        this.init();
+    }
+
+    init() {
+        this.ensureTemplatesExist();
+
+        const template_avalynx_modal = document.getElementById("avalynx-modal-template").content.cloneNode(true);
+        this.modal = template_avalynx_modal.querySelector('.modal');
+        this.setTitle(this.options.title, this.options.titleIsHtml);
+
+        if (this.options.body) {
+            this.setBody(this.options.body, this.options.bodyIsHtml);
+        }
+        this.setButtons(this.options.buttons);
+
+        const fullscreenBtn = this.modal.querySelector('.avalynx-modal-btn-fullscreen');
+        if (fullscreenBtn) {
+            if (this.options.removeFullscreenBtn) {
+                fullscreenBtn.remove();
+            } else if (this.options.disableFullscreen) {
+                fullscreenBtn.disabled = true;
+            } else {
+                fullscreenBtn.addEventListener('click', () => this.toggleFullscreen(this.modal));
+            }
+        }
+
+        const closeBtn = this.modal.querySelector('.avalynx-modal-btn-close');
+        if (closeBtn) {
+            if (this.options.removeCloseBtn) {
+                closeBtn.remove();
+            } else if (this.options.disableClose) {
+                closeBtn.disabled = true;
+            }
+        }
+
+        document.body.appendChild(this.modal);
+
+        this.modalInstance = new bootstrap.Modal(this.modal, {
+            backdrop: 'static',
+            keyboard: false
+        });
+
+        if (this.options.modalFullscreen) {
+            this.toggleFullscreen(this.modal);
+        }
+
+        if (this.options.onModalCreated && typeof this.options.onModalCreated === 'function') {
+            this.options.onModalCreated(this);
+        }
+
+        this.setupOverlayAndLoader();
+
+        if (this.options.bodyAjaxUrl) {
+            this.fetchData(this.options.bodyAjaxUrl, this.options.bodyIsHtml);
+        }
+
+        if (this.options.safeInstance !== true) {
+            this.modal.addEventListener('hidden.bs.modal', () => {
+                this.modal.remove();
+                this.modalInstance = null;
+                if (this.options.onModalClosed && typeof this.options.onModalClosed === 'function') {
+                    this.options.onModalClosed(this);
+                }
+            });
+        } else {
+            this.modal.addEventListener('hidden.bs.modal', () => {
+                if (this.options.onModalClosed && typeof this.options.onModalClosed === 'function') {
+                    this.options.onModalClosed(this);
+                }
+            });
+        }
+    }
+
+    async fetchData(url, isHtml) {
+        if (this.options.loader === null) {
+            const overlay = document.getElementById(`${this.id}-overlay`);
+            overlay.style.display = 'flex';
+        } else {
+            this.options.loader.load = true;
+        }
+
+        try {
+            const response = await fetch(url);
+            const data = await response.text();
+            this.setBody(data, isHtml);
+        } catch (error) {
+            console.error('Error:', 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;
+            }
+        }
+    }
+
+    ensureTemplatesExist() {
+        this.addTemplateIfMissing("avalynx-modal-template", `
+<div class="avalynx-modal modal fade" tabindex="-1" id="${this.id}" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable avalynx-modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title"></h5>
+                <div class="flex-grow-1"></div>
+                <button type="button" class="btn-close avalynx-modal-btn-fullscreen" aria-label="Fullscreen"></button>
+                <button type="button" class="btn-close avalynx-modal-btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body" id="${this.id}-body"></div>
+            <div class="modal-footer"></div>
+        </div>
+    </div>
+</div>
+        `);
+    }
+
+    addTemplateIfMissing(id, content) {
+        if (!document.getElementById(id)) {
+            const template = document.createElement('template');
+            template.id = id;
+            template.innerHTML = content;
+            document.body.appendChild(template);
+        }
+    }
+
+    toggleFullscreen(modal) {
+        const dialog = modal.querySelector('.modal-dialog');
+        dialog.classList.toggle('modal-fullscreen');
+        dialog.classList.toggle('avalynx-modal-dialog');
+        if (this.options.onFullscreenToggled && typeof this.options.onFullscreenToggled === 'function') {
+            this.options.onFullscreenToggled(this);
+        }
+    }
+
+    setTitle(content, isHtml = this.options.titleIsHtml) {
+        const modalTitleElement = this.modal.querySelector('.modal-title');
+        if (this.options.titleIsHtml) {
+            modalTitleElement.innerHTML = content;
+        } else {
+            modalTitleElement.innerText = content;
+        }
+    }
+
+    setBody(content, isHtml = this.options.bodyIsHtml) {
+        const modalBodyElement = this.modal.querySelector('.modal-body');
+        if (this.options.bodyIsHtml) {
+            modalBodyElement.innerHTML = content;
+        } else {
+            modalBodyElement.innerText = content;
+        }
+    }
+
+    setButtons(buttons) {
+        const modalFooter = this.modal.querySelector('.modal-footer');
+        modalFooter.innerHTML = '';
+        buttons.forEach(button => {
+            const btn = document.createElement('button');
+            btn.className = `btn ${button.class}`;
+            btn.innerText = button.label;
+            if (button.onClick) {
+                btn.addEventListener('click', button.onClick);
+            }
+            modalFooter.appendChild(btn);
+        });
+    }
+
+    setLoader(loader) {
+        this.options.loader = loader;
+    }
+
+    open() {
+        this.modalInstance.show();
+    }
+
+    close() {
+        if (this.modalInstance) {
+            this.modalInstance.hide();
+        }
+    }
+
+    setupOverlayAndLoader() {
+        if (this.options.loader === null) {
+            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.modal.querySelector('.modal-body').appendChild(overlay);
+        }
+    }
+}

package/dist/js/avalynx-modal.js

@@ -0,0 +1,265 @@
+/**
+ * AvalynxModal
+ *
+ * AvalynxModal is a simple modal system for web applications with fullscreen support. Based on Bootstrap >=5.3 without any framework dependencies.
+ *
+ * @version 0.0.1
+ * @license MIT
+ * @author https://github.com/avalynx/avalynx-modal/graphs/contributors
+ * @website https://github.com/avalynx/
+ * @repository https://github.com/avalynx/avalynx-modal.git
+ * @bugs https://github.com/avalynx/avalynx-modal/issues
+ *
+ * @param {string} id - The ID of the element to attach the modal to.
+ * @param {object} options - An object containing the following keys:
+ * @param {boolean} options.modalFullscreen - Enable fullscreen mode (default: false).
+ * @param {string} options.title - The title of the modal (default: '').
+ * @param {boolean} options.titleIsHtml - Treat the title as HTML (default: false).
+ * @param {string} options.body - The body content of the modal (default: '').
+ * @param {boolean} options.bodyIsHtml - Treat the body content as HTML (default: false).
+ * @param {string} options.bodyAjaxUrl - URL to fetch the body content from (default: '').
+ * @param {array} options.buttons - An array of button objects. Each object should have a `label`, `class`, and `onClick` function (default: []).
+ * @param {boolean} options.safeInstance - Keep the modal instance after it's closed (default: false).
+ * @param {boolean} options.disableFullscreen - Disable the fullscreen button (default: false).
+ * @param {boolean} options.disableClose - Disable the close button (default: false).
+ * @param {boolean} options.removeFullscreenBtn - Remove the fullscreen button (default: false).
+ * @param {boolean} options.removeCloseBtn - Remove the close button (default: false).
+ * @param {object} options.loader - An instance of AvalynxLoader to use as the loader for the modal (default: null).
+ * @param {function} options.onModalCreated - A callback function to execute when the modal is created (default: null).
+ * @param {function} options.onFullscreenToggled - A callback function to execute when the fullscreen mode is toggled (default: null).
+ * @param {function} options.onModalClosed - A callback function to execute when the modal is closed (default: null).
+ *
+ */
+
+class AvalynxModal {
+    constructor(id, options = {}, language = {}) {
+        this.id = id;
+        this.options = {
+            modalFullscreen: false,
+            title: '',
+            titleIsHtml: false,
+            body: '',
+            bodyIsHtml: false,
+            bodyAjaxUrl: '',
+            buttons: [],
+            safeInstance: false,
+            disableFullscreen: false,
+            disableClose: false,
+            removeFullscreenBtn: false,
+            removeCloseBtn: false,
+            loader: null,
+            onModalCreated: null,
+            onFullscreenToggled: null,
+            onModalClosed: null,
+            ...options
+        };
+        this.language = {
+            ...language
+        };
+        this.init();
+    }
+
+    init() {
+        this.ensureTemplatesExist();
+
+        const template_avalynx_modal = document.getElementById("avalynx-modal-template").content.cloneNode(true);
+        this.modal = template_avalynx_modal.querySelector('.modal');
+        this.setTitle(this.options.title, this.options.titleIsHtml);
+
+        if (this.options.body) {
+            this.setBody(this.options.body, this.options.bodyIsHtml);
+        }
+        this.setButtons(this.options.buttons);
+
+        const fullscreenBtn = this.modal.querySelector('.avalynx-modal-btn-fullscreen');
+        if (fullscreenBtn) {
+            if (this.options.removeFullscreenBtn) {
+                fullscreenBtn.remove();
+            } else if (this.options.disableFullscreen) {
+                fullscreenBtn.disabled = true;
+            } else {
+                fullscreenBtn.addEventListener('click', () => this.toggleFullscreen(this.modal));
+            }
+        }
+
+        const closeBtn = this.modal.querySelector('.avalynx-modal-btn-close');
+        if (closeBtn) {
+            if (this.options.removeCloseBtn) {
+                closeBtn.remove();
+            } else if (this.options.disableClose) {
+                closeBtn.disabled = true;
+            }
+        }
+
+        document.body.appendChild(this.modal);
+
+        this.modalInstance = new bootstrap.Modal(this.modal, {
+            backdrop: 'static',
+            keyboard: false
+        });
+
+        if (this.options.modalFullscreen) {
+            this.toggleFullscreen(this.modal);
+        }
+
+        if (this.options.onModalCreated && typeof this.options.onModalCreated === 'function') {
+            this.options.onModalCreated(this);
+        }
+
+        this.setupOverlayAndLoader();
+
+        if (this.options.bodyAjaxUrl) {
+            this.fetchData(this.options.bodyAjaxUrl, this.options.bodyIsHtml);
+        }
+
+        if (this.options.safeInstance !== true) {
+            this.modal.addEventListener('hidden.bs.modal', () => {
+                this.modal.remove();
+                this.modalInstance = null;
+                if (this.options.onModalClosed && typeof this.options.onModalClosed === 'function') {
+                    this.options.onModalClosed(this);
+                }
+            });
+        } else {
+            this.modal.addEventListener('hidden.bs.modal', () => {
+                if (this.options.onModalClosed && typeof this.options.onModalClosed === 'function') {
+                    this.options.onModalClosed(this);
+                }
+            });
+        }
+    }
+
+    async fetchData(url, isHtml) {
+        if (this.options.loader === null) {
+            const overlay = document.getElementById(`${this.id}-overlay`);
+            overlay.style.display = 'flex';
+        } else {
+            this.options.loader.load = true;
+        }
+
+        try {
+            const response = await fetch(url);
+            const data = await response.text();
+            this.setBody(data, isHtml);
+        } catch (error) {
+            console.error('Error:', 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;
+            }
+        }
+    }
+
+    ensureTemplatesExist() {
+        this.addTemplateIfMissing("avalynx-modal-template", `
+<div class="avalynx-modal modal fade" tabindex="-1" id="${this.id}" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable avalynx-modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title"></h5>
+                <div class="flex-grow-1"></div>
+                <button type="button" class="btn-close avalynx-modal-btn-fullscreen" aria-label="Fullscreen"></button>
+                <button type="button" class="btn-close avalynx-modal-btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body" id="${this.id}-body"></div>
+            <div class="modal-footer"></div>
+        </div>
+    </div>
+</div>
+        `);
+    }
+
+    addTemplateIfMissing(id, content) {
+        if (!document.getElementById(id)) {
+            const template = document.createElement('template');
+            template.id = id;
+            template.innerHTML = content;
+            document.body.appendChild(template);
+        }
+    }
+
+    toggleFullscreen(modal) {
+        const dialog = modal.querySelector('.modal-dialog');
+        dialog.classList.toggle('modal-fullscreen');
+        dialog.classList.toggle('avalynx-modal-dialog');
+        if (this.options.onFullscreenToggled && typeof this.options.onFullscreenToggled === 'function') {
+            this.options.onFullscreenToggled(this);
+        }
+    }
+
+    setTitle(content, isHtml = this.options.titleIsHtml) {
+        const modalTitleElement = this.modal.querySelector('.modal-title');
+        if (this.options.titleIsHtml) {
+            modalTitleElement.innerHTML = content;
+        } else {
+            modalTitleElement.innerText = content;
+        }
+    }
+
+    setBody(content, isHtml = this.options.bodyIsHtml) {
+        const modalBodyElement = this.modal.querySelector('.modal-body');
+        if (this.options.bodyIsHtml) {
+            modalBodyElement.innerHTML = content;
+        } else {
+            modalBodyElement.innerText = content;
+        }
+    }
+
+    setButtons(buttons) {
+        const modalFooter = this.modal.querySelector('.modal-footer');
+        modalFooter.innerHTML = '';
+        buttons.forEach(button => {
+            const btn = document.createElement('button');
+            btn.className = `btn ${button.class}`;
+            btn.innerText = button.label;
+            if (button.onClick) {
+                btn.addEventListener('click', button.onClick);
+            }
+            modalFooter.appendChild(btn);
+        });
+    }
+
+    setLoader(loader) {
+        this.options.loader = loader;
+    }
+
+    open() {
+        this.modalInstance.show();
+    }
+
+    close() {
+        if (this.modalInstance) {
+            this.modalInstance.hide();
+        }
+    }
+
+    setupOverlayAndLoader() {
+        if (this.options.loader === null) {
+            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.modal.querySelector('.modal-body').appendChild(overlay);
+        }
+    }
+}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "avalynx-modal",
+  "title": "AvalynxModal",
+  "description": "AvalynxModal is a simple modal system for web applications with fullscreen support. Based on Bootstrap >=5.3 without any framework dependencies.",
+  "version": "0.0.1",
+  "license": "MIT",
+  "main": "dist/js/avalynx-modal.js",
+  "module": "dist/js/avalynx-modal.esm.js",
+  "style": "dist/css/avalynx-modal.css",
+  "files": [
+    "dist/css/avalynx-modal.css",
+    "dist/js/avalynx-modal.js",
+    "dist/js/avalynx-modal.esm.js"
+  ],
+  "keywords": [
+    "avalynx",
+    "modal",
+    "bootstrap",
+    "bootstrap5",
+    "component",
+    "popup"
+  ],
+  "ignore": [
+    "package.json"
+  ],
+  "author": {
+    "name": "Juergen Schwind an the Avalynx-Modal authors",
+    "url": "https://github.com/avalynx/avalynx-modal/graphs/contributors"
+  },
+  "homepage": "https://github.com/avalynx/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/avalynx/avalynx-modal.git"
+  },
+  "bugs": {
+    "url": "https://github.com/avalynx/avalynx-modal/issues"
+  },
+  "scripts": {
+    "test": "jest"
+  },
+  "dependencies": {
+    "bootstrap": ">=5.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7",
+    "@babel/preset-env": "^7",
+    "babel-jest": "^29",
+    "jest": "^29",
+    "jest-environment-jsdom": "^29",
+    "@testing-library/jest-dom": "^6"
+  }
+}