javascript-helpers - npm Package Compare versions

Comparing version 1.4.2 to 2.0.0

package.json

@@ -5,3 +5,3 @@ {
     "description": "List of useful JavaScript functions to make development easier",
-    "version": "1.4.2",
+    "version": "2.0.0",
     "main": "src/index.js",
@@ -8,0 +8,0 @@ "homepage": "https://valeriodipunzio.com/plugins/javascript-helpers/",

src/index.js

 
 export { default as addClass }                  from './modules/addClass/addClass.js';
 export { default as ajaxCall }                  from './modules/ajaxCall/ajaxCall.js';
-export { default as ajaxCallXhr }               from './modules/ajaxCallXhr/ajaxCallXhr.js';
 export { default as arrayMove }                 from './modules/arrayMove/arrayMove.js';
-export { default as checkDirtyField }           from './modules/checkDirtyField/checkDirtyField.js';
-export { default as checkFormElement }          from './modules/checkFormElement/checkFormElement.js';
 export { default as deepFreeze }                from './modules/deepFreeze/deepFreeze.js';
@@ -16,2 +13,3 @@ export { default as delegateEvent }             from './modules/delegateEvent/delegateEvent.js';
 export { default as getDateSeparator }          from './modules/getDateSeparator/getDateSeparator.js';
+export { default as getElementOffset }          from './modules/getElementOffset/getElementOffset.js';
 export { default as getElements }               from './modules/getElements/getElements.js';
@@ -40,3 +38,7 @@ export { default as getFilledFields }           from './modules/getFilledFields/getFilledFields.js';
 export { default as setUrlHash }                from './modules/setUrlHash/setUrlHash.js';
+export { default as slideDown }                 from './modules/slideDown/slideDown.js';
+export { default as slideToggle }               from './modules/slideToggle/slideToggle.js';
+export { default as slideUp }                   from './modules/slideUp/slideUp.js';
 export { default as toCamelCase }               from './modules/toCamelCase/toCamelCase.js';
+export { default as toggleClass }               from './modules/toggleClass/toggleClass.js';
 export { default as toKebabCase }               from './modules/toKebabCase/toKebabCase.js';
@@ -43,0 +45,0 @@ export { default as toPascalCase }              from './modules/toPascalCase/toPascalCase.js';

src/modules/addClass/addClass.js

 
 import getElements from '../getElements/getElements.js';
 
-export default ( elements = [], cssClasses = '' ) => {
+export default ( elements, cssClasses ) => {
 
-    elements = getElements( elements );
+    const elemList = getElements( elements );
 
-    if( !cssClasses ){ return elements; }
+    if( !cssClasses ){ return elemList; }
 
-    elements.forEach(elem => {
-        cssClasses.split(' ').forEach(className => {
-            elem.classList.add( className );
-        });
+    elemList.forEach($elem => {
+        $elem.classList.add( ...cssClasses.split(' ') );
     });
 
-    return elements;
+    return elemList;
 
 }

src/modules/delegateEvent/delegateEvent.js

 
 import getElements from '../getElements/getElements.js';
 
-export default ( {ancestor, target, data, useCapture = false}, eventName, callback ) => {
+export default ( ancestor, eventName, target, callback, { data, options, useCapture = false } = {} ) => {
 
-    getElements(ancestor).forEach($anc => {
-        $anc.addEventListener(
+    getElements(ancestor).forEach($elem => {
+        $elem.addEventListener(
             eventName,
             event => {
                 const $element = event.target.closest(target);
-                if( $anc.contains($element) ){
+                if( $elem.contains($element) ){
                     callback.call($element, event, data);
                 }
             },
-            useCapture
+            options || useCapture
         );
@@ -17,0 +17,0 @@ });

src/modules/emitCustomEvent/emitCustomEvent.js

 
 import getElements from '../getElements/getElements.js';
-import mergeObjects from '../mergeObjects/mergeObjects.js';
 
 export default ( elem, eventName, eventOptions ) => {
-    eventOptions = mergeObjects({ bubbles: true }, eventOptions);
-    const eventObj = new CustomEvent(eventName, eventOptions);
+    const options = Object.assign( { bubbles: true }, eventOptions );
+    const eventObj = new CustomEvent(eventName, options);
     getElements(elem).forEach($el => {
@@ -9,0 +8,0 @@ $el.dispatchEvent( eventObj );

src/modules/emitEvent/emitEvent.js

 
 import getElements from '../getElements/getElements.js';
-import mergeObjects from '../mergeObjects/mergeObjects.js';
 
 export default ( elem, eventName, eventOptions ) => {
-    eventOptions = mergeObjects({ bubbles: true }, eventOptions);
-    const eventObj = new Event(eventName, eventOptions);
+    const options = Object.assign( { bubbles: true }, eventOptions );
+    const eventObj = new Event(eventName, options);
     getElements(elem).forEach($el => {
@@ -9,0 +8,0 @@ $el.dispatchEvent( eventObj );

src/modules/fillForm/fillForm.js

@@ -5,11 +5,11 @@
 
-export default ( formEl, data = {}, skipFilledFields = false ) => {
+export default ( formEl, data, skipFilledFields ) => {
 
-    formEl = getElements(formEl)[0] || null;
+    const $form = getElements(formEl)[0] || null;
 
-    if( !formEl || !data || isEmptyObject(data) ){ return formEl; }
+    if( !$form || !data || isEmptyObject(data) ){ return $form; }
 
     Object.keys( data ).forEach(name => {
-        const firstFieldEl = formEl.querySelector('[name="'+ name +'"]');
-        const isRadio = firstFieldEl && firstFieldEl.type === 'radio';
+        const $firstField = $form.querySelector('[name="'+ name +'"]');
+        const isRadio = $firstField && $firstField.type === 'radio';
         const isSingleCheckbox = typeof data[name] === 'boolean';
@@ -23,7 +23,7 @@ const keyValue = isSingleCheckbox || isRadio ? [data[name]] : data[name];
                 const isBoolean = typeof listValue === 'boolean';
-                const fieldEl = isBoolean ?
-                                formEl.querySelector('[name="'+ name +'"]') : 
-                                formEl.querySelector('[name="'+ name +'"][value="'+ listValue +'"]');
-                if( fieldEl ){
-                    fieldEl.checked = isBoolean ? listValue : true;
+                const $field = isBoolean ?
+                                $form.querySelector('[name="'+ name +'"]') : 
+                                $form.querySelector('[name="'+ name +'"][value="'+ listValue +'"]');
+                if( $field ){
+                    $field.checked = isBoolean ? listValue : true;
                 }
@@ -34,5 +34,5 @@ });
 
-            const fieldEl = formEl.querySelector('[name="'+ name +'"]');
-            if( fieldEl && (!skipFilledFields || fieldEl.value === '') ){
-                fieldEl.value = keyValue;
+            const $field = $form.querySelector('[name="'+ name +'"]');
+            if( $field && (!skipFilledFields || $field.value === '') ){
+                $field.value = keyValue;
             }
@@ -43,4 +43,4 @@ }
 
-    return formEl;
+    return $form;
 
 }

src/modules/getElements/getElements.js

@@ -6,16 +6,29 @@
 
-export default (elements) => {
+const getElements = (elements, parent) => {
 
-    if( isNodeList(elements) ){
+    if( isValidSelector(elements) ){
 
+        if( isValidSelector(parent) ){
+            const mergedSelector = `${parent} ${elements}`;
+            return Array.from( document.querySelectorAll(mergedSelector) )
+        }
+
+        let $parents = getElements(parent);
+        $parents = $parents.length > 0 ? $parents : [document];
+
+        const $list = $parents.reduce(($accList, $parent) => {
+            $accList.push(...Array.from($parent.querySelectorAll(elements)))
+            return $accList
+        }, []);
+
+        return [...new Set($list)]
+
+    } else if( Array.isArray(elements) || isNodeList(elements) ){
+
         return Array.from( elements );
 
-    } else if( isDomNode(elements) ){
+    } else if( elements === document || isDomNode(elements) ){
 
         return [ elements ];
 
-    } else if( isValidSelector(elements) ){
-
-        return Array.from( document.querySelectorAll(elements) );
-
     } else {
@@ -27,2 +40,4 @@
 
-};
+}
+
+export default getElements

src/modules/getFilledFields/getFilledFields.js

@@ -5,26 +5,26 @@
 
-export default ( formEl = null ) => {
+export default formEl => {
 
-    formEl = getElements(formEl)[0];
+    const $form = getElements(formEl)[0];
 
-    if( !formEl ){ return [] };
+    if( !$form ){ return [] }
     
-    return getUniqueFields( formEl )
-        .map(fieldEl => {
-            const name = fieldEl.name,
-                type = fieldEl.type,
+    return getUniqueFields( $form )
+        .map($field => {
+            const name = $field.name,
+                type = $field.type,
                 isCheckboxOrRadio = (type === 'checkbox' || type === 'radio'),
-                fieldChecked = formEl.querySelector('[name="' + name + '"]:checked'),
-                isReqFrom = fieldEl.matches('[data-required-from]'),
-                reqMoreEl = (isReqFrom ? formEl.querySelector(fieldEl.getAttribute('data-required-from')) : null);
+                fieldChecked = $form.querySelector('[name="' + name + '"]:checked'),
+                isReqFrom = $field.matches('[data-required-from]'),
+                reqMoreEl = (isReqFrom ? $form.querySelector($field.getAttribute('data-required-from')) : null);
 
             return (
                 isCheckboxOrRadio ? (fieldChecked || null) :
-                (isReqFrom && reqMoreEl.checked) || (!isReqFrom && fieldEl.value) ? fieldEl : null
+                (isReqFrom && reqMoreEl.checked) || (!isReqFrom && $field.value) ? $field : null
             );
         })
-        .filter(fieldEl => {
-            return  fieldEl !== null;
+        .filter($field => {
+            return  $field !== null;
         });
 
 }

src/modules/getUniqueFields/getUniqueFields.js

@@ -5,15 +5,15 @@ import getElements from "../getElements/getElements.js";
 
-export default ( formEl = null ) => {
+export default formEl => {
 
-    let lastFieldName = '',
-        lastFieldType = '';
+    let lastFieldName = '';
+    let lastFieldType = '';
 
-    formEl = getElements(formEl)[0];
+    const $form = getElements(formEl)[0];
 
-    if( !formEl ){ return [] };
+    if( !$form ){ return [] }
 
-    return Array.from( formEl.querySelectorAll(fieldsStringSelector) )
-        .filter(fieldEl => {
-            const name = fieldEl.name,
-                type = fieldEl.type;
+    return Array.from( $form.querySelectorAll(fieldsStringSelector) )
+        .filter($field => {
+            const name = $field.name,
+                type = $field.type;
 
@@ -24,3 +24,3 @@ if( name === lastFieldName && type === lastFieldType ){
             
-            if( !fieldEl.matches('[data-required-from]') ){
+            if( !$field.matches('[data-required-from]') ){
                 lastFieldName = name;
@@ -27,0 +27,0 @@ lastFieldType = type;

src/modules/isValidEmail/isValidEmail.js

 
-// useRfc5322 IF true, WILL CHECK emailString AS FOR RFC 5322 Official Standard ( 99.9% )
+// IF checkRfc5322=true, WILL CHECK emailString AS FOR RFC 5322 Official Standard ( 99.9% )
 // https://flaviocopes.com/how-to-validate-email-address-javascript/
 // https://regex101.com/r/cdlyJy/3
 
-export default ( emailString, checkRfc5322 = true ) => {
+export default ( emailString, checkRfc5322 = false ) => {
     const RegExEmail = checkRfc5322 ?
@@ -8,0 +8,0 @@ /(?!.*\.{2})^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i

src/modules/removeClass/removeClass.js

@@ -6,14 +6,12 @@
 
-    elements = getElements(elements);
+    const elemList = getElements(elements);
 
-    if( !cssClasses ){ return elements; }
+    if( !cssClasses ){ return elemList; }
 
-    elements.forEach(function(elem){
-        cssClasses.split(' ').forEach(function(className){
-            elem.classList.remove( className );
-        });
+    elemList.forEach($elem => {
+        $elem.classList.remove( ...cssClasses.split(' ') );
     });
 
-    return elements;
+    return elemList;
     
 }

src/modules/webStorage/webStorage.js

@@ -13,17 +13,24 @@
 
-if( isAvailable ){
-    // setObject METHOD FOR HTML STORAGE -> EG: localStorage.setObject( name, JSobj )
-    // TO STORE A JS OBJECT ( AS JSON STRING ) INSIDE THE STORAGE
-    Storage.prototype.setObject = function( key, value ) {
-        this.setItem( key, JSON.stringify(value) );
-    }
+const extend = () => {
+    if( isAvailable ){
+        // RETURN THE STORED DATA AS JS OBJECT
+        Storage.prototype.getObject = function( key ) {
+            const value = this.getItem( key );
+            return value && JSON.parse( value );
+        }
 
-    // getObject METHOD FOR HTML STORAGE -> EG: localStorage.getObject( name )
-    // RETURN THE DATA ( STORED AS JSON STRING ) AS JS OBJECT
-    Storage.prototype.getObject = function( key ) {
-        var value = this.getItem( key );
-        return value && JSON.parse( value );
+        // STORE A JS OBJECT INSIDE WEB STORAGE
+        Storage.prototype.setObject = function( key, value ) {
+            this.setItem( key, JSON.stringify(value) );
+        }
+
+        // MERGE A JS OBJECT INSIDE WEB STORAGE
+        Storage.prototype.mergeItem = function( name, object ) {
+            const objectClone = JSON.parse(JSON.stringify(object));
+            const storageObj = this.getObject(name) || {};
+            this.setItem( name, JSON.stringify({...storageObj, ...objectClone}) );
+        }
     }
 }
 
-export default { isAvailable }
+export default { extend, isAvailable }

No alert changes

Improved metrics

Total package byte prevSize

36335

increased by3.34%

No dependency changes