/** * Document coordinates of an element (`offset()`). * @typedef {object} Offset * @property {number} top * @property {number} left */ /** * Coordinates of an element relative to its offset parent (`position()`). * @typedef {object} Position * @property {number} top * @property {number} left */ /** * CSS properties to animate; numbers are pixels. * @typedef {{[property: string]: string | number}} AnimationProperties */ /** * Animation length in ms, or `'fast'` (200) / `'slow'` (600); anything else is 400. * @typedef {number | 'fast' | 'slow'} Duration */ /** * @typedef {(this: HTMLElement, index: number, element: HTMLElement) => boolean} FilterFunction */ /** * Returns the class name(s) to add/remove, space-separated. * @typedef {(this: HTMLElement, index: number, currentClass: string) => string} ClassFunction */ /** * Returns the content to insert into one target; receives that target's current inner HTML. * @typedef {(this: HTMLElement, index: number, currentContent: string) => string | HTMLElement | DommaCollection} ContentFunction */ /** * Returns the wrapper for one element. * @typedef {(this: HTMLElement, index: number) => string | HTMLElement | DommaCollection} WrapperFunction */ /** * Returns the new width/height of one element; receives its current one. * @typedef {(this: HTMLElement, index: number, currentValue: number) => number | string} ValueFunction */ /** * An event handler; `this` is the element (the matched descendant for a delegated handler). * @template {Event} [E=Event] * @typedef {(this: HTMLElement, event: E) => void} EventHandler */ /** * What `$()` accepts: a CSS selector or an HTML string (`'
  • One
  • '`), a node, a NodeList or * HTMLCollection, an array (only its HTMLElements are kept) or another collection. * @typedef {string | Node | NodeList | HTMLCollection | Element[] | DommaCollection} DommaSelector */ /** * Sanitisation options for `html()`. * @typedef {object} DommaHtmlOptions * @property {boolean} [safe=true] - Sanitise content (true = safe, false = raw - TRUSTED content only) * @property {'default'|'strict'|'basic'} [preset='default'] - Sanitiser preset * @property {string[]} [allowedTags] - Custom allowed HTML tags (overrides the preset) * @property {string[]} [allowedAttrs] - Custom allowed attributes (overrides the preset) * @property {boolean} [allowDataAttrs] - Allow data-* attributes */ /** * jQuery-compatible chainable DOM collection - what `$()` returns. * Elements are also reachable by index (`$('li')[0]`, same as `get(0)`). */ export class DommaCollection { /** * @param {DommaSelector} [selector] - CSS selector, HTML string, element(s) or a collection * @param {Document | Element | DocumentFragment} [context] - Where to look for a CSS selector (default: document) */ constructor(selector?: DommaSelector, context?: Document | Element | DocumentFragment); /** * The matched elements. * @type {HTMLElement[]} */ elements: HTMLElement[]; /** * Number of matched elements. * @type {number} */ length: number; /** * Get descendants matching selector. * @param {string} selector * @returns {DommaCollection} */ find(selector: string): DommaCollection; /** * Get immediate children, optionally filtered by selector. * @param {string} [selector] * @returns {DommaCollection} */ children(selector?: string): DommaCollection; /** * Get parent of each element, optionally filtered by selector. * @param {string} [selector] * @returns {DommaCollection} */ parent(selector?: string): DommaCollection; /** * Get all ancestors, optionally filtered by selector. * @param {string} [selector] * @returns {DommaCollection} */ parents(selector?: string): DommaCollection; /** * Get closest ancestor matching selector. * @param {string} selector * @returns {DommaCollection} */ closest(selector: string): DommaCollection; /** * Get siblings, optionally filtered by selector. * @param {string} [selector] * @returns {DommaCollection} */ siblings(selector?: string): DommaCollection; /** * Get next sibling, optionally filtered by selector. * @param {string} [selector] * @returns {DommaCollection} */ next(selector?: string): DommaCollection; /** * Get all following siblings, optionally filtered by selector. * @param {string} [selector] * @returns {DommaCollection} */ nextAll(selector?: string): DommaCollection; /** * Get previous sibling, optionally filtered by selector. * @param {string} [selector] * @returns {DommaCollection} */ prev(selector?: string): DommaCollection; /** * Get all preceding siblings, optionally filtered by selector. * @param {string} [selector] * @returns {DommaCollection} */ prevAll(selector?: string): DommaCollection; /** * Get first element in collection. * @returns {DommaCollection} */ first(): DommaCollection; /** * Get last element in collection. * @returns {DommaCollection} */ last(): DommaCollection; /** * Get element at index. * @param {number} index * @returns {DommaCollection} */ eq(index: number): DommaCollection; /** * Get every element as an array. * @overload * @returns {HTMLElement[]} */ get(): HTMLElement[]; /** * Get the raw element at index (negative counts from the end). * @overload * @param {number} index * @returns {HTMLElement|undefined} */ get(index: number): HTMLElement | undefined; /** * Filter elements by selector or function. * @param {string|FilterFunction} selector * @returns {DommaCollection} */ filter(selector: string | FilterFunction): DommaCollection; /** * Remove elements matching selector from collection. * @param {string|FilterFunction} selector * @returns {DommaCollection} */ not(selector: string | FilterFunction): DommaCollection; /** * Check if any element matches selector. * @param {string} selector * @returns {boolean} */ is(selector: string): boolean; /** * Filter elements that have descendants matching selector. * @param {string} selector * @returns {DommaCollection} */ has(selector: string): DommaCollection; /** * Add elements to the collection. * @param {DommaSelector} selector * @returns {DommaCollection} */ add(selector: DommaSelector): DommaCollection; /** * Get children including text nodes. * @returns {DommaCollection} */ contents(): DommaCollection; /** * Convert to array. * @returns {HTMLElement[]} */ toArray(): HTMLElement[]; /** * Index of the first element among its siblings (-1 when it has no parent). * @overload * @returns {number} */ index(): number; /** * Index of the first element within the elements matching a selector. * @overload * @param {string} selector * @returns {number} */ index(selector: string): number; /** * Index of an element within this collection. * @overload * @param {HTMLElement} element * @returns {number} */ index(element: HTMLElement): number; /** * Iterate over each element. * @param {(this: HTMLElement, index: number, element: HTMLElement) => void} callback * @returns {this} */ each(callback: (this: HTMLElement, index: number, element: HTMLElement) => void): this; /** * Get the inner HTML of the first element ('' when the collection is empty). * @overload * @returns {string} */ html(): string; /** * Set the inner HTML of every element, sanitised unless `options.safe` is false. * @overload * @param {string} content - HTML content to set * @param {DommaHtmlOptions} [options] - Sanitisation options * @returns {this} */ html(content: string, options?: DommaHtmlOptions | undefined): this; /** * Get the combined text content of every element. * @overload * @returns {string} */ text(): string; /** * Set the text content of every element. * @overload * @param {string} content * @returns {this} */ text(content: string): this; /** * Get the value of the first form element: an array for a multiple select, undefined for an unchecked checkbox/radio or an empty collection. * @overload * @returns {string|string[]|undefined} */ val(): string | string[] | undefined; /** * Set the value of every form element (checks checkboxes/radios whose value matches; selects options of a multiple select). * @overload * @param {string|string[]} value * @returns {this} */ val(value: string | string[]): this; /** * Set several attributes on every element. * @overload * @param {Record} attributes * @returns {this} */ attr(attributes: Record): this; /** * Get an attribute of the first element (null when absent, undefined when the collection is empty). * @overload * @param {string} name * @returns {string|null|undefined} */ attr(name: string): string | null | undefined; /** * Set an attribute on every element. * @overload * @param {string} name * @param {string} value * @returns {this} */ attr(name: string, value: string): this; /** * Remove attribute(s) - space-separated names. * @param {string} name * @returns {this} */ removeAttr(name: string): this; /** * Set several properties on every element. * @overload * @param {Record} properties * @returns {this} */ prop(properties: Record): this; /** * Get a property of the first element. * @overload * @param {string} name * @returns {any} */ prop(name: string): any; /** * Set a property on every element. * @overload * @param {string} name * @param {any} value * @returns {this} */ prop(name: string, value: any): this; /** * Remove property. * @param {string} name * @returns {this} */ removeProp(name: string): this; /** * Get every data attribute of the first element (undefined when the collection is empty). * @overload * @returns {Record|undefined} */ data(): Record | undefined; /** * Set several data attributes on every element. * @overload * @param {Record} data * @returns {this} */ data(data: Record): this; /** * Get a data attribute of the first element (camelCase key). * @overload * @param {string} key * @returns {string|undefined} */ data(key: string): string | undefined; /** * Set a data attribute on every element. * @overload * @param {string} key * @param {any} value * @returns {this} */ data(key: string, value: any): this; /** * Remove data attribute. * @param {string} key * @returns {this} */ removeData(key: string): this; /** * Set several CSS properties on every element. * @overload * @param {Record} properties * @returns {this} */ css(properties: Record): this; /** * Get a computed CSS property of the first element ('' when the collection is empty). * @overload * @param {string} property * @returns {string} */ css(property: string): string; /** * Set a CSS property on every element. * @overload * @param {string} property * @param {string|number} value * @returns {this} */ css(property: string, value: string | number): this; /** * Add class(es) - space-separated. * @param {string|ClassFunction} className * @returns {this} */ addClass(className: string | ClassFunction): this; /** * Remove class(es) - space-separated, or every class when no argument is given. * @param {string|ClassFunction} [className] * @returns {this} */ removeClass(className?: string | ClassFunction): this; /** * Toggle class(es). * @param {string|((this: HTMLElement, index: number, currentClass: string, state?: boolean) => string)} className * @param {boolean} [state] * @returns {this} */ toggleClass(className: string | ((this: HTMLElement, index: number, currentClass: string, state?: boolean) => string), state?: boolean): this; /** * Check if any element has class. * @param {string} className * @returns {boolean} */ hasClass(className: string): boolean; /** * Append content to each element. * * An element or collection is **moved** into place, so the node you built * is the node in the page and any handler bound to it beforehand still * fires. A markup string is parsed fresh for each target. Appending into * several targets at once copies for all but the last - see `_getNodes`. * * @param {string|HTMLElement|DommaCollection|ContentFunction} content * @returns {this} */ append(content: string | HTMLElement | DommaCollection | ContentFunction): this; /** * Prepend content to each element. * @param {string|HTMLElement|DommaCollection|ContentFunction} content * @returns {this} */ prepend(content: string | HTMLElement | DommaCollection | ContentFunction): this; /** * Insert content after each element. * @param {string|HTMLElement|DommaCollection|ContentFunction} content * @returns {this} */ after(content: string | HTMLElement | DommaCollection | ContentFunction): this; /** * Insert content before each element. * @param {string|HTMLElement|DommaCollection|ContentFunction} content * @returns {this} */ before(content: string | HTMLElement | DommaCollection | ContentFunction): this; /** * Append elements to target. * @param {DommaSelector} target * @returns {this} */ appendTo(target: DommaSelector): this; /** * Prepend elements to target. * @param {DommaSelector} target * @returns {this} */ prependTo(target: DommaSelector): this; /** * Insert elements after target. * @param {DommaSelector} target * @returns {this} */ insertAfter(target: DommaSelector): this; /** * Insert elements before target. * @param {DommaSelector} target * @returns {this} */ insertBefore(target: DommaSelector): this; /** * Wrap each element with structure. * @param {string|HTMLElement|DommaCollection|WrapperFunction} wrapper * @returns {this} */ wrap(wrapper: string | HTMLElement | DommaCollection | WrapperFunction): this; /** * Wrap all elements together with structure. * @param {string|HTMLElement|DommaCollection} wrapper * @returns {this} */ wrapAll(wrapper: string | HTMLElement | DommaCollection): this; /** * Wrap inner contents of each element. * @param {string|HTMLElement|DommaCollection|WrapperFunction} wrapper * @returns {this} */ wrapInner(wrapper: string | HTMLElement | DommaCollection | WrapperFunction): this; /** * Remove parent wrapper from each element. * @param {string} [selector] * @returns {this} */ unwrap(selector?: string): this; /** * Remove elements from DOM. * @param {string} [selector] * @returns {this} */ remove(selector?: string): this; /** * Remove elements from DOM (alias for remove, simplified). * @returns {this} */ detach(): this; /** * Remove all children from elements. * @returns {this} */ empty(): this; /** * Clone elements. * @param {boolean} [deep=true] * @returns {DommaCollection} */ clone(deep?: boolean): DommaCollection; /** * Replace each element with content. * @param {string|HTMLElement|DommaCollection|ContentFunction} content * @returns {this} */ replaceWith(content: string | HTMLElement | DommaCollection | ContentFunction): this; /** * Replace target with elements. * @param {DommaSelector} target * @returns {this} */ replaceAll(target: DommaSelector): this; /** * Resolve insertion content to the nodes to insert into one target. * * An existing node is **moved**, not copied, which is what jQuery does and * what callers assume: `$('').on('change', fn)` followed by an * append has to put *that* input in the page, or the handler is bound to a * node nobody can click and the state set with `prop()` is lost with it. * Copying was silent - the markup looked right and nothing threw. * * Only a collection with more than one target needs copies, because a node * cannot be in two places. The original then goes to the **last** target, * as in jQuery, and the earlier ones get `cloneNode(true)`. * * `cloneNode` copies attributes and descendants, never listeners or * properties, so a handler bound before a *multi-target* insert still only * survives on the last one. Bind after inserting, or delegate from a * container, when inserting into several targets at once. * * @param {string|HTMLElement|DommaCollection|Function} content * @param {number} index - Index of the target being filled * @param {HTMLElement} element - The target being filled * @param {boolean} [isLast=true] - Whether this is the final target, and so * receives the original nodes rather than copies * @returns {Node[]} * @private */ private _getNodes; /** * @param {string|HTMLElement|DommaCollection|WrapperFunction} wrapper * @param {number} index * @param {HTMLElement} element * @returns {Node} * @private */ private _getWrapper; /** * Attach a handler for a DOM event (the event object is typed from its name). * @template {keyof HTMLElementEventMap} K * @overload * @param {K} event * @param {EventHandler} handler * @returns {this} */ on(event: K, handler: EventHandler): this; /** * Attach a handler for one or more space-separated events. * @template {Event} [E=Event] * @overload * @param {string} event * @param {EventHandler} handler * @returns {this} */ on(event: string, handler: EventHandler): this; /** * Attach a delegated handler: it runs for events from descendants matching `selector`, with `this` set to the match. * @template {keyof HTMLElementEventMap} K * @overload * @param {K} event * @param {string} selector * @param {EventHandler} handler * @returns {this} */ on(event: K, selector: string, handler: EventHandler): this; /** * Attach a delegated handler for one or more space-separated events. * @template {Event} [E=Event] * @overload * @param {string} event * @param {string} selector * @param {EventHandler} handler * @returns {this} */ on(event: string, selector: string, handler: EventHandler): this; /** * Remove a handler (nothing is removed without both an event and a handler). * @overload * @param {string} [event] * @param {EventHandler} [handler] * @returns {this} */ off(event?: string | undefined, handler?: EventHandler | undefined): this; /** * Remove delegated handlers bound with this selector (all of them when no handler is given). * @overload * @param {string} event * @param {string} selector * @param {EventHandler} [handler] * @returns {this} */ off(event: string, selector: string, handler?: EventHandler | undefined): this; /** * Attach a handler that runs once. * @template {keyof HTMLElementEventMap} K * @overload * @param {K} event * @param {EventHandler} handler * @returns {this} */ one(event: K, handler: EventHandler): this; /** * Attach a handler that runs once. * @template {Event} [E=Event] * @overload * @param {string} event * @param {EventHandler} handler * @returns {this} */ one(event: string, handler: EventHandler): this; /** * Attach a delegated handler that runs once. * @template {keyof HTMLElementEventMap} K * @overload * @param {K} event * @param {string} selector * @param {EventHandler} handler * @returns {this} */ one(event: K, selector: string, handler: EventHandler): this; /** * Attach a delegated handler that runs once. * @template {Event} [E=Event] * @overload * @param {string} event * @param {string} selector * @param {EventHandler} handler * @returns {this} */ one(event: string, selector: string, handler: EventHandler): this; /** * Trigger event on elements: a bubbling, cancelable CustomEvent with `data` as its `detail`. * @param {string} event * @param {any} [data] * @returns {this} */ trigger(event: string, data?: any): this; /** * Trigger native event. * @param {string} eventType * @returns {this} */ triggerNative(eventType: string): this; /** * Trigger a native click. * @overload * @returns {this} */ click(): this; /** * Attach a `click` handler. * @overload * @param {EventHandler} handler * @returns {this} */ click(handler: EventHandler): this; /** * Trigger a `dblclick` event. * @overload * @returns {this} */ dblclick(): this; /** * Attach a `dblclick` handler. * @overload * @param {EventHandler} handler * @returns {this} */ dblclick(handler: EventHandler): this; /** * Trigger a `mousedown` event. * @overload * @returns {this} */ mousedown(): this; /** * Attach a `mousedown` handler. * @overload * @param {EventHandler} handler * @returns {this} */ mousedown(handler: EventHandler): this; /** * Trigger a `mouseup` event. * @overload * @returns {this} */ mouseup(): this; /** * Attach a `mouseup` handler. * @overload * @param {EventHandler} handler * @returns {this} */ mouseup(handler: EventHandler): this; /** * Trigger a `mousemove` event. * @overload * @returns {this} */ mousemove(): this; /** * Attach a `mousemove` handler. * @overload * @param {EventHandler} handler * @returns {this} */ mousemove(handler: EventHandler): this; /** * Trigger a `mouseover` event. * @overload * @returns {this} */ mouseover(): this; /** * Attach a `mouseover` handler. * @overload * @param {EventHandler} handler * @returns {this} */ mouseover(handler: EventHandler): this; /** * Trigger a `mouseout` event. * @overload * @returns {this} */ mouseout(): this; /** * Attach a `mouseout` handler. * @overload * @param {EventHandler} handler * @returns {this} */ mouseout(handler: EventHandler): this; /** * Trigger a `mouseenter` event. * @overload * @returns {this} */ mouseenter(): this; /** * Attach a `mouseenter` handler. * @overload * @param {EventHandler} handler * @returns {this} */ mouseenter(handler: EventHandler): this; /** * Trigger a `mouseleave` event. * @overload * @returns {this} */ mouseleave(): this; /** * Attach a `mouseleave` handler. * @overload * @param {EventHandler} handler * @returns {this} */ mouseleave(handler: EventHandler): this; /** * Trigger a `keydown` event. * @overload * @returns {this} */ keydown(): this; /** * Attach a `keydown` handler. * @overload * @param {EventHandler} handler * @returns {this} */ keydown(handler: EventHandler): this; /** * Trigger a `keyup` event. * @overload * @returns {this} */ keyup(): this; /** * Attach a `keyup` handler. * @overload * @param {EventHandler} handler * @returns {this} */ keyup(handler: EventHandler): this; /** * Trigger a `keypress` event. * @overload * @returns {this} */ keypress(): this; /** * Attach a `keypress` handler. * @overload * @param {EventHandler} handler * @returns {this} */ keypress(handler: EventHandler): this; /** * Trigger focus on every element. * @overload * @returns {this} */ focus(): this; /** * Attach a `focus` handler. * @overload * @param {EventHandler} handler * @returns {this} */ focus(handler: EventHandler): this; /** * Trigger blur on every element. * @overload * @returns {this} */ blur(): this; /** * Attach a `blur` handler. * @overload * @param {EventHandler} handler * @returns {this} */ blur(handler: EventHandler): this; /** * Trigger a `change` event. * @overload * @returns {this} */ change(): this; /** * Attach a `change` handler. * @overload * @param {EventHandler} handler * @returns {this} */ change(handler: EventHandler): this; /** * Trigger a `select` event. * @overload * @returns {this} */ select(): this; /** * Attach a `select` handler. * @overload * @param {EventHandler} handler * @returns {this} */ select(handler: EventHandler): this; /** * Trigger submit on every form. * @overload * @returns {this} */ submit(): this; /** * Attach a `submit` handler. * @overload * @param {EventHandler} handler * @returns {this} */ submit(handler: EventHandler): this; /** * Trigger a `scroll` event. * @overload * @returns {this} */ scroll(): this; /** * Attach a `scroll` handler. * @overload * @param {EventHandler} handler * @returns {this} */ scroll(handler: EventHandler): this; /** * Trigger a `resize` event. * @overload * @returns {this} */ resize(): this; /** * Attach a `resize` handler. * @overload * @param {EventHandler} handler * @returns {this} */ resize(handler: EventHandler): this; /** * Handle mouseenter and mouseleave (one handler for both when leaveHandler is omitted). * @param {EventHandler} enterHandler * @param {EventHandler} [leaveHandler] * @returns {this} */ hover(enterHandler: EventHandler, leaveHandler?: EventHandler): this; /** * Show elements. * @param {Duration} [duration] * @param {(this: HTMLElement) => void} [callback] * @returns {this} */ show(duration?: Duration, callback?: (this: HTMLElement) => void): this; /** * Hide elements. * @param {Duration} [duration] * @param {(this: HTMLElement) => void} [callback] * @returns {this} */ hide(duration?: Duration, callback?: (this: HTMLElement) => void): this; /** * Toggle visibility. * @param {Duration} [duration] * @param {(this: HTMLElement) => void} [callback] * @returns {this} */ toggle(duration?: Duration, callback?: (this: HTMLElement) => void): this; /** * Fade in elements. * @param {Duration} [duration=400] * @param {(this: HTMLElement) => void} [callback] * @returns {this} */ fadeIn(duration?: Duration, callback?: (this: HTMLElement) => void): this; /** * Fade out elements. * @param {Duration} [duration=400] * @param {(this: HTMLElement) => void} [callback] * @returns {this} */ fadeOut(duration?: Duration, callback?: (this: HTMLElement) => void): this; /** * Toggle fade. * @param {Duration} [duration=400] * @param {(this: HTMLElement) => void} [callback] * @returns {this} */ fadeToggle(duration?: Duration, callback?: (this: HTMLElement) => void): this; /** * Fade to opacity. * @param {Duration} duration * @param {number} opacity * @param {(this: HTMLElement) => void} [callback] * @returns {this} */ fadeTo(duration: Duration, opacity: number, callback?: (this: HTMLElement) => void): this; /** * Slide up (hide). * @param {Duration} [duration=400] * @param {(this: HTMLElement) => void} [callback] * @returns {this} */ slideUp(duration?: Duration, callback?: (this: HTMLElement) => void): this; /** * Slide down (show). * @param {Duration} [duration=400] * @param {(this: HTMLElement) => void} [callback] * @returns {this} */ slideDown(duration?: Duration, callback?: (this: HTMLElement) => void): this; /** * Toggle slide. * @param {Duration} [duration=400] * @param {(this: HTMLElement) => void} [callback] * @returns {this} */ slideToggle(duration?: Duration, callback?: (this: HTMLElement) => void): this; /** * Animate CSS properties (numbers are pixels). * @overload * @param {AnimationProperties} properties * @param {(this: HTMLElement) => void} [callback] * @returns {this} */ animate(properties: AnimationProperties, callback?: ((this: HTMLElement) => void) | undefined): this; /** * Animate CSS properties (numbers are pixels). * @overload * @param {AnimationProperties} properties * @param {Duration} duration * @param {(this: HTMLElement) => void} [callback] * @returns {this} */ animate(properties: AnimationProperties, duration: Duration, callback?: ((this: HTMLElement) => void) | undefined): this; /** * Animate CSS properties (numbers are pixels) with a CSS easing. * @overload * @param {AnimationProperties} properties * @param {Duration} duration * @param {string} easing * @param {(this: HTMLElement) => void} [callback] * @returns {this} */ animate(properties: AnimationProperties, duration: Duration, easing: string, callback?: ((this: HTMLElement) => void) | undefined): this; /** * Stop animations. * @returns {this} */ stop(): this; /** * Delay next animation: resolves with this collection after `duration` ms. * @param {number} duration * @returns {Promise} */ delay(duration: number): Promise; /** * @param {Duration} duration * @returns {number} * @private */ private _getDuration; /** * Get the rendered width of the first element (undefined when the collection is empty). * @overload * @returns {number|undefined} */ width(): number | undefined; /** * Set the width of every element (numbers are pixels). * @overload * @param {number|string|ValueFunction} value * @returns {this} */ width(value: number | string | ValueFunction): this; /** * Get the rendered height of the first element (undefined when the collection is empty). * @overload * @returns {number|undefined} */ height(): number | undefined; /** * Set the height of every element (numbers are pixels). * @overload * @param {number|string|ValueFunction} value * @returns {this} */ height(value: number | string | ValueFunction): this; /** * Get inner width (content + padding). * @returns {number|undefined} */ innerWidth(): number | undefined; /** * Get inner height (content + padding). * @returns {number|undefined} */ innerHeight(): number | undefined; /** * Get outer width (content + padding + border + optional margin). * @param {boolean} [includeMargin=false] * @returns {number|undefined} */ outerWidth(includeMargin?: boolean): number | undefined; /** * Get outer height (content + padding + border + optional margin). * @param {boolean} [includeMargin=false] * @returns {number|undefined} */ outerHeight(includeMargin?: boolean): number | undefined; /** * Get the position of the first element relative to the document. * @overload * @returns {Offset|undefined} */ offset(): Offset | undefined; /** * Move every element to these document coordinates (static elements become relative). * @overload * @param {Partial} coords * @returns {this} */ offset(coords: Partial): this; /** * Get position (relative to offset parent). * @returns {Position|undefined} */ position(): Position | undefined; /** * Get the scroll top position of the first element. * @overload * @returns {number|undefined} */ scrollTop(): number | undefined; /** * Set the scroll top position of every element. * @overload * @param {number} value * @returns {this} */ scrollTop(value: number): this; /** * Get the scroll left position of the first element. * @overload * @returns {number|undefined} */ scrollLeft(): number | undefined; /** * Set the scroll left position of every element. * @overload * @param {number} value * @returns {this} */ scrollLeft(value: number): this; /** * Get offset parent. * @returns {DommaCollection} */ offsetParent(): DommaCollection; } /** * Wrap elements in a DommaCollection. * @overload * @param {DommaSelector} selector - CSS selector, HTML string, element(s) or a collection * @param {Document | Element | DocumentFragment} [context] - Where to look for a CSS selector (default: document) * @returns {DommaCollection} */ export function dom(selector: DommaSelector, context?: Element | Document | DocumentFragment | undefined): DommaCollection; /** * Run a function when the DOM is ready (straight away if it already is). * @overload * @param {() => void} callback * @returns {DommaCollection} An empty collection */ export function dom(callback: () => void): DommaCollection; export function isDomma(value: unknown): value is DommaCollection; /** * Document coordinates of an element (`offset()`). */ export type Offset = { top: number; left: number; }; /** * Coordinates of an element relative to its offset parent (`position()`). */ export type Position = { top: number; left: number; }; /** * CSS properties to animate; numbers are pixels. */ export type AnimationProperties = { [property: string]: string | number; }; /** * Animation length in ms, or `'fast'` (200) / `'slow'` (600); anything else is 400. */ export type Duration = number | "fast" | "slow"; export type FilterFunction = (this: HTMLElement, index: number, element: HTMLElement) => boolean; /** * Returns the class name(s) to add/remove, space-separated. */ export type ClassFunction = (this: HTMLElement, index: number, currentClass: string) => string; /** * Returns the content to insert into one target; receives that target's current inner HTML. */ export type ContentFunction = (this: HTMLElement, index: number, currentContent: string) => string | HTMLElement | DommaCollection; /** * Returns the wrapper for one element. */ export type WrapperFunction = (this: HTMLElement, index: number) => string | HTMLElement | DommaCollection; /** * Returns the new width/height of one element; receives its current one. */ export type ValueFunction = (this: HTMLElement, index: number, currentValue: number) => number | string; /** * An event handler; `this` is the element (the matched descendant for a delegated handler). */ export type EventHandler = (this: HTMLElement, event: E) => void; /** * What `$()` accepts: a CSS selector or an HTML string (`'
  • One
  • '`), a node, a NodeList or * HTMLCollection, an array (only its HTMLElements are kept) or another collection. */ export type DommaSelector = string | Node | NodeList | HTMLCollection | Element[] | DommaCollection; /** * Sanitisation options for `html()`. */ export type DommaHtmlOptions = { /** * - Sanitise content (true = safe, false = raw - TRUSTED content only) */ safe?: boolean | undefined; /** * - Sanitiser preset */ preset?: "default" | "strict" | "basic" | undefined; /** * - Custom allowed HTML tags (overrides the preset) */ allowedTags?: string[] | undefined; /** * - Custom allowed attributes (overrides the preset) */ allowedAttrs?: string[] | undefined; /** * - Allow data-* attributes */ allowDataAttrs?: boolean | undefined; };