JavaScriptThe latest version of this package is: 0.18.6, Opens in new window
A set of common JavaScript snippets to be used in tandom with If Design System Components
This component is compatible with ESM (ES6 module) and IIFE. See documentation examples below.
To be able to install this component, please refer to the Project Setup documentation.
$ npm i @ids-js/utils@0.18.6
Table of Contents
Api
Classes
Functions
- debounce(func, wait, [immediate]) ⇒ `function`
Debounce function that, as long as it continues to be invoked, will not be triggered.
- position(sourceEl, targetEl) ⇒ `Object`
Gets position data for `sourceEl` to be positioned in relation to `targetEl`
- toTop(modifiers) ⇒ `IDSPositionalData`
Get position data to position toTop
- fromTop() ⇒ `IDSPositionalData`
Get position data to position fromTop
- toBottom(modifiers) ⇒ `IDSPositionalData`
Get position data to position toBottom
- fromBottom(modifiers) ⇒ `IDSPositionalData`
Get position data to position fromBottom
- toLeft(modifiers) ⇒ `IDSPositionalData`
Get position data to position toLeft
- fromLeft() ⇒ `IDSPositionalData`
Get position data to position fromLeft
- toRight(modifiers, modifier) ⇒ `IDSPositionalData`
Get position data to position toRight
- fromRight(modifiers) ⇒ `IDSPositionalData`
Get position data to position fromRight
- getSiblingsOfSameNode(currentNode, className) ⇒ `Array.
` Get all the siblings of the same node, and only nodes with given className
- getPreviousSibling(el, selector) ⇒ `HTMLElement`
Get the previous sibling of givven node that matches given selector
- isOverflownHorizontally(element) ⇒ `Boolean`
Checks if the element is overflowed horizontally
- srSpeak(text, [ariaLive], [role], [ariaRelevant], [ariaAtomic])
Creates an element to let screen readers relay the information given verbally
- formatCurrency(number, [locale], [options]) ⇒ `String`
Formats given number into given currency, with options. Uses `Intl.NumberFormat` under the hood
- addClass(el, className)
Add class name(s) to given element. The `className` parameter can be a string separated with single space, or a single string for one class name to be used
- removeAllOccurencesOfValueInArray(arr, value) ⇒ `Array`
Removes all occurences of value in array
- removePreviouslySelectedMenuItem(el)
Remove the previously selected menu item
- isHorizontalNavigation(e) ⇒ `Boolean`
Is the keyboard event used in horizontal navigation?
- isVerticalNavigation(e) ⇒ `Boolean`
Is the keyboard event used in vertical navigation?
- trapFocus(element, [ctx])
Trap focus within given element
- getElementCSSStyle(el) ⇒ `CSSStyleDeclaration`
Get the CSS style from given element
- getSize(size) ⇒ `String`
Get the proper human readable size from `size`
- getSizeName(size) ⇒ `String`
Get the proper file size name based on `size`
- getSizeFullName(size) ⇒ `String`
Get the proper full file size name based on `size`
Typedefs
- IDSPositionalData : `Object`
IDSScrollLock
- Kind:
new IDSScrollLock()
Add scroll lock on body
idsScrollLock.deactivate()
Deactive scroll lock
- Kind:
idsScrollLock.activate()
Activate scroll lock
- Kind:
debounce(func, wait, [immediate]) ⇒ function
Debounce function that, as long as it continues to be invoked, will not be triggered.
- Kind:
Param | Type | Description |
---|---|---|
func | function |
Function to be debounced |
wait | number |
Time in milliseconds to wait before the function gets called. |
[immediate] | boolean |
Optional immediate flag, if passed, trigger the function on the leading edge, instead of the trailing. |
Example
window.addEventListener(
'resize',
debounce((evt) => console.log(evt), 250)
);
position(sourceEl, targetEl) ⇒ Object
Gets position data for sourceEl
to be positioned in relation to targetEl
- Kind:
Returns: Object
- A set of functions to be used to get the positional data from
Param | Type | Description |
---|---|---|
sourceEl | HTMLElement |
The element to position |
targetEl | HTMLElement |
The element to be positioned to |
Example
// Will position `sourceEl` to the top of `targetEl`
position(sourceEl, targetEl).toTop();
toTop(modifiers) ⇒ IDSPositionalData
Get position data to position toTop
- Kind:
Returns: IDSPositionalData
- The positional data
Param | Type | Description |
---|---|---|
modifiers | Modifiers to use | |
modifiers.sourceHeight | Number |
Height of the sourceEl , used as a modifier to subtract |
fromTop() ⇒ IDSPositionalData
Get position data to position fromTop
- Kind:
Returns: IDSPositionalData
- The positional data
toBottom(modifiers) ⇒ IDSPositionalData
Get position data to position toBottom
- Kind:
Returns: IDSPositionalData
- The positional data
Param | Type | Description |
---|---|---|
modifiers | Modifiers to use | |
modifiers.sourceHeight | Number |
Height of the sourceEl , used as a modifier to subtract |
modifiers.targetHeight | Number |
Height of the targetEl , used as a modifier to add |
fromBottom(modifiers) ⇒ IDSPositionalData
Get position data to position fromBottom
- Kind:
Returns: IDSPositionalData
- The positional data
Param | Type | Description |
---|---|---|
modifiers | Modifiers to use | |
modifiers.targetHeight | Number |
Height of the targetEl , used as a modifier to add |
toLeft(modifiers) ⇒ IDSPositionalData
Get position data to position toLeft
- Kind:
Returns: IDSPositionalData
- The positional data
Param | Type | Description |
---|---|---|
modifiers | Modifiers to use | |
modifiers.sourceWidth | Number |
Width of the sourceEl , used as a modifier to subtract |
fromLeft() ⇒ IDSPositionalData
Get position data to position fromLeft
- Kind:
Returns: IDSPositionalData
- The positional data
toRight(modifiers, modifier) ⇒ IDSPositionalData
Get position data to position toRight
- Kind:
Returns: IDSPositionalData
- The positional data
Param | Type | Default | Description |
---|---|---|---|
modifiers | Modifiers to use | ||
modifiers.sourceWidth | Number |
Width of the sourceEl , used as a modifier to subtract |
|
modifiers.targetWidth | Number |
Width of the targetEl , used as a modifier to add |
|
modifier | Number |
0 |
Modifier to add |
fromRight(modifiers) ⇒ IDSPositionalData
Get position data to position fromRight
- Kind:
Returns: IDSPositionalData
- The positional data
Param | Type | Description |
---|---|---|
modifiers | Modifiers to use | |
modifiers.targetWidth | Number |
Width of the targetEl , used as a modifier to add |
getSiblingsOfSameNode(currentNode, className) ⇒ Array.<HTMLElement>
Get all the siblings of the same node, and only nodes with given className
- Kind:
Returns: Array.<HTMLElement>
- Array of siblings from currentNode
Param | Type | Description |
---|---|---|
currentNode | HTMLElement |
The node to get siblings from |
className | String |
Class name to match against |
getPreviousSibling(el, selector) ⇒ HTMLElement
Get the previous sibling of givven node that matches given selector
- Kind:
Returns: HTMLElement
- The previous sibling
Param | Type | Description |
---|---|---|
el | HTMLElement |
The element to find the previous sibling from |
selector | String |
The selector used for matching sibling |
isOverflownHorizontally(element) ⇒ Boolean
Checks if the element is overflowed horizontally
- Kind:
Param | Type | Description |
---|---|---|
element | HTMLElement |
The element to check if it is overflowed |
srSpeak(text, [ariaLive], [role], [ariaRelevant], [ariaAtomic])
Creates an element to let screen readers relay the information given verbally
- Kind:
Param | Type | Default | Description |
---|---|---|---|
text | String |
The text for the screen reader to speak | |
[ariaLive] | String |
polite |
Which mode should the screen reader use? |
[role] | String |
log |
The role attribute to be used |
[ariaRelevant] | String |
additions |
The aria-relevant attribute to be used |
[ariaAtomic] | Boolean |
false |
Should this be atomic? |
formatCurrency(number, [locale], [options]) ⇒ String
Formats given number into given currency, with options. Uses Intl.NumberFormat
under the hood
- Kind:
Returns: String
- The formatted number
Param | Type | Default | Description |
---|---|---|---|
number | Number |
The number to format | |
[locale] | String |
se |
The locale to use |
[options] | Object |
{} |
A set op options to be used for the Intl.NumberFormat |
addClass(el, className)
Add class name(s) to given element. The className
parameter can be a string separated with single space, or a single string for one class name to be used
- Kind:
Param | Type | Description |
---|---|---|
el | HTMLElement |
The element to add the class name(s) to |
className | String |
The class name(s) to add to the given el |
removeAllOccurencesOfValueInArray(arr, value) ⇒ Array
Removes all occurences of value in array
- Kind:
Returns: Array
- The cleaned array
Param | Type | Description |
---|---|---|
arr | Array |
The array to remove values from |
value | String | Number |
The value to remove |
removePreviouslySelectedMenuItem(el)
Remove the previously selected menu item
- Kind:
Param | Type | Description |
---|---|---|
el | HTMLElement |
The element to select menu items from |
isHorizontalNavigation(e) ⇒ Boolean
Is the keyboard event used in horizontal navigation?
- Kind:
Param | Type |
---|---|
e | Event |
isVerticalNavigation(e) ⇒ Boolean
Is the keyboard event used in vertical navigation?
- Kind:
Param | Type |
---|---|
e | Event |
trapFocus(element, [ctx])
Trap focus within given element
- Kind:
Param | Type | Default |
---|---|---|
element | HTMLElement |
|
[ctx] | HTMLElement |
document |
getElementCSSStyle(el) ⇒ CSSStyleDeclaration
Get the CSS style from given element
- Kind:
Param | Type |
---|---|
el | HTMLElement |
getSize(size) ⇒ String
Get the proper human readable size from size
- Kind:
Returns: String
- The human readable size name
Param | Type |
---|---|
size | Number |
Example
// Example
getSize(1024) => 1KB
getSizeName(size) ⇒ String
Get the proper file size name based on size
- Kind:
Returns: String
- The human readable size name
Param | Type |
---|---|
size | Number |
Example
// Example
getSizeName(1024) => KB
getSizeFullName(size) ⇒ String
Get the proper full file size name based on size
- Kind:
Returns: String
- The human readable size name
Param | Type |
---|---|
size | Number |
Example
// Example
getSizeFullName(1024) => Kilobytes
IDSPositionalData : Object
- Kind:
Properties
Name | Type | Description |
---|---|---|
left | number |
The left Coordinate |
top | number |
The top Coordinate |
Changelog
Change Log
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
0.17.0 (2021-10-21)
Code Refactoring
- 💡 Remove support for CommonJS (9f84d9a)
BREAKING CHANGES
- 🧨 We have removed the support for CommonJS for all @ids-js packages
0.16.1 (2021-10-21)
Bug Fixes
- Use common for cjs and main for esm (96f673d)
0.15.0 (2021-10-15)
Features
- 🎸 Add getSiblingsOfSameNode method (6e184ce)
0.14.0 (2021-10-14)
Features
- 🎸 Add scrolllock helper to utils (6a768ed)
- 🎸 Add tooltip and file upload js package (cff82af), closes #467386
0.13.0 (2021-10-01)
Features
0.11.0 (2021-10-01)
Features
- 🎸 Add trapFocus function (d71448b)
0.6.0 (2020-11-12)
Features
- 🎸 Add common, data-tables and tag js (b65169e)