billy-herrington-utils 1.6.0 → 2.0.1

package/src/userscripts/data-manager/index.ts

@@ -1,192 +1,90 @@
+import type { StoreState } from 'jabroni-outfit';
 import { LazyImgLoader } from '../../utils/observers';
-import { stringToWords } from '../../utils/strings';
-
-interface DataFilterState {
-  filterPublic: boolean;
-  filterPrivate: boolean;
-  filterHD: boolean;
-  filterDuration: boolean;
-  filterDurationFrom: number;
-  filterDurationTo: number;
-  filterExclude: boolean;
-  filterExcludeWords: string;
-  filterInclude: boolean;
-  filterIncludeWords: string;
-}
-
-interface FilterResult {
-  tag: string;
-  condition: boolean;
-}
+import { assignGlobals } from '../../utils/userscript';
+import type { RulesGlobal } from '../rules';
+import { DataFilter, type FilterFunction } from './data-filter';
 
-type FilterInput = Record<string, string | number | boolean | HTMLElement>;
-type FilterFunction = (v: FilterInput) => FilterResult;
+export type DataElement = Record<string, string | number | boolean | HTMLElement>;
 
-class DataFilter {
-  public filters: { [key: string]: () => FilterFunction };
+export class DataManager {
+  private data = new Map<string, DataElement>();
+  private lazyImgLoader = new LazyImgLoader(
+    (target: Element) => !this.isFiltered(target as HTMLElement),
+  );
+  private dataFilter: DataFilter;
 
   constructor(
-    private rules: IRules,
-    private state: DataFilterState,
+    private rules: RulesGlobal,
+    private state: StoreState,
   ) {
-    this.state = state;
-
-    const methods = Object.getOwnPropertyNames(this);
-    this.filters = methods.reduce((acc: { [key: string]: () => FilterFunction }, k) => {
-      if (k in this.state) {
-        acc[k] = this[k as keyof DataFilter] as unknown as () => FilterFunction;
-        GM_addStyle(`.filter-${k.toLowerCase().slice(6)} { display: none !important; }`);
-      }
-      return acc;
-    }, {});
-  }
-
-  filterPublic = (): FilterFunction => {
-    return (v: FilterInput) => {
-      const isPublic = !this.rules.isPrivate(v.element as HTMLElement);
-      return {
-        condition: this.state.filterPublic && isPublic,
-        tag: 'filter-public',
-      };
-    };
-  };
-
-  filterPrivate = (): FilterFunction => {
-    return (v: FilterInput) => {
-      const isPrivate = this.rules.isPrivate(v.element as HTMLElement);
-      return {
-        condition: this.state.filterPrivate && isPrivate,
-        tag: 'filter-private',
-      };
-    };
-  };
-
-  filterHD = (): FilterFunction => {
-    return (v: FilterInput) => {
-      const isHD = this.rules.isHD(v.element as HTMLElement);
-      return {
-        condition: this.state.filterHD && isHD,
-        tag: 'filter-hd',
-      };
-    };
-  };
-
-  filterDuration = (): FilterFunction => {
-    return (v: FilterInput) => {
-      const notInRange =
-        (v.duration as number) < this.state.filterDurationFrom ||
-        (v.duration as number) > this.state.filterDurationTo;
-      return {
-        condition: this.state.filterDuration && notInRange,
-        tag: 'filter-duration',
-      };
-    };
-  };
-
-  filterExclude = (): FilterFunction => {
-    const tags = DataManager.filterDSLToRegex(this.state.filterExcludeWords);
-    return (v: FilterInput) => {
-      const containTags = tags.some((tag) => tag.test(v.title as string));
-      return {
-        condition: this.state.filterExclude && containTags,
-        tag: 'filter-exclude',
-      };
-    };
-  };
-
-  filterInclude = (): FilterFunction => {
-    const tags = DataManager.filterDSLToRegex(this.state.filterIncludeWords);
-    return (v: FilterInput) => {
-      const containTagsNot = tags.some((tag) => !tag.test(v.title as string));
-      return {
-        condition: this.state.filterInclude && containTagsNot,
-        tag: 'filter-include',
-      };
-    };
-  };
-}
+    this.dataFilter = new DataFilter(rules, state);
 
-interface IRules {
-  getThumbs: (html: HTMLElement) => HTMLElement[];
-  getThumbUrl: (thumbElement: HTMLElement) => string;
-  getThumbData: (thumbElement: HTMLElement) => { title: string; duration: number };
-  getThumbImgData: (thumbElement: HTMLElement) => { img: HTMLElement; imgSrc: string };
-  container: HTMLElement;
-  isPrivate: (element: HTMLElement) => boolean;
-  isHD: (element: HTMLElement) => boolean;
-}
-
-export class DataManager {
-  private rules: IRules;
-  private state: DataFilterState;
-  private data: Map<string, FilterInput>;
-  private lazyImgLoader: LazyImgLoader;
-  public dataFilters: { [key: string]: () => FilterFunction };
-
-  constructor(rules: IRules, state: DataFilterState) {
-    this.rules = rules;
-    this.state = state;
-    this.data = new Map();
-    this.lazyImgLoader = new LazyImgLoader(
-      (target: Element) => !this.isFiltered(target as HTMLElement),
-    );
-    this.dataFilters = new DataFilter(rules, state).filters;
-
-    const targets = [window, (globalThis as any).unsafeWindow].filter(Boolean);
-    targets.forEach((w: any) => {
-      Object.assign(w, {
-        sortByDuration: () => this.sort('duration'),
-        sortByViews: () => this.sort('view'),
-      });
+    assignGlobals({
+      sortByDuration: () => this.sortBy('duration'),
+      sortByViews: () => this.sortBy('view'),
     });
   }
 
-  static filterDSLToRegex(str: string): RegExp[] {
-    const toFullWord = (w: string) => `(^|\\ )${w}($|\\ )`;
-    const str_ = str.replace(/f:(\w+)/g, (_, w) => toFullWord(w));
-    return stringToWords(str_).map((expr: string) => new RegExp(expr, 'i'));
-  }
-
-  isFiltered(el: HTMLElement): boolean {
+  public isFiltered(el: HTMLElement): boolean {
     return el.className.includes('filtered');
   }
 
-  applyFilters = (filters: { [key: string]: boolean }, offset = 0): void => {
+  public applyFilters = (filters: { [key: string]: boolean } = {}, offset = 0): void => {
     const filtersToApply = Object.keys(filters)
-      .filter((k) => Object.hasOwn(this.dataFilters, k))
-      .map((k) => this.dataFilters[k]());
+      .filter((k) => this.dataFilter.filters.has(k))
+      .map((k) => this.dataFilter.filters.get(k) as () => FilterFunction);
 
     if (filtersToApply.length === 0) return;
 
-    const updates: (() => void)[] = [];
-    let offset_counter = 1;
-    for (const v of this.data.values()) {
-      if (++offset_counter > offset) {
+    const iterator = this.data.values();
+    let currentIndex = 0;
+
+    const runBatch = (deadline: IdleDeadline) => {
+      while (currentIndex < offset) {
+        const skip = iterator.next();
+        if (skip.done) return;
+        currentIndex++;
+      }
+
+      const updates: { e: HTMLElement; tag: string; condition: boolean }[] = [];
+
+      while (deadline.timeRemaining() > 0) {
+        const { value, done } = iterator.next();
+        if (done) break;
+
         for (const f of filtersToApply) {
-          const { tag, condition } = f(v as FilterInput);
-          updates.push(() => (v.element as HTMLElement).classList.toggle(tag, condition));
+          const { tag, condition } = f()(value);
+          updates.push({ e: value.element as HTMLElement, tag, condition });
         }
       }
-    }
 
-    requestAnimationFrame(() => {
-      updates.forEach((update) => {
-        update();
-      });
-    });
+      if (updates.length > 0) {
+        requestAnimationFrame(() => {
+          updates.forEach((u) => {
+            u.e.classList.toggle(u.tag, u.condition);
+          });
+        });
+      }
+
+      if (currentIndex < this.data.size) {
+        requestIdleCallback(runBatch);
+      }
+    };
+
+    requestIdleCallback(runBatch);
   };
 
-  filterAll = (offset?: number): void => {
+  public filterAll = (offset?: number): void => {
     const filters = Object.assign(
       {},
-      ...Object.keys(this.dataFilters).map((f) => ({
-        [f]: this.state[f as keyof DataFilterState],
+      ...Object.keys(this.dataFilter.filters).map((f) => ({
+        [f]: this.state[f as keyof StoreState],
       })),
     );
     this.applyFilters(filters, offset);
   };
 
-  parseData = (
+  public parseData = (
     html: HTMLElement,
     container?: HTMLElement,
     removeDuplicates = false,
@@ -194,10 +92,12 @@ export class DataManager {
   ): void => {
     const thumbs = this.rules.getThumbs(html);
     const data_offset = this.data.size;
+    const fragment = document.createDocumentFragment();
+    const parent = container || this.rules.container;
 
     for (const thumbElement of thumbs) {
       const url = this.rules.getThumbUrl(thumbElement);
-      if (!url || this.data.has(url)) {
+      if (!url || this.data.has(url) || parent.contains(thumbElement)) {
         if (removeDuplicates) thumbElement.remove();
         continue;
       }
@@ -207,32 +107,35 @@ export class DataManager {
 
       if (shouldLazify) {
         const { img, imgSrc } = this.rules.getThumbImgData(thumbElement);
-        this.lazyImgLoader.lazify(thumbElement, img as HTMLImageElement, imgSrc);
+        this.lazyImgLoader.lazify(thumbElement, img, imgSrc);
       }
 
-      const parent = container || this.rules.container;
-      if (!parent.contains(thumbElement)) parent.appendChild(thumbElement);
+      fragment.append(thumbElement);
     }
 
+    requestAnimationFrame(() => {
+      parent.appendChild(fragment);
+    });
+
     this.filterAll(data_offset);
   };
 
-  sort(propName: string) {
+  public sortBy<K extends keyof DataElement>(key: K): void {
     if (this.data.size < 2) return;
 
-    const sorted = Array.from(this.data.keys()).sort((b, a) => {
-      return (
-        ((this.data.get(a) as FilterInput)[propName] as number) -
-        ((this.data.get(b) as FilterInput)[propName] as number)
-      );
-    });
+    const sorted: DataElement[] = Array.from(this.data.values()).sort(
+      (a: DataElement, b: DataElement) => {
+        return (a[key] as number) - (b[key] as number);
+      },
+    );
 
-    const container = ((this.data.get(sorted[0]) as FilterInput).element as HTMLElement)
-      .parentElement as HTMLElement;
+    const container = (sorted[0].element as HTMLElement).parentElement as HTMLElement;
+    container.style.visibility = 'hidden';
 
     sorted.forEach((s) => {
-      const e = (this.data.get(s) as FilterInput).element as HTMLElement;
-      container.append(e);
+      container.append(s.element as HTMLElement);
     });
+
+    container.style.visibility = 'visible';
   }
 }

package/src/userscripts/infinite-scroll/index.ts

@@ -1,64 +1,40 @@
+import type { JabronioStore } from 'jabroni-outfit';
 import { fetchHtml } from '../../utils/fetch';
 import { Observer } from '../../utils/observers';
+import type { RulesGlobal } from '../rules';
 
-interface IInfiniteScroller {
-  delay?: number;
-  enabled?: boolean;
-  writeHistory?: boolean;
-  paginationOffset: number;
-  paginationLast: number;
-  paginationElement: HTMLElement;
-  paginationUrlGenerator: (offset: number) => string;
-  parseData: (document: HTMLElement) => void;
-  intersectionObservable?: HTMLElement;
-  alternativeGenerator?: () => OffsetGenerator;
-}
+type InfiniteScrollerOptions = Pick<InfiniteScroller, 'rules'> & Partial<InfiniteScroller>;
+type GeneratorResult = { url: string; offset: number };
+export type OffsetGenerator = Generator<GeneratorResult> | AsyncGenerator<GeneratorResult>;
 
-interface GeneratorResult {
-  url: string;
-  offset: number;
-}
+export class InfiniteScroller {
+  public enabled = true;
+  public delay = 200;
+  public paginationOffset = 1;
+  public writeHistory = false;
+  public parseData?: (document: HTMLElement) => void;
+  public rules: RulesGlobal;
 
-type OffsetGenerator = Generator<GeneratorResult> | AsyncGenerator<GeneratorResult>;
+  private observer?: Observer;
+  private paginationGenerator: OffsetGenerator;
 
-export class InfiniteScroller {
-  public paginationGenerator: OffsetGenerator;
-  public enabled: boolean;
-  public delay: number;
-  public paginationOffset: number;
-  public paginationLast: number;
-  public writeHistory: boolean;
-  private parseData: (document: HTMLElement) => void;
-
-  constructor({
-    enabled = true,
-    delay = 300,
-    writeHistory = false,
-    paginationOffset,
-    paginationLast,
-    paginationElement,
-    paginationUrlGenerator,
-    parseData,
-    alternativeGenerator,
-    intersectionObservable,
-  }: IInfiniteScroller) {
-    this.enabled = enabled;
-    this.delay = delay;
-    this.writeHistory = writeHistory;
-    this.paginationOffset = paginationOffset;
-    this.paginationLast = paginationLast;
-    this.parseData = parseData;
-
-    this.paginationGenerator =
-      alternativeGenerator?.() ??
-      InfiniteScroller.createPaginationGenerator(
-        paginationOffset,
-        paginationLast,
-        paginationUrlGenerator,
-      );
-
-    const observable = intersectionObservable || paginationElement;
-    Observer.observeWhile(observable, this.generatorConsumer, this.delay);
+  constructor(options: InfiniteScrollerOptions) {
+    this.rules = options.rules;
+    this.paginationOffset = this.rules.paginationStrategy.getPaginationOffset();
+    Object.assign(this, options);
+
+    this.paginationGenerator = this.createPaginationGenerator();
+    this.setObserver(this.rules.observable);
+  }
+
+  public dispose() {
+    if (this.observer) this.observer.dispose();
+  }
+
+  public setObserver(observable: HTMLElement) {
+    if (this.observer) this.observer.dispose();
+    this.observer = Observer.observeWhile(observable, this.generatorConsumer, this.delay);
+    return this;
   }
 
   private onScrollCBs: Array<(scroller: InfiniteScroller) => void> = [];
@@ -79,27 +55,52 @@ export class InfiniteScroller {
     if (!this.enabled) return false;
     const { value: { url, offset } = {}, done } = await this.paginationGenerator.next();
     if (!done) {
-      const nextPageHTML = await fetchHtml(url);
-      const prevScrollPos = document.documentElement.scrollTop;
-      this.paginationOffset = offset;
-      this.parseData(nextPageHTML);
-      this._onScroll();
-      window.scrollTo(0, prevScrollPos);
-      if (this.writeHistory) {
-        history.replaceState({}, '', url);
-      }
+      await this.doScroll(url, offset);
     }
     return !done;
   };
 
-  static *createPaginationGenerator(
-    currentPage: number,
-    totalPages: number,
-    generateURL: (offset: number) => string,
-  ): OffsetGenerator {
-    for (let offset = currentPage + 1; offset <= totalPages; offset++) {
-      const url = generateURL(offset);
+  async doScroll(url: string, offset: number) {
+    const nextPageHTML = await fetchHtml(url);
+    const prevScrollPos = document.documentElement.scrollTop;
+    this.paginationOffset = Math.max(this.paginationOffset, offset);
+    this.parseData?.(nextPageHTML);
+    this._onScroll();
+    window.scrollTo(0, prevScrollPos);
+    if (this.writeHistory) {
+      history.replaceState({}, '', url);
+    }
+  }
+
+  private *createPaginationGenerator(): OffsetGenerator {
+    const curPage = this.rules.paginationStrategy.getPaginationOffset();
+    const lastPage = this.rules.paginationStrategy.getPaginationLast();
+    for (let offset = curPage + 1; offset <= lastPage; offset++) {
+      const url = this.rules.paginationStrategy.getPaginationUrlGenerator()(offset);
       yield { url, offset };
     }
   }
+
+  static create(
+    store: JabronioStore,
+    rules: RulesGlobal,
+    parseData: (document: HTMLElement) => void,
+  ) {
+    const enabled = store.state.infiniteScrollEnabled as boolean;
+
+    store.state.$paginationLast = rules.paginationStrategy.getPaginationLast();
+
+    const infiniteScroller = new InfiniteScroller({ enabled, parseData, rules }).onScroll(
+      ({ paginationOffset }) => {
+        store.state.$aginationOffset = paginationOffset;
+      },
+      true,
+    );
+
+    store.subscribe(() => {
+      infiniteScroller.enabled = store.state.infiniteScrollEnabled as boolean;
+    });
+
+    return infiniteScroller;
+  }
 }

package/src/userscripts/pagination-parsing/index.ts

@@ -1,53 +1,39 @@
 import {
-  type IPaginationStrategy,
   PaginationStrategy,
   PaginationStrategyDataParams,
   PaginationStrategyPathnameParams,
   PaginationStrategySearchParams,
 } from './pagination-strategies';
-import { getPaginationLinks, parseURL, upgradePathname } from './pagination-utils';
+import { getPaginationLinks } from './pagination-utils';
 
-export function getPaginationStrategy(options: IPaginationStrategy): PaginationStrategy {
-  const {
-    doc = document,
-    url = location.href,
-    paginationSelector = '.pagination',
-    searchParamSelector,
-  } = options;
+export function getPaginationStrategy(
+  options: Partial<PaginationStrategy>,
+): PaginationStrategy {
+  const _paginationStrategy = new PaginationStrategy(options);
+  const pagination = _paginationStrategy.getPaginationElement();
 
-  const pagination = doc.querySelector(paginationSelector);
+  Object.assign(options, { ..._paginationStrategy });
+  const { url, searchParamSelector } = options;
 
   if (!pagination) {
     console.error('Found No Pagination');
-    return new PaginationStrategy(options);
+    return _paginationStrategy;
   }
 
   const pageLinks = getPaginationLinks(pagination, url).map((l) => new URL(l));
 
   console.log({ pageLinks: pageLinks.map((l) => l.href) });
 
-  const getStrategy = (): typeof PaginationStrategy => {
-    const dataParamLinks = Array.from(pagination.querySelectorAll('[data-parameters *= from]'));
-    if (dataParamLinks.length > 0) {
-      console.log('PaginationStrategyDataParams', dataParamLinks);
+  const selectStrategy = (): typeof PaginationStrategy => {
+    if (PaginationStrategyDataParams.testLinks(pagination)) {
       return PaginationStrategyDataParams;
     }
 
-    if (pageLinks.some((h) => PaginationStrategySearchParams.checkLink(h, searchParamSelector))) {
-      const l = pageLinks
-        .filter((h) => PaginationStrategySearchParams.checkLink(h, searchParamSelector))
-        .map((h) => h.href);
-      console.log('PaginationStrategySearchParams', l);
+    if (PaginationStrategySearchParams.testLinks(pageLinks, searchParamSelector)) {
       return PaginationStrategySearchParams;
     }
 
-    if (pageLinks.some((h) => /\/(page\/)?\d+\/?$/.test(h.pathname))) {
-      const pathnameMatched = pageLinks.filter((h) => /\/(page\/)?\d+\/?$/.test(h.pathname));
-      console.log(
-        'PaginationStrategyPathnameParams',
-        pathnameMatched.map((h) => h.href),
-      );
-      options.url = upgradePathname(parseURL(url), pathnameMatched);
+    if (PaginationStrategyPathnameParams.testLinks(pageLinks, options)) {
       return PaginationStrategyPathnameParams;
     }
 
@@ -55,9 +41,15 @@ export function getPaginationStrategy(options: IPaginationStrategy): PaginationS
     return PaginationStrategy;
   };
 
-  const paginationStrategy = new (getStrategy())(options);
+  const PaginationStrategyConstructor = selectStrategy();
+  const paginationStrategy = new PaginationStrategyConstructor(options);
 
-  console.log('paginationStrategy', paginationStrategy);
+  console.log(
+    'paginationStrategy:',
+    PaginationStrategyConstructor.name,
+    '\n',
+    paginationStrategy,
+  );
 
   return paginationStrategy;
 }

package/src/userscripts/pagination-parsing/pagination-strategies/PaginationStrategy.ts

@@ -1,25 +1,17 @@
 import { parseURL } from '../pagination-utils';
 
-export interface IPaginationStrategy {
-  url?: URL | Location | string;
-  doc?: Document | HTMLElement;
-  paginationSelector?: string;
-  fixPaginationLast?: (n: number, offset?: number) => number;
-  pathnameSelector?: RegExp;
-  searchParamSelector?: string;
-  offsetMin?: number;
-}
-
 export class PaginationStrategy {
   public doc = document;
   public url: URL;
   public paginationSelector = '.pagination';
   public searchParamSelector = 'page';
+  public static _pathnameSelector = /\/(page\/)?\d+\/?$/;
   public pathnameSelector = /\/(\d+)\/?$/;
+  public dataparamSelector = '[data-parameters *= from]';
   public fixPaginationLast?: (n: number, offset?: number) => number;
   public offsetMin = 1;
 
-  constructor(options?: IPaginationStrategy) {
+  constructor(options?: Partial<PaginationStrategy>) {
     if (options) {
       Object.entries(options).forEach(([k, v]) => {
         Object.assign(this, { [k]: v });
@@ -30,7 +22,7 @@ export class PaginationStrategy {
   }
 
   getPaginationElement() {
-    return this.doc.querySelector(this.paginationSelector);
+    return this.doc.querySelector<HTMLElement>(this.paginationSelector);
   }
 
   get hasPagination() {

package/src/userscripts/pagination-parsing/pagination-strategies/PaginationStrategyDataParams.ts

@@ -3,7 +3,7 @@ import { PaginationStrategy } from './PaginationStrategy';
 
 export class PaginationStrategyDataParams extends PaginationStrategy {
   getPaginationLast() {
-    const links = this.getPaginationElement()?.querySelectorAll('[data-parameters *= from]');
+    const links = this.getPaginationElement()?.querySelectorAll(this.dataparamSelector);
     const pages = Array.from(links || [], (l) => {
       const p = l.getAttribute('data-parameters');
       const v = p?.match(/from\w*:(\d+)/)?.[1] || this.offsetMin.toString();
@@ -31,7 +31,9 @@ export class PaginationStrategyDataParams extends PaginationStrategy {
       'a[data-block-id][data-parameters]',
     );
     const block_id = parametersElement?.getAttribute('data-block-id') || '';
-    const parameters = parseDataParams(parametersElement?.getAttribute('data-parameters') || '');
+    const parameters = parseDataParams(
+      parametersElement?.getAttribute('data-parameters') || '',
+    );
 
     const attrs: Record<string, string> = {
       block_id,
@@ -54,4 +56,11 @@ export class PaginationStrategyDataParams extends PaginationStrategy {
 
     return paginationUrlGenerator;
   }
+
+  static testLinks(doc: HTMLElement | Document = document) {
+    const dataParamLinks = Array.from(
+      doc.querySelectorAll<HTMLElement>('[data-parameters *= from]'),
+    );
+    return dataParamLinks.length > 0;
+  }
 }

package/src/userscripts/pagination-parsing/pagination-strategies/PaginationStrategyPathnameParams.ts

@@ -1,13 +1,40 @@
-import { getPaginationLinks } from '../pagination-utils';
+import { getPaginationLinks, parseURL, upgradePathname } from '../pagination-utils';
 import { PaginationStrategy } from './PaginationStrategy';
 
 export class PaginationStrategyPathnameParams extends PaginationStrategy {
   extractPage = (a: HTMLAnchorElement | Location | string): number => {
     const href = typeof a === 'string' ? a : a.href;
     const { pathname } = new URL(href, this.doc.baseURI || this.url.origin);
-    return parseInt(pathname.match(this.pathnameSelector)?.pop() || this.offsetMin.toString());
+    return parseInt(
+      pathname.match(this.pathnameSelector)?.pop() || this.offsetMin.toString(),
+    );
   };
 
+  static checkLink(
+    link: URL,
+    pathnameSelector: RegExp = PaginationStrategy._pathnameSelector,
+  ): boolean {
+    return pathnameSelector.test(link.pathname);
+  }
+
+  static testLinks(links: URL[], options: Partial<PaginationStrategy>): boolean {
+    const result = links.some((h) =>
+      PaginationStrategyPathnameParams.checkLink(h, options.pathnameSelector),
+    );
+
+    if (result) {
+      const pathnamesMatched = links.filter((h) =>
+        PaginationStrategyPathnameParams.checkLink(h, options.pathnameSelector),
+      );
+      options.url = upgradePathname(
+        parseURL(options.url as unknown as string),
+        pathnamesMatched,
+      );
+    }
+
+    return result;
+  }
+
   getPaginationLast() {
     const links = getPaginationLinks(
       (this.getPaginationElement() || document) as HTMLElement,