@lesjoursfr/browser-tools/dist/dom.d.ts

Some browser tools for events & DOM manipulation.

export type BrowserToolsDataType = object | string | number | boolean;
type BrowserToolsData = {
    [key: string]: BrowserToolsDataType;
};
declare global {
    interface Window {
        ljbtData: BrowserToolsData;
    }
    interface Document {
        ljbtData: BrowserToolsData;
    }
    interface HTMLElement {
        ljbtData: BrowserToolsData;
    }
}
/**
 * Check if a node is an HTML Element.
 * @param {Node} node the node to test
 * @returns {boolean} true if the node is an HTMLElement
 */
export declare function isCommentNode(node: Node): node is Comment;
/**
 * Check if a node is an HTML Element.
 * @param {Node} node the node to test
 * @returns {boolean} true if the node is an HTMLElement
 */
export declare function isTextNode(node: Node): node is Text;
/**
 * Check if a node is an HTML Element.
 * @param {Node} node the node to test
 * @returns {boolean} true if the node is an HTMLElement
 */
export declare function isHTMLElement(node: Node): node is HTMLElement;
/**
 * Create an HTMLElement from the HTML template.
 * @param {string} template the HTML template
 * @returns {DocumentFragment} The created DocumentFragment
 */
export declare function createFragmentFromTemplate(template: string): DocumentFragment;
/**
 * Create an HTMLElement from the HTML template.
 * @param {string} template the HTML template
 * @returns {HTMLElement} the created HTMLElement
 */
export declare function createFromTemplate(template: string): HTMLElement;
/**
 * Update the given CSS property.
 * If the value is `null` the property will be removed.
 * @param {HTMLElement} node the node to update
 * @param {string|{ [key: string]: string|null }} property multi-word property names are hyphenated (kebab-case) and not camel-cased.
 * @param {string|null} value (default to `null`)
 * @returns {HTMLElement} the element
 */
export declare function updateCSS(node: HTMLElement, property: string | {
    [key: string]: string | null;
}, value?: string | null): HTMLElement;
/**
 * Update the given CSS property.
 * If the value is `null` the property will be removed.
 * @param {string} id the id of the node to update
 * @param {string|{ [key: string]: string|null }} property multi-word property names are hyphenated (kebab-case) and not camel-cased.
 * @param {string|null} value (default to `null`)
 */
export declare function updateCSSOfElement(id: string, property: string | {
    [key: string]: string | null;
}, value?: string | null): void;
/**
 * Update the given CSS property.
 * If the value is `null` the property will be removed.
 * @param {string} selector the CSS selector of the nodes to update
 * @param {string|{ [key: string]: string|null }} property multi-word property names are hyphenated (kebab-case) and not camel-cased.
 * @param {string|null} value (default to `null`)
 */
export declare function updateCSSOfElements(selector: string, property: string | {
    [key: string]: string | null;
}, value?: string | null): void;
/**
 * Check if the node has the given attribute.
 * @param {HTMLElement} node
 * @param {string} attribute
 * @returns {boolean} true or false
 */
export declare function hasAttribute(node: HTMLElement, attribute: string): boolean;
/**
 * Get the given attribute.
 * @param {HTMLElement} node
 * @param {string} attribute
 * @returns {string|null} the value
 */
export declare function getAttribute(node: HTMLElement, attribute: string): string | null;
/**
 * Set the given attribute.
 * If the value is `null` the attribute will be removed.
 * @param {HTMLElement} node
 * @param {string} attribute
 * @param {string|null} value
 * @returns {HTMLElement} the element
 */
export declare function setAttribute(node: HTMLElement, attribute: string, value: string | null): HTMLElement;
/**
 * Get the given data.
 * This function does not change the DOM.
 * If there is no key this function return all data
 * @param {HTMLElement} node
 * @param {string|undefined} key
 * @returns {BrowserToolsDataType|null} the value
 */
export declare function getData(node: HTMLElement, key?: string): BrowserToolsDataType | null;
/**
 * Set the given data.
 * If the value is `null` the data will be removed.
 * This function does not change the DOM.
 * @param {HTMLElement} node
 * @param {string} key
 * @param {BrowserToolsDataType|null} value
 * @returns {HTMLElement} the element
 */
export declare function setData(node: HTMLElement, key: string, value: BrowserToolsDataType | null): HTMLElement;
/**
 * Check if the node has the given tag name, or if its tag name is in the given list.
 * @param {HTMLElement} node the element to check
 * @param {string|Array<string>} tags a tag name or a list of tag name
 * @returns {boolean} true if the node has the given tag name
 */
export declare function hasTagName(node: HTMLElement, tags: string | Array<string>): boolean;
/**
 * Check if the node has the given class name.
 * @param {HTMLElement} node the element to check
 * @param {string} className a class name
 * @returns {boolean} true if the node has the given class name
 */
export declare function hasClass(node: HTMLElement, className: string): boolean;
/**
 * Add the class to the node's class attribute.
 * @param {HTMLElement} node
 * @param {string|Array<string>} className
 * @returns {HTMLElement} the element
 */
export declare function addClass(node: HTMLElement, className: string | Array<string>): HTMLElement;
/**
 * Add the class to the node's class attribute with the given id.
 * @param {string} id
 * @param {string|Array<string>} className
 */
export declare function addClassToElement(id: string, className: string | Array<string>): void;
/**
 * Add the class to the nodes' class attribute that match the given CSS selector.
 * @param {string} selector
 * @param {string|Array<string>} className
 */
export declare function addClassToElements(selector: string, className: string | Array<string>): void;
/**
 * Remove the class from the node's class attribute.
 * @param {HTMLElement} node
 * @param {string|Array<string>} className
 * @returns {HTMLElement} the element
 */
export declare function removeClass(node: HTMLElement, className: string | Array<string>): HTMLElement;
/**
 * Remove the class from the node's class attribute with the given id.
 * @param {string} id
 * @param {string|Array<string>} className
 */
export declare function removeClassFromElement(id: string, className: string | Array<string>): void;
/**
 * Remove the class from the nodes' class attribute that match the given CSS selector.
 * @param {string} selector
 * @param {string|Array<string>} className
 */
export declare function removeClassFromElements(selector: string, className: string | Array<string>): void;
/**
 * Test if the node match the given selector.
 * @param {HTMLElement} node
 * @param {string} selector
 * @returns {boolean} true or false
 */
export declare function is(node: HTMLElement, selector: string): boolean;
/**
 * Get the node's offset.
 * @param {HTMLElement} node
 * @returns {{ top: number, left: number }} The node's offset
 */
export declare function offset(node: HTMLElement): {
    top: number;
    left: number;
};
/**
 * Create a new node.
 * @param {string} tag the tag name of the node
 * @param {object} options optional parameters
 * @param {string} options.innerHTML the HTML code of the node
 * @param {string} options.textContent the text content of the node
 * @param {object} options.attributes attributes of the node
 * @returns {HTMLElement} the created node
 */
export declare function createNodeWith<K extends keyof HTMLElementTagNameMap>(tag: K, { innerHTML, textContent, attributes, }?: {
    innerHTML?: string;
    textContent?: string;
    attributes?: {
        [keyof: string]: string;
    };
}): HTMLElementTagNameMap[K];
/**
 * Replace a node.
 * @param {HTMLElement} node the node to replace
 * @param {HTMLElement} replacement the new node
 * @returns {HTMLElement} the new node
 */
export declare function replaceNodeWith(node: HTMLElement, replacement: HTMLElement): HTMLElement;
/**
 * Replace the node by its child nodes.
 * @param {HTMLElement} node the node to replace
 * @returns {Array<ChildNode>} its child nodes
 */
export declare function unwrapNode(node: HTMLElement): ChildNode[];
/**
 * Replace the node by its text content.
 * @param {HTMLElement} node the node to replace
 * @returns {Text} the created Text node
 */
export declare function textifyNode(node: HTMLElement): Text;
/**
 * Know if a tag si a self-closing tag
 * @param {string} tagName
 * @returns {boolean}
 */
export declare function isSelfClosing(tagName: string): boolean;
/**
 * Remove all node's child nodes that pass the test implemented by the provided function.
 * @param {ChildNode} node the node to process
 * @param {Function} callbackFn the predicate
 */
export declare function removeNodes(node: ChildNode, callbackFn: (node: ChildNode) => boolean): void;
/**
 * Remove recursively all node's child nodes that pass the test implemented by the provided function.
 * @param {ChildNode} node the node to process
 * @param {Function} callbackFn the predicate
 */
export declare function removeNodesRecursively(node: ChildNode, callbackFn: (node: ChildNode) => boolean): void;
/**
 * Remove all node's child nodes that are empty text nodes.
 * @param {ChildNode} node the node to process
 */
export declare function removeEmptyTextNodes(node: ChildNode): void;
/**
 * Remove all node's child nodes that are comment nodes.
 * @param {ChildNode} node the node to process
 */
export declare function removeCommentNodes(node: ChildNode): void;
/**
 * Reset all node's attributes to the given list.
 * @param {HTMLElement} node the node
 * @param {object} targetAttributes the requested node's attributes
 */
export declare function resetAttributesTo(node: HTMLElement, targetAttributes: {
    [keyof: string]: string;
}): void;
/**
 * Replace the node's style attribute by some regular nodes (`<b>`, `<i>`, `<u>` or `<s>`).
 * @param {HTMLElement} node the node to process
 * @returns {HTMLElement} the new node
 */
export declare function replaceNodeStyleByTag(node: HTMLElement): HTMLElement;
/**
 * Remove all leading & trailing node's child nodes that match the given tag.
 * @param {HTMLElement} node the node to process
 * @param {string} tag the tag
 */
export declare function trimTag(node: HTMLElement, tag: string): void;
/**
 * Replaces text in a string, using a regular expression or search string.
 * @param {HTMLElement} node the node to process
 * @param {string | RegExp} searchValue A string or regular expression to search for. If searchValue is a regex, then it must have the global (g) flag set, or a TypeError is thrown.
 * @param {string | Function} replacer A string containing the text to replace or a function that returns the replacement text.
 * @param {boolean} textOnly If true, any HTML will be rendered as text. Defaults to false
 */
export declare function replaceAllText(node: HTMLElement, searchValue: string | RegExp, replacer: string | ((substring: string, ...args: any[]) => string), textOnly?: boolean): void;
export {};