matt-utils
Advanced tools
Comparing version 1.3.1 to 1.4.0
@@ -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 }; |
@@ -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}; |
{ | ||
"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" | ||
} | ||
} |
@@ -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'; |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage 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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
46173
17
1128
16
1