@nativerent/js-utils 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativerent/js-utils",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -12,11 +12,15 @@
   "author": "NativeRent",
   "license": "GPL-3.0-or-later",
   "devDependencies": {
+    "@types/jest": "^29.5.11",
     "eslint": "^8.56.0",
+    "jest": "^29.7.0",
     "prettier": "^3.1.1",
     "rollup": "^4.9.4",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-esbuild": "^6.1.0",
-    "typescript": "^5.3.3"
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.3.3",
+    "jest-environment-jsdom": "^29.7.0"
   }
 }

package/src/index.ts

@@ -1,11 +1,11 @@
-import { Primitive } from "./types";
+import { FlattenableObject, Primitive, SimpleObject } from "./types";
 
 export function debounce(fn: Function, delay: number): () => void {
   let timeout: ReturnType<typeof setTimeout>;
 
-  return function (this: any, ...args: any[]) {
+  return function (...args: any[]) {
     clearTimeout(timeout);
-    timeout = setTimeout(() => fn.apply(this, args), delay);
+    timeout = setTimeout(() => fn.apply(null, args), delay);
   };
 }
 
@@ -38,6 +38,13 @@ export function isString(str: any): str is string {
   return typeof str === "string";
 }
 
+/**
+ * Check if the given argument is a string which is not empty
+ */
+export function isNotEmptyString(str: any) {
+  return typeof str === "string" && str.length;
+}
+
 export function isHTMLElement(el: any): el is HTMLElement {
   return el instanceof HTMLElement || el instanceof SVGElement;
 }
@@ -117,23 +124,75 @@ export function getObjectKeys(object: object): string[] {
 }
 
 /**
- * Works with primitive objects, see JSDoc @param
- *
- * @param object {[key: string]: SimpleObject | { [key: string]: SimpleObject }}
+ * Convert an object to a query string
+ * Works with primitive objects
  */
-export function objectToQueryString(object: object): string {
+export function objectToQueryString(object: {
+  [key: string | number]:
+    | Primitive
+    | Array<Primitive | null | undefined>
+    | SimpleObject
+    | { [key: string | number]: SimpleObject }
+    | undefined
+    | null;
+}): string {
   return Object.entries(object)
     .map(([k, v]) => {
       if (Array.isArray(v)) {
-        return v.map((item) => `${k}[]=${encodeURIComponent(item)}`).join("&");
+        return v
+          .map((item) => `${k}[]=${encodeURIComponent(item || "")}`)
+          .join("&");
       } else if (isObject(v)) {
-        v = JSON.stringify(v);
+        return `${k}=${encodeURIComponent(JSON.stringify(v))}`;
       }
       return `${k}=${encodeURIComponent(v || "")}`;
     })
     .join("&");
 }
 
+export function countObjectInnerLength(object: {
+  [key: string | number]: any;
+}) {
+  const obj = Object.values(object);
+
+  return obj.length === 1
+    ? obj[0].length
+    : obj.reduce((acc, cur) => {
+        if (Array.isArray(acc)) {
+          acc = acc.length;
+        }
+        if (cur) {
+          acc += cur.length;
+        }
+        return acc;
+      });
+}
+
+/**
+ * Check if the element is in viewport
+ */
+export function isElementVisible(element: HTMLElement, minVisiblePercent = 50) {
+  const elementCoords = element.getBoundingClientRect();
+  const elementHeight = elementCoords.height;
+
+  if (!elementHeight) {
+    return false;
+  }
+
+  const elementTop = elementCoords.top;
+  const elementBottom = elementCoords.bottom;
+  const viewPortHeight = window.innerHeight;
+
+  const elementVisibleHeight =
+    elementTop > 0
+      ? // the element is in or below viewport
+        viewPortHeight - elementTop
+      : // the element is still in or above viewport
+        elementBottom;
+
+  return (elementVisibleHeight / elementHeight) * 100 >= minVisiblePercent;
+}
+
 export function decodeSafeURL(url: string): string {
   try {
     return decodeURI(url);
@@ -142,7 +201,8 @@ export function decodeSafeURL(url: string): string {
   }
 }
 
-export function getSafeURL(url: string): string {
+export function getSafeURL(url?: string): string {
+  url = url ? url : location.href;
   return encodeURI(decodeSafeURL(url));
 }
 
@@ -183,6 +243,13 @@ export function toBinaryStr(str: string) {
   return String.fromCharCode(...charCodes);
 }
 
+/**
+ * Find a DOM element where an ad unit should be rendered to
+ */
+export function getHtmlElement(id: string) {
+  return document.getElementById(id);
+}
+
 /**
  * Convert an HTML string into a list of nodes
  */
@@ -216,7 +283,7 @@ export function createHtmlElement(
  */
 export function insertHtmlElements(
   nodes: NodeListOf<Node>,
-  appendTo: Element | null = null,
+  appendTo?: Element,
 ) {
   appendTo = appendTo || document.body;
 
@@ -242,7 +309,11 @@ export function insertHtmlElements(
             flatHtmlAttributes(node.attributes),
           );
         } else {
-          newNode = createScriptElement(node.innerHTML, true);
+          newNode = createScriptElement(
+            node.innerHTML,
+            true,
+            flatHtmlAttributes(node.attributes),
+          );
         }
         break;
 
@@ -340,6 +411,18 @@ export function createStyleElement(css: string | null) {
   return element;
 }
 
+/**
+ * Create a <link> element
+ */
+export function createLinkElement(href: string) {
+  const element = createHtmlElement("link") as HTMLLinkElement;
+
+  element.rel = "stylesheet";
+  element.href = href;
+
+  return element;
+}
+
 /**
  * Create svg elements
  */
@@ -360,3 +443,471 @@ export function createSvgElement(
 
   return element;
 }
+
+/**
+ * Create an image element to use as a tracking pixel
+ */
+export function createPixelElement(src: string) {
+  const image = document.createElement("img");
+
+  image.src = src;
+  image.width = 1;
+  image.height = 1;
+  image.style.position = "absolute";
+  image.style.left = "-99999px";
+
+  return image;
+}
+
+/**
+ * Append a new script element to the DOM head
+ */
+export function insertJs(js: string, inline = false) {
+  const element = createScriptElement(js, inline);
+
+  document.head.appendChild(element);
+}
+
+/**
+ * Append a new style element to the DOM head
+ */
+export function insertCss(css: string, className?: string, external = false) {
+  const element = external ? createLinkElement(css) : createStyleElement(css);
+
+  if (className) {
+    element.className = className;
+  }
+
+  document.head.appendChild(element);
+}
+
+/**
+ * Get screen sizes
+ */
+export function getScreenSize(): { width: number; height: number } {
+  let width, height;
+
+  if (window.screen) {
+    width = screen.width;
+    height = screen.height;
+  } else {
+    width = window.innerWidth;
+    height = window.innerHeight;
+  }
+
+  return {
+    width: width,
+    height: height,
+  };
+}
+
+/**
+ * Get a random integer between min and max
+ */
+export function getRandomInt(min = 0, max = 4294967295) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+
+  return Math.floor(Math.random() * (max - min)) + min;
+}
+
+/**
+ * Implementation of Java's String.hashCode() method
+ */
+export function hashCode(str: string) {
+  let hash = 0,
+    chr;
+
+  for (let i = 0; i < str.length; i++) {
+    chr = str.charCodeAt(i);
+    hash = (hash << 5) - hash + chr;
+    hash |= 0; // convert to 32bit integer
+  }
+
+  return hash >>> 0;
+}
+
+/**
+ * Executes a callback as soon as DOM is interactive
+ */
+export function onDOMReady(callback: Function, ...args: any[]) {
+  if (
+    document.readyState === "interactive" ||
+    document.readyState === "complete"
+  ) {
+    callback(...args);
+  } else {
+    document.addEventListener("DOMContentLoaded", () => callback(...args));
+  }
+}
+
+/**
+ * Calculate the percentage of two values
+ *
+ * @param a
+ * @param b
+ * @return number
+ */
+export function toPercent(a: number, b: number): number {
+  return b > 0 ? (a / b) * 100 : 0;
+}
+
+/**
+ * Make a camelCase string
+ *
+ * @param string
+ * @return string
+ */
+export function toCamelCase(string: string): string {
+  return string
+    .split(new RegExp(/[-_.]/))
+    .reduce(
+      (a: string, b: string) => a + b.charAt(0).toUpperCase() + b.slice(1),
+    );
+}
+
+/**
+ * Make a snake_case string
+ *
+ * @param string
+ * @return string
+ */
+export function toSnakeCase(string: string): string {
+  return toCamelCase(string)
+    .replace(/(^[A-Z])?([A-Z])/gm, "$1_$2")
+    .toLowerCase();
+}
+
+/**
+ * Transform the first letter of the given string to the upper case
+ *
+ * @param string
+ * @return string
+ */
+export function capitalize(string: string): string {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+/**
+ * Registry independent string sorting
+ *
+ * @param first
+ * @param second
+ */
+export function sortByAlphabet(first: string, second: string): number {
+  return first.toLowerCase() > second.toLowerCase() ? 1 : -1;
+}
+
+/**
+ * @param length
+ * @return string of max length 100
+ */
+export function getRandomStr(length?: number): string {
+  length = length ? (length > 100 ? 100 : length) : 10;
+
+  let str = Math.random().toString(36).substring(2);
+
+  while (str.length < length) {
+    str += Math.random().toString(36).substring(2);
+  }
+
+  const result = str.slice(-length);
+  return isNaN(Number(result)) ? result : getRandomStr(length);
+}
+
+export function getRandomItem(items: any[]): any {
+  return items[Math.floor(Math.random() * items.length)];
+}
+
+/**
+ * Summarize elements of the given array
+ *
+ * @param values
+ * @return number | string - a summary of all the numbers in the array or an empty string if
+ * there was only NaNs
+ */
+export function sumArray(values: Array<any>): number | string {
+  if (values.every((value: any) => isNaN(value))) {
+    return "";
+  } else {
+    return values.reduce((sum: any, curr: any) => {
+      const value = Number(curr);
+
+      if (!isNaN(value)) {
+        return sum + value;
+      } else {
+        return sum;
+      }
+    }, 0);
+  }
+}
+
+/**
+ * Returns an array of the object keys which values are not present in filter
+ *
+ * @param obj
+ * @param values
+ */
+export function filterObjectKeysByValues(
+  obj: { [key: string]: any },
+  values: Array<string | number | boolean | null | undefined>,
+): string[] {
+  values = Array.isArray(values) ? values : Array(values);
+
+  const keys = [];
+
+  for (const key in obj) {
+    if (!values.includes(obj[key])) {
+      keys.push(key);
+    }
+  }
+
+  return keys;
+}
+
+export function getFromObject(object: object, key: string): any {
+  return key.split(".").reduce((a: any, b: any) => {
+    return a[b];
+  }, object);
+}
+
+export function fireBlurEvent(
+  element: string | Element | null,
+  delay: number = 0,
+): void {
+  fireEvent("blur", element, delay);
+}
+
+export function fireInputEvent(
+  element: string | Element | null,
+  delay: number = 0,
+): void {
+  fireEvent("input", element, delay);
+}
+
+export function fireEvent(
+  eventName: string,
+  element: string | Element | null,
+  delay: number = 0,
+): void {
+  setTimeout(() => {
+    if (isString(element)) {
+      element = document.querySelector(element);
+    }
+
+    if (!isNullOrUndef(element)) {
+      element.dispatchEvent(
+        new Event(eventName, {
+          bubbles: true,
+        }),
+      );
+    }
+  }, delay);
+}
+
+export function hasObjectChanged(
+  object: { [key: string]: any },
+  values: any[],
+): boolean {
+  let hasChanged = false;
+
+  for (const key in object) {
+    let oldVal = object[key];
+    let [, newVal] = values.find(([newKey]) => key === newKey);
+
+    if (isObject(oldVal)) {
+      if (!isObject(newVal)) {
+        hasChanged = true;
+      } else {
+        hasChanged = hasObjectChanged(oldVal, Object.entries(newVal));
+      }
+    } else if (Array.isArray(newVal) || Array.isArray(oldVal)) {
+      newVal = Array.isArray(newVal) ? newVal : [];
+      oldVal = Array.isArray(oldVal) ? oldVal : [];
+
+      hasChanged = arrayDiff(newVal, oldVal).length > 0;
+    } else {
+      hasChanged = areDiff(newVal, oldVal);
+    }
+
+    if (hasChanged) {
+      break;
+    }
+  }
+
+  return hasChanged;
+}
+
+export function roundBigNum(number: number): number {
+  const digitsNum = Math.trunc(number).toString().length;
+
+  let roundTo = 0;
+  switch (true) {
+    case digitsNum > 2 && digitsNum < 5:
+      roundTo = 100;
+      break;
+    case digitsNum >= 5:
+      roundTo = 10000;
+      break;
+  }
+
+  return roundTo ? Math.round(number / roundTo) * roundTo : number;
+}
+
+export function extractNumbers(value: any): string {
+  if (!isStr(value) && !isNum(value)) {
+    return "";
+  }
+  return value.toString().replace(/[^0-9]/g, "");
+}
+
+export function removeSpaces(value: any): string {
+  if (!isStr(value) && !isNum(value)) {
+    return "";
+  }
+  return value.toString().replace(/\s/g, "");
+}
+
+export function roundUp(num: number, precision: number): number {
+  const multiplier = Number("1".padEnd(precision + 1, "0"));
+  return Math.ceil(num * multiplier) / multiplier;
+}
+
+export function roundDown(num: number, precision: number): number {
+  const multiplier = Number("1".padEnd(precision + 1, "0"));
+  return Math.floor(num * multiplier) / multiplier;
+}
+
+export function areDiff(
+  val1?: Primitive | null,
+  val2?: Primitive | null,
+  strict?: boolean,
+): boolean {
+  if (strict) {
+    return val1 !== val2;
+  }
+
+  // at least one value is not empty
+  if (Boolean(val1) || Boolean(val2)) {
+    return val1 != val2;
+  }
+
+  // both empty, but not equally empty!
+  // each one may be one of: empty string, null or undefined
+  return false;
+}
+
+export function flattenObject(obj: FlattenableObject, prefix = "") {
+  return Object.keys(obj).reduce((acc, k) => {
+    const pre = prefix.length ? prefix + "." : "";
+    if (isObject(obj[k]) || Array.isArray(obj[k])) {
+      Object.assign(acc, flattenObject(obj[k], pre + k));
+    } else {
+      acc[pre + k] = obj[k];
+    }
+    return acc;
+  }, {} as FlattenableObject);
+}
+
+export function flattenObjectAsArray(obj: FlattenableObject) {
+  const result: FlattenableObject = {};
+  const flat = flattenObject(obj);
+  Object.keys(flat).forEach((key) => {
+    const newKey = key.replaceAll(/\.([^.]+)/g, "[$1]");
+    result[newKey] = flat[key];
+  });
+
+  return result;
+}
+
+export function parseObjectPathStr(pathStr: string): string[] {
+  const pathParts = pathStr.replace(/\[/g, ".").replace(/\]/g, "").split(".");
+
+  if (pathParts.length > 1 && pathParts[1].includes("[")) {
+    return [pathParts[0], ...parseObjectPathStr(pathParts[1])];
+  }
+
+  return pathParts;
+}
+
+export function formatNumber(
+  num: number | string,
+  fractionDigits?: number,
+): string {
+  fractionDigits = isNullOrUndef(fractionDigits) ? 2 : fractionDigits;
+  return new Intl.NumberFormat("ru-RU", {
+    style: "decimal",
+    minimumFractionDigits: fractionDigits,
+    maximumFractionDigits: fractionDigits,
+  })
+    .format(Number(num))
+    .replace(",", ".")
+    .replace(/\u00A0/g, " "); // charCode 160, White-space
+}
+
+export function formatNumberWithSign(
+  num: number | string,
+  fractionDigits?: number,
+): string {
+  return formatWithSign(num, formatNumber(num, fractionDigits));
+}
+
+export function formatPercent(num: number | string): string {
+  return formatNumber(num) + "%";
+}
+
+export function formatWithSign(
+  num: number | string,
+  numString?: string,
+): string {
+  numString = numString ? numString : num.toString();
+  return (Number(num) < 0 ? "" : "+") + numString;
+}
+
+export function autoSizeText(
+  el: HTMLElement,
+  height: number,
+  minFontSize: number,
+  maxFontSize: number = 50,
+) {
+  let attempts = 30;
+
+  const resizeText = () => {
+    if (getTextHeight() === 0) {
+      return;
+    }
+    while (attempts && getTextHeight() > height) {
+      attempts--;
+      reduceText();
+    }
+    while (attempts && getTextHeight() < height) {
+      attempts--;
+      enlargeText();
+    }
+  };
+
+  const reduceText = () => {
+    const fontSize = getNumericStyleProp("fontSize", el);
+    const newFontSize = fontSize - 1;
+    if (fontSize > 1 && newFontSize >= minFontSize) {
+      el.style.fontSize = `${newFontSize}px`;
+    }
+  };
+
+  const enlargeText = () => {
+    const fontSize = getNumericStyleProp("fontSize", el);
+    const newFontSize = fontSize + 1;
+    if (newFontSize <= maxFontSize) {
+      el.style.fontSize = `${newFontSize}px`;
+    }
+  };
+
+  const getTextHeight = () =>
+    Math.floor(
+      el.scrollHeight -
+        getNumericStyleProp("paddingTop", el) -
+        getNumericStyleProp("paddingBottom", el),
+    );
+
+  resizeText();
+}

package/src/types.d.ts

@@ -1 +1,7 @@
-export type Primitive = string | boolean | number;
+export type FlattenableObject = { [key: string]: any };
+
+export type Primitive = boolean | number | string;
+
+export type SimpleObject = {
+  [key: string | number]: Primitive | Primitive[] | null | undefined;
+};