billy-herrington-utils 2.0.7 → 2.1.0

package/src/utils/dom/index.ts

@@ -1,41 +1,74 @@
 import { sanitizeStr } from '../strings';
-import { waitForElementToAppear } from './observers';
+import { waitForElementToAppear } from './dom-observers';
 
 export {
   waitForElementToAppear,
   waitForElementToDisappear,
   watchDomChangesWithThrottle,
   watchElementChildrenCount,
-} from './observers';
+} from './dom-observers';
 
-export function querySelectorText(el: HTMLElement, selector?: string): string {
-  if (!selector || typeof selector !== 'string') return '';
-  const text = el.querySelector<HTMLElement>(selector)?.innerText || '';
+export function querySelectorLast<T extends Element = HTMLElement>(
+  root: ParentNode = document,
+  selector: string,
+): T | undefined {
+  const nodes = root.querySelectorAll<T>(selector);
+  return nodes.length > 0 ? nodes[nodes.length - 1] : undefined;
+}
+
+export function querySelectorLastNumber(selector: string, e: ParentNode = document) {
+  const text = querySelectorText(e, selector);
+  return Number(text.match(/\d+/g)?.pop() || 0);
+}
+
+export function querySelectorText(e: ParentNode, selector?: string): string {
+  if (typeof selector !== 'string') return '';
+  const text = e.querySelector<HTMLElement>(selector)?.innerText || '';
   return sanitizeStr(text);
 }
 
-export function parseDom(html: string): HTMLElement {
+export function parseHtml(html: string): HTMLElement {
   const parsed = new DOMParser().parseFromString(html, 'text/html').body;
-  return parsed.children.length > 1 ? parsed : (parsed.firstElementChild as HTMLElement);
+  if (parsed.children.length > 1) return parsed;
+  return parsed.firstElementChild as HTMLElement;
 }
 
-export function copyAttributes(target: HTMLElement, source: HTMLElement) {
+export function copyAttributes<T extends Element = HTMLElement>(target: T, source: T) {
   for (const attr of source.attributes) {
-    attr.nodeValue && target.setAttribute(attr.nodeName, attr.nodeValue);
+    if (attr.nodeValue) {
+      target.setAttribute(attr.nodeName, attr.nodeValue);
+    }
   }
 }
 
 export function replaceElementTag(e: HTMLElement, tagName: string) {
   const newTagElement = document.createElement(tagName);
   copyAttributes(newTagElement, e);
+
   newTagElement.innerHTML = e.innerHTML;
   e.parentNode?.replaceChild(newTagElement, e);
+
   return newTagElement;
 }
 
-export function getAllUniqueParents(
-  elements: HTMLCollection | HTMLElement[],
-): HTMLElement[] {
+export function removeClassesAndDataAttributes(
+  element: HTMLElement,
+  keyword: string,
+): void {
+  Array.from(element.classList).forEach((className) => {
+    if (className.includes(keyword)) {
+      element.classList.remove(className);
+    }
+  });
+
+  Array.from(element.attributes).forEach((attr) => {
+    if (attr.name.startsWith('data-') && attr.name.includes(keyword)) {
+      element.removeAttribute(attr.name);
+    }
+  });
+}
+
+export function getCommonParents(elements: HTMLCollection | HTMLElement[]): HTMLElement[] {
   const parents = Array.from(elements)
     .map((el) => el.parentElement)
     .filter((parent): parent is HTMLElement => parent !== null);
@@ -43,12 +76,60 @@ export function getAllUniqueParents(
   return [...new Set(parents)];
 }
 
-export function findNextSibling(el: HTMLElement) {
-  if (el.nextElementSibling) return el.nextElementSibling;
-  if (el.parentElement) return findNextSibling(el.parentElement);
+export function findNextSibling<T extends Element = HTMLElement>(e: T) {
+  if (e.nextElementSibling) return e.nextElementSibling;
+  if (e.parentElement) return findNextSibling(e.parentElement);
   return null;
 }
 
+export function checkHomogenity<T extends HTMLElement>(
+  a: T,
+  b: T,
+  options: { id?: boolean; className?: boolean },
+) {
+  if (!a || !b) return false;
+
+  if (options.id) {
+    if (a.id !== b.id) return false;
+  }
+
+  if (options.className) {
+    const ca = a.className;
+    const cb = b.className;
+    if (!(ca.length > cb.length ? ca.includes(cb) : cb.includes(ca))) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+export function instantiateTemplate(
+  sourceSelector: string,
+  attributeUpdates: Record<string, string>,
+  contentUpdates: Record<string, string>,
+): string {
+  const source = document.querySelector(sourceSelector) as HTMLElement;
+
+  const wrapper = document.createElement('div');
+  const clone = source.cloneNode(true);
+  wrapper.append(clone);
+
+  Object.entries(attributeUpdates).forEach(([attrName, attrValue]) => {
+    wrapper.querySelectorAll(`[${attrName}]`).forEach((element) => {
+      element.setAttribute(attrName, attrValue);
+    });
+  });
+
+  Object.entries(contentUpdates).forEach(([childSelector, textValue]) => {
+    wrapper.querySelectorAll<HTMLElement>(childSelector).forEach((element) => {
+      element.innerText = textValue;
+    });
+  });
+
+  return wrapper.innerHTML;
+}
+
 export function exterminateVideo(video: HTMLVideoElement) {
   video.removeAttribute('src');
   video.load();
@@ -58,7 +139,7 @@ export function exterminateVideo(video: HTMLVideoElement) {
 export function downloader(
   options = { append: '', after: '', button: '', cbBefore: () => {} },
 ) {
-  const btn = parseDom(options.button);
+  const btn = parseHtml(options.button);
 
   if (options.append) document.querySelector(options.append)?.append(btn);
   if (options.after) document.querySelector(options.after)?.after(btn);

package/src/utils/events/index.ts

@@ -1,37 +1,2 @@
-export function listenEvents(
-  dom: HTMLElement,
-  events: Array<string>,
-  callback: (e: Event) => void,
-): void {
-  for (const e of events) {
-    dom.addEventListener(e, callback, true);
-  }
-}
-
-export class Tick {
-  private tick?: number;
-  private callbackFinal?: () => void;
-
-  constructor(
-    private delay: number,
-    private startImmediate: boolean = true,
-  ) {}
-
-  public start(callback: () => void, callbackFinal?: () => void): void {
-    this.stop();
-    this.callbackFinal = callbackFinal;
-    if (this.startImmediate) callback();
-    this.tick = window.setInterval(callback, this.delay);
-  }
-
-  public stop(): void {
-    if (this.tick !== undefined) {
-      clearInterval(this.tick);
-      this.tick = undefined;
-    }
-    if (this.callbackFinal) {
-      this.callbackFinal();
-      this.callbackFinal = undefined;
-    }
-  }
-}
+export { OnHover } from './on-hover';
+export { Tick } from './tick';

package/src/utils/events/on-hover.ts

@@ -0,0 +1,42 @@
+export class OnHover {
+  private handleLeaveEvent() {
+    this.onLeave?.(this.target as HTMLElement);
+    this.onOverFinally?.();
+    this.target = undefined;
+    this.onOverFinally = undefined;
+    this.leaveSubject = undefined;
+  }
+
+  private handleEvent(e: PointerEvent) {
+    const currentTarget = e.target as HTMLElement;
+    if (!this.subjectSelector(currentTarget) || this.target === currentTarget) return;
+    this.leaveSubject?.dispatchEvent(new PointerEvent('pointerleave'));
+
+    this.target = currentTarget;
+    const result = this.onOver(this.target);
+    this.onOverFinally = result?.onOverCallback;
+    this.leaveSubject = result?.leaveTarget || this.target;
+    this.leaveSubject.addEventListener('pointerleave', (_) => this.handleLeaveEvent(), {
+      once: true,
+    });
+  }
+
+  private target: HTMLElement | undefined;
+  private leaveSubject: HTMLElement | undefined;
+  private onOverFinally: (() => void) | undefined;
+
+  constructor(
+    private container: HTMLElement,
+    private subjectSelector: (target: HTMLElement) => boolean,
+    private onOver: (
+      target: HTMLElement,
+    ) => void | { onOverCallback?: () => void; leaveTarget?: HTMLElement },
+    private onLeave?: (target: HTMLElement) => void,
+  ) {
+    this.container.addEventListener('pointerover', (e) => this.handleEvent(e));
+  }
+
+  static create(...args: ConstructorParameters<typeof OnHover>) {
+    return new OnHover(...args);
+  }
+}

package/src/utils/events/tick.ts

@@ -0,0 +1,27 @@
+export class Tick {
+  private tick?: number;
+  private callbackFinal?: () => void;
+
+  constructor(
+    private delay: number,
+    private startImmediate: boolean = true,
+  ) {}
+
+  public start(callback: () => void, callbackFinal?: () => void): void {
+    this.stop();
+    this.callbackFinal = callbackFinal;
+    if (this.startImmediate) callback();
+    this.tick = window.setInterval(callback, this.delay);
+  }
+
+  public stop(): void {
+    if (this.tick !== undefined) {
+      clearInterval(this.tick);
+      this.tick = undefined;
+    }
+    if (this.callbackFinal) {
+      this.callbackFinal();
+      this.callbackFinal = undefined;
+    }
+  }
+}

package/src/utils/fetch/index.ts

@@ -1,35 +1,37 @@
-import { parseDom } from '../dom';
+import { parseHtml } from '../dom';
 
-export const MOBILE_UA = [
-  'Mozilla/5.0 (Linux; Android 10; K)',
-  'AppleWebKit/537.36 (KHTML, like Gecko)',
-  'Chrome/114.0.0.0 Mobile Safari/537.36',
-].join(' ');
+export const MOBILE_UA = {
+  'User-Agent': [
+    'Mozilla/5.0 (Linux; Android 10; K)',
+    'AppleWebKit/537.36 (KHTML, like Gecko)',
+    'Chrome/114.0.0.0 Mobile Safari/537.36',
+  ].join(' '),
+} as const;
 
-export async function fetchWith(
-  url: string,
-  options?: { html?: boolean; mobile?: boolean },
-) {
-  const reqOpts = {};
+export async function fetchWith<T extends JSON | string | HTMLElement>(
+  input: RequestInfo | URL,
+  options: {
+    init?: RequestInit;
+    type: 'json' | 'html' | 'text';
+    mobile?: boolean;
+  },
+): Promise<T> {
+  const requestInit: RequestInit = options.init || {};
 
-  if (options?.mobile) {
-    Object.assign(reqOpts, { headers: new Headers({ 'User-Agent': MOBILE_UA }) });
+  if (options.mobile) {
+    Object.assign(requestInit, { headers: new Headers(MOBILE_UA) });
   }
 
-  return fetch(url, reqOpts)
-    .then((r) => r.text())
-    .then((r) => (options?.html ? parseDom(r) : r));
-}
-
-export const fetchHtml = (url: string) =>
-  fetchWith(url, { html: true }) as Promise<HTMLElement>;
+  const r = await fetch(input, requestInit).then((r) => r);
 
-export const fetchText = (url: string) => fetchWith(url) as Promise<string>;
-
-export function objectToFormData<T extends {}>(obj: T): FormData {
-  const formData = new FormData();
-  Object.entries(obj).forEach(([k, v]) => {
-    formData.append(k, v as string);
-  });
-  return formData;
+  if (options.type === 'json') return (await r.json()) as T;
+  if (options.type === 'html') return parseHtml(await r.text()) as T;
+  return (await r.text()) as T;
 }
+
+export const fetchJson = (input: RequestInfo | URL) =>
+  fetchWith<JSON>(input, { type: 'json' });
+export const fetchHtml = (input: RequestInfo | URL) =>
+  fetchWith<HTMLElement>(input, { type: 'html' });
+export const fetchText = (input: RequestInfo | URL) =>
+  fetchWith<string>(input, { type: 'text' });

package/src/utils/index.ts

@@ -0,0 +1,39 @@
+export { chunks, range } from './arrays';
+export { wait } from './async';
+export {
+  checkHomogenity,
+  copyAttributes,
+  downloader,
+  exterminateVideo,
+  findNextSibling,
+  getCommonParents,
+  instantiateTemplate,
+  parseHtml,
+  querySelectorLast,
+  querySelectorLastNumber,
+  querySelectorText,
+  removeClassesAndDataAttributes,
+  replaceElementTag,
+  waitForElementToAppear,
+  waitForElementToDisappear,
+  watchDomChangesWithThrottle,
+  watchElementChildrenCount,
+} from './dom';
+export { OnHover, Tick } from './events';
+export {
+  fetchHtml,
+  fetchJson,
+  fetchText,
+  fetchWith,
+} from './fetch';
+export { circularShift } from './math';
+export { memoize, objectToFormData, propsDifference } from './objects';
+export { LazyImgLoader, Observer } from './observers';
+export {
+  parseCssUrl,
+  parseDataParams,
+  parseIntegerOr,
+  timeToSeconds,
+} from './parsers';
+export { sanitizeStr, splitWith } from './strings';
+export { RegexFilter } from './strings/regexes';

package/src/utils/objects/index.ts

@@ -1,25 +1,26 @@
-type AnyFunction = (...args: any[]) => any;
+export { memoize } from './memoize';
 
-export interface MemoizedFunction<T extends AnyFunction> extends CallableFunction {
-  (...args: Parameters<T>): ReturnType<T>;
-  clear: () => void;
+export function objectToFormData<T extends {}>(obj: T): FormData {
+  const formData = new FormData();
+  Object.entries(obj).forEach(([k, v]) => {
+    formData.append(k, v as string);
+  });
+  return formData;
 }
 
-export function memoize<T extends AnyFunction>(fn: T): MemoizedFunction<T> {
-  const cache = new Map<string, ReturnType<T>>();
+export function propsDifference<
+  T extends Record<string, unknown>,
+  U extends object,
+>(obj1: T | U, obj2: T | U): { d1: string[]; d2: string[] } {
+  const a = new Set(Object.getOwnPropertyNames(obj1));
+  const b = new Set(Object.getOwnPropertyNames(obj2));
 
-  const memoizedFunction = ((...args: Parameters<T>): ReturnType<T> => {
-    const key = JSON.stringify(args);
+  const d1 = a.difference(b).values().toArray();
+  const d2 = b.difference(a).values().toArray();
 
-    if (cache.has(key)) {
-      return cache.get(key) as ReturnType<T>;
-    }
-
-    const result = fn(...args);
-    cache.set(key, result);
-
-    return result;
-  }) as MemoizedFunction<T>;
+  return { d1, d2 };
+}
 
-  return memoizedFunction;
+export function parseIntegerOr(n: string, or: number | string) {
+  return ((num) => (Number.isNaN(num) ? or : num))(parseInt(n));
 }

package/src/utils/objects/memoize.ts

@@ -0,0 +1,25 @@
+import type { AnyFunction } from '../../types';
+
+export interface MemoizedFunction<T extends AnyFunction> extends CallableFunction {
+  (...args: Parameters<T>): ReturnType<T>;
+  clear: () => void;
+}
+
+export function memoize<T extends AnyFunction>(fn: T): MemoizedFunction<T> {
+  const cache = new Map<string, ReturnType<T>>();
+
+  const memoizedFunction = ((...args: Parameters<T>): ReturnType<T> => {
+    const key = JSON.stringify(args);
+
+    if (cache.has(key)) {
+      return cache.get(key) as ReturnType<T>;
+    }
+
+    const result = fn(...args);
+    cache.set(key, result);
+
+    return result;
+  }) as MemoizedFunction<T>;
+
+  return memoizedFunction;
+}

package/src/utils/observers/index.ts

@@ -1,6 +1,8 @@
+export { LazyImgLoader } from './lazy-image-loader';
+
 export class Observer {
   public observer: IntersectionObserver;
-  private timeout: number | null = null;
+  private timeout?: number;
   constructor(private callback: (entry: Element) => void) {
     this.observer = new IntersectionObserver(this.handleIntersection.bind(this));
   }
@@ -11,7 +13,7 @@ export class Observer {
 
   throttle(target: Element, throttleTime: number) {
     this.observer.unobserve(target);
-    this.timeout = setTimeout(() => this.observer.observe(target), throttleTime);
+    this.timeout = window.setTimeout(() => this.observer.observe(target), throttleTime);
   }
 
   handleIntersection(entries: Iterable<IntersectionObserverEntry>) {
@@ -40,29 +42,3 @@ export class Observer {
     return observer_;
   }
 }
-
-export class LazyImgLoader {
-  public lazyImgObserver: Observer;
-  private attributeName = 'data-lazy-load';
-
-  constructor(shouldDelazify: (target: Element) => boolean) {
-    this.lazyImgObserver = new Observer((target: Element) => {
-      if (shouldDelazify(target)) {
-        this.delazify(target as HTMLImageElement);
-      }
-    });
-  }
-
-  lazify(_target: Element, img?: HTMLImageElement, imgSrc?: string) {
-    if (!img || !imgSrc) return;
-    img.setAttribute(this.attributeName, imgSrc);
-    img.src = '';
-    this.lazyImgObserver.observe(img);
-  }
-
-  delazify = (target: HTMLImageElement) => {
-    this.lazyImgObserver.observer.unobserve(target);
-    target.src = target.getAttribute(this.attributeName) as string;
-    target.removeAttribute(this.attributeName);
-  };
-}

package/src/utils/observers/lazy-image-loader.ts

@@ -0,0 +1,27 @@
+import { Observer } from ".";
+
+export class LazyImgLoader {
+  public lazyImgObserver: Observer;
+  private attributeName = 'data-lazy-load';
+
+  constructor(shouldDelazify: (target: Element) => boolean) {
+    this.lazyImgObserver = new Observer((target: Element) => {
+      if (shouldDelazify(target)) {
+        this.delazify(target as HTMLImageElement);
+      }
+    });
+  }
+
+  lazify(_target: Element, img?: HTMLImageElement, imgSrc?: string) {
+    if (!img || !imgSrc) return;
+    img.setAttribute(this.attributeName, imgSrc);
+    img.src = '';
+    this.lazyImgObserver.observe(img);
+  }
+
+  delazify = (target: HTMLImageElement) => {
+    this.lazyImgObserver.observer.unobserve(target);
+    target.src = target.getAttribute(this.attributeName) as string;
+    target.removeAttribute(this.attributeName);
+  };
+}

package/src/utils/parsers/index.ts

@@ -1,22 +1,4 @@
-export function formatTimeToHHMMSS(timeString: string): string {
-  const regex: RegExp = /(?:(\d+)\s*h\s*)?(?:(\d+)\s*mi?n?\s*)?(?:(\d+)\s*sec)?/;
-  const match: RegExpMatchArray | null = timeString.match(regex);
-  const h: number = parseInt(match?.[1] || '0');
-  const m: number = parseInt(match?.[2] || '0');
-  const s: number = parseInt(match?.[3] || '0');
-  const pad = (num: number): string => String(num).padStart(2, '0');
-  return `${pad(h)}:${pad(m)}:${pad(s)}`;
-}
-
-// "01:22:03" -> 4923
-export function timeToSeconds(t: string): number {
-  const r = /sec|min|h|m/.test(t) ? formatTimeToHHMMSS(t) : t;
-  return (r?.match(/\d+/gm) || [0])
-    .reverse()
-
-    .map((s, i) => parseInt(s as string) * 60 ** i)
-    .reduce((a, b) => a + b);
-}
+export { formatTimeToHHMMSS, timeToSeconds } from './time-parser';
 
 export function parseIntegerOr(n: string | number, or: number): number {
   const num = Number(n);
@@ -43,6 +25,6 @@ export function parseDataParams(str: string): Record<string, string> {
   );
 }
 
-export function parseCSSUrl(s: string) {
+export function parseCssUrl(s: string) {
   return s.replace(/url\("|"\).*/g, '');
 }

package/src/utils/parsers/time-parser.ts

@@ -0,0 +1,28 @@
+/**
+ * Converts a duration string (e.g., "1h 22min 3sec") to HH:MM:SS format.
+ * @param timeStr - The duration string to format.
+ * @returns A string in the format HH:MM:SS.
+ */
+export function formatTimeToHHMMSS(timeStr: string): string {
+  const pad = (num: number): string => num.toString().padStart(2, '0');
+
+  const h = timeStr.match(/(\d+)\s*h/)?.[1] || '0';
+  const m = timeStr.match(/(\d+)\s*mi?n/)?.[1] || '0';
+  const s = timeStr.match(/(\d+)\s*sec/)?.[1] || '0';
+
+  return `${pad(+h)}:${pad(+m)}:${pad(+s)}`;
+}
+
+/**
+ * Converts a time string (HH:MM:SS or duration format) to total seconds.
+ * @param timeStr - The time string to convert.
+ * @returns The total number of seconds.
+ */
+export function timeToSeconds(timeStr: string): number {
+  const normalized = /[a-zA-Z]/.test(timeStr) ? formatTimeToHHMMSS(timeStr) : timeStr;
+
+  return normalized
+    .split(':')
+    .reverse()
+    .reduce((total, unit, index) => total + parseInt(unit, 10) * 60 ** index, 0);
+}

package/src/utils/strings/regexes.ts

@@ -4,21 +4,25 @@ import { splitWith } from '.';
 export class RegexFilter {
   private regexes: RegExp[];
 
-  constructor(str: string, flags: string = 'i') {
+  constructor(str: string, flags: string = 'gi') {
     this.regexes = memoize(this.compileSearchRegex)(str, flags);
   }
 
   // 'dog,bog,f:girl' or r:dog|bog... => [r/dog/i, r/bog/i, r/(^|\ )girl($|\ )/i]
   private compileSearchRegex(str: string, flags: string): RegExp[] {
-    if (str.startsWith('r:')) return [new RegExp(str.slice(2), flags)];
+    try {
+      if (str.startsWith('r:')) return [new RegExp(str.slice(2), flags)];
 
-    const regexes = splitWith(str)
-      .map(
-        (s) => s.replace(/f:(\w+)/g, (_, w) => `(^|\\ |,)${w}($|\\ |,)`), // full word
-      )
-      .map((_) => new RegExp(_, flags));
+      const regexes = splitWith(str)
+        .map(
+          (s) => s.replace(/f:(\w+)/g, (_, w) => `(^|\\ |,)${w}($|\\ |,)`), // full word
+        )
+        .map((_) => new RegExp(_, flags));
 
-    return regexes;
+      return regexes;
+    } catch (_) {
+      return [];
+    }
   }
 
   public hasEvery(str: string) {