@kollegorna/js-utils
Advanced tools
A library of ES6 utilities.
Install with $ yarn add @kollegorna/js-utils.
Import utils you need to your project, e.g.:
import { addEventListener } from "js-utils/src/event";
Browse Documentation
In order to gain a wider browser support, install and import these polyfills in your project:
$ yarn$ yarn dev when developing. This will:
src and make sure the corresponding examples on demo are updated/addedonCssAnimationEnd(elements, callback [, options = { continuous = false, oncePerElems = true, oncePerAnims = true }])Fires a callback function when CSS animation ends.
Examples:
onCssAnimationEnd(btn, callbackFunction)
onCssAnimationEnd(btns, callbackFunction, {oncePerAnims = false})
onCssAnimationEnd('.btn', callbackFunction)
onCssTransitionEnd(elements, callback [, options = { continuous = false, oncePerElems = true, oncePerAnims = true }])Fires a callback function when CSS transition ends
Examples:
onCssTransitionEnd(btn, callbackFunction)
onCssTransitionEnd(btns, callbackFunction, {oncePerElems = false})
onCssTransitionEnd('.btn', callbackFunction)
clearCssAnimationEnd(elements)Cleans all CSS animation end event listeners
clearCssTransitionEnd(elements)Cleans all CSS transition end event listeners
addClass(elements, classnames)An extended implementation of Element.classList.add(): adds classname(s) to single or multiple elements
Examples:
addClass(btn, "btn--green");
addClass(".btn", "btn--disabled btn--grey");
removeClass(elements, classnames)An extended implementation of Element.classList.remove(): removes classname(s) from single or multiple elements
Examples:
removeClass(btn, "btn--green");
removeClass(".btn", "btn--disabled btn--grey");
toggleClass(elements, classnames [, force = undefined])An extended implementation of Element.classList.remove(): toggles classname(s) from single or multiple elements
Examples:
toggleClass(btn, "btn--green", true);
toggleClass(".btn", "btn--disabled btn--grey");
getCookieValue(name)Finds cookie by name and returns its value.
Examples:
getCookieValue("_ga");
addEventListener(elements, eventNames, callback [, options/useCapture = false])Attaches the event handler. More about options/useCapture.
Examples:
addEventListener(btns, "click", doIt);
addEventListener([btn1, btn2], "click", doIt);
addEventListener(".btn", "click", doIt);
addEventListener(btn, "click focus", doIt);
addEventListener(btn, "click", doIt, { passive: true });
delegateEventListener(selector, eventNames, callback)Delegates the event handler (an equivalent to jQuery's .live()).
Examples:
delegateEventListener(".btn", "click", doIt);
delegateEventListener(".btn", "click focus", doIt);
In order to remove event handler, use document as a target element, e.g.:
delegateEventListener(".btn", "click", doIt); // delegate
removeEventListener(document, "click", doIt); // remove
// removing without using the callback function:
delegateEventListener(".btn", "click.btnDelegate", doIt); // delegate
removeEventListener(document, "click.btnDelegate"); // remove
removeEventListener(elements [, eventName = false, callback = false, options/useCapture = false])Removes the event handler. More about options/useCapture.
Examples:
removeEventListener(btn); // removes all event hanlders
removeEventListener(btn, "click"); // removes 'click' event handlers
removeEventListener(".btn", "click"); // removes 'click' event handlers
removeEventListener(btn, "click.thisIsNamespace"); // removes 'click.thisIsNamespace' event hanlders handlers
removeEventListener(btn, false, doIt); // removes all event handlers that are equal to 'doIt()'
removeEventListener(btn, "click", doIt); // removes 'click' event handlers that are equal to 'doIt()'
removeEventListener(btn, false, false, { passive: false }); // removes all event handlers that were attached together with the exact provided options
triggerEvent(elements, eventNames [, data = null])Triggers the event(s). data — data to pass to the event handler ((e) => {e.detail}). Doesn't work with click|focus|blur events.
Examples:
triggerEvent(btn, "click"); // triggers 'click' event
triggerEvent(btn, "click.thisIsNamespace"); // triggers 'click.thisIsNamespace' event
triggerEvent(btn, ".thisIsNamespace"); // triggers all events with 'thisIsNamespace' namespace
triggerEvent(btn, "customEvent"); // triggers custom event
triggerEvent(btn, "customEvent anotherCustomEvent"); // triggers custom event
triggerEvent(btn, "customEvent", "someData"); // triggers custom event and passed data
triggerEvent(btn, "customEvent", { some: "data" }); // triggers custom event and passed data
debounce(delay, fn)Debounces execution of a function.
Example:
window.addEventListener(
"resize",
debounce(500, () => {
// do something expensive here
})
);
throttle(delay, fn)Throttles execution of a function.
Example:
window.addEventListener(
"scroll",
throttle(500, () => {
// do something expensive here
})
);
loadScript(src, cache = true)Loads script file.
Returns: Promise.
Example:
loadScript("jquery.min.js", false)
.then(() => {
alert(typeof $);
})
.catch(error => {
alert(`Error: ${error}. Try again.`);
});
getOffset(elements)Returns top/left offsets of an element
Returns: Object.
Example:
getOffset(container);
getOffset(".container");
serialPromises(...fns)Resolves promises sequentially.
Example:
serialPromises(
() => loadScript("jquery.min.js"),
() => loadScript("jquery-ui.min.js")
)
.then(() => {
$("ul").sortable();
})
.catch(error => {
// error
});
getElements(elements [, source = document])Accepts String, Element, NodeList, Array and returns Array of elements.
hasClosest(element, matches)Based on how Element.closest() works. Returns true if element has the
closest ancestor (or itself) that matches the matches (element|selector).
getParents(element [, selector = '', until = null])Returns an Array of parents of element that matches the given selector
up until the until matching element|selector.
Smart Outline hides the outline when interacting with a mouse and brings it back when interacting with a keyboard.
initSmartOutline([selectors])Inits Smart Outline. selectors is an array of CSS selectors whose elements to affect. Default value:
```js
[
'input:focus',
'button:focus',
'textarea:focus',
'select:focus',
]
```
showSmartOutline()Temporarily reveals outline.
haltSmartOutline()Halts Smart Outline.
For more functionality, consider using these vanilla JavaScript libraries:
FAQs
Kollegorna's JavaScript utilities
The npm package @kollegorna/js-utils receives a total of 10 weekly downloads. As such, @kollegorna/js-utils popularity was classified as not popular.
We found that @kollegorna/js-utils demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 10 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.