browser/dom

Source:

Methods

(static) addScrollbarCustomProperty(options)

Description:

  • Sets a CSS custom property equal to the scrollbar width.

Source:
Parameters:
Name Type Description
options object

Configuration options.

Properties
Name Type Attributes Default Description
scrollableChild HTMLElement <optional>
 document.body

An element that is a child of a scrollable container (used for width calculation).
container Window | HTMLElement <optional>
 window

The container that can be scrolled (used for width calculation).
propertyElement HTMLElement <optional>
 document.documentElement

The element to which the custom property will be added. Defaults to document.documentElement for :root access.
propertyName string <optional>
 "--ulu-scrollbar-width"

The name of the custom property to set.

(static) composeElement(config)

Description:

  • Creates a new element with attributes and children

Source:
Parameters:
Name Type Description
config Object

Configuration object

Properties
Name Type Description
tag String

Node type (ie 'div')
attributes Object

Attributes to add to the new element
children Array

Array of children to append into the new element

(static) createElementFromHtml(markup)

Description:

  • Returns Node List from HTML markup string

Source:
Parameters:
Name Type Description
markup String

HTML markup to create into an element

(static) documentHeight() → {number}

Description:

  • Returns reliable document height

Source:
Returns:
Type
number

(static) getDatasetJson(element, key, defaultValueopt) → {Object}

Description:

  • Get an elements JSON dataset value

    • Falls to empty object if no json passed
Source:
Parameters:
Name Type Attributes Default Description
element Node
key String

key in dataset object for element
defaultValue * <optional>
 {}

Value to fallback to if no JSON
Returns:

Empty object or JSON object from dataset

Type
Object

(static) getDatasetOptionalJson(element, key) → {Object|String}

Description:

  • Get an elements JSON dataset value that could potentially just be a single string

    • If JSON it will return the object else it will return the value directly
Source:
Parameters:
Name Type Description
element Node
key String

key in dataset object for element
Returns:

JSON object or current dataset value (string or empty string if no value)

Type
Object | String

(static) getDirectDescandants(element, selector) → {Array}

Description:

  • Returns an array of direct descendants

Source:
Parameters:
Name Type Description
element Node
selector String
Returns:
Type
Array

(static) getElement(target, context) → {HTMLElement}

Description:

  • Resolve a target to Element

Source:
Parameters:
Name Type Description
target String | Node

The selector or node/element
context Object

[document] The context to query possible selectors from
Returns:

The element or null if not found

Type
HTMLElement

(static) getElements(target, context) → {Array}

Description:

  • Resolve a target to Elements

Source:
Parameters:
Name Type Description
target String | Node

The selector or node/element
context Object

[document] The context to query possible selectors from
Returns:

The elements or null if not found

Type
Array

(static) getScrollParent(node) → {Node}

Description:

  • For a given element return the first parent that has scrollable overflow

    • Helpful for debugging position sticky
Source:
Example
const $navcontent = document.querySelector(".nav__content");
  if ($navcontent) {
    console.log(getScrollParent($navcontent));
  }
Parameters:
Name Type Description
node Node

Node to start search for first scrollable parent
Returns:
Type
Node

(static) getScrollbarWidth(elementopt, containeropt) → {number}

Description:

  • Calculates the width of the scrollbar.

Source:
Parameters:
Name Type Attributes Default Description
element HTMLElement <optional>
 document.body

The element that is the child of a scrollable container
container Window | HTMLElement <optional>
 window

The container that can be scrolled
Returns:

The width of the scrollbar in pixels.

Type
number

(static) isBrowser() → {Boolean}

Description:

  • Determine if the script is executing in a browser environment

Source:
Returns:
Type
Boolean

(static) isOverflown(element) → {Boolean}

Description:

  • Checks if element is overflown both vertically and horizontally

Source:
Parameters:
Name Type Description
element Node
Returns:
Type
Boolean

(static) isOverflownY(element) → {Boolean}

Description:

  • Checks if element is overflown vertically

Source:
Parameters:
Name Type Description
element Node
Returns:
Type
Boolean

(static) preventScroll(config) → {function}

Description:

  • Prevents scrolling on the document body and optionally compensates for scrollbar shift. Caches original body styles and returns a function to restore them.

Source:
Parameters:
Name Type Description
config Object

Object of options/arguments

Properties
Name Type Attributes Default Description
container HTMLElement <optional>
 document.body

Container to prevent scroll on (defaults to document.body)
preventShift Boolean <optional>
 false

If true, adds padding-right to the container equal to the scrollbar width to prevent layout shift, defaults to false
Returns:

A restore/cleanup function that restores the original body styles.

Type
function

(static) stripHtmlTags(html) → {String}

Description:

  • Remove HTML elements from string

Source:
Parameters:
Name Type Description
html String

Source HTML
Returns:

String version

Type
String

(static) wasClickOutside(element, event)

Description:

  • Check if a pointer event x/y was outside an elements bounding box

Source:
Parameters:
Name Type Description
element Node

Element to test against
event Event

Event object for (pointer related events)

(static) windowHeight() → {number}

Description:

  • Returns reliable window height

Source:
Returns:
Type
number

(static) windowWidth() → {number}

Description:

  • Returns reliable window width

Source:
Returns:
Type
number