npm - tiny-essentials - Versions diffs - 1.10.2 → 1.12.0 - Mend

tiny-essentials 1.10.2 → 1.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (106) hide show

package/README.md +13 -4
package/dist/node_modules/firebase-functions/lib/common/trace.cjs +82 -0
package/dist/node_modules/firebase-functions/lib/logger/common.cjs +57 -0
package/dist/node_modules/firebase-functions/lib/logger/index.cjs +158 -0
package/dist/{TinyEssentials.js → v1/TinyBasicsEs.js} +1726 -1362
package/dist/v1/TinyBasicsEs.min.js +2 -0
package/dist/v1/TinyDragDropDetector.js +307 -0
package/dist/v1/TinyDragDropDetector.min.js +1 -0
package/dist/{TinyBasicsEs.js → v1/TinyDragger.js} +1004 -506
package/dist/v1/TinyDragger.min.js +2 -0
package/dist/v1/TinyEssentials.js +7938 -0
package/dist/v1/TinyEssentials.min.js +2 -0
package/dist/v1/TinyEssentials.min.js.LICENSE.txt +8 -0
package/dist/v1/TinyNotifyCenter.js +493 -0
package/dist/v1/TinyNotifyCenter.min.js +1 -0
package/dist/v1/TinyToastNotify.js +441 -0
package/dist/v1/TinyToastNotify.min.js +1 -0
package/dist/v1/TinyUploadClicker.js +5235 -0
package/dist/v1/TinyUploadClicker.min.js +2 -0
package/dist/v1/TinyUploadClicker.min.js.LICENSE.txt +8 -0
package/dist/v1/basics/fileManager.cjs +524 -0
package/dist/v1/basics/fileManager.d.mts +209 -0
package/dist/v1/basics/fileManager.mjs +443 -0
package/dist/v1/basics/fullScreen.cjs +134 -0
package/dist/v1/basics/fullScreen.d.mts +8 -0
package/dist/v1/basics/fullScreen.mjs +121 -0
package/dist/v1/basics/html.cjs +262 -0
package/dist/v1/basics/html.d.mts +63 -0
package/dist/v1/basics/html.mjs +208 -0
package/dist/v1/basics/index.cjs +40 -0
package/dist/v1/basics/index.d.mts +38 -1
package/dist/v1/basics/index.mjs +4 -1
package/dist/v1/build/TinyDragDropDetector.cjs +7 -0
package/dist/v1/build/TinyDragDropDetector.d.mts +3 -0
package/dist/v1/build/TinyDragDropDetector.mjs +2 -0
package/dist/v1/build/TinyDragger.cjs +7 -0
package/dist/v1/build/TinyDragger.d.mts +3 -0
package/dist/v1/build/TinyDragger.mjs +2 -0
package/dist/v1/build/TinyNotifyCenter.cjs +7 -0
package/dist/v1/build/TinyNotifyCenter.d.mts +3 -0
package/dist/v1/build/TinyNotifyCenter.mjs +2 -0
package/dist/v1/build/TinyToastNotify.cjs +7 -0
package/dist/v1/build/TinyToastNotify.d.mts +3 -0
package/dist/v1/build/TinyToastNotify.mjs +2 -0
package/dist/v1/build/TinyUploadClicker.cjs +7 -0
package/dist/v1/build/TinyUploadClicker.d.mts +3 -0
package/dist/v1/build/TinyUploadClicker.mjs +2 -0
package/dist/v1/css/TinyDraggerExample.css +21 -0
package/dist/v1/css/TinyDraggerExample.min.css +1 -0
package/dist/v1/css/TinyNotify.css +350 -0
package/dist/v1/css/TinyNotify.min.css +1 -0
package/dist/v1/index.cjs +48 -0
package/dist/v1/index.d.mts +42 -1
package/dist/v1/index.mjs +8 -1
package/dist/v1/libs/TinyDragDropDetector.cjs +268 -0
package/dist/v1/libs/TinyDragDropDetector.d.mts +123 -0
package/dist/v1/libs/TinyDragDropDetector.mjs +228 -0
package/dist/v1/libs/TinyDragger.cjs +801 -0
package/dist/v1/libs/TinyDragger.d.mts +300 -0
package/dist/v1/libs/TinyDragger.mjs +689 -0
package/dist/v1/libs/TinyNotifyCenter.cjs +454 -0
package/dist/v1/libs/TinyNotifyCenter.d.mts +175 -0
package/dist/v1/libs/TinyNotifyCenter.mjs +413 -0
package/dist/v1/libs/TinyToastNotify.cjs +402 -0
package/dist/v1/libs/TinyToastNotify.d.mts +165 -0
package/dist/v1/libs/TinyToastNotify.mjs +352 -0
package/dist/v1/libs/TinyUploadClicker.cjs +223 -0
package/dist/v1/libs/TinyUploadClicker.d.mts +80 -0
package/dist/v1/libs/TinyUploadClicker.mjs +182 -0
package/docs/{README.md → v1/README.md} +8 -0
package/docs/v1/basics/fileManager.md +222 -0
package/docs/v1/basics/fullScreen.md +183 -0
package/docs/v1/basics/html.md +243 -0
package/docs/{basics → v1/basics}/text.md +2 -2
package/docs/v1/libs/TinyDragDropDetector.md +143 -0
package/docs/v1/libs/TinyDragger.md +415 -0
package/docs/{libs → v1/libs}/TinyLevelUp.md +1 -1
package/docs/v1/libs/TinyNotifyCenter.md +311 -0
package/docs/v1/libs/TinyToastNotify.md +309 -0
package/docs/v1/libs/TinyUploadClicker.md +108 -0
package/package.json +14 -2
package/dist/TinyBasicsEs.min.js +0 -2
package/dist/TinyEssentials.min.js +0 -2
package/dist/v1/libs/TinyRateLimit.cjs +0 -196
package/dist/v1/libs/TinyRateLimit.d.mts +0 -86
package/dist/v1/libs/TinyRateLimit.mjs +0 -171
/package/dist/{ColorSafeStringify.js → v1/ColorSafeStringify.js} +0 -0
/package/dist/{ColorSafeStringify.min.js → v1/ColorSafeStringify.min.js} +0 -0
/package/dist/{TinyBasicsEs.min.js.LICENSE.txt → v1/TinyBasicsEs.min.js.LICENSE.txt} +0 -0
/package/dist/{TinyEssentials.min.js.LICENSE.txt → v1/TinyDragger.min.js.LICENSE.txt} +0 -0
/package/dist/{TinyLevelUp.js → v1/TinyLevelUp.js} +0 -0
/package/dist/{TinyLevelUp.min.js → v1/TinyLevelUp.min.js} +0 -0
/package/dist/{TinyPromiseQueue.js → v1/TinyPromiseQueue.js} +0 -0
/package/dist/{TinyPromiseQueue.min.js → v1/TinyPromiseQueue.min.js} +0 -0
/package/dist/{TinyRateLimiter.js → v1/TinyRateLimiter.js} +0 -0
/package/dist/{TinyRateLimiter.min.js → v1/TinyRateLimiter.min.js} +0 -0
/package/dist/{aiMarker.css → v1/css/aiMarker.css} +0 -0
/package/dist/{aiMarker.min.css → v1/css/aiMarker.min.css} +0 -0
/package/docs/{basics → v1/basics}/array.md +0 -0
/package/docs/{basics → v1/basics}/asyncReplace.md +0 -0
/package/docs/{basics → v1/basics}/clock.md +0 -0
/package/docs/{basics → v1/basics}/objFilter.md +0 -0
/package/docs/{basics → v1/basics}/simpleMath.md +0 -0
/package/docs/{libs → v1/libs}/ColorSafeStringify.md +0 -0
/package/docs/{libs → v1/libs}/TinyPromiseQueue.md +0 -0
/package/docs/{libs → v1/libs}/TinyRateLimiter.md +0 -0

package/docs/v1/libs/TinyNotifyCenter.md ADDED Viewed

@@ -0,0 +1,311 @@
+# 🛎️ TinyNotifyCenter
+## Overview
+`TinyNotifyCenter` is a notification center component designed to display interactive alerts in the UI.
+This class renders a notification overlay on the page, allowing dynamic management of notification items — adding, clearing, and interacting with them in real time.
+---
+## 🔔 NotifyData Type
+A notification entry (`NotifyData`) can be either a simple string or an object with extra data:
+```ts
+type NotifyData = string | {
+  title?: string;                   // Optional title shown above the message
+  message: string;                  // Required message content (plain text or HTML)
+  avatar?: string;                  // Optional avatar image URL (displayed on the left)
+  onClick?: (e: MouseEvent) => void; // Optional click handler for the entire notification
+}
+```
+---
+## ✨ Features
+* Dynamic rendering of notification UI via the `insertTemplate()` method
+* Supports both plain text and HTML content in notifications
+* Optional avatars shown alongside notifications
+* Supports callback functions on notification click events
+* Each notification includes a close button for dismissal
+* Displays a badge with the count of active notifications
+---
+## 🏗️ Static Methods
+### `static getTemplate() : string`
+Returns the full HTML structure for the notification system as a **string**.
+This template includes:
+- A hidden `.notify-overlay` element containing the central notification panel (`#notifCenter`):
+  - Header with a **"Notifications"** label
+  - A **clear all** button (with checkmark icon)
+  - A **close** button (×)
+- A `.list` container to hold dynamically added notification items
+- A bell button (`.notify-bell`) to toggle the notification center, featuring:
+  - A bell SVG icon
+  - A badge (`#notifBadge`) displaying the number of active notifications
+> 💡 This HTML can be injected into the DOM using methods like `insertAdjacentHTML()` or parsed into elements with JavaScript or jQuery.
+---
+### `static insertTemplate(where = 'afterbegin') : void`
+Injects the full notification center HTML template into the `document.body`.
+- Uses `insertAdjacentHTML()` to insert the markup.
+- The `where` parameter controls the insertion point relative to the `<body>` element.
+Possible values for `where`:
+| Value         | Description                              |
+|---------------|------------------------------------------|
+| `'afterbegin'` (default) | Insert right after the opening `<body>` tag |
+| `'beforeend'`             | Insert right before the closing `</body>` tag |
+| `'beforebegin'` or `'afterend'` | Other valid positions supported by `insertAdjacentHTML` |
+---
+### Example Usage
+```js
+// Insert notification center template at the start of <body>
+TinyNotifyCenter.insertTemplate();
+// Or insert at the end of <body>
+TinyNotifyCenter.insertTemplate('beforeend');
+````
+---
+### Visual Structure Preview
+```html
+<div class="notify-overlay hidden">
+  <div class="notify-center" id="notifCenter">
+    <div class="header">
+      <div>Notifications</div>
+      <div class="options">
+        <button class="clear-all" type="button">✔️</button>
+        <button class="close">×</button>
+      </div>
+    </div>
+    <div class="list"></div>
+  </div>
+</div>
+<button class="notify-bell" aria-label="Open notifications">
+  🔔 <span class="badge" id="notifBadge">0</span>
+</button>
+```
+---
+## 🛠️ Instance Methods & Constructor
+### `constructor(options = {})`
+Creates a new instance of the Notification Center with configurable main elements.
+| Option          | Default Selector                         | Description                                  |
+|-----------------|----------------------------------------|----------------------------------------------|
+| `center`        | `document.getElementById('notifCenter')` | Container element holding notification list |
+| `badge`         | `document.getElementById('notifBadge')`  | Badge element showing the notification count |
+| `button`        | `document.querySelector('.notify-bell')` | Button toggling the notification center     |
+| `overlay`       | `document.querySelector('.notify-overlay')` | Overlay element shown when center is visible |
+⚠️ Throws an error if any of the elements are not valid HTMLElements.
+**Event Listeners added internally:**
+- `button` click → toggles notification center
+- `close` button inside center → closes notification center
+- `clear-all` button inside center → clears all notifications
+- Clicking the overlay outside center → closes notification center
+---
+### ⚙️ Configuration Methods
+#### `setMarkAllAsReadOnClose(value: boolean)`
+Enable or disable automatic marking of all notifications as read when the center closes.
+Throws a `TypeError` if `value` is not a boolean.
+---
+#### `setRemoveDelay(ms: number)`
+Set the delay (in milliseconds) for the remove animation when notifications are removed.
+Throws an error if `ms` is not a number.
+---
+### 📋 Notification Item Accessors
+#### `getItemMode(index: number) : 'text' | 'html' | null`
+Returns the rendering mode (`'text'` or `'html'`) of the notification at the given index, or `null` if not found.
+---
+#### `getItem(index: number) : HTMLElement`
+Returns the notification element at the specified index.
+Throws an error if the element is not an `HTMLElement`.
+---
+#### `hasItem(index: number) : boolean`
+Returns `true` if a notification exists at the given index, `false` otherwise.
+---
+### ✅ Notification State Management
+#### `markAsRead(index: number | HTMLElement)`
+Marks the specified notification (by index or element) as read if it was unread, updating the unread count.
+---
+#### `remove(index: number)`
+Removes the notification at the given index, triggering any removal animations or cleanup.
+---
+#### `clear()`
+Safely clears all notifications from the list, removing them one by one, handling animations properly.
+---
+### 🔔 Notification Center Visibility Controls
+#### `open()`
+Opens the notification center by showing the overlay and adding the `open` class.
+---
+#### `close()`
+Closes the notification center by hiding the overlay and removing the `open` class.
+If `markAllAsReadOnClose` is enabled, marks all unread notifications as read on close.
+---
+#### `toggle()`
+Toggles the notification center open or closed based on current state.
+---
+### 🔢 Count Management
+#### `recount()`
+Recalculates the number of unread notifications by counting `.item.unread` elements in the DOM list, updating the badge count.
+---
+#### `get count() : number`
+Returns the current number of unread notifications tracked internally.
+---
+### ➕ `add(message, mode = 'text')`
+Adds a new notification to the notification center. 🎉
+**Parameters:**
+* `message` (`NotifyData`):
+  Can be either a simple string or an object containing:
+  * `title` (optional): notification title 📝
+  * `message`: main notification text or HTML content
+  * `avatar` (optional): URL for an avatar image 🖼️
+  * `onClick` (optional): callback function triggered when the notification is clicked 🎯
+* `mode` (`'text' | 'html'`, default `'text'`):
+  Determines if the message content should be treated as plain text or HTML.
+---
+**How it works:**
+1. Creates a new `.item.unread` div to hold the notification.
+2. If `message` is an object, it extracts the title, message, avatar URL, and click callback.
+   Otherwise, treats `message` as plain text content.
+3. If an avatar URL is provided, creates a `.avatar` div with the avatar image as background.
+4. Creates a `.content` wrapper containing:
+   * An optional `.title` element if a title exists
+   * A `.message` element containing the message, rendered as text or HTML depending on `mode`
+5. If `onClick` callback is provided, marks the item `.clickable` and adds a click event listener that triggers the callback — but **prevents clicks on the close button** from triggering it.
+6. Adds a close button (`×`) `.notify-close` inside the notification:
+   Clicking it removes the notification, stopping event propagation to avoid triggering the main click callback.
+7. Prepends the notification to the top of the list, stores its mode, and updates the unread count.
+---
+**In short:**
+You create a rich notification element dynamically, with optional avatar, title, content (text or HTML), clickable actions, and a close button — all neatly wired up! 🚀
+---
+## 🔥 `destroy()`
+Destroys the current **TinyNotifyCenter** instance.
+It **removes all event listeners**, **clears all notifications**, and **optionally removes the entire notification center template from the DOM**.
+### Syntax
+```js
+tinyNotifyCenter.destroy();
+```
+### Behavior
+* Removes all event listeners (`click`, `close`, `clear all`, overlay clicks).
+* Clears all notifications from the list.
+* Removes the UI (`.notify-overlay`, `.notify-bell`, etc.) from the DOM.
+* Cleans internal references (`center`, `list`, `button`, `overlay`, `badge`, `modes`).
+---
+## 🎨 CSS Files Location
+The CSS files for the TinyNotify project build can be found in the following folder:
+```
+dist/v1/css
+```
+Inside this folder, you'll find the main stylesheets:
+- `TinyNotify.css` — the full, unminified CSS file
+- `TinyNotify.min.css` — the minified, optimized CSS file for production 🚀
+Use these files to style your notifications!
+Happy coding! ✨

package/docs/v1/libs/TinyToastNotify.md ADDED Viewed

@@ -0,0 +1,309 @@
+# 🍞✨ `TinyToastNotify` Class
+A lightweight notification system designed to display timed messages inside a container. It supports positioning, duration customization, HTML rendering, click handling, and optional avatar display.
+---
+## 🔧 Features
+* 📍 **Positioning**:
+  Customize horizontal (`x`: `left`, `center`, `right`) and vertical (`y`: `top`, `bottom`) alignment.
+* ⏳ **Dynamic display time**:
+  Automatically adjusts based on message length.
+* 📝 **Flexible content**:
+  * Optional `title` 🏷️
+  * Optional `avatar` 🖼️
+  * Optional `onClick` handler 🖱️
+  * Optional raw HTML rendering 💡
+* 🌙 **Fade-out animation**:
+  With customizable duration.
+* 🛡️ **Robust validation**:
+  Ensures safe and predictable behavior.
+---
+## ⚙️ Customization Setters
+* `setX(position: 'left' | 'center' | 'right')` — Sets horizontal alignment.
+* `setY(position: 'top' | 'bottom')` — Sets vertical alignment.
+* `setBaseDuration(ms: number)` — Base visible time in milliseconds.
+* `setExtraPerChar(ms: number)` — Additional duration per character.
+* `setFadeOutDuration(ms: number)` — Duration of fade-out animation.
+---
+## 🧩 Types
+### 🔁 `CloseToastFunc`
+```ts
+type CloseToastFunc = () => void;
+```
+A callback function used to manually close a notification.
+It’s passed as the **second argument** to `onClick` handlers, allowing programmatic dismissal.
+---
+### 💬 `NotifyData`
+```ts
+type NotifyData =
+  | string
+  | {
+      message: string; // The main message to display
+      title?: string;  // Optional title above the message
+      onClick?: (event: MouseEvent, close: CloseToastFunc) => void; // Optional click handler
+      html?: boolean;  // If true, message will be rendered as raw HTML
+      avatar?: string; // Optional avatar image URL
+    };
+```
+Represents the input used to display a notification.
+It can either be a plain string (used as the message), or a detailed object for richer customization.
+---
+## 🔧 Constructor: `new TinyToastNotify(...)`
+Initializes a new `TinyToastNotify` instance with positioning and timing preferences.
+```ts
+new TinyToastNotify(
+  y?: 'top' | 'bottom',
+  x?: 'left' | 'right' | 'center',
+  baseDuration?: number,
+  extraPerChar?: number,
+  fadeOutDuration?: number,
+  selector?: string
+)
+```
+### 📝 Parameters
+| Parameter         | Type                                | Default               | Description                                           |
+| ----------------- | ----------------------------------- | --------------------- | ----------------------------------------------------- |
+| `y`               | `'top'` \| `'bottom'`               | `'top'`               | Vertical alignment of the notification container      |
+| `x`               | `'left'` \| `'center'` \| `'right'` | `'right'`             | Horizontal alignment of the notification container    |
+| `baseDuration`    | `number`                            | `3000`                | Base display time in milliseconds                     |
+| `extraPerChar`    | `number`                            | `50`                  | Extra milliseconds added per character in the message |
+| `fadeOutDuration` | `number`                            | `300`                 | Time (ms) for fade-out animation                      |
+| `selector`        | `string`                            | `'.notify-container'` | CSS selector used to find or create the container     |
+### 🧠 Behavior
+* Validates all input values strictly to prevent misconfigurations.
+* Attempts to locate an existing container via the selector and alignment classes.
+* If not found, it creates a new container and appends it to `document.body`.
+---
+## 📦 Method: `getContainer()`
+Returns the `HTMLElement` used to host all notifications.
+```ts
+getContainer(): HTMLElement
+```
+### 🔁 Returns
+* The current notification container element.
+### ⚠️ Throws
+* Throws an error if the container is not a valid `HTMLElement`.
+---
+## ⚙️ Position and Timing Getters & Setters
+### 🔝 `getY()`
+Returns the current vertical position.
+* **Returns:**
+  `'top' | 'bottom'` — The vertical alignment of the notification container.
+---
+### 🔄 `setY(value)`
+Sets the vertical position of the notification container and updates its CSS classes.
+* **Parameters:**
+  * `value: 'top' | 'bottom'` — The new vertical position to set.
+* **Throws:**
+  * `Error` if the value is invalid.
+---
+### ↔️ `getX()`
+Returns the current horizontal position.
+* **Returns:**
+  `'left' | 'center' | 'right'` — The horizontal alignment of the notification container.
+---
+### 🔀 `setX(value)`
+Sets the horizontal position of the notification container and updates its CSS classes.
+* **Parameters:**
+  * `value: 'left' | 'center' | 'right'` — The new horizontal position to set.
+* **Throws:**
+  * `Error` if the value is invalid.
+---
+### ⏲️ `getBaseDuration()`
+Returns the base display duration for notifications.
+* **Returns:**
+  `number` — Base time in milliseconds that a notification stays visible.
+---
+### ⏳ `setBaseDuration(value)`
+Sets the base display duration for notifications.
+* **Parameters:**
+  * `value: number` — Base display time in milliseconds.
+* **Throws:**
+  * `Error` if `value` is not a valid non-negative finite number.
+---
+### ➕ `getExtraPerChar()`
+Returns extra display time added per character.
+* **Returns:**
+  `number` — Extra milliseconds added per character in the notification.
+---
+### ✏️ `setExtraPerChar(value)`
+Sets the extra display time added per character.
+* **Parameters:**
+  * `value: number` — Extra milliseconds per character.
+* **Throws:**
+  * `Error` if `value` is not a valid non-negative finite number.
+---
+### 🌙 `getFadeOutDuration()`
+Returns the fade-out animation duration.
+* **Returns:**
+  `number` — Duration in milliseconds of the fade-out effect.
+---
+### 🎞️ `setFadeOutDuration(value)`
+Sets the fade-out animation duration.
+* **Parameters:**
+  * `value: number` — Fade-out time in milliseconds.
+* **Throws:**
+  * `Error` if `value` is not a valid non-negative finite number.
+---
+## 🚀 `show(data)`
+Displays a notification with customizable content and duration based on message length.
+### 📝 Parameters
+* `data: NotifyData` — The notification data, which can be either:
+  * A **string** — Used as the message text directly.
+  * An **object** with the following optional properties:
+    * `message: string` — The main message text (required in object form).
+    * `title?: string` — Optional title shown above the message.
+    * `onClick?: function(MouseEvent, CloseToastFunc): void` — Optional click handler, receives the click event and a function to programmatically close the toast.
+    * `html?: boolean` — Whether the message should be interpreted as raw HTML (default is plain text).
+    * `avatar?: string` — Optional URL for an avatar image shown to the left of the notification.
+### 🛠️ Behavior
+* Creates a notification `<div>` element with class `notify` and adds entrance animation.
+* Supports optional avatar image, title, and click handler.
+* Shows a close button (`×`) with hover effect.
+* Calculates display duration as:
+  `baseDuration + (message length × extraPerChar) + fadeOutDuration` milliseconds.
+* Automatically fades out and removes the notification after the calculated total time.
+* Clicking the close button or calling the programmatic `close` function dismisses the notification.
+* If an `onClick` handler is provided, clicking the notification (except on the close button) triggers it.
+### ⚠️ Errors
+* Throws an error if `data` is neither a string nor a valid object with a string `message` property.
+* Throws an error if `onClick` is defined but is not a function.
+---
+## 🔥 `destroy()`
+Destroys the current **TinyToastNotify** instance.
+It **removes the notification container from the DOM** and **clears all pending notifications**. This method is useful when the notification system is no longer needed or when changing views in a single-page application.
+### Syntax
+```js
+tinyToastNotify.destroy();
+```
+### Behavior
+* Removes the entire container (`.notify-container`) from the DOM.
+* Automatically cancels any pending or visible toasts.
+* Cleans up internal references.
+---
+## 🎨 CSS Files Location
+The CSS files for the TinyNotify project build can be found in the following folder:
+```
+dist/v1/css
+```
+Inside this folder, you'll find the main stylesheets:
+- `TinyNotify.css` — the full, unminified CSS file
+- `TinyNotify.min.css` — the minified, optimized CSS file for production 🚀
+Use these files to style your notifications!
+Happy coding! ✨