Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
shorter-js
Advanced tools
A small ES6+ library with various JavaScript tools useful for creating light libraries.
A small ES6+ library with various JavaScript tools, all ESLint valid, useful for creating light libraries. Featured in KUTE.js, BSN, Navbar.js and other libraries.
dist
folder, that is mainly for build consistency testing.npm install shorter-js
// import the tool you need
import {supportTransform} from 'shorter-js'
// use the tool in your ES6/ES7 sources
if (supportTransform) {
doSomeAction()
}
perspective
touch
eventspassive
event optiontransform
animation
transition
// EXAMPLES
import {support3DTransform} from 'shorter-js'
// filter myAction to supported browsers
if (support3DTransform) {
myAction()
}
// EXAMPLES
import {addClass,removeClass,hasClass} from 'shorter-js'
// add a class
addClass(targetElement,'className')
// remove a class
removeClass(targetElement,'className')
// check for a class
if (hasClass(targetElement,'className')) {
myAction()
}
// EXAMPLES
import {on,off,one,passiveHandler} from 'shorter-js'
// 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)
animationend
event is triggered, or execute the callback right after for legacy browserstransitionend
event is triggered, or execute the callback right after for legacy browsersanimationDuration
property of a animation
propertyanimationDelay
property of an animation
propertytransitionDuration
property of a transition
propertytransitionDelay
property of a transition
propertyoptions
with passive: true event
option useddata-NAMESPACE-option="value"
; priority: JavaScript options > DATA API options > default optionstry()
and catch()
wrapper for functions, with option to preffix the error logs, poiting out the source of the errorselement.offsetHeight;
won't validate on ESLint.// EXAMPLES
import {queryElement,emulateTransitionEnd,normalizeOptions} from 'shorter-js'
// get some target
let targetElement = queryElement('.mySelectorClass');
// emulateTransitionEnd for the above
emulateTransitionEnd(targetElement,callback)
// check if element is in scroll range
// emulateTransitionEnd for the above
if (isElementInScrollRange(targetElement)){
doSomeAction()
}
// set component options
const options = normalizeOptions( element, defaultOptions, inputOptions, nameSpace )
// element - the component target, the owned of the DATA API attributes
// defaultOptions - the component default options
// inputOptions - the component JavaScript options
// namaSpace - the DATA API namespace
// ..required to get the value of `data-NAMESPACE-option="value"`
transition-timing-function
based on Cubic Bezier; EG: cubic-bezier(0.215,0.61,0.355,1)
for bezierEasing.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 name supported by the client browseranimationDelay
property name supported by the client browseranimationEndEvent
event name supported by the client browseranimationName
property name supported by the client browsertransitionDuration
property name supported by the client browsertransitionDelay
property name supported by the client browsertransitionend
event name supported by the client browsertransitionProperty
property name supported by the client browseraddEventListener
method nameremoveEventListener
method name// EXAMPLES
import {on,off,one,mouseClickEvents,touchEvents,passiveHandler} from 'shorter-js'
// 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)
To avoid adding un-necessary shorties into your code, you might want to import them directly from their location.
// Example
import on from 'shorter-js/src/event/on.js'
import addClass from 'shorter-js/src/class/addClass.js'
on(document.getElementById('my-elem'),'eventName',function(e){
addClass(document.getElementById('my-elem'),'my-className')
})
FAQs
JavaScript shorties for the modern web.
The npm package shorter-js receives a total of 1,334 weekly downloads. As such, shorter-js popularity was classified as popular.
We found that shorter-js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.