shorter-js - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

dist/shorter-js.js

 /*!
-* shorter-js v0.0.1 (https://thednp.github.io/shorter-js/)
+* shorter-js v0.0.2 (https://thednp.github.io/shorter-js/)
 * Copyright 2019-2020 © dnp_theme
@@ -12,15 +12,4 @@ * Licensed under MIT (https://github.com/thednp/shorter-js/blob/master/LICENSE)
 
-  function addClass(element,classNAME) {
-    element.classList.add(classNAME);
-  }
-  function removeClass(element,classNAME) {
-    element.classList.remove(classNAME);
-  }
-  function hasClass(element,classNAME) {
-    return element.classList.contains(classNAME);
-  }
+  var support3DTransform = 'webkitPerspective' in document.body.style || 'perspective' in document.body.style;
 
-  var mouseEvents = { down: 'mousedown', up: 'mouseup' };
-  var touchEvents = { start: 'touchstart', end: 'touchend', move:'touchmove', cancel:'touchcancel' };
-  var mouseHover = ('onmouseleave' in document) ? [ 'mouseenter', 'mouseleave'] : [ 'mouseover', 'mouseout' ];
   function on (element, event, handler, options) {
@@ -30,2 +19,3 @@ options = options || false;
   }
+
   function off (element, event, handler, options) {
@@ -35,2 +25,3 @@ options = options || false;
   }
+
   function one (element, event, handler, options) {
@@ -44,2 +35,3 @@ on(element, event, function handlerWrapper(e){
   }
+
   var supportPassive = (function () {
@@ -57,10 +49,31 @@ var result = false;
   })();
-  var passiveHandler = supportPassive ? { passive: true } : false;
 
   var supportTransform = 'webkitTransform' in document.body.style || 'transform' in document.body.style;
-  var supportTransitions = 'webkitTransition' in document.body.style || 'transition' in document.body.style;
+
+  var supportTransition = 'webkitTransition' in document.body.style || 'transition' in document.body.style;
+
+  function addClass(element,classNAME) {
+    element.classList.add(classNAME);
+  }
+
+  function removeClass(element,classNAME) {
+    element.classList.remove(classNAME);
+  }
+
+  function hasClass(element,classNAME) {
+    return element.classList.contains(classNAME)
+  }
+
+  var mouseClickEvents = { down: 'mousedown', up: 'mouseup' };
+
+  var mouseHoverEvents = ('onmouseleave' in document) ? [ 'mouseenter', 'mouseleave'] : [ 'mouseover', 'mouseout' ];
+
+  var touchEvents = { start: 'touchstart', end: 'touchend', move:'touchmove', cancel:'touchcancel' };
+
+  var transitionDuration = 'webkitTransition' in document.body.style ? 'webkitTransitionDuration' : 'transitionDuration';
+
   var transitionEndEvent = 'webkitTransition' in document.body.style ? 'webkitTransitionEnd' : 'transitionend';
-  var transitionDuration = 'webkitTransition' in document.body.style ? 'webkitTransitionDuration' : 'transitionDuration';
+
   function getElementTransitionDuration (element) {
-    var duration = supportTransitions ? window.getComputedStyle(element)[transitionDuration] : 0;
+    var duration = supportTransition ? window.getComputedStyle(element)[transitionDuration] : 0;
     duration = parseFloat(duration);
@@ -70,2 +83,3 @@ duration = typeof duration === 'number' && !isNaN(duration) ? duration * 1000 : 0;
   }
+
   function emulateTransitionEnd (element,handler){
@@ -77,2 +91,9 @@ var called = 0, duration = getElementTransitionDuration(element);
 
+  var passiveHandler = supportPassive ? { passive: true } : false;
+
+  function queryElement (selector, parent) {
+    var lookUp = parent && parent instanceof Element ? parent : document;
+    return selector instanceof Element ? selector : lookUp.querySelector(selector);
+  }
+
   exports.addClass = addClass;
@@ -82,4 +103,4 @@ exports.emulateTransitionEnd = emulateTransitionEnd;
   exports.hasClass = hasClass;
-  exports.mouseEvents = mouseEvents;
-  exports.mouseHover = mouseHover;
+  exports.mouseClickEvents = mouseClickEvents;
+  exports.mouseHoverEvents = mouseHoverEvents;
   exports.off = off;
@@ -89,6 +110,8 @@ exports.on = on;
   exports.passiveHandler = passiveHandler;
+  exports.queryElement = queryElement;
   exports.removeClass = removeClass;
+  exports.support3DTransform = support3DTransform;
   exports.supportPassive = supportPassive;
   exports.supportTransform = supportTransform;
-  exports.supportTransitions = supportTransitions;
+  exports.supportTransition = supportTransition;
   exports.touchEvents = touchEvents;
@@ -95,0 +118,0 @@ exports.transitionDuration = transitionDuration;

package.json

 {
   "name": "shorter-js",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A small ES6/ES7 library with various JavaScript tools useful for creating light libraries.",
@@ -5,0 +5,0 @@ "main": "dist/shorter-js.js",

README.md

 # shorter-js
-A small ES6/ES7 library with various JavaScript tools useful for creating light libraries.
-Featured in [KUTE.js](https://github.com/thednp/kute.js), [BSN](https://github.com/thednp/bootstrap.native) and other libraries.
+**A small ES6/ES7 library with various JavaScript tools useful for creating light libraries.
+Featured in [KUTE.js](https://github.com/thednp/kute.js), [BSN](https://github.com/thednp/bootstrap.native) and other libraries.**
 
-The purpose if the library is to speed up the development workflow, minimize the size of larger libraries by providing a shorter syntax for most used JavaScript API methods, most used strings or other helpful utilities.
+* The purpose if the library is to speed up the development workflow, minimize the size of larger libraries by providing a shorter syntax for most used JavaScript API methods, most used strings or other helpful utilities.
+* While the library comes with a working build in the `dist` folder, that is mainly for build consistency testing.
 
-While the library comes with a working build in the `dist` folder, the main purpose of the library is mainly to be used in other libraries.
-
 # npm
@@ -17,9 +16,27 @@ ```
 // import the tool you need
-import {on} from 'shorter-js'
+import {supportTransform} from 'shorter-js'
 
 // use the tool in your ES6/ES7 sources
-on(elementTarget,eventName,eventHandler,options)
+if (supportTransform) {
+  doSomeAction()
+}
 ```
+
+# boolean
+* ***support3DTransform*** - checks preserves the client browser capability for webKit `perspective` 
+* ***supportTransform*** - checks and preserves the client browser capability for webKit `transform` 
+* ***supportTransition*** - checks and preserves the client browser capability for webKit `transition` 
+* ***supportPassive*** - checks and preserves the client browser capability for `passive` event option
+
+```js 
+// EXAMPLES
+import {support3DTransform} from 'shorter-js'
+
+// filter myAction to supported browsers
+if (support3DTransform) {
+  myAction()
+}
+```
 	
-# Class
+# class
 * ***addClass*** - add a class to a target *Element*
@@ -43,50 +60,54 @@ * ***removeClass*** - remove a class from a target *Element*
 
-# Event
-* ***mouseEvents*** - preserves the pointer events from mouse actions: down: `mousedown`, up: `mouseup`
-* ***touchEvents*** - preserves the pointer events from touch actions: start: `touchstart`, end: `touchend`, move: `touchmove`, cancel: `touchcancel`
-* ***mouseHover*** - preserve browser specific mouse hover events: `mouseenter` and `mouseleave` OR `mouseover` and `mouseout`
+# event
 * ***on*** - attach an event handler to a specific target *Element*
 * ***off*** - detach an event handler from a specific target *Element*
 * ***one*** - attach an event handler to a specific target *Element*, and detach when complete
-* ***supportPassive*** - a constant that checks and preserves the client browser for `passive` event capability
-* ***passiveHandler*** - a constant that preserves a standard handler `options` with `passive: true event` option used
-
 ```js 
 // EXAMPLES
-import {on,off,one,mouseEvents,touchEvents,passiveHandler} from 'shorter-js'
+import {on,off,one,passiveHandler} from 'shorter-js'
 
 // attach a passive mousedown eventHandler
-on(targetElement,mouseEvents.down,eventHandler,passiveHandler)
+on(targetElement,'click',eventHandler,passiveHandler)
 // detach a passive mousedown eventHandler
-off(targetElement,mouseEvents.down,eventHandler,passiveHandler)
+off(targetElement,'mouseup',eventHandler,passiveHandler)
 // attach a single instance passive mousedown eventHandler
-one(targetElement,touchEvents.start,eventHandler,passiveHandler)
+one(targetElement,'touchstart',eventHandler,passiveHandler)
 ```
 
-# Transition
-* ***supportTransform*** - checks and preserves the client browser capability for webKit `transform` 
-* ***supportTransitions*** - checks and preserves the client browser capability for webKit `transition` 
-* ***transitionEndEvent*** - preserves the `transitionend` event name supported by the client browser 
-* ***transitionDuration*** - preserves the `transitionDuration` event property supported by the client browser 
+# misc
+* ***emulateTransitionEnd*** - utility to execute a callback function when `transitionend` event is triggered, or execute the callback right after for legacy browsers
 * ***getElementTransitionDuration*** - returns the `transitionDuration` property of a `transition` property
-* ***emulateTransitionEnd*** - utility to execute a callback function when `transitionend` event is triggered
-
+* ***passiveHandler*** - a constant that preserves a standard handler `options` with `passive: true event` option used
+* ***queryElement*** - a simple utility to check if a certain item is an *Element* or a selector string, and if a selector string find the FIRST *Element* and return it
 ```js 
 // EXAMPLES
-import {on,supportTransitions,transitionEndEvent,emulateTransitionEnd} from 'shorter-js'
+import {queryElement,emulateTransitionEnd} from 'shorter-js'
 
-// check if client supports transitions
-if (supportTransitions){
-  // attach transitionend handler
-  on(targetElement,transitionEndEvent,eventHandler,options)
-} else {
-  eventHandler()
-}
+// get some target
+let targetElement = queryElement('.mySelectorClass');
 
-// the above should be equivalent to a much shorter
-emulateTransitionEnd(targetElement,eventHandler)
+// emulateTransitionEnd for the above
+emulateTransitionEnd(targetElement,callback)
 ```
 
+# strings
+* ***mouseClickEvents*** - preserves the pointer events from mouse actions: down: `mousedown`, up: `mouseup`
+* ***mouseHoverEvents*** - preserve browser specific mouse hover events: `mouseenter` and `mouseleave` OR `mouseover` and `mouseout`
+* ***touchEvents*** - preserves the pointer events from touch actions: start: `touchstart`, end: `touchend`, move: `touchmove`, cancel: `touchcancel`
+* ***transitionDuration*** - preserves the `transitionDuration` event property supported by the client browser 
+* ***transitionEndEvent*** - preserves the `transitionend` event name supported by the client browser 
 
+```js 
+// EXAMPLES
+import {on,off,one,mouseEvents,touchEvents,passiveHandler} from 'shorter-js'
+
+// attach a passive mousedown eventHandler
+on(targetElement,mouseEvents.down,eventHandler,passiveHandler)
+// detach a passive mousedown eventHandler
+off(targetElement,mouseEvents.down,eventHandler,passiveHandler)
+// attach a single instance passive mousedown eventHandler
+one(targetElement,touchEvents.start,eventHandler,passiveHandler)
+```
+
 # License
 [MIT License](https://github.com/thednp/shorter-js/blob/master/LICENSE)

src/index.js

@@ -0,8 +1,28 @@
+// boolean
+export {support3DTransform} from './boolean/support3DTransform.js'
+export {supportPassive}     from './boolean/supportPassive.js'
+export {supportTransform}   from './boolean/supportTransform.js'
+export {supportTransition}  from './boolean/supportTransition.js'
+
 // class
-export {addClass,removeClass,hasClass} from './class.js'
+export {addClass}     from './class/addClass.js'
+export {removeClass}  from './class/removeClass.js'
+export {hasClass}     from './class/hasClass.js'
 
 // event
-export {mouseEvents,touchEvents,mouseHover,on,off,one,supportPassive,passiveHandler} from './event.js'
+export {on}   from './event/on.js'
+export {off}  from './event/off.js'
+export {one}  from './event/one.js'
 
-// transition
-export {supportTransform,supportTransitions,transitionEndEvent,transitionDuration,getElementTransitionDuration,emulateTransitionEnd} from './transition.js'
+// strings
+export {mouseClickEvents}   from './strings/mouseClickEvents.js'
+export {mouseHoverEvents}   from './strings/mouseHoverEvents.js'
+export {touchEvents}        from './strings/touchEvents.js'
+export {transitionDuration} from './strings/transitionDuration.js'
+export {transitionEndEvent} from './strings/transitionEndEvent.js'
+
+// misc
+export {emulateTransitionEnd}         from './misc/emulateTransitionEnd.js'
+export {passiveHandler}               from './misc/passiveHandler.js'
+export {getElementTransitionDuration} from './misc/getElementTransitionDuration.js'
+export {queryElement}                 from './misc/queryElement.js'

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

18701

increased by18.12%

Number of package files

26

increased by160%

Lines of code

225

increased by11.39%

Number of lines in readme file

112

increased by23.08%

No dependency changes