Utilities (JS)
Important
The util.js file is no longer required for the components to work properly
The util.js file contains a set of JavaScript utility functions that are used across multiple components.
Browser support: all modern browsers.
Class Manipulation #
These functions can be used to add/remove classes from DOM elements.
| Function | Description |
|---|---|
Util.addClass(element, 'className') |
add a class (or list of classes) to an element |
Util.removeClass(element, 'className') |
remove a class (or list of classes) to an element |
Util.hasClass(element, 'className') |
check if element has a specified class |
Util.toggleClass(element, 'className', bool) |
add or remove a class (or list of classes) to an element (based on the value of bool) |
DOM Methods #
These functions can be used to search the DOM or get info about a specific node.
| Function | Description |
|---|---|
Util.getChildrenByClassName(parent, 'className') |
return children of an element with a specific class |
Util.is(element, selector) |
check if the element matches a specific selector |
Util.getIndexInArray(array, element) |
return the index of an element in a node array |
Focus #
This function can be used to move the focus to a new DOM element (works also for elements that cannot receive the focus).
| Function | Description |
|---|---|
Util.moveFocus(element) |
move focus to a new DOM element |
Utility Classes #
| Class | Description |
|---|---|
j{p}s-tab-focus |
make focus ring visible only for keyboard navigation (i.e., tab key) |
If you need to dynamically add .js-tab-focus elements to the DOM, you can call the resetFocusTabsStyle() function to make sure the proper outline style is applied to these new elements:
// dynamically import new .js-tab-focus elements
// code here - e.g., your ajax call
// reset style of .js-tab-focus elements
resetFocusTabsStyle();Easing Functions #
Easing functions for your JavaScript animations:
| Function | Description |
|---|---|
Math.easeInOutQuad(t, b, c, d) |
quadratic easing in/out |
Math.easeInQuart(t, b, c, d) |
quartic easing in |
Math.easeOutQuart(t, b, c, d) |
quartic easing out |
Math.easeInOutQuart(t, b, c, d) |
quartic easing in/out |
The above functions accept as arguments:
t: animation progress (time);b: initial value;c: delta (final value - initial value);d: animation duration.
Misc #
| Function | Description |
|---|---|
Util.cssSupports('property', 'value') |
check if a CSS property and/or value are supported |
Util.extend(default, options) |
merge a set of user options into a list of defaults |
Util.osHasReducedMotion() |
return true if Reduced Motion is enabled |
|
|
animate the height of an element |
