tuijs-util 1.3.0 → 1.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "tuijs-util",
-    "version": "1.3.0",
+    "version": "1.3.2",
     "module": "src/esm/index.js",
     "main": "src/cjs/index.cjs",
     "exports": {
@@ -19,7 +19,7 @@
     },
     "devDependencies": {
         "@rollup/plugin-babel": "^6.0.4",
-        "@rollup/plugin-node-resolve": "^15.2.3",
-        "rollup": "^4.16.4"
+        "@rollup/plugin-node-resolve": "^15.3.0",
+        "rollup": "^4.22.4"
     }
 }

package/src/cjs/index.cjs

@@ -336,6 +336,12 @@ function elmCleanerArray(templateLit) {
   }
 }
 
+/**
+ * @typedef {Array} ImageUrls - A list of image urls
+ * @property {string} imageUrl - The url of the desired image
+ * @property {Array<string>} imageUrlStrings - An Array of image url strings
+ */
+
 /**
  * Adds 'http://' if valid URL and 'http://' or 'https://' is missing.
  * @param {string} url 
@@ -514,22 +520,27 @@ function generateUID(length = 16) {
 }
 
 /**
- * @typedef {string[]} ImgUrls - An array of URL strings
+ * @typedef {string[]} ImageUrls - An array of URL strings
  */
 /**
- * Preloads images in cache.
- * @param {ImgUrls} imgUrls - An array of URL strings
- * @returns {void}
- * @throws {Error} - Throws an Error if loading an image fails.
+ * Loads all images and returns a promise when loading is complete
+ * @param {ImageUrls} imageUrls - An Array of image url strings
+ * @returns {Object}
  */
-function preloadImages(imgUrls) {
-  imgUrls.forEach(url => {
-    const img = new Image();
-    img.src = url;
-    img.onerror = () => {
-      throw new Error(`Failed to load image: ${url}`);
+async function preloadImages(imageUrls) {
+  try {
+    const loadImage = url => {
+      return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => resolve(url);
+        img.onerror = () => reject(new Error(`Failed to load image at ${url}`));
+        img.src = url;
+      });
     };
-  });
+    await Promise.all(imageUrls.map(loadImage));
+  } catch (er) {
+    throw new Error(er.message);
+  }
 }
 
 /**
@@ -541,6 +552,33 @@ function sleep(ms) {
   return new Promise(resolve => setTimeout(resolve, ms));
 }
 
+/**
+ * Adds and intersectionObserver for a list of target elements, that calls a function when 
+ * @param {Array} targets - An array of elements that will be attached to the observer.
+ * @param {Function} callback - The callback function that will run when the observer is triggered.
+ * @param {Object} observerOptions - An Object containing the observer options. By default only threshold is set.
+ * @returns {Function} - Returns a cleanup function that will disconnect the observer. This is not required to use.
+ */
+function scrollIntoView(targets, callback, observerOptions = {
+  threshold: 0.5
+}) {
+  const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        // Only trigger when the element is intersecting
+        callback(entry.target);
+      }
+    });
+  }, observerOptions);
+  targets.forEach(target => {
+    observer.observe(target);
+  });
+  // Return a cleanup function to disconnect the observer
+  return () => {
+    observer.disconnect();
+  };
+}
+
 exports.addLeadZero = addLeadZero;
 exports.checkEmail = checkEmail;
 exports.checkFqdn = checkFqdn;
@@ -576,6 +614,7 @@ exports.reqFileJson = reqFileJson;
 exports.reqGet = reqGet;
 exports.reqPostForm = reqPostForm;
 exports.reqPostJson = reqPostJson;
+exports.scrollIntoView = scrollIntoView;
 exports.sleep = sleep;
 exports.urlAddHttp = urlAddHttp;
 exports.urlAddHttps = urlAddHttps;

package/src/esm/index.js

@@ -16,7 +16,7 @@ export {
     elmCleaner,
     elmCleanerArray,
     elmCleanerTr,
-    parseTemplate
+    parseTemplate,
 } from './lib/util.dom.js';
 export {
     reqFileJson,
@@ -33,7 +33,8 @@ export {
     addLeadZero,
     generateUID,
     preloadImages,
-    sleep
+    sleep,
+    scrollIntoView
 } from './lib/util.misc.js';
 export {
     regExLetters,

package/src/esm/lib/util.check.js

@@ -1,4 +1,4 @@
-import { regExNumbers, regExLettersLower, regExLettersUpper, regExSpecial, regExFqdn, regExUrl, regExEmail } from "./util.regex";
+import { regExNumbers, regExLettersLower, regExLettersUpper, regExSpecial, regExFqdn, regExUrl, regExEmail } from "./util.regex.js";
 
 /**
  * Checks for a valid FQDN (Uses RegEx).

package/src/esm/lib/util.dom.js

@@ -78,3 +78,9 @@ export function elmCleanerArray(templateLit) {
         throw new Error(er.message);
     }
 }
+
+/**
+ * @typedef {Array} ImageUrls - A list of image urls
+ * @property {string} imageUrl - The url of the desired image
+ * @property {Array<string>} imageUrlStrings - An Array of image url strings
+ */

package/src/esm/lib/util.misc.js

@@ -35,22 +35,27 @@ export function generateUID(length = 16) {
 }
 
 /**
- * @typedef {string[]} ImgUrls - An array of URL strings
+ * @typedef {string[]} ImageUrls - An array of URL strings
  */
 /**
- * Preloads images in cache.
- * @param {ImgUrls} imgUrls - An array of URL strings
- * @returns {void}
- * @throws {Error} - Throws an Error if loading an image fails.
+ * Loads all images and returns a promise when loading is complete
+ * @param {ImageUrls} imageUrls - An Array of image url strings
+ * @returns {Object}
  */
-export function preloadImages(imgUrls) {
-    imgUrls.forEach(url => {
-        const img = new Image();
-        img.src = url;
-        img.onerror = () => {
-            throw new Error(`Failed to load image: ${url}`);
+export async function preloadImages(imageUrls) {
+    try {
+        const loadImage = (url) => {
+            return new Promise((resolve, reject) => {
+                const img = new Image();
+                img.onload = () => resolve(url);
+                img.onerror = () => reject(new Error(`Failed to load image at ${url}`));
+                img.src = url;
+            });
         };
-    });
+        await Promise.all(imageUrls.map(loadImage));
+    } catch (er) {
+        throw new Error(er.message);
+    }
 }
 
 /**
@@ -61,3 +66,27 @@ export function preloadImages(imgUrls) {
 export function sleep(ms) {
     return new Promise(resolve => setTimeout(resolve, ms));
 }
+
+/**
+ * Adds and intersectionObserver for a list of target elements, that calls a function when 
+ * @param {Array} targets - An array of elements that will be attached to the observer.
+ * @param {Function} callback - The callback function that will run when the observer is triggered.
+ * @param {Object} observerOptions - An Object containing the observer options. By default only threshold is set.
+ * @returns {Function} - Returns a cleanup function that will disconnect the observer. This is not required to use.
+ */
+export function scrollIntoView(targets, callback, observerOptions = { threshold: 0.5}) {
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {  // Only trigger when the element is intersecting
+                callback(entry.target);
+            }
+        });
+    }, observerOptions);
+    targets.forEach(target => {
+        observer.observe(target);
+    });
+    // Return a cleanup function to disconnect the observer
+    return () => {
+        observer.disconnect();
+    };
+}