avalynx-alert 0.0.4 → 0.0.5

package/README.md

@@ -17,6 +17,7 @@ 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
 
@@ -48,6 +49,8 @@ AvalynxAlert is also available via [jsDelivr](https://www.jsdelivr.com/). You ca
 <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:
@@ -63,7 +66,7 @@ import { AvalynxAlert } from 'avalynx-alert';
 import 'avalynx-alert/dist/css/avalynx-alert.min.css';
 ```
 
-Make sure to also include Bootstrap's CSS in your project to ensure AvalynxAlert displays correctly.
+Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxAlert displays correctly.
 
 ## Installation via Symfony AssetMapper
 
@@ -78,7 +81,7 @@ import { AvalynxAlert } from 'avalynx-alert';
 import 'avalynx-alert/dist/css/avalynx-alert.min.css';
 ```
 
-Make sure to also include Bootstrap's CSS in your project to ensure AvalynxAlert displays correctly.
+Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxAlert displays correctly.
 
 ## Usage
 
@@ -106,6 +109,7 @@ AvalynxAlert allows the following options for customization:
     - `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
 

package/dist/css/avalynx-alert.css

@@ -3,7 +3,7 @@
  *
  * A simple alert system for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
  *
- * @version 0.0.4
+ * @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

@@ -3,7 +3,7 @@
  *
  * A simple alert system for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
  *
- * @version 0.0.4
+ * @version 0.0.5
  * @license MIT
  * @author https://github.com/avalynx/avalynx-alert/graphs/contributors
  * @website https://github.com/avalynx/
@@ -29,6 +29,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';
 		}
@@ -123,7 +125,12 @@ export class AvalynxAlert {
 
 			setTimeout(() => {
 				alert.classList.remove('show');
-				setTimeout(() => alert.remove(), 150);
+				setTimeout(() => {
+					alert.remove();
+					if (typeof this.onClose === 'function') {
+						this.onClose();
+					}
+				}, 150);
 			}, this.duration);
 		}
 	}

package/dist/js/avalynx-alert.js

@@ -3,7 +3,7 @@
  *
  * A simple alert system for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
  *
- * @version 0.0.4
+ * @version 0.0.5
  * @license MIT
  * @author https://github.com/avalynx/avalynx-alert/graphs/contributors
  * @website https://github.com/avalynx/
@@ -18,6 +18,7 @@
  * @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.
  */
 
 class AvalynxAlert {
@@ -29,6 +30,8 @@ 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';
 		}
@@ -123,7 +126,12 @@ class AvalynxAlert {
 
 			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

@@ -2,7 +2,7 @@
   "name": "avalynx-alert",
   "title": "AvalynxAlert",
   "description": "AvalynxAlert is a simple alert system for web applications. Based on Bootstrap >=5.3 without any framework dependencies.",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "license": "MIT",
   "main": "dist/js/avalynx-alert.js",
   "module": "dist/js/avalynx-alert.esm.js",