@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
228 lines (227 loc) • 8.71 kB
TypeScript
import { Be } from '../be.js';
import type { CommonHandler, HandlerCallBackFn, HandlerCallbackProps } from '../types.js';
/**
* Enum representing the available walker methods.
*/
export declare enum walkerMethods {
up = "up",
next = "next",
previous = "previous",
siblings = "siblings",
children = "children",
closest = "closest",
lastChild = "lastChild",
firstChild = "firstChild",
find = "find",
findAll = "findAll",
without = "without"
}
export type WalkerMethods = keyof typeof walkerMethods;
/**
* Interface defining the structure for walk handler actions.
*/
export interface WalkHandlerHandle {
up?: {
selector: string;
callback?: (element: HandlerCallbackProps) => void;
};
next?: {
selector: string;
callback?: (element: HandlerCallbackProps) => void;
};
previous?: {
selector: string;
callback?: (element: HandlerCallbackProps) => void;
};
siblings?: {
selector: string;
callback?: (element: HandlerCallbackProps) => void;
};
children?: {
selector: string;
callback?: (element: HandlerCallbackProps) => void;
};
closest?: {
selector: string;
callback?: (element: HandlerCallbackProps) => void;
};
lastChild?: {
selector: string;
callback?: (element: HandlerCallbackProps) => void;
};
firstChild?: {
selector: string;
callback?: (element: HandlerCallbackProps) => void;
};
find?: {
selector: string;
callback?: (element: HandlerCallbackProps) => void;
};
findAll?: {
selector: string;
callback?: (element: HandlerCallbackProps) => void;
};
without?: {
selector: string;
callback?: (element: HandlerCallbackProps) => void;
};
}
/**
* Interface defining the methods available in the WalkHandler.
*/
export interface WalkHandlerInterface {
up(qy: string, callback?: HandlerCallBackFn): Be;
up(callback?: HandlerCallBackFn): Be;
next(qy: string, callback?: HandlerCallBackFn): Be;
next(callback?: HandlerCallBackFn): Be;
previous(qy: string, callback?: HandlerCallBackFn): Be;
previous(callback?: HandlerCallBackFn): Be;
siblings(qy: string, callback?: HandlerCallBackFn): Be;
siblings(callback?: HandlerCallBackFn): Be;
children(qy: string, callback?: HandlerCallBackFn): Be;
children(callback?: HandlerCallBackFn): Be;
closest(qy: string, callback?: HandlerCallBackFn): Be;
closest(callback?: HandlerCallBackFn): Be;
lastChild(qy: string, callback?: HandlerCallBackFn): Be;
lastChild(callback?: HandlerCallBackFn): Be;
firstChild(qy: string, callback?: HandlerCallBackFn): Be;
firstChild(callback?: HandlerCallBackFn): Be;
find(qy: string, callback?: HandlerCallBackFn): Be | null;
findAll(qy: string, callback?: HandlerCallBackFn): Be | null;
without(qy: string, callback?: HandlerCallBackFn): Be;
}
/**
* Handles DOM traversal operations for Be elements.
*/
export declare class WalkHandler implements WalkHandlerInterface, CommonHandler<WalkHandler, WalkHandlerHandle> {
static methods: walkerMethods[];
private beElement;
/**
* Creates an instance of WalkHandler.
* @param beElement - The Be element to operate on.
*/
constructor(beElement: Be);
methods: string[];
valueOf(): unknown;
/**
* Handles multiple walk operations.
* @param actions - The actions to perform.
* @returns The Be instance for method chaining.
*/
handle(actions: WalkHandlerHandle): Be;
/**
* Traverses up the DOM tree.
* @param qy - Optional selector or callback function.
* @param callback - Optional callback function.
* @returns The Be instance for method chaining.
* @example
* // HTML: <div id="child"></div><div id="parent"><div id="child"></div></div>
* const beInstance = be('#child');
* beInstance.up(); // Traverses to the parent element
*/
up(qy?: string | HandlerCallBackFn, callback?: HandlerCallBackFn): Be;
/**
* Traverses to the next sibling element.
* @param qy - Optional selector or callback function.
* @param callback - Optional callback function.
* @returns The Be instance for method chaining.
* @example
* // HTML: <div id="sibling1"></div><div id="sibling2"></div>
* const beInstance = be('#sibling1');
* beInstance.next(); // Traverses to the next sibling
*/
next(qy?: string | HandlerCallBackFn, callback?: HandlerCallBackFn): Be;
/**
* Traverses to the previous sibling element.
* @param qy - Optional selector or callback function.
* @param callback - Optional callback function.
* @returns The Be instance for method chaining.
* @example
* // HTML: <div id="sibling1"></div><div id="sibling2"></div>
* const beInstance = be('#sibling2');
* beInstance.previous(); // Traverses to the previous sibling
*/
previous(qy?: string | HandlerCallBackFn, callback?: HandlerCallBackFn): Be;
/**
* Filters out elements that match the given selector.
* @param qy - The selector to match elements against for removal.
* @param callback - Optional callback function.
* @returns The Be instance for method chaining.
*/
without(qy: string, callback?: HandlerCallBackFn): Be;
/**
* Gets all sibling elements.
* @param qy - Optional selector or callback function.
* @param callback - Optional callback function.
* @returns The Be instance for method chaining.
* @example
* // HTML: <div id="sibling1"></div><div id="sibling2"></div>
* const beInstance = be('#sibling1');
* beInstance.siblings(); // Finds all sibling elements
*/
siblings(qy?: string | HandlerCallBackFn, callback?: HandlerCallBackFn): Be;
/**
* Gets all child elements.
* @param qy - Optional selector or callback function.
* @param callback - Optional callback function.
* @returns The Be instance for method chaining.
* @example
* // HTML: <div id="parent"><div id="child"></div></div>
* const beInstance = be('#parent');
* beInstance.children(); // Finds all child elements
*/
children(qy?: string | HandlerCallBackFn, callback?: HandlerCallBackFn): Be;
/**
* Finds the closest ancestor that matches the selector.
* @param qy - Optional selector or callback function.
* @param callback - Optional callback function.
* @returns The Be instance for method chaining.
* @example
* // HTML: <div id="ancestor"><div id="parent"><div id="child"></div></div></div>
* const beInstance = be('#child');
* beInstance.closest('#ancestor'); // Finds the closest ancestor matching the selector
*/
closest(qy?: string | HandlerCallBackFn, callback?: HandlerCallBackFn): Be;
/**
* Gets the last child element.
* @param qy - Optional selector or callback function.
* @param callback - Optional callback function.
* @returns The Be instance for method chaining.
*/
lastChild(qy?: string | HandlerCallBackFn, callback?: HandlerCallBackFn): Be;
/**
* Gets the first child element.
* @param qy - Optional selector or callback function.
* @param callback - Optional callback function.
* @returns The Be instance for method chaining.
*/
firstChild(qy?: string | HandlerCallBackFn, callback?: HandlerCallBackFn): Be;
/**
* Finds the first descendant that matches the selector.
* @param qy - The selector to match against.
* @param callback - Optional callback function.
* @returns The Be instance for method chaining.
*/
find(qy: string, callback?: HandlerCallBackFn): Be | null;
/**
* Finds all descendants that match the selector.
* @param qy - The selector to match against.
* @param callback - Optional callback function.
* @returns The Be instance for method chaining.
*/
findAll(qy: string, callback?: HandlerCallBackFn): Be | null;
/**
* Helper method to create a function for each walk method.
* @param method - The walk method to create a function for.
* @returns A function that performs the specified walk method.
*/
private methodize;
/**
* Helper method to select elements based on the specified method and selector.
* @param element - The starting element.
* @param direction - The direction to traverse.
* @param selector - Optional selector to filter elements.
* @returns The selected HTMLElement or null if not found.
*/
private selectWhile;
}