@medyll/idae-be
Version:
A modern, lightweight, and extensible DOM manipulation library built with TypeScript. Designed for precise element targeting and manipulation using a callback-based approach. Features include advanced DOM traversal, event handling, style management, attri
223 lines (222 loc) • 9.3 kB
TypeScript
import { Be } from '../be.js';
import type { HandlerCallbackProps, HandlerCallBackFn, CommonHandler } from '../types.js';
declare enum domMethods {
update = "update",
append = "append",
prepend = "prepend",
insert = "insert",
afterBegin = "afterBegin",
afterEnd = "afterEnd",
beforeBegin = "beforeBegin",
beforeEnd = "beforeEnd",
remove = "remove",
wrap = "wrap",
normalize = "normalize",
replace = "replace",
clear = "clear",
unwrap = "unwrap"
}
type Content = string | HTMLElement | Be;
export interface DomHandlerHandle {
insert?: {
content: string | HTMLElement | Be;
mode: 'afterbegin' | 'afterend' | 'beforebegin' | 'beforeend';
callback?: (element: HandlerCallbackProps) => void;
};
update?: {
content: Content;
callback?: (element: HandlerCallbackProps) => void;
};
append?: {
content: Content;
callback?: (element: HandlerCallbackProps) => void;
};
prepend?: {
content: Content;
callback?: (element: HandlerCallbackProps) => void;
};
afterbegin?: {
content: Content;
callback?: (element: HandlerCallbackProps) => void;
};
afterend?: {
content: Content;
callback?: (element: HandlerCallbackProps) => void;
};
beforebegin?: {
content: Content;
callback?: (element: HandlerCallbackProps) => void;
};
beforeend?: {
content: Content;
callback?: (element: HandlerCallbackProps) => void;
};
remove?: true;
replace?: {
content: Content;
callback?: (element: HandlerCallbackProps) => void;
};
wrap?: {
tag: string;
callback?: (element: HandlerCallbackProps) => void;
};
normalize?: true;
clear?: true;
callback?: (element: HandlerCallbackProps) => void;
}
export interface DomHandlerInterface {
insert(mode: 'afterbegin' | 'afterend' | 'beforebegin' | 'beforeend', element: HTMLElement | Be, callback?: HandlerCallBackFn): Be;
}
/**
* Handles DOM manipulation operations for Be elements.
*/
export declare class DomHandler implements DomHandlerInterface, CommonHandler<DomHandler, DomHandlerHandle> {
private beElement;
static methods: domMethods[];
constructor(element: Be);
methods: string[] | keyof DomHandler;
/**
* Handles various DOM operations on the element(s).
* @param actions An object specifying the DOM actions to perform.
* @param actions.update - HTML content to update the element(s) with.
* @param actions.append - Content to append to the element(s).
* @param actions.prepend - Content to prepend to the element(s).
* @param actions.remove - If true, removes the element(s) from the DOM.
* @param actions.replace - Content to replace the element(s) with.
* @param actions.clear - If true, clears the content of the element(s).
* @returns The Be instance for method chaining.
*/
handle(actions: DomHandlerHandle): Be;
/**
* Updates the content of the element(s).
* @param content - The new content to set.
* @param callback - Optional callback function.
* @returns The Be instance for method chaining.
* @example
* // HTML: <div id="test"></div>
* const beInstance = be('#test');
* beInstance.update('<p>Updated content</p>'); // Updates the content of the element
*/
update(content: string, callback?: HandlerCallBackFn): Be;
/**
* Appends content to the element(s).
* @param content - The content to append (string, HTMLElement, or Be instance).
* @param callback - Optional callback function to execute after appending.
* @returns The Be instance for method chaining.
* @example
* // HTML: <div id="test"></div>
* const beInstance = be('#test');
* beInstance.append('<span>Appended</span>'); // Appends content to the element
*/
append(content: Content, callback?: HandlerCallBackFn): Be;
/**
* Prepends content to the element(s).
* @param content - The content to prepend (string, HTMLElement, or Be instance).
* @param callback - Optional callback function to execute after prepending.
* @returns The Be instance for method chaining.
* @example
* // HTML: <div id="test"></div>
* const beInstance = be('#test');
* beInstance.prepend('<span>Prepended</span>'); // Prepends content to the element
*/
prepend(content: Content, callback?: HandlerCallBackFn): Be;
/**
* Inserts content into the element(s) at a specified position.
* @param mode - The position to insert the content ('afterbegin', 'afterend', 'beforebegin', 'beforeend').
* @param element - The content to insert (string, HTMLElement, or Be instance).
* @param callback - Optional callback function to execute after insertion.
* @returns The Be instance for method chaining.
* @example
* // HTML: <div id="test"></div>
* const beInstance = be('#test');
* beInstance.insert('afterbegin', '<span>Inserted</span>'); // Inserts content at the beginning
*/
insert(mode: 'afterbegin' | 'afterend' | 'beforebegin' | 'beforeend', element: HTMLElement | Be | string, callback?: HandlerCallBackFn): Be;
/**
* Inserts content at the beginning of the element(s).
* @param content - The content to insert (string, HTMLElement, or Be instance).
* @param callback - Optional callback function to execute after insertion.
* @returns The Be instance for method chaining.
*/
afterBegin(content: Content, callback?: HandlerCallBackFn): Be;
/**
* Inserts content after the element(s).
* @param content - The content to insert (string, HTMLElement, or Be instance).
* @param callback - Optional callback function to execute after insertion.
* @returns The Be instance for method chaining.
*/
afterEnd(content: Content, callback?: HandlerCallBackFn): Be;
/**
* Inserts content before the element(s).
* @param content - The content to insert (string, HTMLElement, or Be instance).
* @param callback - Optional callback function to execute after insertion.
* @returns The Be instance for method chaining.
*/
beforeBegin(content: Content, callback?: HandlerCallBackFn): Be;
/**
* Inserts content at the end of the element(s).
* @param content - The content to insert (string, HTMLElement, or Be instance).
* @param callback - Optional callback function to execute after insertion.
* @returns The Be instance for method chaining.
*/
beforeEnd(content: Content, callback?: HandlerCallBackFn): Be;
/**
* Replaces the element(s) with new content.
* @param content - The content to replace the element(s) with (string, HTMLElement, or Be instance).
* @param callback - Optional callback function to execute after replacement.
* @returns The Be instance for method chaining.
*/
replace(content: Content, callback?: HandlerCallBackFn): Be;
/**
* Removes the element(s) from the DOM.
* @param callback - Optional callback function to execute after removal.
* @returns The Be instance for method chaining.
* @example
* // HTML: <div id="test"><span>To be removed</span></div>
* const beInstance = be('#test span');
* beInstance.remove(); // Removes the span element
*/
remove(callback?: HandlerCallBackFn): Be;
/**
* Clears the content of the element(s).
* @param callback - Optional callback function to execute after clearing.
* @returns The Be instance for method chaining.
* @example
* // HTML: <div id="test"><span>Content</span></div>
* const beInstance = be('#test');
* beInstance.clear(); // Clears the content of the div
*/
clear(callback?: HandlerCallBackFn): Be;
/**
* Normalizes the content of the element(s).
* @param callback - Optional callback function to execute after normalization.
* @returns The Be instance for method chaining.
*/
normalize(callback?: HandlerCallBackFn): Be;
/**
* Wraps the element(s) with a new element.
* @param tag - The tag name of the wrapper element (default is 'div').
* @param callback - Optional callback function to execute after wrapping.
* @returns The Be instance for method chaining.
* @example
* // HTML: <div id="test"></div>
* const beInstance = be('#test');
* beInstance.wrap('section'); // Wraps the div with a <section> element
*/
wrap(tag?: string, callback?: HandlerCallBackFn): Be;
/**
* Removes the parent element of the selected element(s), keeping the selected element(s) in the DOM.
* @param callback - Optional callback function to execute after unwrapping.
* @returns The Be instance for method chaining.
* @example
* // HTML: <div id="wrapper"><span id="child">Content</span></div>
* const beInstance = be('#child');
* beInstance.unwrap(); // Removes the <div id="wrapper">, keeping <span id="child">
*/
unwrap(callback?: HandlerCallBackFn): Be;
private adjacentElement;
private normalizeContent;
private insertContent;
valueOf(): string | null;
}
export {};