frutjam 0.0.1

package/README.md

@@ -0,0 +1 @@
+# Welcome to Frutjam

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "frutjam",
+  "version": "0.0.1",
+  "description": "Frutjam includes prebuilt UI components and plugins that are completely open-source",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "repository": {
+    "type": "github",
+    "url": "git+https://github.com/nezanuha/frutjam.git"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "frutjam",
+    "Nezanuha"
+  ],
+  "author": "Nezanuha",
+  "license": "MIT",
+  "homepage": "https://frutjam.com",
+  "bugs": {
+    "url": "https://github.com/nezanuha/frutjam/issues"
+  },
+  "files": [
+    "src/**/*"
+  ],
+  "devDependencies": {
+    "esbuild": "^0.20.2",
+    "tsup": "^8.0.2",
+    "typescript": "^5.4.5"
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { default as Notification } from './plugins/notification'

package/src/plugins/notification/index.ts

@@ -0,0 +1,74 @@
+import { NotificationOptions } from './interfaces';
+import { TimeoutId } from './types';
+
+export default class Notification {
+    effect: string;
+    escapeTime: number;
+    arriveTime: number;
+    autoClose: boolean;
+    element: HTMLElement | null;
+    timeoutId: TimeoutId;
+
+    constructor({ effect = 'fade', escapeTime = 3000, arriveTime = 200, autoClose = true, element = null }: NotificationOptions = {}) {
+        this.effect = effect;
+        this.arriveTime = arriveTime;
+        this.autoClose = autoClose;
+        this.escapeTime = escapeTime;
+        this.element = element;
+        this.timeoutId = null; // Initialize timeout ID as null
+        this.render();
+        this.action();
+    }
+
+    render() {
+        if (this.element) {
+            document.querySelector("body")?.insertAdjacentElement('beforeend', this.element);
+        }
+    }
+
+    action() {
+        document.querySelectorAll("[data-fj='toggle-btn']").forEach((event) => {
+            event.addEventListener("click", (e) => {
+                const self = e.target as HTMLElement;
+                const container = self.closest<HTMLElement>("[data-fj='notification']");
+                if (container) {
+                    this.toggleNotification(container);
+                }
+
+                // Clear the timeout when the click event occurs
+                if (this.timeoutId !== null) {
+                    clearTimeout(this.timeoutId);
+                    this.timeoutId = null;
+                }
+            });
+        });
+
+        // Set the timeout to toggle the class after arriveTime
+        this.timeoutId = setTimeout(() => {
+            const notificationsContainer = document.querySelectorAll<HTMLElement>("[data-fj='notification']");
+            notificationsContainer.forEach((container) => {
+                this.toggleNotification(container);
+            });
+            this.timeoutId = null; // Reset timeout ID after it's triggered
+        }, this.arriveTime);
+
+        if (this.autoClose === true) {
+            this.timeoutId = setTimeout(() => {
+                const notificationsContainer = document.querySelectorAll<HTMLElement>("[data-fj='notification']");
+                notificationsContainer.forEach((container) => {
+                    this.toggleNotification(container);
+                });
+                this.timeoutId = null; // Reset timeout ID after it's triggered
+            }, this.escapeTime);
+        }
+    }
+
+    toggleNotification(container: HTMLElement) {
+        if (this.effect == 'slide') {
+            container.classList.toggle("translate-x-0");
+        } else {
+            container.classList.toggle("opacity-100");
+        }
+        // Add other toggle logic here if needed
+    }
+}

package/src/plugins/notification/interfaces.ts

@@ -0,0 +1,9 @@
+import { TimeoutId } from './types';
+
+export interface NotificationOptions {
+    effect?: string;
+    escapeTime?: number;
+    arriveTime?: number;
+    autoClose?: boolean;
+    element?: HTMLElement | null;
+}

package/src/plugins/notification/types.ts

@@ -0,0 +1 @@
+export type TimeoutId = ReturnType<typeof setTimeout> | null;