DomHelper

Appends element to parentElement.

Creates an Element, accepts a DomConfig object. Example usage:

DomHelper.createElement({
  tag         : 'table', // defaults to 'div'
  className   : 'nacho',
  html        : 'I am a nacho',
  children    : [ { tag: 'tr', ... }, myDomElement ],
  parent      : myExistingElement // Or its id
  style       : 'font-weight: bold;color: red',
  dataset     : { index: 0, size: 10 },
  tooltip     : 'Yay!',
  ns          : 'http://www.w3.org/1999/xhtml'
});

Inserts an element before beforeElement in into.

Inserts an element at first position in into.

Adds a CSS class to an element during the specified duration

Applies specified style to the passed element. Style can be an object or a string.

Adds or removes the classes contained in the specified object based on the truthy or falsy value of that key.

For example:

 DomHelper.assignClasses(element, {
     'b-class-one' : 1   // class will be added
     'b-class-two' : 0   // class will be removed
 });

Returns a style value or values for the passed element.

Replaces the passed element's className with the class names passed in either Array or String format or Object.

This method compares the existing class set with the incoming class set and avoids mutating the element's class name set if possible.

This can avoid browser style invalidations.

Toggle multiple classes in elements classList. Helper for toggling multiple classes at once.

Applies the key state of the passed object or DomClassList to the passed element.

Properties with a falsy value mean that property name is removed as a class name.

Properties with a truthy value mean that property name is added as a class name.

This is different from syncClassList. That sets the className of the element to the sum of all its truthy keys, regardless of what the pre-existing value of the className was, and ignoring falsy keys.

This selectively updates the classes in the className. If there is a truthy key, the name is added. If there is a falsy key, the name is removed.

Measures a relative size, such as a size specified in em units for the passed element.

Measures the text width using a hidden div

Adds the passed string as a space-separated value to the passed attribute in the passed element.

Align the passed element with the passed target according to the align spec.

Resolves element from point, checking shadow DOM if required

Returns element animations

Returns an object with the parse style values for the top, right, bottom, and left components of the given edge style.

The return value is an object with top, right, bottom, and left properties for the respective components of the edge style, as well as width (the sum of left and right) and height (the sum of top and bottom).

Returns the specified element of the given event. If the event is an Element, it is returned. Otherwise, the eventName argument is used to retrieve the desired element property from event (this defaults to the 'target' property).

Returns the id of the passed element. Generates a unique id if the element does not have one.

Gets theme information about the currently active theme by reading CSS custom properties from the .b-theme-info class.

The method creates a temporary DOM element with the b-theme-info class, reads all CSS custom properties that start with --b-theme-, converts them to camelCase property names, and returns them as an object.

Example theme CSS:

.b-theme-info {
    --b-theme-name             : "SvalbardDark";
    --b-theme-filename         : "svalbard-dark";
    --b-theme-button-rendition : "text";
    --b-theme-label-position   : "align-before";
    --b-theme-overlap-label    : "false";
}

This would result in:

{
    name            : "SvalbardDark",
    filename        : "svalbard-dark",
    buttonRendition : "text",
    labelPosition   : "align-before",
    overlapLabel    : false  // String "true"/"false" values are converted to boolean
}

This method checks that the passed target is visible in all viewports

Highlights the passed element or Rectangle according to the theme's highlighting rules. Usually an animated framing effect.

The framing effect is achieved by adding the CSS class b-fx-highlight which references a keyframes animation named b-fx-highlight-animation. You may override the animation name referenced, or the animation itself in your own CSS.

Checks if an element clips its content.

Returns true if element has opened shadow root

Returns true if the passed element accepts keystrokes to edit its contents.

Returns true if the provided value is likely a DOM element. If the element can be assured to be from the same document, instanceof Element is more reliable.

Returns true if the passed element is focusable either programmatically or through pointer gestures.

Returns the rectangle of the element or event which is currently visible in the browser viewport, i.e. user can find it on screen, or false if it is scrolled out of view.

Returns true if the provided value is likely a DOM node. If the node can be assured to be from the same document, instanceof Node is more reliable.

Returns true if the passed element is deeply visible. Meaning it is not hidden using display or visibility and no ancestor node is hidden.

Converts the passed id to an id valid for usage as id on a DOM element.

Splits a style string up into object form. For example 'font-weight:bold;font-size:150%' would convert to

{
    font-weight : 'bold',
    font-size : '150%'
}

Removed the passed string as a space-separated value from the passed attribute in the passed element.

Removes the passed CSS classes from all descendants of the passed element.

Resets DomHelper.scrollBarWidth cache, triggering a new measurement next time it is read

Sets a CSS length style value.

Changes the theme to the passed theme name if possible.

Theme names are case-insensitive. The href used is all lower case.

To use this method, the <link rel="stylesheet"> must use the default, Bryntum-supplied CSS files where the href end with <themeName>.css, so that it can be found in the document, and switched out for a new link with the modified href. The new href will use the same path, just with the themeName portion substituted for the new name.

If no <link> with that name pattern can be found, an error will be thrown.

If you use this method, you must ensure that the theme files are all accessible on your server.

Because this is an asynchronous operation, a Promise is returned. The theme change event is passed to the success function. If the theme was not changed, because the theme name passed is the current theme, nothing is passed to the success function.

The theme change event contains two properties:

• prev The previous Theme name.
• theme The new Theme name.

Animates the specified element to slide it into view within the visible viewport of its parentElement from the direction of movement.

So in a left-to-right Widget, direction 1 means it slides in from the right and direction -1 means it slides in from the left. RTL reverses the movement.

See the forward/backward navigations in DatePicker for an example of this in action.

If "next" should arrive from below and "previous" should arrive from above, add the class b-slide-vertical to the element.

Sync one source element attributes, children etc. to a target element. Source element can be specified as a html string or an actual HTMLElement.

NOTE: This function is superseded by DomSync.sync(), which works with DOM configs. For most usecases, use it instead.

Toggles between light and dark themes. Does not check if the theme is actually available, only does a string replace on the current themes filename for light/dark.

Get elements X offset within a containing element

Gets elements X and Y offset within containing element as an array [x, y]

Get elements Y offset within a containing element

Get elements X position on page

Get elements Y position on page

Returns the x from the element's translate: x y value in pixels.

Gets both X and Y coordinates as an array [x, y]

Returns the y from the element's translate: x y value in pixels.

Increase X position

Increase Y position

Increase X translation

Increase Y position

Set element's style left.

Set element's style top.

Set element's X translation in pixels (keepin Y translation as is).

Set elements X and Y translation in pixels.

Set element's Y translation in pixels (keeping X translation as is).

Returns all child elements (not necessarily direct children) that matches selector.

If selector starts with '>' or '# ', then all components of the selector must match inside of element. The scope selector, :scope is prepended to the selector (and if # was used, it is removed).

These are equivalent:

 DomHelper.children(el, '# .foo .bar');

 el.querySelectorAll(':scope .foo .bar');

These are also equivalent:

 DomHelper.children(el, '> .foo .bar');

 el.querySelectorAll(':scope > .foo .bar');

Looks at the specified element and all of its children for the one that first matches selector.

Iterates over the direct child elements of the specified element.

Iterates over each result returned from element.querySelectorAll(selector). Can also be called with only two arguments, in which case the first argument is used as selector and document is used as the element.

Gets the first direct child of element that matches selector.

Checks if element has any child that matches selector.

Checks if childElement is a descendant of parentElement (contained in it or a sub element)

Removes each element returned from element.querySelectorAll(selector).

Retrieves all parents to the specified element.