pervert-monkey 1.0.22 → 1.0.24

package/src/utils/dom/selectors.ts

@@ -0,0 +1,48 @@
+import { sanitizeStr } from '../strings';
+
+export function querySelectorOrSelf<T extends Element = HTMLElement>(
+  element: T,
+  selector: string,
+): T | null {
+  if (element.matches?.(selector)) {
+    return element as T;
+  }
+  return element.querySelector<T>(selector);
+}
+
+export function querySelectorLast<T extends Element = HTMLElement>(
+  root: ParentNode = document,
+  selector: string,
+): T | undefined {
+  const nodes = root.querySelectorAll<T>(selector);
+  if (nodes.length < 1) {
+    return querySelectorOrSelf<T>(root as T, selector) || undefined;
+  }
+  return nodes[nodes.length - 1];
+}
+
+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 = querySelectorOrSelf(e as HTMLElement, selector)?.innerText || '';
+  return sanitizeStr(text);
+}
+
+export function getCommonParents<T extends HTMLElement>(
+  elements: Iterable<T>,
+): HTMLElement[] {
+  return Map.groupBy(elements, (e) => e.parentElement)
+    .keys()
+    .filter((e) => e !== null)
+    .toArray();
+}
+
+export function findNextSibling<T extends Element = HTMLElement>(e: T) {
+  if (e.nextElementSibling) return e.nextElementSibling;
+  if (e.parentElement) return findNextSibling(e.parentElement);
+  return null;
+}

package/src/utils/events/index.ts

@@ -1,2 +1,2 @@
-export { OnHover } from './on-hover';
-export { Tick } from './tick';
+export * from './on-hover';
+export * from './tick';

package/src/utils/observers/index.ts

@@ -1,40 +1,45 @@
 export { LazyImgLoader } from './lazy-image-loader';
 
-export class Observer {
-  public observer: IntersectionObserver;
+export class Observer<T extends Element = HTMLElement> {
   private timeout?: number;
-  constructor(private callback: (entry: Element) => void) {
+  private observer: IntersectionObserver;
+
+  constructor(private callback: (entry: T) => void) {
     this.observer = new IntersectionObserver(this.handleIntersection.bind(this));
   }
 
-  observe(target: Element) {
+  public observe(target: T) {
     this.observer.observe(target);
   }
 
-  throttle(target: Element, throttleTime: number) {
+  public unobserve(target: T) {
     this.observer.unobserve(target);
+  }
+
+  private throttle(target: T, throttleTime: number) {
+    this.unobserve(target);
     this.timeout = window.setTimeout(() => this.observer.observe(target), throttleTime);
   }
 
-  handleIntersection(entries: Iterable<IntersectionObserverEntry>) {
+  private handleIntersection(entries: Iterable<IntersectionObserverEntry>) {
     for (const entry of entries) {
       if (entry.isIntersecting) {
-        this.callback(entry.target);
+        this.callback(entry.target as T);
       }
     }
   }
 
-  dispose() {
+  public dispose() {
     if (this.timeout) clearTimeout(this.timeout);
     this.observer.disconnect();
   }
 
-  static observeWhile(
-    target: Element,
+  public static observeWhile<T extends Element = HTMLElement>(
+    target: T,
     callback: () => Promise<boolean> | boolean,
     throttleTime: number,
   ) {
-    const observer = new Observer(async (target: Element) => {
+    const observer = new Observer(async (target: T) => {
       const condition = await callback();
       if (condition) {
         observer.throttle(target, throttleTime);

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

@@ -1,27 +1,29 @@
-import { Observer } from ".";
+import { Observer } from '.';
 
-export class LazyImgLoader {
-  public lazyImgObserver: Observer;
-  private attributeName = 'data-lazy-load';
+export class LazyImgLoader<T extends Element = HTMLElement> {
+  private lazyImgObserver: Observer;
 
-  constructor(shouldDelazify: (target: Element) => boolean) {
+  constructor(
+    shouldDelazify: (target: T) => boolean,
+    private attributeName = 'data-lazy-orangutan',
+  ) {
     this.lazyImgObserver = new Observer((target: Element) => {
-      if (shouldDelazify(target)) {
-        this.delazify(target as HTMLImageElement);
+      if (shouldDelazify(target as T)) {
+        this.unlazify(target as HTMLImageElement);
       }
     });
   }
 
-  lazify(_target: Element, img?: HTMLImageElement, imgSrc?: string) {
+  public lazify(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);
+  private unlazify(target: HTMLImageElement) {
+    this.lazyImgObserver.unobserve(target);
     target.src = target.getAttribute(this.attributeName) as string;
     target.removeAttribute(this.attributeName);
-  };
+  }
 }

package/src/utils/performance/index.ts

@@ -30,15 +30,21 @@ export function runIdleJob<T>(iterator: Iterator<T>, job: (v: T) => void) {
   });
 }
 
-export function containMutation(container: HTMLElement, mutation: () => void) {
+export async function containMutation(container: HTMLElement, mutation: () => void) {
+  const originalContain = container.style.contain;
   container.style.contain = 'content';
+
   try {
     mutation();
-  } finally {
-    requestAnimationFrame(() => {
+
+    await new Promise<void>((resolve) => {
       requestAnimationFrame(() => {
-        container.style.contain = 'none';
+        requestAnimationFrame(() => {
+          resolve();
+        });
       });
     });
+  } finally {
+    container.style.contain = originalContain;
   }
 }