TypeScript shorties for the web
npm install @thednp/shortyinstanceof 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.
bash
pnpm install -D @thednp/shorty
`
`bash
yarn add -D @thednp/shorty
`
`bash
npm install -D @thednp/shorty
`
`bash
deno add -D npm:@thednp/shorty@latest
`
TypeScript / ES6+ Base usage
`js
// 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
}
`
attr
- _getAttribute_ - returns the value of a specified _Element_ attribute;
- _getAttributeNS_ - returns the value of a specified namespaced _Element_ attribute (eg: namespaced SVG attributes);
- _hasAttribute_ - check if element has a specified attribute;
- _hasAttributeNS_ - check if element has a specified namespaced attribute;
- _removeAttribute_ - removes a specified attribute from an element;
- _removeAttributeNS_ - removes a specified namespaced attribute from an element;
- _setAttribute_ - set a new attribute value for a given element;
- _setAttributeNS_ - set a new namespaced attribute value for a given element;
`js
// 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");
`
blocks
- _documentBody_ - a shortie for document.body;
- _documentElement_ - a shortie for document.documentElement;
- _documentHead_ - a shortie for document.head;
boolean
- _isApple_ - checks and returns a boolean value for the client browser is either Apple Safari browser or not;
- _isFirefox_ - checks and returns a boolean value for the client browser is either Firefox or not;
- _isMobile_ - checks and returns a boolean value for the client browser is either a Mobile device or not;
- _isWebKit_ - checks and returns a boolean value for the client browser is a WebKit browser or not;
- _support3DTransform_ - checks and returns a boolean value for the client browser capability for webKit perspective;
- _supportTouch_ - checks and returns a boolean value for the client browser capability for touch events;
- _supportPassive_ - checks and returns a boolean value for the client browser capability for passive event option;
- _supportTransform_ - checks and returns a boolean value for the client browser capability for webKit transform;
- _supportAnimation_ - checks and returns a boolean value for the client browser capability for webKit keyframe animation;
- _supportTransition_ - checks and returns a boolean value for the client browser capability for webKit transition;
`js
// EXAMPLES
import { support3DTransform } from "@thednp/shorty";
// filter myAction to supported browsers
if (support3DTransform()) {
// do something with modern browsers
}
`
class
- _addClass_ - add a class to a target _Element_;
- _removeClass_ - remove a class from a target _Element_;
- _hasClass_ - checks the existence of a class for a target _Element_;
`js
// 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
}
`
event
- _on_ - attach an event listener to a specific target _Element_;
- _off_ - detach an event listener from a specific target _Element_;
- _one_ - attach an event listener to a specific target _Element_, and detach when complete;
`js
// 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.
get
- _getBoundingClientRect_ - returns the bounding client rectangle of a given _Element_;
- _getDocument_ - returns the containing #Document for a given _Element_ or just any _Document_, useful when working with iframes;
- _getDocumentBody_ - returns the containing for a given _Element_ or just any;
- _getDocumentElement_ - returns the containing for a given _Element_ or just any;
- _getDocumentHead_ - returns the containing for a given _Element_ or just any;
- _getElementAnimationDelay_ - returns the animationDelay property of an animation property;
- _getElementAnimationDuration_ - returns the animationDuration property of a animation property;
- _getElementTransitionDelay_ - returns the transitionDelay property of a transition property;
- _getElementTransitionDuration_ - returns the transitionDuration property of a transition property;
- _getElementStyle_ - returns the _Element_ computed style for a given property;
- _getNodeName_ - returns the name of the target element;
- _getNodeScroll_ - returns the _Element_ / _Window_ current { x, y } scroll position;
- _getParentNode_ - returns parent of a given _Element_;
- _getOffsetParent_ - returns the offsetParent that's the best for calculating position for a given target;
- _getRectRelativeToOffsetParent_ - returns the bounding client rectangle of a given _Element_ relative to a given offsetParent;
- _getSVGOffset_ - returns an { offsetTop, offsetLeft, offsetWidth, offsetHeight } object for a _SVGElement_ relative to the closest HTMLElement;
- _getUID_ - a nice utility that creates a unique ID for a given _Element_ and returns it;
- _getWindow_ - returns the containing Window for a given _Element_ or just any _Window_;
`js
// EXAMPLES
import { getElementAnimationDuration } from "@thednp/shorty";
// store the transition duration for target element on a modern browser
const duration = getElementAnimationDuration(target);
`
is
- _isArray_ - check if a given value is an Array;
- _isCanvas_ - check if a given value is a HTMLCanvasElement instance;
- _isCustomElement_ - check if a given value is a CustomElement instance;
- _isDocument_ - check if a given value is a Document instance;
- _isElement_ - check if a given value is an Element instance;
- _isElementInScrollRange_ - check if a given Element is partially visible in the viewport;
- _isElementInViewport_ - check if a given Element is fully visible in the viewport;
- _isElementsArray_ - check if a given value is an Array with Element instances;
- _isFunction_ - check if a given value is a Function instance;
- _isHTMLCollection_ - check if a given value is an HTMLCollection instance;
- _isHTMLElement_ - check if a given value is an HTMLElement instance;
- _isHTMLImageElement_ - check if a given value is an HTMLImageElement instance;
- _isMedia_ - check if a given value is an SVGElement, HTMLImageElement, HTMLCanvasElement or HTMLVideoElement instance;
- _isNode_ - check if a given value is a Node instance;
- _isNodeList_ - check if a given value is a NodeList instance;
- _isNumber_ - check if a given value is string;
- _isRTL_ - check if a given node is contained in a ;
- _isScaledElement_ - check if a given _Element_ is affected by scale;
- _isShadowRoot_ - check if a given _Node_ is a ShadowRoot instance;
- _isString_ - check if a given value is string;
- _isSVGElement_ - check if a given value is SVGElement instance;
- _isTableElement_ - check if a given value is or | _Element_;
Window instance;
`js
Array of Element 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 options
Object.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;
`js
`
Element.closest() method;
Array with all registered CustomElement;
document.getElementById() method;
Element.getElementsByClassName() method;
Element.getElementsByTagName() method;
Element.matches() method;
`ts
`
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;
src/strings folder for a complete list.
`ts
`
`ts
`
`ts
``
You notice a pattern yet? Licenseshorty is released under the MIT License |
|---|