Utilities for clientside code injection
const {
replace,
insertBefore,
insertAfter,
onEvent,
onEnterViewport,
restoreAll
} = require('@qubit/utils/dom')()
Replaces target
with el
, returns a function that swaps the elements back round
e.g.
const restore = replace(target, el)
Inserts el
before target
, returns a function that removes el
e.g.
const restore = insertBefore(target, el)
Inserts el
after target
, returns a function that removes el
e.g.
const restore = insertAfter(target, el)
Adds an event listener of type
to el
, returning a function that removes it. If you omit the callback, the function returns a promise. You should use restoreAll to restore in this case.
e.g.
const restore = onEvent(el, 'click', cb)
onEvent(el, 'click').then(fn)
function cb () {
window.alert('clicked!')
}
Calls callback when el
enters the viewport, returns a function that cancels and removes any event listeners. If you omit the callback, the function returns a promise. You should use restoreAll to restore in this case.
e.g.
const restore = onEnterViewport(el, cb)
onEnterViewport(el).then(cb)
function cb () {
window.alert('Hello from viewport!')
}
Calls all dispose functions that got generated by using the other methods e.g.
replace(target, el)
onEvent(el, 'click', handler)
restoreAll()
// Equivalent to:
const restore1 = replace(target, el)
const restore2 = onEvent(el, 'click', handler)
restore1()
restore2()