avalynx-alert 0.0.3 → 0.0.5

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 avalynx
+Copyright (c) 2024 Juergen Schwind an the Avalynx-Alert 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

package/README.md

@@ -1 +1,132 @@
-# avalynx-alert
+# AvalynxAlert
+
+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.
+
+## Features
+
+- **Customizable Alerts**: Supports various alert types like primary, secondary, success, danger, warning, info, light, and dark.
+- **Flexible Positioning**: Choose from predefined positions such as top-left, top-center, top-right, bottom-left, bottom-center, and bottom-right.
+- **Duration Control**: Set the duration for how long the alert should be displayed.
+- **Closeable Alerts**: Optionally allow users to close alerts.
+- **AutoClose Functionality**: Alerts can automatically disappear after a certain period.
+- **Easy to Use**: Simple API for creating and managing alerts within your web applications.
+
+## Example
+
+Here's a simple example of how to use AvalynxAlert in your project:
+
+* [Overview](https://avalynx-alert.jbs-newmedia.de/examples/index.html)
+* [Random Alerts](https://avalynx-alert.jbs-newmedia.de/examples/random-alerts.html)
+* [Callback on close](https://avalynx-alert.jbs-newmedia.de/examples/callback-onclose.html)
+
+## Installation
+
+To use AvalynxAlert 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 AvalynxAlert 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 AvalynxAlert:
+
+```html
+<link href="path/to/avalynx-alert.css" rel="stylesheet">
+<script src="path/to/avalynx-alert.js"></script>
+```
+
+Replace `path/to/avalynx-alert.js` and `path/to/avalynx-alert.css` with the actual path to the files in your project.
+
+## Installation via jsDelivr
+
+AvalynxAlert 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-alert/dist/avalynx-alert.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/avalynx-alert/dist/avalynx-alert.js"></script>
+```
+
+Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxAlert displays correctly.
+
+## Installation via NPM
+
+AvalynxAlert is also available as a npm package. You can add it to your project with the following command:
+
+```bash
+npm install avalynx-alert
+```
+
+After installing, you can import AvalynxAlert into your JavaScript file like this:
+
+```javascript
+import { AvalynxAlert } from 'avalynx-alert';
+import 'avalynx-alert/dist/css/avalynx-alert.min.css';
+```
+
+Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxAlert displays correctly.
+
+## Installation via Symfony AssetMapper
+
+```bash
+php bin/console importmap:require avalynx-alert
+```
+
+After installing, you can import AvalynxAlert into your JavaScript file like this:
+
+```javascript
+import { AvalynxAlert } from 'avalynx-alert';
+import 'avalynx-alert/dist/css/avalynx-alert.min.css';
+```
+
+Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxAlert displays correctly.
+
+## Usage
+
+To create an alert, simply instantiate a new `AvalynxAlert` object with the desired options:
+
+```javascript
+new AvalynxAlert('Your message here', 'success', {
+  duration: 5000,
+  position: 'top-right',
+  closeable: true,
+  autoClose: true,
+  width: '400px'
+});
+```
+
+## Options
+
+AvalynxAlert allows the following options for customization:
+
+- `message`: The message to display in the alert.
+- `type`: The type of alert (`primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`).
+- `options`: An object containing the following keys:
+    - `duration`: Duration in milliseconds for the alert to be displayed (default: 5000).
+    - `position`: Position of the alert on the screen (default: `top-center`).
+    - `closeable`: Whether the alert can be closed by the user (default: true).
+    - `autoClose`: Whether the alert will close automatically after the duration (default: true).
+    - `width`: The width of the alert (default: `400px`).
+    - `onClose`: A callback function to be called when the alert is closed.
+
+## 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
+
+AvalynxAlert 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-alert/issues) or submit a pull request.
+
+Thank you for considering AvalynxAlert for your project!

package/dist/css/avalynx-alert.css

@@ -1,9 +1,9 @@
 /**
  * AvalynxAlert
  *
- * A simple alert system for web applications.
+ * A simple alert system for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
  *
- * @version 0.0.3
+ * @version 0.0.5
  * @license MIT
  * @author https://github.com/avalynx/avalynx-alert/graphs/contributors
  * @website https://github.com/avalynx/

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

@@ -0,0 +1,137 @@
+/**
+ * AvalynxAlert
+ *
+ * A simple alert system for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
+ *
+ * @version 0.0.5
+ * @license MIT
+ * @author https://github.com/avalynx/avalynx-alert/graphs/contributors
+ * @website https://github.com/avalynx/
+ * @repository https://github.com/avalynx/avalynx-alert.git
+ * @bugs https://github.com/avalynx/avalynx-alert/issues
+ *
+ * @param {string} message - The message to display in the alert.
+ * @param {string} type - The type of alert. One of 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'.
+ * @param {object} options - The options for the alert.
+ * @param {number} options.duration - The duration in milliseconds for the alert to be displayed. Default is 5000.
+ * @param {string} options.position - The position of the alert. One of 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'. Default is 'top-center'.
+ * @param {boolean} options.closeable - Whether the alert can be closed by the user. Default is true.
+ * @param {boolean} options.autoClose - Whether the alert will close automatically after the duration. Default is true.
+ * @param {string} options.width - The width of the alert. Default is '400px'.
+ */
+
+export class AvalynxAlert {
+	constructor(message, type, options = {}) {
+		this.message = message;
+		this.type = type;
+		this.duration = options.duration || 5000;
+		this.position = options.position || 'top-center';
+		this.closeable = options.closeable || true;
+		this.autoClose = options.autoClose || true;
+		this.width = options.width || '400px';
+		this.onClose = options.onClose || null;
+
+		if (!['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'].includes(this.type)) {
+			this.type = 'info';
+		}
+		if (!['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'].includes(this.position)) {
+			this.position = 'top-center';
+		}
+		if (this.autoClose !== false && this.autoClose !== true) {
+			this.autoClose = true;
+		}
+		if ((this.closeable !== false && this.closeable !== true) || (this.autoClose === true)) {
+			this.closeable = true;
+		}
+
+		this.init();
+	}
+
+	ensureAlertContainer() {
+		if (!document.getElementById('avalynx-alert-container-' + this.position)) {
+			var container = document.createElement('div');
+			container.id = 'avalynx-alert-container-' + this.position;
+			container.style.width = '100%';
+			container.style.maxWidth = this.width;
+			container.style.zIndex = '1000';
+			container.classList.add('container-fluid');
+
+			if (this.position === 'top-left') {
+				container.style.position = 'fixed';
+				container.style.top = '10px';
+				container.style.left = '0px';
+			} else if (this.position === 'top-center') {
+				container.style.position = 'fixed';
+				container.style.top = '10px';
+				container.style.left = '50%';
+				container.style.transform = 'translateX(-50%)';
+			} else if (this.position === 'top-right') {
+				container.style.position = 'fixed';
+				container.style.top = '10px';
+				container.style.right = '0px';
+			} else if (this.position === 'bottom-left') {
+				container.style.position = 'fixed';
+				container.style.bottom = '10px';
+				container.style.left = '0px';
+			} else if (this.position === 'bottom-center') {
+				container.style.position = 'fixed';
+				container.style.bottom = '10px';
+				container.style.left = '50%';
+				container.style.transform = 'translateX(-50%)';
+			} else if (this.position === 'bottom-right') {
+				container.style.position = 'fixed';
+				container.style.bottom = '10px';
+				container.style.right = '0px';
+			}
+
+			document.body.appendChild(container);
+		}
+	}
+
+	init() {
+		this.ensureAlertContainer();
+
+		var alert = document.createElement('div');
+		alert.className = `alert alert-${this.type}`;
+		if (this.closeable) {
+			alert.classList.add('alert-dismissible');
+		}
+		alert.classList.add('fade');
+		alert.classList.add('show');
+		alert.classList.add('p-0');
+		alert.classList.add('overflow-hidden');
+		alert.classList.add('avalynx-alert');
+		alert.role = 'alert';
+		alert.innerHTML = `<div class="alert-content">${this.message}`;
+		if (this.closeable) {
+			alert.innerHTML += `<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>`;
+		}
+		alert.innerHTML += `</div>`;
+		if (this.autoClose) {
+			alert.innerHTML += `<div class="alert-timer" style="height: 5px; width: 0;"></div>`;
+		}
+
+		document.getElementById('avalynx-alert-container-' + this.position).appendChild(alert);
+
+		if (this.autoClose) {
+			var timerBar = alert.querySelector('.alert-timer');
+			timerBar.style.transition = `width ${this.duration}ms linear`;
+
+			requestAnimationFrame(() => {
+				requestAnimationFrame(() => {
+					timerBar.style.width = '100%';
+				});
+			});
+
+			setTimeout(() => {
+				alert.classList.remove('show');
+				setTimeout(() => {
+					alert.remove();
+					if (typeof this.onClose === 'function') {
+						this.onClose();
+					}
+				}, 150);
+			}, this.duration);
+		}
+	}
+}

package/dist/js/avalynx-alert.js

@@ -1,9 +1,9 @@
 /**
  * AvalynxAlert
  *
- * A simple alert system for web applications.
+ * A simple alert system for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
  *
- * @version 0.0.3
+ * @version 0.0.5
  * @license MIT
  * @author https://github.com/avalynx/avalynx-alert/graphs/contributors
  * @website https://github.com/avalynx/
@@ -18,9 +18,10 @@
  * @param {boolean} options.closeable - Whether the alert can be closed by the user. Default is true.
  * @param {boolean} options.autoClose - Whether the alert will close automatically after the duration. Default is true.
  * @param {string} options.width - The width of the alert. Default is '400px'.
+ * @param {function} options.onClose - A callback function to be called when the alert is closed.
  */
 
-export class AvalynxAlert {
+class AvalynxAlert {
 	constructor(message, type, options = {}) {
 		this.message = message;
 		this.type = type;
@@ -29,6 +30,8 @@ export class AvalynxAlert {
 		this.closeable = options.closeable || true;
 		this.autoClose = options.autoClose || true;
 		this.width = options.width || '400px';
+		this.onClose = options.onClose || null;
+
 		if (!['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'].includes(this.type)) {
 			this.type = 'info';
 		}
@@ -114,11 +117,21 @@ export class AvalynxAlert {
 		if (this.autoClose) {
 			var timerBar = alert.querySelector('.alert-timer');
 			timerBar.style.transition = `width ${this.duration}ms linear`;
-			setTimeout(() => { timerBar.style.width = '100%'; }, 10);
+
+			requestAnimationFrame(() => {
+				requestAnimationFrame(() => {
+					timerBar.style.width = '100%';
+				});
+			});
 
 			setTimeout(() => {
 				alert.classList.remove('show');
-				setTimeout(() => alert.remove(), 150);
+				setTimeout(() => {
+					alert.remove();
+					if (typeof this.onClose === 'function') {
+						this.onClose();
+					}
+				}, 150);
 			}, this.duration);
 		}
 	}

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "avalynx-alert",
   "title": "AvalynxAlert",
-  "description": "AvalynxAlert is a simple, lightweight, and customizable alert component for Bootstrap.",
-  "version": "0.0.3",
+  "description": "AvalynxAlert is a simple alert system for web applications. Based on Bootstrap >=5.3 without any framework dependencies.",
+  "version": "0.0.5",
   "license": "MIT",
   "main": "dist/js/avalynx-alert.js",
-  "module": "dist/js/avalynx-alert.js",
+  "module": "dist/js/avalynx-alert.esm.js",
   "style": "dist/css/avalynx-alert.css",
   "files": [
     "dist/css/avalynx-alert.css",
-    "dist/js/avalynx-alert.js"
+    "dist/js/avalynx-alert.js",
+    "dist/js/avalynx-alert.esm.js"
   ],
   "keywords": [
     "alert",
@@ -25,7 +26,7 @@
     "package.json"
   ],
   "author": {
-    "name": "The Avalynx-Alert Authors",
+    "name": "Juergen Schwind an the Avalynx-Alert Authors",
     "url": "https://github.com/avalynx/avalynx-alert/graphs/contributors"
   },
   "homepage": "https://github.com/avalynx/",