Module @ixfx/dom - v0.48.0

Gets a HTML element by id, throwing an error if not found

Returns a {x,y} Point on a cardinal position of element.

Remove all child nodes from parent

Copies string representation of object to clipboard

Creates an element after sibling

Creates an element inside of parent

Given an array of class class names, this will cycle between them each time it is called.

Creates an error handler to show errors on-screen. This is useful when testing on mobile devices that lack access to the console.

Returns an object with handy functions for working on/against the provided selector.

Returns the value of getBoundingClientRect plus the width of all the borders

Returns the computed measurements of CSS properties via getComputedStyle.

Returns the value of a CSS variable. If it is no defined, returns fallbackValue;

Returns a CSS variable from a CSS style declaration, or returning fallback.

Computes the styles for elt (or defaults to document.body) using fallback as a set of default values.

Source: https://zellwk.com/blog/translate-in-javascript

Adds an inline console to the page. A DIV is added to display log messages.

Inserts element into parent sorted according to its HTML attribute data-sort.

Allows writing to a DOM element in console.log style. Element grows in size, so use something like overflow-y: scroll on its parent

Parses input in the form of: ['elementid-attribute', 'default-value']. Eg, ['indicator-fill', 'gray'] will yield:

Convert an absolute point to relative, in different coordinate spaces.

Returns a function which yields element position in target coordinate space with optional scaling. Live position is calculated when the function is invoked. Use positionRelative to simply get relative position of element in given coordinate space.

Position element by relative coordinate. Relative to window dimensions by default

Returns relative position of element in target coordinate space, or viewport by default. Relative means that { x:0.5, y: 0.5 } is the middle of the target space. Eg for viewport, that means its the middle of the browser window.

Async iterator over DOM query strings

Creates a DOM tree, based on provided data.

Resolves either a string or HTML element to an element. Useful when an argument is either an HTML element or query.

Tries to resolve a query, returning a Result.

Returns a set of elements.

If value is true, the provided CSS class is added to element(s), otherwise it is removed.

Sets the CSS 'display' property

Toggles a CSS class on all elements that match selector.

Sets CSS variables using an object.

Reads the value of a CSS variable and assign it to HTML attributes or object field.

Sets the innerHTML of an element.

Sets some property on an element

Returns a function that converts input viewport coordinate space to an output coordinate space.

Creates a simple display for data. Designed to show ixfx state data

Consider using static methods:

Creates or updates an element based on an input value. This function should not add the element to the DOM.

CSS Variable

CSS Variable by id

CSS variable by element reference

CSS variable by query

CSS variable option

• width: use width of parent, set height based on original aspect ratio of element. Assumes parent has a determined width.
• height: use height of parent, set width based on original aspect ratio of element. Assumes parent has a determined height.
• both: use height & width of parent, so the element adopts the ratio of the parent. Be sure that parent has a width and height set.
• min: use the smallest dimension of parent
• max: use the largest dimension of parent

Options

Wraps an element (or set of elements) with handy functions for manipulation.