avalynx-alert 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 avalynx
+
+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 @@
+# avalynx-alert

package/dist/css/avalynx-alert.css

@@ -0,0 +1,47 @@
+/**
+
+ */
+
+.avalynx-alert .alert-content {
+    padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
+}
+
+.avalynx-alert.alert-dismissible .alert-content {
+    padding-right: 3rem;
+}
+
+.avalynx-alert .btn-close {
+    --bs-btn-close-focus-shadow: 0;
+}
+
+.avalynx-alert.alert-primary .alert-timer {
+    background-color: var(--bs-primary-border-subtle);
+}
+
+.avalynx-alert.alert-secondary .alert-timer {
+    background-color: var(--bs-secondary-border-subtle);
+}
+
+.avalynx-alert.alert-success .alert-timer {
+    background-color: var(--bs-success-border-subtle);
+}
+
+.avalynx-alert.alert-danger .alert-timer {
+    background-color: var(--bs-danger-border-subtle);
+}
+
+.avalynx-alert.alert-warning .alert-timer {
+    background-color: var(--bs-warning-border-subtle);
+}
+
+.avalynx-alert.alert-info .alert-timer {
+    background-color: var(--bs-info-border-subtle);
+}
+
+.avalynx-alert.alert-light .alert-timer {
+    background-color: var(--bs-light-border-subtle);
+}
+
+.avalynx-alert.alert-dark .alert-timer {
+    background-color: var(--bs-dark-border-subtle);
+}

package/dist/js/avalynx-alert.js

@@ -0,0 +1,127 @@
+/**
+ * AvalynxAlert
+ *
+ * A simple alert system for web applications.
+ *
+ * @version 0.0.1
+ * @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';
+		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;
+		console.log(this.closeable);
+		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`;
+			setTimeout(() => { timerBar.style.width = '100%'; }, 10);
+
+			setTimeout(() => {
+				alert.classList.remove('show');
+				setTimeout(() => alert.remove(), 150);
+			}, this.duration);
+		}
+	}
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "avalynx-alert",
+  "title": "AvalynxAlert",
+  "description": "AvalynxAlert is a simple, lightweight, and customizable alert component for Bootstrap.",
+  "version": "0.0.1",
+  "license": "MIT",
+  "files": [
+    "dist/css/avalynx-alert.css",
+    "dist/js/avalynx-alert.js"
+  ],
+  "keywords": [
+    "alert",
+    "bootstrap",
+    "component",
+    "notification",
+    "popup"
+  ],
+  "dependencies": {
+    "bootstrap": ">=5.3"
+  },
+  "ignore": [
+    "package.json"
+  ],
+  "author": {
+    "name": "The Avalynx-Alert Authors",
+    "url": "https://github.com/avalynx/avalynx-alert/graphs/contributors"
+  },
+  "homepage": "https://github.com/avalynx/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/avalynx/avalynx-alert.git"
+  },
+  "bugs": {
+    "url": "https://github.com/avalynx/avalynx-alert/issues"
+  }
+}