JavaScriptThe latest version of this package is: 0.17.3, 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.17.3

Table of Contents

Api

Classes

IDSScrollLock

Functions

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

position(el) ⇒ `function`

Positions the given element, with a set of chained functions

isOverflownHorizontally(element) ⇒ `Boolean`

Checks if the element is overflowed horizontally

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

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

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`

IDSScrollLock

Kind:

global class

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

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

position(el) ⇒ function

Positions the given element, with a set of chained functions

Kind:

global function

Returns: function - The function used in the chained event.

Param Type Description
el HTMLElement The element to position

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

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)
);

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
Contact us, Opens in new window