@modernman00/shared-js-lib 1.2.7 → 1.2.9

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/ShowResponse.js

@@ -1,5 +1,5 @@
-import { id } from './UtilityHtml.js';
-import axios from 'axios';
+import { id, qSel } from './UtilityHtml.js';
+
 export const showError = (e) =>
   console.error(
     `${e.name} at ${e.fileName}:${e.lineNumber} - ${e.message}\n${e.stack}`,
@@ -35,54 +35,7 @@ export const showNotification = (
   }, timer);
 };
 
-/*************  ✨ Windsurf Command 🌟  *************/
-export const deleteNotification = async (elementId, yourId, famCode) => {
-  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);
-    }
-  };
-  /*******  43b70b66-cdee-4764-a1e7-4f21be65d0d7  *******/
-
-  const url = `/removeNotification/${yourId}/${famCode}/${data}`;
 
-  try {
-    const response = await axios.put(url);
-
-    if (response.data.message === 'Notification marked as read') {
-      notificationHTML.remove();
-      const newValues = parseInt(
-        sessionStorage.getItem('notificationCount') - 1,
-      );
-      id('notification_count').innerHTML = newValues;
-    } else {
-      console.error('Error removing notification', response.data.message);
-    }
-  } catch (error) {
-    console.error('Error removing notification', error);
-  }
-};
 
 export const showResponse = (theId, message, status) => {
   const responseEl = id(theId);

package/package.json

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

package/theAutoComplete.js

@@ -1,101 +1,93 @@
- 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.js'
+
+/**
+ * 
+ * @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.
+ */
+export 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);
-    });
-}
+  });
+}
+}
+