tiny-essentials
Version:
Collection of small, essential scripts designed to be used across various projects. These simple utilities are crafted for speed, ease of use, and versatility.
175 lines • 6.63 kB
text/typescript
export default TinyNotifyCenter;
/**
* Represents a single notification entry.
*
* A notification can be provided as a simple string (treated as a plain message),
* or as an object with additional data such as a title, an avatar image, and a click handler.
*/
export type NotifyData = string | {
title?: string;
message: string;
avatar?: string;
onClick?: (e: MouseEvent) => void;
};
/**
* Represents a single notification entry.
*
* A notification can be provided as a simple string (treated as a plain message),
* or as an object with additional data such as a title, an avatar image, and a click handler.
*
* @typedef {string | {
* title?: string, // Optional title displayed above the message
* message: string, // Required message content
* avatar?: string, // Optional avatar image URL (displayed on the left)
* onClick?: (e: MouseEvent) => void // Optional click handler for the entire notification
* }} NotifyData
*/
/**
* A notification center component for displaying interactive alerts in the UI.
*
* This class renders a notification overlay on the page and allows dynamically
* adding, clearing, or interacting with notification items. Notifications can
* contain plain text or HTML, and optionally support click events, titles, and avatars.
*
* Features:
* - Dynamic rendering of notification UI with `insertTemplate()`
* - Supports text and HTML content modes
* - Optional avatars for each notification
* - Callback support on notification click
* - Per-notification close buttons
* - Notification count badge
*
* @class
*/
declare class TinyNotifyCenter {
/**
* Returns the full HTML structure for the notification system as a string.
*
* This includes:
* - A hidden `.notify-overlay` containing the central notification panel (`#notifCenter`),
* which has a header with a "Notifications" label, a "clear all" button, and a close button.
* - A `.list` container for dynamically added notifications.
* - A bell button (`.notify-bell`) to toggle the notification center, with an embedded badge.
*
* This template can be inserted into the DOM using `insertAdjacentHTML()` or parsed dynamically
* into elements using JavaScript or jQuery, depending on the needs of the system.
*
* @returns {string} The complete HTML structure for the notification center.
*/
static getTemplate(): string;
/**
* Inserts the full notification center template into the document body.
*
* The structure is injected directly into the DOM using
* `insertAdjacentHTML`.
*
* The `where` parameter allows control over where inside the `document.body`
* the HTML is inserted:
* - `'afterbegin'` (default): Inserts right after the opening <body> tag.
* - `'beforeend'`: Inserts right before the closing </body> tag.
* - Any valid position accepted by `insertAdjacentHTML`.
*
* @param {'beforebegin'|'afterbegin'|'beforeend'|'afterend'} [where='afterbegin']
* The position relative to `document.body` where the HTML should be inserted.
*/
static insertTemplate(where?: "beforebegin" | "afterbegin" | "beforeend" | "afterend"): void;
/**
* Options for configuring the NotificationCenter instance.
*
* Allows manual specification of the main elements used by the notification center.
* If not provided, default elements will be selected from the DOM automatically.
*
* @param {Object} options - Configuration object.
* @param {HTMLElement} [options.center=document.getElementById('notifCenter')] - The container element that holds the list of notifications.
* @param {HTMLElement} [options.badge=document.getElementById('notifBadge')] - The badge element used to display the current notification count.
* @param {HTMLElement} [options.button=document.querySelector('.notify-bell')] - The button element that toggles the notification center.
* @param {HTMLElement} [options.overlay=document.querySelector('.notify-overlay')] - The overlay element that covers the screen when the center is visible.
*/
constructor(options?: {
center?: HTMLElement | undefined;
badge?: HTMLElement | undefined;
button?: HTMLElement | undefined;
overlay?: HTMLElement | undefined;
});
/**
* Enable or disable automatic mark-as-read on close.
* @param {boolean} value
*/
setMarkAllAsReadOnClose(value: boolean): void;
/**
* Define how long the remove animation takes (in ms).
* @param {number} ms
*/
setRemoveDelay(ms: number): void;
/**
* Get rendering mode ('text' or 'html') by index.
* @param {number} index
* @returns {'text' | 'html' | null}
*/
getItemMode(index: number): "text" | "html" | null;
/**
* Get a notify element by index.
* @param {number} index
* @returns {HTMLElement}
*/
getItem(index: number): HTMLElement;
/**
* Check if a notify exists at the given index.
* @param {number} index
* @returns {boolean}
*/
hasItem(index: number): boolean;
/**
* Mark a notification index as read.
* @param {number|HTMLElement} index
*/
markAsRead(index: number | HTMLElement): void;
/**
* Add a new notify to the center.
*
* @param {NotifyData} message - Notification content or a full object with title, avatar, and callback.
* @param {'text'|'html'} [mode='text'] - How to treat the message content.
*/
add(message: NotifyData, mode?: "text" | "html"): void;
/**
* Remove a notify by index.
* @param {number} index
*/
remove(index: number): void;
/**
* Clear all notifications safely.
*/
clear(): void;
/**
* Open the notify center.
*/
open(): void;
/**
* Close the notify center.
*/
close(): void;
/**
* Toggle open/close state.
*/
toggle(): void;
/**
* Recalculate the number of notifications based on the actual DOM list.
*/
recount(): void;
/**
* Get current count.
* @returns {number}
*/
get count(): number;
/**
* Destroys the notification center instance, removing all event listeners,
* clearing notifications, and optionally removing DOM elements.
*
* Call this when the notification center is no longer needed to prevent memory leaks.
*
* @returns {void}
*/
destroy(): void;
#private;
}
//# sourceMappingURL=TinyNotifyCenter.d.mts.map