lemonade-helpers
Utility functions for browser and dom events
Installation
npm install lemonade-helpers
Usage
import { onClick } from "lemonade-helpers";
let offClick;
function init() {
let button = document.querySelector('button');
// add 'click' event listener on button
offClick = onClick(button, () => {
console.log('click');
});
}
function destroy() {
// remove 'click' event listener on button
offClick();
}
Functions
noop()
Empty function
now()
Return performance.now if available, Date.now otherwise
offBlur = onBlur(element, fn, [options])
Attach a blur
listener to element
. Return a function to detach the listener.
offFocus = onFocus(element, fn, [options])
Attach a focus
listener to element
. Return a function to detach the listener.
offChange = onChange(element, fn, [options])
Attach a change
listener to element
. Return a function to detach the listener.
offClick = onClick(element, fn, [options])
Attach a click
listener to element
. Return a function to detach the listener.
offMouseDown = onMouseDown(element, fn, [options])
Attach a mousedown
listener to element
. Return a function to detach the listener.
offMouseMove = onMouseMove(element, fn, [options])
Attach a mousemove
listener to element
. Return a function to detach the listener.
offMouseEnter = onMouseEnter(element, fn, [options])
Attach a mouseenter
listener to element
. Return a function to detach the listener.
onTouchStart(element, fn, [options])
Attach a touchstart
listener to element
. Return a function to detach the listener.
onTouchMove(element, fn, [options])
Attach a touchmove
listener to element
. Return a function to detach the listener.
onTouchEnd(element, fn, [options])
Attach a touchend
listener to element
. Return a function to detach the listener.
offPointerDown = onPointerDown(element, fn, [options])
Attach mousedown
and touchstart
listeners to element
. Return a function to detach the listeners.
onPointerMove(element, fn, [options])
Attach mousemove
and touchmove
listeners to element
. Return a function to detach the listeners.
onPointerUp(element, fn, [options])
Attach mouseup
and touchend
listeners to element
. Return a function to detach the listeners.
offKeyDown = onKeyDown([element], fn, [options])
Attach a keydown
listener to element
. If only a function is provided, the listener will be attached to document
.
Return a function to detach the listener.
offKeyPress = onKeyPress(element, fn, [options])
Attach a keypress
listener to element
. If only a function is provided, the listener will be attached to document
.
Return a function to detach the listener.
offKeyUp = onKeyUp(element, fn, [options])
Attach a keyup
listener to element
. If only a function is provided, the listener will be attached to document
.
Return a function to detach the listener.
offRaf = onRAF(fn, [options])
Subscribe fn
on requestAnimationFrame
.
Set options.fire
to true
to trigger fn
before waiting for the next frame.
Return a function to cancel the subscription.
offWindowResize = onWindowResize(fn)
Attach a resize
listener to window
if non-existent.
Set options.fire
to true
to trigger fn
before waiting for the next resize.
Subscribe fn
on window resize. Return a function to cancel the subscription.
offSwipeHorizontal = onSwipeHorizontal(element, fn, [options]) (Touch-only)
Attach touchstart
, touchmove
and touchend
to element
and trigger fn
when finger moves more than options.delta on the x
axis (default to 30px). Return a function to detach the listeners.
offSwipeVertical = onSwipeVertical(element, fn, [options]) (Touch-only)
Attach touchstart
, touchmove
and touchend
to element
and trigger fn
when finger moves more than options.delta on the y
axis (default to 30px). Return a function to detach the listeners.
offDragDrop = onDragDrop(element, fn, [options])
Trigger fn
when element is mousedown
or touchstart
and when options.outsideElement
is mousemove
or touchmove
Return a function to detach all the listeners created.
element
: the DOM element to attachedmousedown
andtouchstart
eventsfn
: A callback functionoptions.outsideElement
: the DOM element to attachedmousemove
andtouchstart
events. Default todocument
.
offKonami = onKonami(fn)
Attach keydown
listener to document
and trigger fn
when consecutive keys match the Konami Code.
Return a function to detach the listener.
preventEventIfNoKey(event)
Avoid event.preventDefault is the event was triggered while CMD
, Alt
, Shift
, Ctrl
was pressed.
Useful to prevent click on links while keeping the default behaviour (opening in a new tab) if a key is pressed simultaneously.
style(element, property, value)
Shorthand for element.style[property] = value
. I found it to improve readability while styling multiple elements at the same time.
styles(element, props)
Assign multiple property/value pairs at the same time.
styles(element, {
transform: `translate3d(${x}px, ${y}px, 0)',
opacity,
})
License
MIT License, see LICENSE for details