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

Api

Classes

IDSScrollLock

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:: global class

IDSScrollLock

new IDSScrollLock()

Add scroll lock on body

idsScrollLock.deactivate()

Deactive scroll lock

Kind:: instance method of IDSScrollLock

idsScrollLock.activate()

Activate scroll lock

Kind:: instance method of IDSScrollLock

debounce(func, wait, [immediate]) ⇒ `function`

Debounce function that, as long as it continues to be invoked, will not be triggered.

Kind:: global function

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:: global function

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:: global function

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:: global function

Returns: IDSPositionalData - The positional data

toBottom(modifiers) ⇒ `IDSPositionalData`

Get position data to position toBottom

Kind:: global function

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:: global function

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:: global function

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:: global function

Returns: IDSPositionalData - The positional data

toRight(modifiers, modifier) ⇒ `IDSPositionalData`

Get position data to position toRight

Kind:: global function

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:: global function

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:: global function

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:: global function

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:: global function

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:: global function

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:: global function

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:: global function

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:: global function

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:: global function

Param	Type	Description
el	`HTMLElement`	The element to select menu items from

isHorizontalNavigation(e) ⇒ `Boolean`

Is the keyboard event used in horizontal navigation?

Kind:: global function

Param	Type
e	`Event`

isVerticalNavigation(e) ⇒ `Boolean`

Is the keyboard event used in vertical navigation?

Kind:: global function

Param	Type
e	`Event`

trapFocus(element, [ctx])

Trap focus within given element

Kind:: global function

Param	Type	Default
element	`HTMLElement`
[ctx]	`HTMLElement`	`document`

getElementCSSStyle(el) ⇒ `CSSStyleDeclaration`

Get the CSS style from given element

Kind:: global function

Param	Type
el	`HTMLElement`

getSize(size) ⇒ `String`

Get the proper human readable size from size

Kind:: global function

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:: global function

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:: global function

Returns: String - The human readable size name

Param	Type
size	`Number`

Example

// Example
   getSizeFullName(1024) => Kilobytes

IDSPositionalData : `Object`

Kind:: global typedef

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

🎸 Add JS for Disclosure Card (f9f5dee), closes #467386

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)

JavaScriptThe latest version of this package is: 0.18.6, Opens in new window

Table of Contents

Api

Classes

Functions

Typedefs

IDSScrollLock

new IDSScrollLock()

idsScrollLock.deactivate()

idsScrollLock.activate()

debounce(func, wait, [immediate]) ⇒ function

position(sourceEl, targetEl) ⇒ Object

toTop(modifiers) ⇒ IDSPositionalData

fromTop() ⇒ IDSPositionalData

toBottom(modifiers) ⇒ IDSPositionalData

fromBottom(modifiers) ⇒ IDSPositionalData

toLeft(modifiers) ⇒ IDSPositionalData

fromLeft() ⇒ IDSPositionalData

toRight(modifiers, modifier) ⇒ IDSPositionalData

fromRight(modifiers) ⇒ IDSPositionalData

getSiblingsOfSameNode(currentNode, className) ⇒ Array.<HTMLElement>

getPreviousSibling(el, selector) ⇒ HTMLElement

isOverflownHorizontally(element) ⇒ Boolean

srSpeak(text, [ariaLive], [role], [ariaRelevant], [ariaAtomic])

formatCurrency(number, [locale], [options]) ⇒ String

addClass(el, className)

removeAllOccurencesOfValueInArray(arr, value) ⇒ Array

removePreviouslySelectedMenuItem(el)

isHorizontalNavigation(e) ⇒ Boolean

isVerticalNavigation(e) ⇒ Boolean

trapFocus(element, [ctx])

getElementCSSStyle(el) ⇒ CSSStyleDeclaration

getSize(size) ⇒ String

getSizeName(size) ⇒ String

getSizeFullName(size) ⇒ String

IDSPositionalData : Object

Changelog

Change Log

0.17.0 (2021-10-21)

Code Refactoring

BREAKING CHANGES

0.16.1 (2021-10-21)

Bug Fixes

0.15.0 (2021-10-15)

Features

0.14.0 (2021-10-14)

Features

0.13.0 (2021-10-01)

Features

0.11.0 (2021-10-01)

Features

0.6.0 (2020-11-12)

Features

0.5.0 (2020-11-11)

debounce(func, wait, [immediate]) ⇒ `function`

position(sourceEl, targetEl) ⇒ `Object`

toTop(modifiers) ⇒ `IDSPositionalData`

fromTop() ⇒ `IDSPositionalData`

toBottom(modifiers) ⇒ `IDSPositionalData`

fromBottom(modifiers) ⇒ `IDSPositionalData`

toLeft(modifiers) ⇒ `IDSPositionalData`

fromLeft() ⇒ `IDSPositionalData`

toRight(modifiers, modifier) ⇒ `IDSPositionalData`

fromRight(modifiers) ⇒ `IDSPositionalData`

getSiblingsOfSameNode(currentNode, className) ⇒ `Array.<HTMLElement>`

getPreviousSibling(el, selector) ⇒ `HTMLElement`

isOverflownHorizontally(element) ⇒ `Boolean`

formatCurrency(number, [locale], [options]) ⇒ `String`

removeAllOccurencesOfValueInArray(arr, value) ⇒ `Array`

isHorizontalNavigation(e) ⇒ `Boolean`

isVerticalNavigation(e) ⇒ `Boolean`

getElementCSSStyle(el) ⇒ `CSSStyleDeclaration`

getSize(size) ⇒ `String`

getSizeName(size) ⇒ `String`

getSizeFullName(size) ⇒ `String`

IDSPositionalData : `Object`