@modernman00/shared-js-lib 1.2.6 → 1.2.8

package/Login.js

@@ -1,8 +1,8 @@
-"use strict";
+'use strict';
 import { convertFormData } from './FormProcessing.js';
-import { postFormData } from "./Http.js";
+import { postFormData } from './Http.js';
 import { showLoader, clearLoader } from './Loader.js';
-import { showError } from "./ShowResponse.js";
+import { showError } from './ShowResponse.js';
 
 // block the setLoader div
 
@@ -15,29 +15,33 @@ import { showError } from "./ShowResponse.js";
  * @returns {void}
  * @throws {Error} - If there is an error with the submission
  */
-export const loginSubmission = async (formId, loginURL, redirect, css = null) => {
-    const formData = convertFormData(formId);
-    formData.clearError();
-
-    try {
-        formData.emailVal();
-        formData.massValidate();
-
-        if (!formData.error.length) {
-
-            showLoader();
-            localStorage.setItem('redirect', redirect);
-
-            await postFormData(loginURL, formId, redirect, css);
-        } else {
-            alert('The form cannot be submitted. Please check the errors');
-        }
-    } catch (err) {
-        showError(err);
-    } finally {
-       clearLoader();
+export const loginSubmission = async (
+  formId,
+  loginURL,
+  redirect,
+  css = null, lengthLimit = null
+) => {
+  const formData = convertFormData(formId);
+  formData.clearError();
+  if (lengthLimit) {
+    formData.realTimeCheckLen(lengthLimit.maxLength.id, lengthLimit.maxLength.max);
+  }
+
+  try {
+    formData.emailVal();
+    formData.massValidate();
+
+    if (!formData.error.length) {
+      showLoader();
+      localStorage.setItem('redirect', redirect);
+
+      await postFormData(loginURL, formId, redirect, css);
+    } else {
+      alert('The form cannot be submitted. Please check the errors');
     }
-    
-}
-
-
+  } catch (err) {
+    showError(err);
+  } finally {
+    clearLoader();
+  }
+};

package/README.md

@@ -0,0 +1,74 @@
+npm Usage Guide for @modernman00/shared-js-lib
+This guide explains how to install and use the @modernman00/shared-js-lib package, now available on the npm registry, in your Node.js or JavaScript project.
+Installation
+To install the package from npm, run the following command in your project directory:
+npm install @modernman00/shared-js-lib
+
+
+This installs the latest published version from the npm registry.
+Ensure you have an internet connection and npm access to the @modernman00 scope (authentication may be required if the package is private).
+
+Usage
+The package exports various utility functions from its modules (e.g., Http.js, Utility.js). Import and use them as follows:
+Example: Using fetchData from Http.js
+Assume Http.js exports a function to fetch data using Axios:
+import { fetchData } from '@modernman00/shared-js-lib';
+
+async function getUserData() {
+    try {
+        const userData = await fetchData('/api/users/1', { method: 'GET' });
+        console.log(userData);
+    } catch (error) {
+        console.error('Error fetching data:', error.message);
+    }
+}
+
+getUserData();
+
+Example: Using sanitizeInput from Utility.js
+Assume Utility.js exports a sanitization function:
+import { sanitizeInput } from '@modernman00/shared-js-lib';
+
+const cleanInput = sanitizeInput('<script>alert("xss")</script>');
+console.log(cleanInput); // Sanitized output
+
+Configuration
+
+Ensure your project uses ES Modules by adding "type": "module" to your package.json, or use a bundler like Laravel Mix/Webpack.
+If using Laravel Mix, configure an alias in webpack.mix.js:const mix = require('laravel-mix');
+const path = require('path');
+
+mix.js('resources/js/app.js', 'public/js')
+   .webpackConfig({
+       resolve: {
+           alias: {
+               '@shared': path.resolve(__dirname, 'node_modules/@modernman00/shared-js-lib')
+           }
+       }
+   });
+
+
+
+Updating the Package
+To update to the latest version, run:
+npm update @modernman00/shared-js-lib
+
+Check the latest version on the npm website (https://www.npmjs.com/package/@modernman00/shared-js-lib) or with:
+npm info @modernman00/shared-js-lib version
+
+If a specific version is needed, install it directly:
+npm install @modernman00/shared-js-lib@1.0.3
+
+Rebuild assets if using a bundler:
+npm run dev
+
+Troubleshooting
+
+Installation Fails: Ensure you have npm access and the package is published. Use verbose mode for details:npm install @modernman00/shared-js-lib --verbose
+
+
+TypeScript Errors: Add declaration files (e.g., Http.d.ts) to the package if needed, and republish.
+Permission Issues: If the package is scoped and private, log in to npm:npm login
+
+
+

package/ShowResponse.js

@@ -1,93 +1,51 @@
-import { id } from './UtilityHtml.js';
-import axios from "axios"
-export const showError = (e) => console.error(`${e.name} at ${e.fileName}:${e.lineNumber} - ${e.message}\n${e.stack}`);
+import { id, qSel } from './UtilityHtml.js';
 
-export const msgException = (errorMessage) => {
-  
-    throw new Error(errorMessage)
-}
+export const showError = (e) =>
+  console.error(
+    `${e.name} at ${e.fileName}:${e.lineNumber} - ${e.message}\n${e.stack}`,
+  );
 
+export const msgException = (errorMessage) => {
+  throw new Error(errorMessage);
+};
 
 /**
- * 
+ *
  * @param {*} elementId - element id
  * @param {*} addClass either a success or danger class (green or red)
  * @param {*} message - html message to convey success or failure
  * @param {*} timer - timer for the message to disappear- default is 5 secs
  */
-export const showNotification = (elementId, addClass, message, timer = 5000) => {
-    // display the success information for 10sec
-    id(`${elementId}`).style.display = "block" // unblock the notification
-    id(`${elementId}`).classList.add(addClass) // add the success class
-    id(`${elementId}`).innerHTML = message // error element
-    id('loader').classList.remove('loader') // remove loader
-
-    setTimeout(() => {
-        id(`${elementId}`).style.backgroundColor = ""
-        id(`${elementId}`).style.color = ""
-        id(`${elementId}`).innerHTML = ""
-    }, timer)
-}
-
-  /**
-   * 
-   * @param {*} elementId - element id 
-   * @returns {Promise<void>}
-   * @description This is a function that deletes a notification. It takes in the elementId of the delete button
-   *              and uses that to get the user ID and the notification ID. It makes a put request to the server to
-   *              mark the notification as read. If the request is successful, it removes the notification from the page
-   *              and decrements the notification count by 1. If the request is unsuccessful, it logs an error message.
-   */
-  export const deleteNotification = async (elementId) => {
-
-         // Extract the user ID from the target ID
-            const senderId = elementId.replace("deleteNotification", "notificationBar");
-          
-            const elementData = id(elementId)
-            const data = elementData.getAttribute("data-id");
-
-            // change the background of the clicked element 
-
-            const notificationHTML = id(senderId);
-
-            // Make sure required variables are defined before using them
-            if (
-                typeof yourId === 'undefined' ||
-                typeof famCode === 'undefined'
-            ) {
-                msgException("Required parameters (yourId or famCode) are not defined");
-            }
-
-            const url = `/removeNotification/${yourId}/${famCode}/${data}`
-
-
-            const response = await axios.put(url)
-
-
-            if (response.data.message === "Notification marked as read") {
-
-                // remove a html element with notificationBar after 2 mins 
-                notificationHTML.remove()
-
-                // reduce the notification count as you have deleted the notification
-
-                const newValues = parseInt(sessionStorage.getItem('notificationCount') - 1)
-                id('notification_count').innerHTML = newValues;
-            } else {
-                msgException("Error removing notification" + " " + response.data.message);
-            }
-    }
-
-    export const showResponse = (theId, message, status) => {
-    const responseEl = id(theId)
-    const col = status ? 'green' : 'red'
-
-    responseEl.innerHTML = message
-    responseEl.style.color = 'green'
-    responseEl.style.backgroundColor = col
-    responseEl.style.color = 'white';
-    setTimeout(() => {
-        responseEl.innerHTML = '';
-    }, 5000); // Disappear after 5 seconds
-
-}
+export const showNotification = (
+  elementId,
+  addClass,
+  message,
+  timer = 5000,
+) => {
+  // display the success information for 10sec
+  id(`${elementId}`).style.display = 'block'; // unblock the notification
+  id(`${elementId}`).classList.add(addClass); // add the success class
+  id(`${elementId}`).innerHTML = message; // error element
+  id('loader').classList.remove('loader'); // remove loader
+
+  setTimeout(() => {
+    id(`${elementId}`).style.backgroundColor = '';
+    id(`${elementId}`).style.color = '';
+    id(`${elementId}`).innerHTML = '';
+  }, timer);
+};
+
+
+
+export const showResponse = (theId, message, status) => {
+  const responseEl = id(theId);
+  const col = status ? 'green' : 'red';
+
+  responseEl.innerHTML = message;
+  responseEl.style.color = 'green';
+  responseEl.style.backgroundColor = col;
+  responseEl.style.color = 'white';
+  setTimeout(() => {
+    responseEl.innerHTML = '';
+  }, 5000); // Disappear after 5 seconds
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modernman00/shared-js-lib",
-  "version": "1.2.6",
+  "version": "1.2.8",
   "description": "Reusable JS utilities for numerous js problems",
   "homepage": "https://github.com/modernman00/shared-js-lib#readme",
   "keywords": [

package/theAutoComplete.js

@@ -1,101 +1,94 @@
- 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();
-            }
+import { id } from './UtilityHtml'
+
+/**
+ * 
+ * @param {string} inputId 
+ * @param {Array} arr 
+ */
+
+/**
+ * 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<string>} arr - An array of strings containing the autocomplete suggestions.
+ *
+ * The function converts all strings in the array to lowercase for case-insensitive matching.
+ * It initializes the autocomplete with the given input element and array of suggestions,
+ * providing real-time suggestions based on user input. On selecting a suggestion,
+ * it populates the input element with the selected suggestion.
+ */
+const autocomplete = (inputId, arr) => {
+    const whatToBuyInput = id(inputId); // Get the text input
+    if (whatToBuyInput) {
+  // Create a <ul> for autocomplete suggestions
+  const suggestionList = document.createElement("ul");
+  suggestionList.classList.add("autocomplete-suggestions");
+  suggestionList.id = "suggestions"; // For accessibility
+  whatToBuyInput.parentElement.appendChild(suggestionList); // Append to input's parent
+
+  // Function to show matching suggestions based on user input
+  const showSuggestions = (inputValue) => {
+    suggestionList.innerHTML = ""; // Clear previous suggestions
+    if (!inputValue) return; // Exit if input is empty
+
+    // Filter items that match the input (case-insensitive), limit to 8
+    const matches = arr
+      .filter(item => item.toLowerCase().includes(inputValue.toLowerCase()))
+      .slice(0, 8);
+
+    // Create <li> for each match
+    matches.forEach((item, index) => {
+      const li = document.createElement("li");
+      li.textContent = item;
+      li.setAttribute("tabindex", "0"); // Make focusable for keyboard
+      li.setAttribute("data-index", index); // Store index for navigation
+      li.addEventListener("click", () => {
+        whatToBuyInput.value = item; // Set input value on click
+        suggestionList.innerHTML = ""; // Clear suggestions
+      });
+      li.addEventListener("keypress", (e) => {
+        if (e.key === "Enter") {
+          whatToBuyInput.value = item; // Set input value on Enter
+          suggestionList.innerHTML = ""; // Clear suggestions
         }
+      });
+      suggestionList.appendChild(li);
     });
+  };
 
-    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");
-    }
+  // Show suggestions as user types
+  whatToBuyInput.addEventListener("input", (e) => {
+    showSuggestions(e.target.value);
+  });
 
-    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");
-        }
-    }
+  // Clear suggestions on blur (with delay for click to register)
+  whatToBuyInput.addEventListener("blur", () => {
+    setTimeout(() => suggestionList.innerHTML = "", 200);
+  });
 
-    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]);
-            }
-        }
+  // Handle keyboard navigation for suggestions
+  whatToBuyInput.addEventListener("keydown", (e) => {
+    const suggestions = suggestionList.querySelectorAll("li");
+    if (!suggestions.length) return; // Exit if no suggestions
+
+    let focusedIndex = Array.from(suggestions).findIndex(li => li === document.activeElement);
+    if (e.key === "ArrowDown") {
+      e.preventDefault(); // Prevent cursor movement
+      focusedIndex = (focusedIndex + 1) % suggestions.length; // Loop to start
+      suggestions[focusedIndex].focus();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      focusedIndex = (focusedIndex - 1 + suggestions.length) % suggestions.length; // Loop to end
+      suggestions[focusedIndex].focus();
+    } else if (e.key === "Enter" && focusedIndex >= 0) {
+      e.preventDefault();
+      whatToBuyInput.value = suggestions[focusedIndex].textContent; // Select item
+      suggestionList.innerHTML = ""; // Clear suggestions
+    } else if (e.key === "Escape") {
+      suggestionList.innerHTML = ""; // Clear suggestions
     }
-    /*execute a function when someone clicks in the document:*/
-    document.addEventListener("click", function(e) {
-        closeAllLists(e.target);
-    });
-}
+  });
+}
+}
+
+export default autocomplete