Class UFHtml

Statics_escapeHtmlMap

StaticaddAndRemoveClasses

• addAndRemoveClasses(
      element: Element,
      addClasses: string,
      removeClasses: string,
  ): void

  Combines UFHtml.addClasses and UFHtml.removeClasses.

  Parameters

  • element: Element

    Element to add and remove the classes to and from; can be null, in that case nothing happens.
  • addClasses: string

    Css classes separated by a space character; can be null, in that case no classes are added.
  • removeClasses: string

    Css classes separated by a space character; can be null, in that case no classes are removed.

  Returns void

StaticaddBodyListener

• addBodyListener<T extends HTMLElement>(
      selector: string,
      events: string,
      handlerFactory: (element: T) => EventListenerOrEventListenerObject,
  ): UFCallback

  Adds a listener to the body element for one or more events. If the target or any of the parents of the target matches the selector, the listener is called. The function returns a callback, which can be called to remove the listener. This method can be used to handle events fired by elements that are dynamically added at a later time.

  Type Parameters

  • T extends HTMLElement

  Parameters

  • selector: string

    Selector the target must match.
  • events: string

    One or more events to add listener for (separated by space)
  • handlerFactory: (element: T) => EventListenerOrEventListenerObject

    A factory function that creates a handler callback for the element. Note that this function is called everytime an event is fired. The function should take as little time as possible.

  Returns UFCallback

  a function that can be called to remove the listener from the body.

StaticaddClasses

• addClasses(element: null | Element, classes: null | string): void

  Adds css classes in a single string to an element.

  Parameters

  • element: null | Element

    Element to add the classes to; can be null, in that case nothing happens.
  • classes: null | string

    Css classes separated by a space character; can be null, in that case nothing happens.

  Returns void

StaticaddListener

• addListener(
      element: string | Document | HTMLElement | Window,
      events: string,
      listener: EventListenerOrEventListenerObject,
  ): UFCallback

  Adds a listener for one or more events. The function returns a callback, which can be called to remove the listener.

  Parameters

  • element: string | Document | HTMLElement | Window

    Element to add listener to or selector for the element
  • events: string

    One or more events to add listener for (separated by space)
  • listener: EventListenerOrEventListenerObject

    Listener callback

  Returns UFCallback

  a function that can be called to remove the listener from the element for the events.

StaticaddListeners

• addListeners<T extends HTMLElement>(
      selector: string | NodeListOf<T> | T[],
      events: string,
      handlerFactory: (element: T) => EventListenerOrEventListenerObject,
  ): UFCallback

  Adds a listener for one or more events to an element or a list of elements. The function returns a callback, which can be called to remove all the listener.

  Type Parameters

  • T extends HTMLElement

  Parameters

  • selector: string | NodeListOf<T> | T[]

    Selector for the element(s) or a list of elements.
  • events: string

    One or more events to add listener for (separated by space).
  • handlerFactory: (element: T) => EventListenerOrEventListenerObject

    A factory function that creates a handler callback for the element.

  Returns UFCallback

  a function that can be called to remove all the added listener from the elements for the events.

  Example

  // without event
  const removeListeners = UFHtml.addListeners(
    '.some-button',
    'click touchstart',
    (element) => () => {
      // do something with element
    }
  );
  Copy

  Example

  // with event
  const removeListeners = UFHtml.addListeners(
    '.some-button',
    'click touchstart',
    (element) => (event) => {
      // do something with element and event
    }
  );
  Copy

StaticassignValue

• assignValue(element: Element, value: string): boolean

  Assigns a value to a form field element and triggers the "input" and "change" events.

  With checkbox/radio elements the following values will set the checked state to true: 'true', '1', 'checked'. Any other value will set the checked state to false.

  If the element is not a form field element, nothing happens.

  Parameters

  • element: Element

    Element to assign to
  • value: string

    Value to assign

  Returns boolean

  true if the value could be assigned, false if the element is not a form field.

StaticbuildDataAttributesMap

• buildDataAttributesMap(element: HTMLElement): { [key: string]: string }

  Builds a map of data attributes from the element. The method will skip data attributes that start with 'data-uf-'.

  The result can be used with UFHtml.copyAttributes.

  Parameters

  • element: HTMLElement

    Element to get data attributes from.

  Returns { [key: string]: string }

  an object where the keys are the attribute names and the values are the attribute enclosed by square brackets.

  Example

  // <button id="foobar" data-foo data-bar></button>
  const element = document.getElementById('foobar');
  const map = UFHtml.buildDataAttributesMap(element);
  // map is { 'data-foo': '[data-foo]', 'data-bar': '[data-bar]' }
  Copy

StaticconvertToPlain

• convertToPlain(htmlText: string): string

  Converts a html formatted text to a plain text.

  Based on code from: https://javascript.plainenglish.io/3-ways-to-convert-html-text-to-plain-text-strip-off-the-tags-from-the-string-4c947feb8a8c

  Parameters

  • htmlText: string

    Html text to format

  Returns string

  plain version of the text

StaticcopyAttributes

• copyAttributes(
      element: Element,
      map: { [key: string]: string },
      container?: DocumentFragment | Element,
  ): void

  Copies one or more attribute values to elements. Depending on the type of the element the value gets handled as follows:

  • input: the checked or value property is set (depending on the type).
  • textarea: the value property is set.
  • select: the value property is set.
  • img: the src property is set.
  • any other element: the inner text of the element is set.

  Parameters

  • element: Element

    Element to get the attributes from
  • map: { [key: string]: string }

    The field names are used as attribute names and the values are used as selectors for the target elements. If the selector points to multiple elements, each element will get the attribute value.
  • Optionalcontainer: DocumentFragment | Element

    Container to search the target elements in; if not set, the document is used.

  Returns void

StaticcreateAs

• createAs<T extends Element>(html: string): T

  Creates an element by parsing a piece of html.

  Type Parameters

  • T extends Element

  Parameters

  • html: string

    Html to parse

  Returns T

  created element; the element is removed from the document before it is returned.

Staticempty

• empty(element: Element): void

  Removes all child elements from an element.

  Parameters

  • element: Element

    Element to remove all children of.

  Returns void

StaticescapeHtml

• escapeHtml(text: string): string

  Converts plain text to html by replacing certain characters with their entity equivalent and replacing \n with
  tags.

  Based on code from answer: https://stackoverflow.com/a/4835406/968451

  Parameters

  • text: string

    Text to convert

  Returns string

  Html formatted plain text

StaticfadeIn

• fadeIn(element: HTMLElement, duration?: number): void

  Fades in an element by setting the styles opacity and transition.

  Parameters

  • element: HTMLElement

    Element to fade in
  • duration: number = 400

    Duration in millisecond for the fade in transition (default = 400)

  Returns void

StaticfadeOut

• fadeOut(element: HTMLElement, duration?: number): void

  Fades out an element by setting the styles opacity and transition.

  Parameters

  • element: HTMLElement

    Element to fade out
  • duration: number = 400

    Duration in millisecond for the fade in transition (default = 400)

  Returns void

StaticfindAllForAttribute

• findAllForAttribute<T extends Element>(
      name: string,
      value?: null | string,
      container?: Element,
  ): NodeListOf<T>

  Gets all elements for an attribute.

  Type Parameters

  • T extends Element

  Parameters

  • name: string

    Attribute name
  • value: null | string = null

    Attribute value or use null to ignore value
  • Optionalcontainer: Element

    Container to search the element in; if not set, the document is used.

  Returns NodeListOf<T>

  found elements

StaticfindForAttribute

• findForAttribute<T extends Element>(
      name: string,
      value?: null | string,
      container?: Element,
  ): null | T

  Tries to find an element for an attribute.

  Type Parameters

  • T extends Element

  Parameters

  • name: string

    Attribute name
  • value: null | string = null

    Attribute value or use null to ignore value
  • Optionalcontainer: Element

    Container to search the element in; if not set, the document is used.

  Returns null | T

  found element or null if no element could be found

Staticget

• get<T extends Element>(selector: null | string | T, container?: Element): T

  Gets an element for a selector. If the selector is an element, it just returns the element.

  If the selector is a string, it will try to find the element in the document or container.

  If no element can be found or the selector is a null value, the method will throw an error.

  Type Parameters

  • T extends Element

  Parameters

  • selector: null | string | T

    Element, selector text or null
  • Optionalcontainer: Element

    Container to search the element in; if not set, the document is used.

  Returns T

  found element

  Throws

  Error if no element can be found

StaticgetAttribute

• getAttribute(element: HTMLElement, name: string, defaultValue?: string): string

  Gets the value of an attribute.

  Parameters

  • element: HTMLElement

    Element to get attribute from
  • name: string

    Name of attribute
  • defaultValue: string = ''

    Default value to return if no value could be determined (default = '')

  Returns string

  the value of the attribute or aDefault if there is no value.

StaticgetAttributeNames

• getAttributeNames(element: HTMLElement): string[]

  Gets all attribute names of an element.

  Parameters

  • element: HTMLElement

    Element to get the attribute names from

  Returns string[]

  all the names of attributes defined at the element

StaticgetFirstParent

• getFirstParent(element: HTMLElement, selector: string): null | HTMLElement

  Gets the first parent element of the element that matches the selector.

  Parameters

  • element: HTMLElement

    Element to get the parent (or grandparent or great-grandparent) of
  • selector: string

    Selector to filter the parent with

  Returns null | HTMLElement

  the parent element that matches the selector or null if no parent could be found

  Deprecated

  Use built-in Element.closest() instead

StaticgetForAttribute

• getForAttribute<T extends Element>(
      name: string,
      value?: null | string,
      container?: Element,
  ): T

  Gets an element for an attribute.

  If no element can be found the method will throw an error.

  Type Parameters

  • T extends Element

  Parameters

  • name: string

    Attribute name
  • value: null | string = null

    Attribute value or use null to ignore value
  • Optionalcontainer: Element

    Container to search the element in; if not set, the document is used.

  Returns T

  found element

  Throws

  Error if no element can be found

StaticgetForId

• getForId<T extends Element = HTMLElement>(id: string): T

  Gets an element for a dom ID and typecast it to a certain type.

  If no element can be found, the method will throw an error.

  Type Parameters

  • T extends Element = HTMLElement

  Parameters

  • id: string

    The dom id of element

  Returns T

  found element

  Throws

  Error if no element can be found

StaticgetParents

• getParents(element: HTMLElement, selector?: string): HTMLElement[]

  Gets all parents of an element.

  Parameters

  • element: HTMLElement

    Element to get all parents for
  • Optionalselector: string

    Optional selector to filter the parents with

  Returns HTMLElement[]

  all parent elements of the element (parent, grandparent, great-grandparent, etc.)

StatichasAttribute

• hasAttribute(element: HTMLElement, name: string): boolean

  Checks if an element has an attribute.

  Parameters

  • element: HTMLElement

    Element to check attribute for
  • name: string

    Name of attribute

  Returns boolean

  true if the element has the attribute, false if not.

Statichide

• hide(element: HTMLElement): void

  Hides an element by updating the display style property. The current value is stored in the element and is used by show. Then the value 'none' is assigned to display style.

  Parameters

  • element: HTMLElement

    Element to hide

  Returns void

StaticinsertAfter

• insertAfter(
      parent: Element,
      newElement: Element,
      referenceElement: Element,
  ): void

  Inserts an element after another element.

  Parameters

  • parent: Element

    Parent to insert the element in
  • newElement: Element

    Element to insert
  • referenceElement: Element

    Element to insert the new element after

  Returns void

StaticisVisible

• isVisible(element: HTMLElement, checkParent?: boolean): boolean

  Checks if an element is visible, that it is not hidden by some styling and the element has some size.

  Parameters

  • element: HTMLElement

    Element to check
  • checkParent: boolean = true

    True to check the parents of the element as well, false to only check the element itself.

  Returns boolean

  true if the element is visible, false if not. Note that if only element itself is checked, it does not take into account of any parent is not visible.

Staticreload

• reload(): void

  Reloads the current page. It removes the current page from the history and then reloads the page. Any post data is no longer used and the page with the post data is no longer in the history.

  Source: https://stackoverflow.com/a/570069/968451

  Returns void

StaticremoveClasses

• removeClasses(element: null | Element, classes: null | string): void

  Removes css classes in a single string from an element.

  Parameters

  • element: null | Element

    Element to remove the classes from; can be null, in that case nothing happens.
  • classes: null | string

    Css classes separated by a space character; can be null, in that case nothing happens.

  Returns void

Staticshow

• show(element: HTMLElement, display?: string): void

  Shows a element by updating the display style property.

  Parameters

  • element: HTMLElement

    Element to show
  • Optionaldisplay: string

    When set use this value, else use the initial value which was copied with hide. If there is no initial value, use 'block'.

  Returns void

StatictoggleClasses

• toggleClasses(
      element: null | Element,
      classes: null | string,
      force?: boolean,
  ): void

  Toggle css classes in a single string in an element.

  Parameters

  • element: null | Element

    Element to add to or remove from the classes; can be null, in that case nothing happens.
  • classes: null | string

    Css classes separated by a space character; can be null, in that case nothing happens.
  • Optionalforce: boolean

    If true the classes are added, if false the classes are removed, if not set the classes are toggled.

  Returns void