Functions for doing DOM manipulation.
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.
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
Options
Wraps an element (or set of elements) with handy functions for manipulation.
Gets a HTML element by id, throwing an error if not found