powerpagestoolkit
Version:
Reference, manipulate, and engage with Power Pages sites through the nodes in the DOM; use a variety of custom methods that allow customizing your power pages site quicker and easier.
195 lines (194 loc) • 8.97 kB
TypeScript
/// <reference path="../globals.d.ts" />
import type EventManager from "../ancillary/EventManager.d.ts";
import type ValueManager from "../ancillary/ValueManager.d.ts";
import type VisibilityManager from "./VisibilityManager.d.ts";
export default abstract class DOMNodeReference {
static instances: DOMNodeReference[];
[key: symbol]: (...arg: any[]) => any;
target: Element | string;
logicalName?: string;
root: Element;
protected timeoutMs: number;
protected isLoaded: boolean;
protected changeEmitter: HTMLDivElement | HTMLElement;
/**
* The value of the element that this node represents
* stays in syncs with the live DOM elements?.,m via event handler
*/
get value(): any;
set value(newValue: any);
get checked(): boolean;
set defaultDisplay(newValue: string | null);
/**
* The element targeted when instantiating DOMNodeReference.
* Made available in order to perform normal DOM traversal,
* or access properties not available through this class.
*/
element: HTMLElement;
visibilityManager: VisibilityManager | null;
valueManager: ValueManager | null;
eventManager: EventManager | null;
/**
* Creates an instance of DOMNodeReference.
* @param target - The CSS selector to find the desired DOM element.
* @param root - Optionally specify the element within to search for the element targeted by 'target'
* Defaults to 'document.body'
*/
/******/ /******/ constructor(target: Element | string, root: Element | undefined, timeoutMs: number);
protected abstract initValueManager(): void;
protected abstract initVisibilityManager(): void;
protected abstract initEventManager(): void;
protected _extractLogicalName(target: Element | string): string;
protected _valueSync(): void;
private containsMultiSelectClass;
protected _initChangeEmitter(): void;
protected _determineEventType(): keyof GlobalEventHandlersEventMap;
protected _isDateInput(): boolean;
protected _isValidFormElement(element: Element): element is FormElement;
protected _dateSync(element: HTMLInputElement): Promise<void>;
protected _bindMethods(): void;
/**
* Updates the value and checked state based on element type
* @public
*/
updateValue(e?: Event): Promise<void>;
protected triggerDependentsHandlers(): void;
/**
* Sets up an event listener based on the specified event type, executing the specified
* event handler
* @param eventType - The DOM event to watch for
* @param eventHandler - The callback function that runs when the
* specified event occurs.
* @returns - Instance of this [provides option to method chain]
*/
on<K extends keyof GlobalEventHandlersEventMap>(eventType: K, eventHandler: (this: DOMNodeReference, e: GlobalEventHandlersEventMap[K]) => void): DOMNodeReference;
/**
* Hides the element by setting its display style to "none".
* @returns - Instance of this [provides option to method chain]
*/
hide(): DOMNodeReference;
/**
* Shows the element by restoring its default display style.
* @returns - Instance of this [provides option to method chain]
*/
show(): DOMNodeReference;
/**
* @param shouldShow - Either a function that returns true or false,
* or a natural boolean to determine the visibility of this
* @returns - Instance of this [provides option to method chain]
*/
toggleVisibility(shouldShow: EvaluationFunction | boolean): DOMNodeReference;
/**
* Sets the value of the HTML element.
* @param value - The value to set for the HTML element.
* for parents of boolean radios, pass true or false as value, or
* an expression returning a boolean
* @returns - Instance of this [provides option to method chain]
*/
setValue(value: (() => any) | any): DOMNodeReference;
/**
* Disables the element so that users cannot input any data
* @returns - Instance of this [provides option to method chain]
*/
disable(): DOMNodeReference;
/**
* Clears all values and states of the element.
* Handles different input types appropriately, and can be called
* on an element containing N child inputs to clear all
*/
clearValue(): void;
protected _getChildren(): DOMNodeReference[] | null;
protected callAgainstChildrenInputs(callback: (child: DOMNodeReference) => any): void;
/**
* Enables the element so that users can input data
* @returns - Instance of this [provides option to method chain]
*/
enable(): DOMNodeReference;
/**
* @param elements - The elements to prepend to the element targeted by this.
* @returns - Instance of this [provides option to method chain]
*/
prepend(...elements: HTMLElement[]): DOMNodeReference;
/**
* Appends child elements to the HTML element.
* @param elements - The elements to append to the element targeted by this.
* @returns - Instance of this [provides option to method chain]
*/
append(...elements: HTMLElement[]): DOMNodeReference;
/**
* Inserts elements before the HTML element.
* @param elements - The elements to insert before the HTML element.
* @returns - Instance of this [provides option to method chain]
*/
before(...elements: HTMLElement[]): DOMNodeReference;
/**
* Inserts elements after the HTML element.
* @param elements - The elements to insert after the HTML element.
* @returns - Instance of this [provides option to method chain]
*/
after(...elements: HTMLElement[]): DOMNodeReference;
/**
* Retrieves the label associated with the HTML element.
* @returns The label element associated with this element.
*/
getLabel(): HTMLElement | null;
/**
* Adds a tooltip with specified text to the label associated with the HTML element.
* @param innerHTML - The innerHTML to append into the tooltip.
* @param containerStyle - Optional object with CSS Styles to apply to the info element
* @returns - Instance of this [provides option to method chain]
*/
addLabelTooltip(innerHTML: string, containerStyle?: Partial<CSSStyleDeclaration>): DOMNodeReference;
/**
* Adds a tooltip with the specified text to the element
* @param innerHTML - The innerHTML to append into the tooltip
* @param containerStyle - Optional object with CSS Styles to apply to the info element
* @returns - Instance of this [provides option to method chain]
*/
addTooltip(innerHTML: string, containerStyle?: Partial<CSSStyleDeclaration>): DOMNodeReference;
/**
* Sets the inner HTML content of the HTML element.
* @param string - The text to set as the inner HTML of the element.
* @returns - Instance of this [provides option to method chain]
*/
set innerHTML(innerHTML: string);
/**
* Removes this element from the DOM
* @returns - Instance of this [provides option to method chain]
*/
remove(): this;
/**
* Sets inline CSS styles on the element.
* @param options - An object containing CSS property-value pairs, e.g., { display: 'block' }.
* @returns The instance, enabling method chaining.
*/
setStyle(options: Partial<CSSStyleDeclaration>): DOMNodeReference;
/**
* Applies a business rule to manage visibility, required state, value, and disabled state dynamically.
* @see {@link BusinessRule}
* @param rule The business rule containing conditions for various actions.
* @param dependencies For re-evaluation of conditions when the state of the dependencies change
* @returns Instance of this for method chaining.
*/
applyBusinessRule(rule: BusinessRule, dependencies: DependencyArray<DOMNodeReference>): DOMNodeReference;
private _setupRequirementsValidator;
private _createBusinessRuleHandler;
private _createValidator;
private _configureDependencyTracking;
/**
* Sets the required level for the field by adding or removing the "required-field" class on the label.
*
* @param isRequired Determines whether the field should be marked as required.
* If true, the "required-field" class is added to the label; if false, it is removed.
* @returns Instance of this [provides option to method chain]
*/
setRequiredLevel(isRequired: EvaluationFunction | boolean): DOMNodeReference;
/**
* Executes a callback function once the element is fully loaded.
* If the element is already loaded, the callback is called immediately.
* Otherwise, a MutationObserver is used to detect when the element is added to the DOM.
* @param callback A callback function to execute once the element is loaded.
* Receives instance of 'this' as an argument
*/
onceLoaded(callback: (instance: DOMNodeReference) => any): void;
}