@cntrl-site/sdk-nextjs 1.6.12 → 1.6.14

package/src/utils/ArticleRectManager/ArticleRectObserver.ts

@@ -1,93 +1,93 @@
-import { EventEmitter } from '../EventEmitter';
-import ResizeObserver from 'resize-observer-polyfill';
-
-interface EventMap {
-  'scroll': undefined;
-  'resize': DOMRect;
-}
-
-export class ArticleRectObserver extends EventEmitter<EventMap> {
-  private resizeObserver: ResizeObserver;
-  private articleWidth: number = 0;
-  private registry: Map<string, HTMLElement> = new Map();
-  private scrollPos: number = window.scrollY;
-  private animationFrame: number = NaN;
-  private parent: HTMLElement | undefined = undefined;
-  private sectionsScrollMap: Map<string, number> = new Map();
-
-  constructor() {
-    super();
-    this.resizeObserver = new ResizeObserver(this.handleResize.bind(this));
-  }
-
-  get scroll(): number {
-    return this.scrollPos;
-  }
-
-  getSectionScroll(sectionId: string): number {
-    const sectionTop = this.sectionsScrollMap.get(sectionId);
-    if (sectionTop === undefined) return 0;
-    return - (sectionTop / this.articleWidth - this.scrollPos);
-  }
-
-  getSectionTop(sectionId: string): number {
-    const sectionTop = this.sectionsScrollMap.get(sectionId);
-    return sectionTop ?? 0;
-  }
-
-  get width(): number {
-    return this.articleWidth;
-  }
-
-  private setScroll(scroll: number) {
-    this.scrollPos = scroll;
-  }
-
-  init(parent: HTMLElement) {
-    this.parent = parent;
-    const onScroll = () => {
-      this.handleScroll(window.scrollY);
-      if (!isNaN(this.animationFrame)) return;
-      this.animationFrame = window.requestAnimationFrame(() => {
-        this.animationFrame = NaN;
-        this.emit('scroll', undefined);
-      });
-    };
-    window.addEventListener('scroll', onScroll);
-    return () => {
-      this.parent = undefined;
-      window.removeEventListener('scroll', onScroll);
-      if (!isNaN(this.animationFrame)) {
-        window.cancelAnimationFrame(this.animationFrame);
-        this.animationFrame = NaN;
-      }
-    };
-  }
-
-  register(el: HTMLElement, sectionId: string) {
-    this.registry.set(sectionId, el);
-    this.resizeObserver.observe(el);
-    return () => {
-      this.registry.delete(sectionId);
-      this.resizeObserver.unobserve(el);
-    };
-  }
-
-  private handleScroll = (scroll: number) => {
-    this.setScroll(scroll / this.articleWidth);
-  };
-
-  private handleResize() {
-    if (!this.parent) return;
-    const parentBoundary = this.parent.getBoundingClientRect();
-    this.articleWidth = parentBoundary.width;
-    this.setScroll(window.scrollY / this.articleWidth);
-    this.emit('resize', parentBoundary);
-    for (const sectionId of this.registry.keys()) {
-      const el = this.registry.get(sectionId);
-      if (!el) continue;
-      const rect = el.getBoundingClientRect();
-      this.sectionsScrollMap.set(sectionId, rect.top - parentBoundary.top);
-    }
-  };
-}
+import { EventEmitter } from '../EventEmitter';
+import ResizeObserver from 'resize-observer-polyfill';
+
+interface EventMap {
+  'scroll': undefined;
+  'resize': DOMRect;
+}
+
+export class ArticleRectObserver extends EventEmitter<EventMap> {
+  private resizeObserver: ResizeObserver;
+  private articleWidth: number = 0;
+  private registry: Map<string, HTMLElement> = new Map();
+  private scrollPos: number = window.scrollY;
+  private animationFrame: number = NaN;
+  private parent: HTMLElement | undefined = undefined;
+  private sectionsScrollMap: Map<string, number> = new Map();
+
+  constructor() {
+    super();
+    this.resizeObserver = new ResizeObserver(this.handleResize.bind(this));
+  }
+
+  get scroll(): number {
+    return this.scrollPos;
+  }
+
+  getSectionScroll(sectionId: string): number {
+    const sectionTop = this.sectionsScrollMap.get(sectionId);
+    if (sectionTop === undefined) return 0;
+    return -(sectionTop / this.articleWidth - this.scrollPos);
+  }
+
+  getSectionTop(sectionId: string): number {
+    const sectionTop = this.sectionsScrollMap.get(sectionId);
+    return sectionTop ?? 0;
+  }
+
+  get width(): number {
+    return this.articleWidth;
+  }
+
+  private setScroll(scroll: number) {
+    this.scrollPos = scroll;
+  }
+
+  init(parent: HTMLElement) {
+    this.parent = parent;
+    const onScroll = () => {
+      this.handleScroll(window.scrollY);
+      if (!isNaN(this.animationFrame)) return;
+      this.animationFrame = window.requestAnimationFrame(() => {
+        this.animationFrame = NaN;
+        this.emit('scroll', undefined);
+      });
+    };
+    window.addEventListener('scroll', onScroll);
+    return () => {
+      this.parent = undefined;
+      window.removeEventListener('scroll', onScroll);
+      if (!isNaN(this.animationFrame)) {
+        window.cancelAnimationFrame(this.animationFrame);
+        this.animationFrame = NaN;
+      }
+    };
+  }
+
+  register(el: HTMLElement, sectionId: string) {
+    this.registry.set(sectionId, el);
+    this.resizeObserver.observe(el);
+    return () => {
+      this.registry.delete(sectionId);
+      this.resizeObserver.unobserve(el);
+    };
+  }
+
+  private handleScroll = (scroll: number) => {
+    this.setScroll(scroll / this.articleWidth);
+  };
+
+  private handleResize() {
+    if (!this.parent) return;
+    const parentBoundary = this.parent.getBoundingClientRect();
+    this.articleWidth = parentBoundary.width;
+    this.setScroll(window.scrollY / this.articleWidth);
+    this.emit('resize', parentBoundary);
+    for (const sectionId of this.registry.keys()) {
+      const el = this.registry.get(sectionId);
+      if (!el) continue;
+      const rect = el.getBoundingClientRect();
+      this.sectionsScrollMap.set(sectionId, rect.top - parentBoundary.top);
+    }
+  };
+}

package/src/utils/ArticleRectManager/useArticleRectObserver.ts

@@ -1,17 +1,17 @@
-import { useEffect, useState } from 'react';
-import { ArticleRectObserver } from './ArticleRectObserver';
-
-export const useArticleRectObserver = (el?: HTMLElement | null) => {
-  const [articleRectObserver, setArticleRectObserver] = useState<ArticleRectObserver | null>(null);
-
-  useEffect(() => {
-    setArticleRectObserver(new ArticleRectObserver());
-  }, []);
-
-  useEffect(() => {
-    if (!el || !articleRectObserver) return;
-    return articleRectObserver.init(el);
-  }, [el, articleRectObserver]);
-
-  return articleRectObserver;
-};
+import { useEffect, useState } from 'react';
+import { ArticleRectObserver } from './ArticleRectObserver';
+
+export const useArticleRectObserver = (el?: HTMLElement | null) => {
+  const [articleRectObserver, setArticleRectObserver] = useState<ArticleRectObserver | null>(null);
+
+  useEffect(() => {
+    setArticleRectObserver(new ArticleRectObserver());
+  }, []);
+
+  useEffect(() => {
+    if (!el || !articleRectObserver) return;
+    return articleRectObserver.init(el);
+  }, [el, articleRectObserver]);
+
+  return articleRectObserver;
+};

package/src/utils/ArticleRectManager/useSectionRegistry.ts

@@ -1,11 +1,11 @@
-import { useContext, useEffect } from 'react';
-import { ArticleRectContext } from '../../provider/ArticleRectContext';
-
-export const useSectionRegistry = ( sectionId: string, el?: HTMLElement | null) => {
-  const articleRectObserver = useContext(ArticleRectContext);
-
-  useEffect(() => {
-    if (!el || !articleRectObserver) return;
-    return articleRectObserver.register(el, sectionId);
-  }, [el, articleRectObserver]);
-};
+import { useContext, useEffect } from 'react';
+import { ArticleRectContext } from '../../provider/ArticleRectContext';
+
+export const useSectionRegistry = ( sectionId: string, el?: HTMLElement | null) => {
+  const articleRectObserver = useContext(ArticleRectContext);
+
+  useEffect(() => {
+    if (!el || !articleRectObserver) return;
+    return articleRectObserver.register(el, sectionId);
+  }, [el, articleRectObserver]);
+};

package/src/utils/EventEmitter.ts

@@ -1,41 +1,41 @@
-export type Listener<P> = (payload: P) => void;
-type Listeners<EventMap> = {
-  [E in keyof (EventMap)]?: Listener<EventMap[E]>[];
-};
-
-export abstract class EventEmitter<EventMap> {
-  protected listeners: Listeners<EventMap> = {};
-
-  on<E extends (keyof EventMap)>(
-    event: E,
-    listener: Listener<EventMap[E]>
-  ): () => void {
-    if (!Array.isArray(this.listeners[event])) {
-      this.listeners[event] = [];
-    }
-    this.listeners[event]?.push(listener);
-    return () => {
-      this.off(event, listener);
-    };
-  }
-
-  off<E extends (keyof EventMap)>(
-    event: E,
-    listener: Listener<EventMap[E]>
-  ): void {
-    const filtered = this.listeners[event]?.filter(l => l !== listener);
-    this.listeners[event] = filtered && filtered.length > 0 ? filtered : undefined;
-  }
-
-  protected emit<E extends (keyof EventMap)>(event: E, payload: EventMap[E]): void {
-    const listeners = this.listeners[event];
-    if (!Array.isArray(listeners)) return;
-    for (const listener of listeners) {
-      try {
-        listener(payload);
-      } catch (error) {
-        console.error(error instanceof Error ? error.stack : error);
-      }
-    }
-  }
-}
+export type Listener<P> = (payload: P) => void;
+type Listeners<EventMap> = {
+  [E in keyof (EventMap)]?: Listener<EventMap[E]>[];
+};
+
+export abstract class EventEmitter<EventMap> {
+  protected listeners: Listeners<EventMap> = {};
+
+  on<E extends (keyof EventMap)>(
+    event: E,
+    listener: Listener<EventMap[E]>
+  ): () => void {
+    if (!Array.isArray(this.listeners[event])) {
+      this.listeners[event] = [];
+    }
+    this.listeners[event]?.push(listener);
+    return () => {
+      this.off(event, listener);
+    };
+  }
+
+  off<E extends (keyof EventMap)>(
+    event: E,
+    listener: Listener<EventMap[E]>
+  ): void {
+    const filtered = this.listeners[event]?.filter(l => l !== listener);
+    this.listeners[event] = filtered && filtered.length > 0 ? filtered : undefined;
+  }
+
+  protected emit<E extends (keyof EventMap)>(event: E, payload: EventMap[E]): void {
+    const listeners = this.listeners[event];
+    if (!Array.isArray(listeners)) return;
+    for (const listener of listeners) {
+      try {
+        listener(payload);
+      } catch (error) {
+        console.error(error instanceof Error ? error.stack : error);
+      }
+    }
+  }
+}