tw5-typed / modules/utils/dom/dom
Module: modules/utils/dom/dom
Table of contents
Functions
- addClass
- addEventListeners
- collectDOMVariables
- copyStyles
- copyToClipboard
- domContains
- domMatchesSelector
- forceLayout
- getBoundingPageRect
- getComputedStyles
- getLocationPath
- getPassword
- getScrollContainer
- getScrollPosition
- hasClass
- pulseElement
- querySelectorAllSafe
- querySelectorSafe
- removeChildren
- removeClass
- resizeTextAreaToFit
- savePassword
- setSelectionByPosition
- setSelectionRangeSafe
- setStyles
- toggleClass
Functions
addClass
▸ addClass(element
, className
): void
Alternative to element.classList.add
, add a css class name to an element, see issue for detail.
Parameters
Name | Type |
---|---|
element | Element |
className | string |
Returns
void
Link
https://github.com/Jermolene/TiddlyWiki5/issues/6475
Defined in
src/modules/utils/dom/dom.d.ts:8
addEventListeners
▸ addEventListeners(domNode
, events
): void
Attach specified event handlers to a DOM node
Parameters
Name | Type |
---|---|
domNode | Element |
events | { handlerFunction? : (event : MouseEvent ) => void ; handlerMethod? : string ; handlerObject? : Widget ; name : string }[] |
Returns
void
Defined in
src/modules/utils/dom/dom.d.ts:28
collectDOMVariables
▸ collectDOMVariables(selectedNode
, domNode
, event
): Record
<string
, string
>
Collects DOM variables from an event.
Parameters
Name | Type | Description |
---|---|---|
selectedNode | Element | The node selected. |
domNode | Element | The DOM node catching the event. |
event | Event | The event object. |
Returns
Record
<string
, string
>
An object containing variables derived from the DOM and event.
Defined in
src/modules/utils/dom/dom.d.ts:220
copyStyles
▸ copyStyles(sourceDomNode
, dstDomNode
): void
Copies the computed styles from a source element to a destination element.
Parameters
Name | Type | Description |
---|---|---|
sourceDomNode | Element | - |
dstDomNode | Element | The destination DOM node. |
Returns
void
Defined in
src/modules/utils/dom/dom.d.ts:194
copyToClipboard
▸ copyToClipboard(text
, options?
): boolean
Copies plain text to the clipboard on browsers that support it.
Parameters
Name | Type | Description |
---|---|---|
text | string | The text to copy. |
options? | Object | Options for copying, including 'doNotNotify' to suppress notifications. |
options.doNotNotify? | boolean | - |
Returns
boolean
True if the operation succeeded, otherwise false.
Defined in
src/modules/utils/dom/dom.d.ts:202
domContains
▸ domContains(a
, b
): boolean
Determines whether element 'a' contains element 'b'.
Parameters
Name | Type | Description |
---|---|---|
a | Element | The parent element. |
b | Element | The child element. |
Returns
boolean
True if 'a' contains 'b', otherwise false.
Defined in
src/modules/utils/dom/dom.d.ts:44
domMatchesSelector
▸ domMatchesSelector(node
, selector
): boolean
Checks if a node matches a specific CSS selector.
Parameters
Name | Type | Description |
---|---|---|
node | Element | The DOM node to check. |
selector | string | The CSS selector to match against. |
Returns
boolean
True if the node matches the selector, otherwise false.
Defined in
src/modules/utils/dom/dom.d.ts:52
forceLayout
▸ forceLayout(element
): void
Forces layout of a DOM node and its descendants.
Parameters
Name | Type | Description |
---|---|---|
element | Element | The DOM element to force layout on. |
Returns
void
Defined in
src/modules/utils/dom/dom.d.ts:166
getBoundingPageRect
▸ getBoundingPageRect(element
): Object
Gets the bounding rectangle of an element in absolute page coordinates.
Parameters
Name | Type | Description |
---|---|---|
element | Element | The element to get the bounding rectangle for. |
Returns
Object
An object representing the bounding rectangle with properties: left, width, right, top, height, bottom.
Name | Type |
---|---|
bottom | number |
height | number |
left | number |
right | number |
top | number |
width | number |
Defined in
src/modules/utils/dom/dom.d.ts:139
getComputedStyles
▸ getComputedStyles(domNode
): string
[]
Get the computed styles applied to an element as an array of strings of individual CSS properties.
Parameters
Name | Type | Description |
---|---|---|
domNode | Element | The DOM node to get the computed styles for. |
Returns
string
[]
An array of strings, each representing an individual CSS property and its value.
Defined in
src/modules/utils/dom/dom.d.ts:179
getLocationPath
▸ getLocationPath(): string
Gets the path part of the current location.
Returns
string
The path part of the current location URL.
Defined in
src/modules/utils/dom/dom.d.ts:211
getPassword
▸ getPassword(name
): string
Retrieves a named password from the browser.
Parameters
Name | Type | Description |
---|---|---|
name | string | The name of the password to retrieve. |
Returns
string
The password, or an empty string if not found.
Defined in
src/modules/utils/dom/dom.d.ts:160
getScrollContainer
▸ getScrollContainer(element
): Element
Gets the first parent element that has scrollbars or uses the body as a fallback.
Parameters
Name | Type |
---|---|
element | Element |
Returns
Element
The first scrollable parent element, or the body if none are found.
Defined in
src/modules/utils/dom/dom.d.ts:111
getScrollPosition
▸ getScrollPosition(sourceWindow?
): Object
Get the scroll position of the viewport.
Parameters
Name | Type |
---|---|
sourceWindow? | Window |
Returns
Object
An object with 'x' and 'y' properties representing the horizontal and vertical scroll positions in pixels.
Name | Type |
---|---|
x | number |
y | number |
Defined in
src/modules/utils/dom/dom.d.ts:118
hasClass
▸ hasClass(element
, className
): boolean
Checks if an element has a specific class.
Parameters
Name | Type | Description |
---|---|---|
element | Element | - |
className | string | The class name to look for. |
Returns
boolean
True if the element has the class, otherwise false.
Defined in
src/modules/utils/dom/dom.d.ts:92
pulseElement
▸ pulseElement(element
): void
Pulses an element for debugging purposes.
Parameters
Name | Type | Description |
---|---|---|
element | Element | The element to pulse. |
Returns
void
Defined in
src/modules/utils/dom/dom.d.ts:172
querySelectorAllSafe
▸ querySelectorAllSafe(selector
, baseElement?
): NodeList
Safely executes a querySelectorAll, avoiding exceptions on invalid selectors.
Parameters
Name | Type | Description |
---|---|---|
selector | string | The CSS selector to query. |
baseElement? | Element | The base element to start the query from, defaults to document. |
Returns
NodeList
A NodeList of elements matching the selector, or an empty NodeList if none are found or the selector is invalid.
Defined in
src/modules/utils/dom/dom.d.ts:243
querySelectorSafe
▸ querySelectorSafe(selector
, baseElement?
): Element
| null
Safely executes a querySelector, avoiding exceptions on invalid selectors.
Parameters
Name | Type | Description |
---|---|---|
selector | string | The CSS selector to query. |
baseElement? | Element | The base element to start the query from, defaults to document. |
Returns
Element
| null
The first element matching the selector, or null if none are found or the selector is invalid.
Defined in
src/modules/utils/dom/dom.d.ts:232
removeChildren
▸ removeChildren(node
): void
Removes all child nodes of a given DOM node.
Parameters
Name | Type | Description |
---|---|---|
node | Node | The parent DOM node. |
Returns
void
Defined in
src/modules/utils/dom/dom.d.ts:84
removeClass
▸ removeClass(element
, className
): void
Alternative to element.classList.remove
, remove a css class name from an element, see issue for detail.
Parameters
Name | Type |
---|---|
element | Element |
className | string |
Returns
void
Link
https://github.com/Jermolene/TiddlyWiki5/issues/6475
Defined in
src/modules/utils/dom/dom.d.ts:16
resizeTextAreaToFit
▸ resizeTextAreaToFit(domNode
, minHeight
): number
Adjusts the height of a textarea to fit its content, preserving scroll position, and returns the new height.
Parameters
Name | Type | Description |
---|---|---|
domNode | HTMLTextAreaElement | The DOM node (textarea) to resize. |
minHeight | string | The minimum height to use for the textarea. |
Returns
number
The new height of the textarea.
Defined in
src/modules/utils/dom/dom.d.ts:129
savePassword
▸ savePassword(name
, password
): void
Saves a named password in the browser.
Parameters
Name | Type | Description |
---|---|---|
name | string | The name for the password. |
password | string | The password to save. |
Returns
void
Defined in
src/modules/utils/dom/dom.d.ts:153
setSelectionByPosition
▸ setSelectionByPosition(node
, selectFromStart
, selectFromEnd
): void
Selects text in an input or textarea by position.
Parameters
Name | Type | Description |
---|---|---|
node | HTMLInputElement | HTMLTextAreaElement | The DOM node (input or textarea). |
selectFromStart | number | Position from the start of the text. |
selectFromEnd | number | Position from the end of the text. |
Returns
void
Defined in
src/modules/utils/dom/dom.d.ts:74
setSelectionRangeSafe
▸ setSelectionRangeSafe(node
, start
, end
, direction?
): void
Safely sets the selection range in an input or textarea element.
Parameters
Name | Type | Description |
---|---|---|
node | HTMLInputElement | HTMLTextAreaElement | The DOM node (input or textarea). |
start | number | The start position of the selection. |
end | number | The end position of the selection. |
direction? | "forward" | "backward" | "none" | The direction of the selection. |
Returns
void
Defined in
src/modules/utils/dom/dom.d.ts:61
setStyles
▸ setStyles(domNode
, styleDefs
): void
Applies a set of styles to a DOM node, passed as an array of strings of individual CSS properties.
Parameters
Name | Type | Description |
---|---|---|
domNode | Element | The DOM node to apply the styles to. |
styleDefs | string [] | An array of strings, each representing an individual CSS property and its value. |
Returns
void
Defined in
src/modules/utils/dom/dom.d.ts:186
toggleClass
▸ toggleClass(element
, className
, status?
): void
Toggles a class on an element based on a given condition.
Parameters
Name | Type | Description |
---|---|---|
element | Element | - |
className | string | The class name to toggle. |
status? | boolean | If true, adds the class; if false, removes it. If undefined, toggles based on current state. |
Returns
void