A small TypeScript library with various tools, all ESLint valid and featuring everything useful for creating light libraries or web components. If there is anything that is consistently repeating itself, shorty can help you save up to 50% of the code required, with little to no performance cost.
shorty is featured in ColorPicker, KUTE.js, BSN, Navbar.js and other libraries.
instanceof
for various objects.dist
folder, that is mainly for build consistency testing. You can make use of "tree shaking" to import one or anything your code needs.src
root folder, the structure is key to understanding the purpose of each type of shortie, whether we have boolean
for various basic browser detection or browser feature support, attr
for all things Element attributes or strings
for most common and most used Element.prototype methods.npm install @thednp/shorty
// import the tool you need
import { supportTransform } from "@thednp/shorty";
// use the tool in your ES6/ES7 sources
if (supportTransform) {
// have modern browsers do something about that
}
// EXAMPLES
import { getAttribute, hasAttribute, setAttribute } from "@thednp/shorty";
// check target has certain attribute
if (!hasAttribute(myTarget, "attribute-name")) {
setAttribute(myTarget, "attribute-name", "new-value");
}
// get attribute value
const currentAttrValue = getAttribute(myTarget, "attribute-name");
document.body
;document.documentElement
;document.head
;boolean
value for the client browser is either Apple Safari browser or not;boolean
value for the client browser is either Firefox or not;boolean
value for the client browser is either a Mobile device or not;boolean
value for the client browser capability for webKit perspective
;boolean
value for the client browser capability for touch
events;boolean
value for the client browser capability for passive
event option;boolean
value for the client browser capability for webKit transform
;boolean
value for the client browser capability for webKit keyframe animation
;boolean
value for the client browser capability for webKit transition
;// EXAMPLES
import { support3DTransform } from "@thednp/shorty";
// filter myAction to supported browsers
if (support3DTransform) {
// do something with modern browsers
}
// EXAMPLES
import { addClass, removeClass, hasClass } from "@thednp/shorty";
// add a class
addClass(targetElement, "className");
// remove a class
removeClass(targetElement, "className");
// check for a class
if (hasClass(targetElement, "className")) {
// do something about that
}
// EXAMPLES
import { on, off, one, passiveHandler } from "@thednp/shorty";
// attach a passive mousedown eventHandler
on(targetElement, "click", eventHandler, passiveHandler);
// detach a passive mouseup eventHandler
off(targetElement, "mouseup", eventHandler, passiveHandler);
// attach a single instance passive touchstart eventHandler
one(targetElement, "touchstart", eventHandler, passiveHandler);
For a more advanced method to handle event listeners, I recommend using the event-listener.
#Document
for a given Element or just any Document, useful when working with iframes;<body>
for a given Element or just any;<html>
for a given Element or just any;<head>
for a given Element or just any;animationDelay
property of an animation
property;animationDuration
property of a animation
property;transitionDelay
property of a transition
property;transitionDuration
property of a transition
property;{ x, y }
scroll position;offsetParent
;Window
for a given Element or just any Window;// EXAMPLES
import { getElementAnimationDuration } from "@thednp/shorty";
// store the transition duration for target element on a modern browser
const duration = getElementAnimationDuration(target);
Array
;HTMLCanvasElement
instance;CustomElement
instance;Document
instance;Element
instance;Element
is partially visible in the viewport;Element
is fully visible in the viewport;Array
with Element
instances;Function
instance;HTMLCollection
instance;HTMLElement
instance;HTMLImageElement
instance;SVGElement
, HTMLImageElement
, HTMLCanvasElement
or HTMLVideoElement
instance;Node
instance;NodeList
instance;<html dir="rtl">
;ShadowRoot
instance;SVGElement
instance;<table>
, <td>
or <th>
Element;Window
instance;// EXAMPLES
import { isArray, isHTMLElement, isElementsArray } from "@thednp/shorty";
// check if a value is an `Array` of `Element` instances
if (isArray(myValue) && myValue.every(isHTMLElement)) {
// do something with these instances
}
// or use the dedicated shortie of the above
if (isElementsArray(myValue)) {
// do something with these instances
}
Array.from()
method;Map
;Element.dispatchEvent()
method;Array
;animationend
event is triggered, or execute the callback right after for legacy browsers;transitionend
event is triggered, or execute the callback right after for legacy browsers;Float32Array.from()
method;Float64Array.from()
method;Element.focus()
method;() => {}
NOOP;data-NAMESPACE-option="value"
; priority: JavaScript options > DATA API options > default optionsObject.assign()
method;Object.entries()
method;Object.hasOwn()
method;Object.keys()
method;Object.values()
method;CustomEvent
with the added relatedTarget
and other properties;options
with passive: true
event option used;offsetHeight
value, also because using just element.offsetHeight;
won't validate on ESLint;setTimeout
have a meaning;String.toLowerCase()
method;String.toUpperCase()
method;The Data and Timer utilities have their own specifics, you might want to check the wiki.
// EXAMPLES
import { emulateTransitionEnd, distinct } from "@thednp/shorty";
// execute a callback when transitionend is triggered for the target
emulateTransitionEnd(targetElement, callback);
// define some arrays of numbers
const array1 = [0, 1, 3, 5, 7, 9];
const array2 = [0, 2, 4, 6, 8, 10];
// merge them and filter them to make sure we have distinct values
const array3 = [...array1, ...array2].filter(distinct);
// [0, 1, 3, 5, 7, 9, 2, 4, 6, 8, 10]
Element.closest()
method;Array
with all registered CustomElement
;document.getElementById()
method;Element.getElementsByClassName()
method;Element.getElementsByTagName()
method;Element.matches()
method;// EXAMPLES
import { querySelector, querySelectorAll, documentAll, matches } from "@thednp/shorty";
// get first element that matches a certain selector
const element = querySelector(".my-class-name");
// get all elements that matches same selector
const elements = querySelectorAll(".my-class-name");
// now do the same as the above, but differently
const elements = [...documentAll].filter((x) => matches(x, ".my-class-name"));
transition-timing-function
based on Cubic Bezier; EG: cubic-bezier(0.215,0.61,0.355,1)
for bezierEasings.easingCubicOut
;mousedown
, end: mouseup
, move: mousemove
, cancel: mouseout
;mousedown
, up: mouseup
;mouseenter
and mouseleave
OR mouseover
and mouseout
;touchstart
, end: touchend
, move: touchmove
, cancel: touchcancel
;animationDuration
property for modern browsers;animationDelay
property for modern browsers;animationEndEvent
event for modern browsers;animationName
property name for modern browsers;transitionDuration
property name for modern browsers;transitionDelay
property name for modern browsers;transitionend
event name for modern browsers;transitionProperty
property name for modern browsers;addEventListener
method name;removeEventListener
method name;There are lots more string constants available which include native event names, browser strings, keyboard key codes or ARIA specific attribute names. Be sure to check the src/strings
folder for a complete list.
// EXAMPLES
import { on, off, one, mouseClickEvents, touchEvents, passiveHandler } from "@thednp/shorty";
// attach a passive mousedown eventHandler
on(targetElement, mouseClickEvents.down, eventHandler, passiveHandler);
// detach a passive mousedown eventHandler
off(targetElement, mouseClickEvents.down, eventHandler, passiveHandler);
// attach a single instance passive touchstart eventHandler
one(targetElement, touchEvents.start, eventHandler, passiveHandler);
Here's a simple example to showcase the benefit of using shorty.
// This is your typical day to day scripting
const target = document.getElementById("my-element");
target.addEventListener("click", function (e) {
target.classList.add("my-className");
});
Now make it all shorty. You might want to import shorties directly from their location, something we like to call "tree shaking".
// Example
import on from "@thednp/shorty/src/event/on";
import addClass from "@thednp/shorty/src/class/addClass";
import getElementById from "@thednp/shorty/src/selectors/getElementById";
import mouseclickEvent from "@thednp/shorty/src/strings/mouseclickEvent";
const target = getElementById("my-element");
on(target, mouseclickEvent, function (e) {
addClass(target, "my-className");
});
shorty is released under the MIT License