@modernman00/shared-js-lib 1.2.2

package/Utility.js

@@ -0,0 +1,133 @@
+import {id } from "./UtilityHtml.js";
+import {autocomplete} from './theAutoComplete.js';
+
+/**
+ * Set maxlength of input fields and display error message and help text in real time
+ * @param {string[]} input - array of ids of input fields
+ * @param {string[]} maxi - array of maximum lengths of input fields, corresponding to the input array
+ * @throws {Error} if any element with id from the input array is not found or is empty
+ */
+export const realTimeCheckLen = (input, maxi) => {
+    const data = input.map(el => id(`${el}_id`));
+    const errors = input.map(el => id(`${el}_error`));
+    const helps = input.map(el => id(`${el}_help`));
+
+    maxi.forEach((max, i) => {
+        if (!data[i] || !errors[i] || !helps[i]) {
+            throw new Error(`Element with ID '${input[i]}_id' not found or is empty`);
+        }
+
+        data[i].maxLength = parseInt(max, 10) + 1;
+        data[i].addEventListener('keyup', () => {
+            errors[i].innerHTML = (data[i].value.length > max) ? `You have reached the maximum limit` : "";
+            helps[i].style.display = data[i].value.length > max ? '' : 'none';
+            setTimeout(() => {
+                helps[i].style.display = 'none';
+            }, 5000);
+        });
+    });
+}
+
+/**
+ * Converts a string to sentence case.
+ *
+ * Sentence case is a string where the first letter of each word is capitalized, and the rest of the letters are in lowercase.
+ *
+ * @param {string} str The string to convert to sentence case.
+ * @returns {string} A new string in sentence case.
+ */
+export const toSentenceCase = (str) => {
+    return str
+        .toLowerCase() // Convert the string to lowercase
+        .split(' ')    // Split the string into words
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize the first letter of each word
+        .join(' ');    // Join the words back into a string
+}
+
+/**
+ * Sets up an autocomplete functionality for an input element.
+ *
+ * @param {string} inputId - The ID of the input element to attach the autocomplete to.
+ * @param {Array<Object>} data - An array of objects containing data for autocomplete suggestions, 
+ *                               where each object should have a 'firstName' property.
+ *
+ * The function converts all `firstName` properties to lowercase for case-insensitive matching.
+ * It initializes the autocomplete with the given input element and data, providing real-time
+ * suggestions based on user input. On selecting a suggestion, it populates the input element
+ * with the selected suggestion's `firstName`.
+ */
+
+export const autoCompleter = (inputId, data) => {
+    const lowerCaseData = data.map(item => ({...item, firstName: item.firstName.toLowerCase()}));
+    autocomplete({
+        input: inputId,
+        fetch: function (text, update) {
+            const suggestions = lowerCaseData.filter(n => n.firstName.startsWith(text.toLowerCase()));
+            update(suggestions);
+        },
+        onSelect: function (item) {
+            input.value = item.firstName;
+        }
+    })
+}
+
+/**
+ * Removes duplicate values from an array.
+ *
+ * @param {Array} array - The array from which to remove duplicates.
+ * @returns {Array} A new array containing only unique values from the original array.
+ */
+
+export const distinctValue = (array) => {
+    return [...new Set(array)]
+}
+
+/**
+ * Toggles the type of the input element with the given ID between 'password' and 'text'.
+ *
+ * @param {string} inputId - The ID of the input element to toggle.
+ */
+export const showPassword = (inputId) => {
+    const y = id(inputId);
+    y.type = y.type === "password" ? "text" : "password";
+}
+
+
+/**
+ * Validates an email address and updates the error message if invalid.
+ *
+ * @param {string} email - The email address to validate.
+ * @returns {number} Returns 1 if the email is invalid and sets an error message, otherwise returns 0.
+ */
+
+export const emailVal = (email) => {
+    const emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-Z0-9]{2,4}$/;
+    if (!emailExp.test(email)) {
+        const errorElement = id('email_error');
+        errorElement.innerHTML = `<li style="color:red;">Please enter a valid email</li>`;
+        errorElement.style.color = "red";
+        return 1;
+    }
+    return 0;
+}
+
+
+/**
+ * Sanitizes a string input by escaping special HTML characters to prevent XSS attacks.
+ * Converts &, <, >, ", and ' to their respective HTML entities.
+ * Trims leading and trailing whitespace from the input.
+ *
+ * @param {string} input - The input string to sanitize.
+ * @returns {string} Sanitized string with HTML special characters escaped.
+ */
+
+export const sanitizeInput = (input) => {
+    if (typeof input !== 'string') return '';
+    return input
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;')
+        .trim();
+};

package/UtilityHtml.js

@@ -0,0 +1,200 @@
+// Environment detection
+const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
+
+// Log warning for browser-only functions when in Node environment
+const browserOnly = (functionName) => {
+  if (!isBrowser) {
+    console.warn(`Warning: ${functionName} is only available in browser environments`);
+    return null;
+  }
+  return true;
+};
+
+// DOM manipulation functions that are safe for both environments
+export const id = (x) => {
+  if (!isBrowser) return null;
+  return document.getElementById(x);
+};
+
+export const idValue = (elementId) => {
+  if (!isBrowser) return null;
+  const element = id(elementId);
+  return element ? element.value : null;
+};
+
+export const idInnerHTML = (elementId) => {
+  if (!isBrowser) return null;
+  const element = id(elementId);
+  return element ? element.innerHTML : null;
+};
+
+export const warningSign = "\u26A0"; // danger warning sign - safe in any environment
+
+export const qSel = (name) => {
+  if (!isBrowser) return null;
+  return document.querySelector(name);
+};
+
+export const qSelAll = (name) => {
+  if (!isBrowser) return [];
+  return document.querySelectorAll(name);
+};
+
+export const qSelValue = (name) => {
+  if (!isBrowser) return null;
+  const element = qSel(name);
+  return element ? element.value : null;
+};
+
+export const qSelInnerHTML = (name) => {
+  if (!isBrowser) return null;
+  const element = qSel(name);
+  return element ? element.innerHTML : null;
+};
+
+// This is safe for both environments
+export const log = (id, identifier = null) => {
+  console.log(' start' + "  " + identifier);
+  console.log(id);
+  console.log(' end' + "  " + identifier);
+};
+
+export const write = (input) => {
+  if (!browserOnly('write')) return;
+  document.write(input);
+};
+
+export const hideElement = (elementId) => {
+  if (!browserOnly('hideElement')) return;
+  const element = id(elementId);
+  if (element) element.style.display = "none";
+};
+
+export const showElement = (elementId) => {
+  if (!browserOnly('showElement')) return;
+  const element = id(elementId);
+  if (element) element.style.display = "block";
+};
+
+export const removeDiv = (div_id) => {
+  if (!browserOnly('removeDiv')) return;
+  const div = document.getElementById(div_id);
+  if (div) {
+    return div.remove();
+  }
+};
+
+/**
+ * @description Manipulates an attribute of a specified HTML element
+ * @param {string} idName - The ID of the element to manipulate
+ * @param {string} removeOrSet - Specify "remove" to remove the attribute, otherwise set the attribute
+ * @param {string} attributeType - The type of attribute to manipulate
+ * @param {string|null} [nameValue=null] - The value to set for the attribute if adding it
+ * @returns {void}
+ */
+export const manipulateAttribute = (idName, removeOrSet, attributeType, nameValue = null) => {
+  if (!browserOnly('manipulateAttribute')) return;
+  const element = id(idName);
+  if (!element) return;
+  
+  if (removeOrSet === "remove") {
+    element.removeAttribute(attributeType);
+  } else {
+    element.setAttribute(attributeType, nameValue);
+  }
+};
+
+// Function to check for elements and render if they exist
+export const checkElements = (idOrClass, classString, theFunction = null) => {
+  if (!browserOnly('checkElements')) return;
+
+  const doesElementExist = (idOrClass === "id") ? id(classString) : qSel(classString);
+  // Check if elements exist before calling render function
+  if (doesElementExist && doesElementExist.length) {
+    theFunction(doesElementExist);
+  }
+};
+
+/**
+ * @description Check if elements exist before calling render function
+ * @param {string} idOrClass - whether to use id or class
+ * @param {string} classString - the class or id name
+ * @param {function} [theFunction] - the function to call if elements exist
+ * @returns {void}
+ */
+export const checkManyElements = (idOrClass, classString, theFunction = null) => {
+  if (!browserOnly('checkManyElements')) return;
+
+  const doesElementExist = (idOrClass === "id") ? id(classString) : qSelAll(classString);
+  // Check if elements exist before calling render function
+  if (doesElementExist && doesElementExist.length > 0) {
+    theFunction(doesElementExist);
+  }
+};
+
+/**
+ * @description Create a new element and append it to a parent element
+ * @param {string} elementType - the type of element to create
+ * @param {string} setId - the id of the new element
+ * @param {string} parent - the id of the parent element
+ * @param {string} [setClass] - an optional class to set on the new element
+ * @returns {HTMLElement|null} The created element or null if in Node.js environment
+ */
+export const createAndAppendElement = (elementType, setId, parent, setClass = null) => {
+  if (!browserOnly('createAndAppendElement')) return null;
+  
+  const newDiv = document.createElement(elementType);
+  newDiv.setAttribute('id', setId);
+  newDiv.setAttribute('class', `field ${setClass}`);
+  const parentDiv = id(parent);
+  if (parentDiv) {
+    return parentDiv.appendChild(newDiv);
+  }
+  return newDiv;
+};
+
+// These HTML template functions are safe in any environment since they just return strings
+export const checkBox = (subject) => {
+  return `<div class="control"> 
+      <label class="radio">
+        <input type="radio" name="send${subject}" value="yes" id=${subject}Yes > Yes 
+      </label>
+      <label class="radio"> 
+        <input type="radio" name="send${subject}" value="no" id=${subject}No checked> No 
+      </label>
+    </div>`;
+};
+
+export const checkBox2 = (subject) => {
+  return `<div class="control"> 
+      <label class="checkbox">
+        <input type="checkbox" name="send${subject}" value="yes" id=${subject}Yes> Yes 
+      </label>
+      <label class="checkbox"> 
+        <input type="checkbox" name="send${subject}" value="no" id=${subject}No> No 
+      </label>
+    </div>`;
+};
+
+export const isChecked = (name, fn) => {
+  if (!browserOnly('isChecked')) return;
+  
+  const yesId = (`${name}Yes`);
+  const noId = `${name}No`;
+  const yesElement = id(yesId);
+  const noElement = id(noId);
+  
+  if (!yesElement || !noElement) return;
+  
+  const checked = () => {
+    if (yesElement.checked) {
+      alert('check');
+      fn();
+    } else if (noElement.checked) {
+      alert('check No');
+    }
+  };
+  
+  yesElement.addEventListener('click', checked);
+  noElement.addEventListener('click', checked);
+};

package/index.js

@@ -0,0 +1,13 @@
+export * from './Http.js';
+export * from './UtilityHtml.js';
+export * from './FormProcessing.js';
+export * from './Utility.js';
+export * from './Loader.js';
+export * from './ForgotPassword.js';
+export * from './Login.js';
+export * from './Cookie.js';
+export * from './FormHelper.js';
+export * from './Loader.js';
+export * from './ShowResponse.js';
+export * from './DateTime.js';
+export * from './CountryCode.js'

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@modernman00/shared-js-lib",
+  "version": "1.2.2",
+  "description": "Reusable JS utilities for numerous js problems",
+  "homepage": "https://github.com/modernman00/shared-js-lib#readme",
+  "keywords": [
+    "javascript",
+    "shared",
+    "utils"
+  ],
+  "type": "module",
+  "bugs": {
+    "url": "https://github.com/modernman00/shared-js-lib/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/modernman00/shared-js-lib.git"
+  },
+  "license": "MIT",
+  "author": "olawale olaogun",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "axios": "^1.9.0",
+    "axios-retry": "^4.5.0"
+  }, "publishConfig": {
+    "access": "public"
+  }
+}

package/theAutoComplete.js

@@ -0,0 +1,101 @@
+ export const  autocomplete = (inp, arr) => {
+    /*the autocomplete function takes two arguments,
+    the text field element and an array of possible autocompleted values:*/
+    let currentFocus;
+    /*execute a function when someone writes in the text field:*/
+    inp.addEventListener("input", function(e) {
+        let a, b, i, val = this.value;
+        /*close any already open lists of autocompleted values*/
+        closeAllLists();
+        if (!val) { return false; }
+        currentFocus = -1;
+        /*create a DIV element that will contain the items (values):*/
+        a = document.createElement("DIV");
+        a.setAttribute("id", this.id + "autocomplete-list");
+        a.setAttribute("class", "autocomplete-items");
+        /*append the DIV element as a child of the autocomplete container:*/
+        this.parentNode.appendChild(a);
+        /*for each item in the array...*/
+        for (i = 0; i < arr.length; i++) {
+            /*check if the item starts with the same letters as the text field value:*/
+            if (arr[i] && arr[i].substr(0, val.length).toUpperCase() === val.toUpperCase()) {
+                if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
+                    /*create a DIV element for each matching element:*/
+                    b = document.createElement("DIV");
+                    /*make the matching letters bold:*/
+                    b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
+                    b.innerHTML += arr[i].substr(val.length);
+                    /*insert a input field that will hold the current array item's value:*/
+                    b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
+                    /*execute a function when someone clicks on the item value (DIV element):*/
+                    b.addEventListener("click", function(e) {
+                        /*insert the value for the autocomplete text field:*/
+                        inp.value = this.getElementsByTagName("input")[0].value;
+                        /*close the list of autocompleted values,
+                        (or any other open lists of autocompleted values:*/
+                        closeAllLists();
+                    });
+                    a.appendChild(b);
+                }
+            }
+        }
+    });
+    /*execute a function presses a key on the keyboard:*/
+    inp.addEventListener("keydown", function(e) {
+        var x = document.getElementById(this.id + "autocomplete-list");
+        if (x) x = x.getElementsByTagName("div");
+        if (e.keyCode == 40) {
+            /*If the arrow DOWN key is pressed,
+            increase the currentFocus variable:*/
+            currentFocus++;
+            /*and and make the current item more visible:*/
+            addActive(x);
+        } else if (e.keyCode == 38) { //up
+            /*If the arrow UP key is pressed,
+            decrease the currentFocus variable:*/
+            currentFocus--;
+            /*and and make the current item more visible:*/
+            addActive(x);
+        } else if (e.keyCode == 13) {
+            /*If the ENTER key is pressed, prevent the form from being submitted,*/
+            e.preventDefault();
+            if (currentFocus > -1) {
+                /*and simulate a click on the "active" item:*/
+                if (x) x[currentFocus].click();
+            }
+        }
+    });
+
+    function addActive(x) {
+        /*a function to classify an item as "active":*/
+        if (!x) return false;
+        /*start by removing the "active" class on all items:*/
+        removeActive(x);
+        if (currentFocus >= x.length) currentFocus = 0;
+        if (currentFocus < 0) currentFocus = (x.length - 1);
+        /*add class "autocomplete-active":*/
+        x[currentFocus].classList.add("autocomplete-active");
+    }
+
+    function removeActive(x) {
+        /*a function to remove the "active" class from all autocomplete items:*/
+        for (var i = 0; i < x.length; i++) {
+            x[i].classList.remove("autocomplete-active");
+        }
+    }
+
+    function closeAllLists(elmnt) {
+        /*close all autocomplete lists in the document,
+        except the one passed as an argument:*/
+        var x = document.getElementsByClassName("autocomplete-items");
+        for (var i = 0; i < x.length; i++) {
+            if (elmnt != x[i] && elmnt != inp) {
+                x[i].parentNode.removeChild(x[i]);
+            }
+        }
+    }
+    /*execute a function when someone clicks in the document:*/
+    document.addEventListener("click", function(e) {
+        closeAllLists(e.target);
+    });
+}