dom utils

Various dom utilities

Usage

import

import { getTransitionDuration } from "oj-dom-utils"

getTransitionDuration

const duration = getTransitionDuration(element, deep)

getOuterHeight

const height = getOuterHeight(element)

getOuterWidth

const width = getOuterWidth(element)

getOffsetsOnPage

const offset = getOffsetsOnPage(element)

withinViewport

const visible = withinViewport(element, completely)

childOf

const childExistsInContainerElement = childOf(container, child)

getEventProps

const handle = e => {
  const { clientX, clientY } = getEventProps(e) // normalized
}
window.addEventListener("mousemove", handle)
window.addEventListener("touchmove", handle)

getOffsetX

window.addEventListener("mousemove", e => {
  const elementOffsetX = getOffsetX(e)
})

getOffsetY

window.addEventListener("mousemove", e => {
  const elementOffsetY = getOffsetY(e)
})

appendDivTo

const newChildDiv = appendDivTo(element)

sanitizeHTML

const text = sanitizeHTML(text)

jsonToB64

const b64 = jsonToB64(obj)

jsonFromB64

const obj = jsonFromB64(b64)

loadScript

await loadScript(url) // appends script tag to body

getRootElements

data-loaded="true" will be set on all returned elements. elements with this attribute wont be selected the next time.

const elements = getRootElements(selector)

getRootData

selects the first input field within the element and returns the value as json

const data = getRootData(element)

mounter

uses getRootElements and getRootData

mounter("[data-dialog]", (root, data) => {
  new Dialog(root, data)
})