Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

matt-utils

Package Overview
Dependencies
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

matt-utils - npm Package Compare versions

Comparing version 1.3.1 to 1.4.0

src/attributes/attributes.js

78

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 };

@@ -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';
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc