matt-utils - npm Package Compare versions

Comparing version 1.3.1 to 1.4.0

dist/matt-utils.js

@@ -1,6 +0,1 @@
-(function (global, factory) {
-typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-typeof define === 'function' && define.amd ? define(['exports'], factory) :
-(global = global || self, factory(global['matt-utils'] = {}));
-}(this, (function (exports) {
 function byId(id) {
@@ -18,2 +13,3 @@ return document.getElementById(id);
 }
+
 function forEachHTML(els, fn, scope) {
@@ -29,2 +25,16 @@ for (let i = 0, numEls = els.length; i < numEls; i++) fn.call(scope, els[i], i);
 }
+function getTopPos(el, topEl = document.body) {
+  return el.getBoundingClientRect().top - topEl.getBoundingClientRect().top;
+}
+function getLeftPos(el, topEl = document.body) {
+  return el.getBoundingClientRect().left - topEl.getBoundingClientRect().left;
+}
+function getElementIndex(el) {
+  let index = 0;
+
+  while (el = el.previousElementSibling) index++;
+
+  return index;
+}
+
 function addClass(el, ...classes) {
@@ -57,8 +67,21 @@ if (el.length === undefined) addClassEl(el, ...classes);else {
 function hasClass(el, ...classes) {
-  let hasClasses = false;
-  classes.forEach(cls => {
-    hasClasses = el.classList.contains(cls);
-  });
-  return hasClasses;
+  let hasCls = false;
+  if (el.length === undefined) hasCls = hasClassEl(el, ...classes);else {
+    let numClasses = 0;
+    forEachHTML(el, currEl => {
+      if (hasClassEl(currEl, ...classes)) numClasses++;
+    });
+    hasCls = numClasses === el.length;
+  }
+  return hasCls;
+
+  function hasClassEl(elem, ...hasClasses) {
+    let numClasses = 0;
+    hasClasses.forEach(cls => {
+      if (elem.classList.contains(cls)) numClasses++;
+    });
+    return numClasses === hasClasses.length;
+  }
 }
+
 function addEvent(el, ev, fn, opts) {
@@ -70,15 +93,3 @@ el.addEventListener(ev, fn, opts);
 }
-function getTopPos(el, topEl = document.body) {
-  return el.getBoundingClientRect().top - topEl.getBoundingClientRect().top;
-}
-function getLeftPos(el, topEl = document.body) {
-  return el.getBoundingClientRect().left - topEl.getBoundingClientRect().left;
-}
-function getElementIndex(el) {
-  let index = 0;
 
-  while (el = el.previousElementSibling) index++;
-
-  return index;
-}
 function getAttr(el, attr) {
@@ -97,23 +108,2 @@ return el.getAttribute(attr);
 
-exports.addClass = addClass;
-exports.addEvent = addEvent;
-exports.byClass = byClass;
-exports.byId = byId;
-exports.forEachHTML = forEachHTML;
-exports.getAttr = getAttr;
-exports.getElementIndex = getElementIndex;
-exports.getLeftPos = getLeftPos;
-exports.getTopPos = getTopPos;
-exports.hasAttr = hasAttr;
-exports.hasClass = hasClass;
-exports.nextFrame = nextFrame;
-exports.query = query;
-exports.queryAll = queryAll;
-exports.remAttr = remAttr;
-exports.removeClass = removeClass;
-exports.removeEvent = removeEvent;
-exports.setAttr = setAttr;
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-})));
+export { addClass, addEvent, byClass, byId, forEachHTML, getAttr, getElementIndex, getLeftPos, getTopPos, hasAttr, hasClass, nextFrame, query, queryAll, remAttr, removeClass, removeEvent, setAttr };

dist/matt-utils.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self)["matt-utils"]={})}(this,(function(t){function e(t,e,n){for(let o=0,r=t.length;o<r;o++)e.call(n,t[o],o)}t.addClass=function(t,...n){function o(t,...e){e.forEach(e=>{t.classList.add(e)})}void 0===t.length?o(t,...n):e(t,t=>{o(t,...n)})},t.addEvent=function(t,e,n,o){t.addEventListener(e,n,o)},t.byClass=function(t,e=document){return e.getElementsByClassName(t)},t.byId=function(t){return document.getElementById(t)},t.forEachHTML=e,t.getAttr=function(t,e){return t.getAttribute(e)},t.getElementIndex=function(t){let e=0;for(;t=t.previousElementSibling;)e++;return e},t.getLeftPos=function(t,e=document.body){return t.getBoundingClientRect().left-e.getBoundingClientRect().left},t.getTopPos=function(t,e=document.body){return t.getBoundingClientRect().top-e.getBoundingClientRect().top},t.hasAttr=function(t,e){return t.hasAttribute(e)},t.hasClass=function(t,...e){let n=!1;return e.forEach(e=>{n=t.classList.contains(e)}),n},t.nextFrame=function(t){requestAnimationFrame(()=>{requestAnimationFrame(()=>{t.call()})})},t.query=function(t,e=document){return e.querySelector(t)},t.queryAll=function(t,e=document){return e.querySelectorAll(t)},t.remAttr=function(t,e){t.removeAttribute(e)},t.removeClass=function(t,...n){function o(t,...e){e.forEach(e=>{t.classList.remove(e)})}void 0===t.length?o(t,...n):e(t,t=>{o(t,...n)})},t.removeEvent=function(t,e,n,o){t.removeEventListener(e,n,o)},t.setAttr=function(t,e,n){t.setAttribute(e,n)},Object.defineProperty(t,"__esModule",{value:!0})}));
+function t(t){return document.getElementById(t)}function n(t,n=document){return n.getElementsByClassName(t)}function e(t,n=document){return n.querySelector(t)}function o(t,n=document){return n.querySelectorAll(t)}function u(t,n,e){for(let o=0,u=t.length;o<u;o++)n.call(e,t[o],o)}function i(t){requestAnimationFrame((()=>{requestAnimationFrame((()=>{t.call()}))}))}function r(t,n=document.body){return t.getBoundingClientRect().top-n.getBoundingClientRect().top}function c(t,n=document.body){return t.getBoundingClientRect().left-n.getBoundingClientRect().left}function l(t){let n=0;for(;t=t.previousElementSibling;)n++;return n}function f(t,...n){function e(t,...n){n.forEach((n=>{t.classList.add(n)}))}void 0===t.length?e(t,...n):u(t,(t=>{e(t,...n)}))}function s(t,...n){function e(t,...n){n.forEach((n=>{t.classList.remove(n)}))}void 0===t.length?e(t,...n):u(t,(t=>{e(t,...n)}))}function d(t,...n){let e=!1;if(void 0===t.length)e=o(t,...n);else{let i=0;u(t,(t=>{o(t,...n)&&i++})),e=i===t.length}return e;function o(t,...n){let e=0;return n.forEach((n=>{t.classList.contains(n)&&e++})),e===n.length}}function a(t,n,e,o){t.addEventListener(n,e,o)}function g(t,n,e,o){t.removeEventListener(n,e,o)}function m(t,n){return t.getAttribute(n)}function h(t,n,e){t.setAttribute(n,e)}function v(t,n){t.removeAttribute(n)}function E(t,n){return t.hasAttribute(n)}export{f as addClass,a as addEvent,n as byClass,t as byId,u as forEachHTML,m as getAttr,l as getElementIndex,c as getLeftPos,r as getTopPos,E as hasAttr,d as hasClass,i as nextFrame,e as query,o as queryAll,v as remAttr,s as removeClass,g as removeEvent,h as setAttr};

package.json

 {
   "name": "matt-utils",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "Some simple shothands for some js functions and methods",
-  "main": "dist/matt-utils.js",
+  "main": "./dist/matt-utils.js",
+  "exports": "./dist/matt-utils.js",
   "scripts": {
@@ -10,4 +11,4 @@ "rl": "rollup -cw",
     "build:prod": "rollup -c & npm run declarations",
-    "docs": "jsdoc2md src/matt-utils.js > api.md",
-    "test": "jest --verbose"
+    "docs": "jsdoc2md src/**/*.js > api.md",
+    "test": "jest --verbose -i __tests__"
   },
@@ -32,18 +33,19 @@ "repository": {
   "devDependencies": {
-    "@babel/core": "^7.10.4",
-    "@babel/preset-env": "^7.10.4",
-    "@rollup/plugin-babel": "^5.0.4",
-    "@rollup/plugin-commonjs": "^13.0.0",
-    "@rollup/plugin-node-resolve": "^8.1.0",
+    "@babel/core": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
+    "@rollup/plugin-babel": "^5.2.2",
+    "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-node-resolve": "^11.0.1",
     "babel-eslint": "^10.1.0",
-    "browserslist": "^4.13.0",
-    "core-js": "^3.6.5",
-    "eslint": "^7.4.0",
-    "jest": "^26.1.0",
+    "browserslist": "^4.16.0",
+    "core-js": "^3.8.1",
+    "eslint": "^7.16.0",
+    "glob": "^7.1.6",
+    "jest": "^26.6.3",
     "jsdoc-to-markdown": "^6.0.1",
-    "rollup": "^2.19.0",
+    "rollup": "^2.35.1",
     "rollup-plugin-eslint": "^7.0.0",
-    "rollup-plugin-terser": "^6.1.0",
-    "typescript": "^3.9.6"
+    "rollup-plugin-terser": "^7.0.2",
+    "typescript": "^4.1.3"
   }
 }

src/matt-utils.js

@@ -1,301 +0,5 @@
-/**
- * Shorthand for `document.getElementById`
- *
- * @param {String} id - The selector's id
- *
- * @returns {Element|null} - The selected element
- */
-export function byId( id ) {
-	return document.getElementById( id );
-}
-
-/**
- * Shorthand for `document.getElementsByClassName`
- *
- * @param {String} selClass - The selector's class
- * @param {Element} [parent=document] - Parent element
- *
- * @returns {HTMLCollection} - The selected elements
- */
-export function byClass( selClass, parent = document ) {
-	return parent.getElementsByClassName( selClass );
-}
-
-
-/**
- * Shorthand for `document.querySelector`
- *
- * @param {String} selector - Selector
- * @param {Element} [parent=document] - Parent element
- *
- * @returns {Element|null} - The selected element
- */
-export function query( selector, parent = document ) {
-	return parent.querySelector( selector );
-}
-
-
-/**
- * Shorthand per `document.querySelectorAll`
- *
- * @param {String} selector - Selector
- * @param {Element} [parent=document] - Parent element
- *
- * @returns {NodeList} - The selected element
- */
-export function queryAll( selector, parent = document ) {
-	return parent.querySelectorAll( selector );
-}
-
-
-/**
- * Foreach polyfill for NodeList and HTMLCollection
- * https://toddmotto.com/ditch-the-array-foreach-call-nodelist-hack/
- *
- * @param {Array|NodeList|HTMLCollection} els - A list of elements
- * @param {foreachCB} fn - Callback containing ( value, index ) as arguments
- * @param {Scope} [scope] - Scope
- */
-export function forEachHTML( els, fn, scope ) {
-	for ( let i = 0, numEls = els.length; i < numEls; i++ )
-		fn.call( scope, els[i], i );
-}
-
-/**
- * Foreach callback
- *
- * @callback foreachCB
- * @param {Element} value - The element
- * @param {Number} [index] - The index of the element
- */
-
-
-/**
- * Runs a function the next frame useful for effects
- * from `display:none` to `display:block` and transition
- *
- * @param {Function} fn - Callback
- */
-export function nextFrame( fn ) {
-	requestAnimationFrame( () => {
-		requestAnimationFrame( () => {
-			fn.call();
-		});
-	});
-}
-
-
-/**
- * Shorthand for `element.classList.add`, works with multiple nodes
- *
- * @param {Element|HTMLCollection|NodeList} el - A list of elements
- * @param {...String} classes - Classes to add
- */
-export function addClass( el, ...classes ) {
-
-	if ( el.length === undefined )
-		addClassEl( el, ...classes );
-	else {
-		forEachHTML( el, ( currEl ) => {
-			addClassEl( currEl, ...classes );
-		});
-	}
-
-	/**
-	 * Adds classes to a single element
-	 *
-	 * @param {Element} elem - An HTML element
-	 * @param {...String} remClass - Classes to add
-	 */
-	function addClassEl( elem, ...remClass ) {
-		remClass.forEach( ( singleClass ) => {
-			elem.classList.add( singleClass );
-		});
-	}
-}
-
-/**
- * Shorthand for `element.classList.remove`, works with multiple nodes
- *
- * @param {Element|HTMLCollection|NodeList} el - A list of elements
- * @param {...String} classes - Classes to remove
- */
-export function removeClass( el, ...classes ) {
-
-	if ( el.length === undefined )
-		removeClassEl( el, ...classes );
-	else {
-		forEachHTML( el, ( currEl ) => {
-			removeClassEl( currEl, ...classes );
-		});
-	}
-
-	/**
-	 * Adds classes to a single element
-	 *
-	 * @param {Element} elem - An HTML element
-	 * @param {...String} remClass - Classes to remove
-	 */
-	function removeClassEl( elem, ...remClass ) {
-		remClass.forEach( ( singleClass ) => {
-			elem.classList.remove( singleClass );
-		});
-	}
-}
-
-
-/**
- * Checks if an element has a class or not
- * // TODO: check for multiple classes of multiple elements
- *
- * @param {Element} el - An HTML element
- * @param {...String} classes - Classes to check the presence of
- *
- * @returns {Boolean} - The element has the class
- */
-export function hasClass( el, ...classes ) {
-
-	let hasClasses = false;
-
-	classes.forEach( ( cls ) => {
-		hasClasses = el.classList.contains( cls );
-	});
-
-	return hasClasses;
-}
-
-
-/**
- * Shorthand for `element.addEventListener`
- *
- * @param {Element|HTMLCollection|NodeList} el - A list of elements
- * @param {String} ev - Event's name
- * @param {Function} fn - Event's function
- * @param {Options} [opts] - Optional event options
- */
-export function addEvent( el, ev, fn, opts ) {
-
-	// if ( el.length === undefined || el.self === window )
-	el.addEventListener( ev, fn, opts );
-	/*
-	else {
-		forEachHTML( el, ( currEl ) => {
-			currEl.addEventListener( ev, fn, opts );
-		});
-	}
-	*/
-
-}
-
-/**
- * Shorthand for `element.removeEventListener`
- *
- * @param {Element|HTMLCollection|NodeList} el - A list of elements
- * @param {String} ev - Event's name
- * @param {Function} fn - Event's function
- * @param {Options} [opts] - Optional event options
- */
-export function removeEvent( el, ev, fn, opts ) {
-
-	// if ( el.length === undefined || el.self === window )
-	el.removeEventListener( ev, fn, opts );
-	/*
-	else {
-		forEachHTML( el, ( currEl ) => {
-			currEl.removeEventListener( ev, fn, opts );
-		});
-	}
-	*/
-
-}
-
-
-/**
- * Gets an element top position
- *
- * @param {Element} el - An HTML element
- * @param {Element} [topEl=document.body] - Wrapping element
- *
- * @returns {Number} Element's top position
- */
-export function getTopPos( el, topEl = document.body ) {
-	return el.getBoundingClientRect().top - topEl.getBoundingClientRect().top;
-}
-
-/**
- * Gets an element left position
- *
- * @param {Element} el - An HTML element
- * @param {Element} [topEl=document.body] - Wrapping element
- *
- * @returns {Number} Element's left position
- */
-export function getLeftPos( el, topEl = document.body ) {
-	return el.getBoundingClientRect().left - topEl.getBoundingClientRect().left;
-}
-
-
-/**
- * Similar to jQuery `$( el ).index()`
- * index start at 0
- *
- * @param {Element} el - An HTML element
- *
- * @returns {Number} - The element's index
- */
-export function getElementIndex( el ) {
-
-	let index = 0;
-
-	while ( ( el = el.previousElementSibling ) )
-		index++;
-
-	return index;
-
-}
-
-
-/**
- * Shorthand for `element.getAttribute`
- *
- * @param {Element} el - An HTML element
- * @param {String} attr - The attribute to retrieve
- *
- * @returns {String} - The attribute's value
- */
-export function getAttr( el, attr ) {
-	return el.getAttribute( attr );
-}
-
-/**
- * Shorthand for `element.setAttribute`
- *
- * @param {Element} el - An HTML element
- * @param {String} attr - The attribute to retrieve
- * @param {String} val - The value to set to the attribute
- */
-export function setAttr( el, attr, val ) {
-	el.setAttribute( attr, val );
-}
-
-/**
- * Shorthand for `element.removeAttribute`
- *
- * @param {Element} el - An HTML element
- * @param {String} attr - The attribute to remove
- */
-export function remAttr( el, attr ) {
-	el.removeAttribute( attr );
-}
-
-/**
- * Shorthand for `element.hasAttribute`
- *
- * @param {Element} el - An HTML element
- * @param {String} attr - The attribute to check the existance of
- *
- * @returns {Boolean} - Whether the attribute exists
- */
-export function hasAttr( el, attr ) {
-	return el.hasAttribute( attr );
-}
+export { byId, byClass, query, queryAll } from './selectors/selectors';
+export { addClass, removeClass, hasClass } from './classes/classes';
+export { addEvent, removeEvent } from './events/events';
+export { getAttr, setAttr, remAttr, hasAttr } from './attributes/attributes';
+export { forEachHTML, nextFrame, getTopPos, getLeftPos, getElementIndex } from './misc/misc';

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

46173

increased by126.04%

Number of package files

17

increased by142.86%

Lines of code

1128

increased by110.06%

Worsened metrics

Dev dependency count

16

increased by6.67%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes