ixfx
    Preparing search index...

    Module @ixfx/dom - v0.44.1

    Functions for doing DOM manipulation.

    Namespaces

    DataTable
    DragDrop
    Forms

    Functions

    addShadowCss
    byId

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

    cardinalPosition

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

    clear

    Remove all child nodes from parent

    copyToClipboard

    Copies string representation of object to clipboard

    createAfter

    Creates an element after sibling

    createIn

    Creates an element inside of parent

    cycleCssClass

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

    defaultErrorHandler

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

    el

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

    elRequery
    getBoundingClientRectWithBorder

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

    getComputedPixels

    Returns the computed measurements of CSS properties via getComputedStyle.

    getCssVariable

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

    getCssVariablesFromStyles

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

    getCssVariablesWithFallback

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

    getTranslation
    inlineConsole

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

    insertSorted

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

    log

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

    parseCssVariablesAsAttributes

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

    pointScaler

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

    positionFn

    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.

    positionFromMiddle

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

    positionRelative

    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.

    query

    Async iterator over DOM query strings

    reconcileChildren

    Creates a DOM tree, based on provided data.

    resolveEl

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

    resolveElementTry

    Tries to resolve a query, returning a Result.

    resolveEls

    Returns a set of elements.

    setCssClass

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

    setCssDisplay

    Sets the CSS 'display' property

    setCssToggle

    Toggles a CSS class on all elements that match selector.

    setCssVariables

    Sets CSS variables using an object.

    setFromCssVariables

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

    setHtml

    Sets the innerHTML of an element.

    setProperty

    Sets some property on an element

    setText
    tabSet
    viewportToSpace

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

    Classes

    DataDisplay

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

    ElementSizer

    Consider using static methods:

    Type Aliases

    ComputedPixelsMap
    CreateUpdateElement

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

    CssVariable

    CSS Variable

    CssVariableByIdOption

    CSS Variable by id

    CssVariableByObjectOption

    CSS variable by element reference

    CssVariableByQueryOption

    CSS variable by query

    CssVariableOption

    CSS variable option

    DataDisplayOptions
    ElementQueryOptions
    ElementResizeLogic
    • 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
    ElementSizerOptions

    Options

    ElPositionOpts
    InlineConsoleOptions
    Log
    LogOpts
    Panel
    PointSpaces
    QueryOrElements
    WrappedElement

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