@inizioevoke/astro-core 1.1.1 → 1.3.0

package/src/components/ScrollContainer/ScrollContainer.astro

@@ -2,7 +2,7 @@
 import type { HTMLAttributes } from 'astro/types';
 import './ScrollContainer.css';
 
-interface Props extends HTMLAttributes<'div'> { 
+export interface Props extends HTMLAttributes<'div'> { 
   outerWidth?: string | number;
   innerWidth?: string | number;
   height?: string | number;

package/src/components/ScrollContainer/ScrollContainer.ts

@@ -1,97 +1,225 @@
+export class ScrollContainer {
+  #container: HTMLElement;
+  #content: HTMLElement;
+  #track: HTMLElement;
+  #thumb: HTMLElement;
+  #isDragging: boolean;
+  #startY: number;
+  #startScrollTop: number;
+  // #enabled: boolean;
+  
+  #mouseupHandler: any = undefined; // [] = [];
+  #mousemoveHandler: any = undefined; // [] = [];
 
-export interface IScrollContainer {
-  container: HTMLElement;
-  content: HTMLElement;
-  track: HTMLElement;
-  thumb: HTMLElement;
-  isDragging: boolean;
-  startY: number;
-  startScrollTop: number;
+  constructor(container: HTMLElement) { // ,  { enabled }: { enabled?: boolean } = {}) {
+    const _this = this;
+    this.#container = container;
+    this.#content = container.querySelector('.evo-scroll-content') as HTMLElement;
+    this.#track = container.querySelector('.evo-scroll-track') as HTMLElement;
+    this.#thumb = container.querySelector('.evo-scroll-thumb') as HTMLElement;
+    this.#isDragging = false;
+    this.#startY = 0;
+    this.#startScrollTop = 0;
+    // this.#enabled = enabled ?? true;
+
+    this.#thumb.addEventListener('mousedown', (e) => { 
+      _this.#thumbMouseDown(e); 
+    }, { passive: true });
+
+    // this.#thumb.addEventListener('mouseup', (e) => { 
+    //   _this.#thumbMouseUp(e); 
+    // }, { passive: true });
+
+    this.#content.addEventListener('scroll', () => { 
+      _this.#scrollContent(); 
+    }, { passive: true });
+  }
+
+  // enable(flag?: boolean) {
+  //   this.#enabled = flag ?? true;
+  // }
+  // get isEnabled() {
+  //   return this.#enabled === true;
+  // }
+
+  scroll({ left, top, behavior = 'auto' }: { left?: number | string, top?: number | string, behavior?: 'auto' | 'instant' | 'smooth' } = {}) {
+    const current = this.getScroll();
+    if (typeof left == 'string') {
+      if (/^[\+\-]=?\d+/.test(left)) {
+        left = current.left + parseInt(left.replace(/=/,''), 10);
+      } else {
+        left = parseInt(left, 10);
+      }
+      if (isNaN(left)) {
+        left = undefined;
+      }
+    }
+    if (typeof top == 'string') {
+      if (/^[\+\-]=?\d+/.test(top)) {
+        top = current.top + parseInt(top.replace(/=/,''), 10);
+      } else {
+        top = parseInt(top, 10);
+      }
+      if (isNaN(top)) {
+        top = undefined;
+      }
+    }
+    left = left ?? current.left;
+    top = top ?? current.top;
+    if (left < 0) {
+      left = 0;
+    }
+    if (top < 0) {
+      top = 0;
+    }
+    this.#content.scroll({ left: left, top: top, behavior });
+  }
+
+  getScroll() {
+    return {
+      left: this.#content.scrollLeft,
+      top: this.#content.scrollTop
+    };
+  }
+
+  resize({ height }: { height?: number }) {
+    if (typeof height == 'number') {
+      this.#container.style.height = `${height}px`;
+      refresh();
+    }
+  }
+
+  refresh() {
+    this.#updateThumbSize();
+  }
+
+  #updateThumbSize() {
+    const scrollHeight = this.#content.scrollHeight - getPaddingY(this.#content);
+    const containerHeight = this.#container.clientHeight - getPaddingY(this.#container);
+    const visibleRatio = containerHeight / scrollHeight;
+    const thumbHeight = visibleRatio * containerHeight;
+    this.#thumb.style.height = `${thumbHeight > 20 ? thumbHeight : 20}px`;
+    this.#track.style.display = visibleRatio < 1 ? 'block' : 'none';
+  }
+
+  #thumbMouseDown(e: MouseEvent) {
+    this.#mouseupHandler = this.#mouseDetach.bind(this); // .push(this.#mouseDetach.bind(this));
+    this.#mousemoveHandler = this.#thumbMouseMove.bind(this); // .push(this.#thumbMouseMove.bind(this));
+    document.addEventListener('mouseup', this.#mouseupHandler, { passive: true }); // this.#mouseupHandler[this.#mouseupHandler.length - 1]);
+    document.addEventListener('dragend', this.#mouseupHandler, { passive: true }); // this.#mouseupHandler[this.#mouseupHandler.length - 1]);
+    document.addEventListener('mousemove', this.#mousemoveHandler, { passive: true }); // this.#mousemoveHandler[this.#mousemoveHandler.length - 1]);
+    this.#isDragging = true;
+    this.#startY = e.clientY;
+    this.#startScrollTop = this.#content.scrollTop;
+    this.#thumb.style.cursor = 'grabbing';
+  }
+
+  #thumbMouseMove(e: MouseEvent) {
+    // console.log(performance.now());
+    if (this.#isDragging) {
+      const deltaY = e.clientY - this.#startY;
+      const scrollRatio =
+        (this.#content.scrollHeight - this.#container.clientHeight) /
+        (this.#container.clientHeight - this.#thumb.clientHeight);
+      this.#content.scrollTop = this.#startScrollTop + deltaY * scrollRatio;
+    } else {
+      this.#mouseDetach();
+    }
+  }
+
+  // #thumbMouseUp(e: MouseEvent) {
+  //   this.#isDragging = false;
+  //   this.#thumb.style.cursor = 'grab';
+  // }
+
+  #mouseDetach() {
+    this.#isDragging = false;
+    this.#thumb.style.cursor = 'grab';
+    document.removeEventListener('mouseup', this.#mouseupHandler);
+    document.removeEventListener('dragend', this.#mouseupHandler);
+    document.removeEventListener('mousemove', this.#mousemoveHandler);
+    // for (const m of this.#mouseupHandler) {
+    //   document.removeEventListener('mouseup', m);
+    //   document.removeEventListener('dragend', m);
+    // }
+    // for (const m of this.#mousemoveHandler) {
+    //   document.removeEventListener('mousemove', m);
+    // }
+    // this.#mouseupHandler = [];
+    // this.#mousemoveHandler = [];
+  }
+
+  #scrollContent() {
+    const scrollHeight = this.#content.scrollHeight - getPaddingY(this.#content);
+    const containerHeight = this.#container.clientHeight - getPaddingY(this.#container);
+    const scrollRatio = this.#content.scrollTop / (scrollHeight - containerHeight);
+    const top = scrollRatio * (this.#track.clientHeight - this.#thumb.clientHeight);
+    this.#thumb.style.top = `${top}px`;
+  }
+
+}
+
+export function resize(scrollContainer: string | HTMLElement | ScrollContainer, { height }: { height?: number }) {
+  if (typeof height == 'number') {
+    const sc = getScrollContainer(scrollContainer);
+    if (sc) {
+      sc.resize({ height })
+    }
+  }
 }
 
-export function refresh(scrollContainer?: IScrollContainer) {
+export function refresh(scrollContainer?: string | HTMLElement | ScrollContainer) {
   if (scrollContainer) {
-    updateThumbSize(scrollContainer);
+    const sc = getScrollContainer(scrollContainer);
+    if (sc) {
+      sc.refresh()
+    }
   } else {
     [...scrollContainers.values()].forEach((scrollContainer) => {
-      updateThumbSize(scrollContainer);
+      scrollContainer.refresh();
     });
   }
 }
 
-export function getScroll(scrollContainer: IScrollContainer): { left: number, top: number } {
-  return {
-    left: scrollContainer.content.scrollLeft,
-    top: scrollContainer.content.scrollTop
-  };
+export function getScroll(scrollContainer: string | HTMLElement | ScrollContainer): { left: number, top: number } | undefined {
+  const sc = getScrollContainer(scrollContainer);
+  if (sc) {
+    return sc.getScroll();
+  } else {
+    return undefined;
+  }
 }
-export function scroll(scrollContainer: IScrollContainer, { left, top, behavior = 'auto' }: { left?: number, top?: number, behavior?: 'auto' | 'instant' | 'smooth' } = {}) {
-  const current = getScroll(scrollContainer);
-  scrollContainer.content.scroll({ left: left ?? current.left, top: top ?? current.top, behavior });
+
+export function scroll(scrollContainer: string | HTMLElement | ScrollContainer, { left, top, behavior = 'auto' }: { left?: number, top?: number, behavior?: 'auto' | 'instant' | 'smooth' } = {}) {
+  const sc = getScrollContainer(scrollContainer);
+  if (sc) {
+    const current = sc.getScroll();
+    sc.scroll({ left: left ?? current.left, top: top ?? current.top, behavior });
+  }
 }
 
-export function getScrollContainer(selector: string | HTMLElement): IScrollContainer | undefined {
+export function getScrollContainer(selector: string | HTMLElement | ScrollContainer): ScrollContainer | undefined {
+  if (selector instanceof ScrollContainer) {
+    return selector;
+  }
   const key = typeof selector == 'string' ? document.querySelector<HTMLElement>(selector) : selector;
   return key ? scrollContainers.get(key) : undefined;
 }
 
-function thumbMouseDown(scrollContainer: IScrollContainer, e: MouseEvent) {
-  scrollContainer.isDragging = true;
-  scrollContainer.startY = e.clientY;
-  scrollContainer.startScrollTop = scrollContainer.content.scrollTop;
-  scrollContainer.thumb.style.cursor = 'grabbing';
-}
-
-function updateThumbSize(scrollContainer: IScrollContainer) {
-  const { container, content, thumb, track } = scrollContainer;
-  const scrollHeight = content.scrollHeight - getPaddingY(content);
-  const containerHeight = container.clientHeight - getPaddingY(container);
-  const visibleRatio = containerHeight / scrollHeight;
-  const thumbHeight = visibleRatio * containerHeight;
-  thumb.style.height = `${thumbHeight > 20 ? thumbHeight : 20}px`;
-  track.style.display = visibleRatio < 1 ? 'block' : 'none';
-}
-
-function scrollContent(scrollContainer: IScrollContainer) {
-  const { container, content, thumb, track } = scrollContainer;
-  const scrollHeight = content.scrollHeight - getPaddingY(content);
-  const containerHeight = container.clientHeight - getPaddingY(container);
-  const scrollRatio = content.scrollTop / (scrollHeight - containerHeight);
-  const top = scrollRatio * (track.clientHeight - thumb.clientHeight);
-  thumb.style.top = `${top}px`;
-}
-
 function getPaddingY(content: HTMLElement): number {
   const style = getComputedStyle(content);
   return parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
 }
 
-function getScrollContainerElement(element: HTMLElement) {
-  let container = element;
-  while (container && !container.classList.contains('scroll-container')) {
-    container = container.parentElement as HTMLElement;
-  }
-  return container;
-}
-
-function createScrollContainer(container: HTMLElement): IScrollContainer {
-  return {
-    container: container,
-    content: container.querySelector('.evo-scroll-content') as HTMLElement,
-    track: container.querySelector('.evo-scroll-track') as HTMLElement,
-    thumb: container.querySelector('.evo-scroll-thumb') as HTMLElement,
-    isDragging: false,
-    startY: 0,
-    startScrollTop: 0
-  };
-}
-
-const scrollContainers = new Map<HTMLElement, IScrollContainer>();
+const scrollContainers = new Map<HTMLElement, ScrollContainer>();
 
 const intersectionObserver = new IntersectionObserver((entries) => {
     entries.forEach((entry) => {
       if (entry.isIntersecting) {
-        updateThumbSize(scrollContainers.get(entry.target as HTMLElement) as IScrollContainer);
+        const sc = getScrollContainer(entry.target as HTMLElement);
+        if (sc) {
+          sc.refresh();
+        }
       }
     });
   },
@@ -99,45 +227,28 @@ const intersectionObserver = new IntersectionObserver((entries) => {
 );
 
 const mutationObserver = new MutationObserver((mutations) => {
-  const containers: IScrollContainer[] = [];
+  const containers = new Set<ScrollContainer>();
   mutations.forEach((mutation) => {
-    const sc = scrollContainers.get(getScrollContainerElement(mutation.target as HTMLElement));
-    if (sc && !containers.includes(sc)) {
-      containers.push(sc);
+    const sc = getScrollContainer(mutation.target as HTMLElement);
+    if (sc) {
+      containers.add(sc);
     }
   });
-  containers.forEach((container) => {
-    updateThumbSize(container);
+  [...containers].forEach((container) => {
+    container.refresh();
   });
 });
 
 document.querySelectorAll<HTMLElement>('.evo-scroll-container').forEach((container) => {
-  const scrollContainer = createScrollContainer(container);
+  const scrollContainer = new ScrollContainer(container);
   scrollContainers.set(container, scrollContainer);
-  scrollContainer.thumb.addEventListener('mousedown', (e) => { thumbMouseDown(scrollContainer, e); }, { passive: true });
-  scrollContainer.content.addEventListener('scroll', (e) => { scrollContent(scrollContainer); }, { passive: true });
+
   intersectionObserver.observe(container);
-  mutationObserver.observe(container, { childList: true, subtree: true });
-});
-document.addEventListener('mousemove', (e) => {
-  [...scrollContainers.values()].forEach((scrollContainer) => {
-    if (!scrollContainer.isDragging) return;
-    const { container, content, thumb } = scrollContainer;
-    const deltaY = e.clientY - scrollContainer.startY;
-    const scrollRatio =
-      (content.scrollHeight - container.clientHeight) /
-      (container.clientHeight - thumb.clientHeight);
-    scrollContainer.content.scrollTop = scrollContainer.startScrollTop + deltaY * scrollRatio;
-  });
-});
-document.addEventListener('mouseup', () => {
-  [...scrollContainers.values()].forEach((scrollContainer) => {
-    scrollContainer.isDragging = false;
-    scrollContainer.thumb.style.cursor = 'grab';
-  });
+  mutationObserver.observe(container, { attributes: true, childList: true, subtree: true });
 });
+
 window.addEventListener('resize', () => {
   [...scrollContainers.values()].forEach((scrollContainer) => {
-    updateThumbSize(scrollContainer);
+    scrollContainer.refresh();
   });
 });

package/src/components/ScrollContainer/archive-20260417.ts

@@ -0,0 +1,150 @@
+
+export interface IScrollContainer {
+  container: HTMLElement;
+  content: HTMLElement;
+  track: HTMLElement;
+  thumb: HTMLElement;
+  isDragging: boolean;
+  startY: number;
+  startScrollTop: number;
+}
+
+export function resize(scrollContainer: IScrollContainer, { height }: { height?: number }) {
+  if (typeof height == 'number') {
+    scrollContainer.container.style.height = `${height}px`;
+    refresh(scrollContainer);
+  }
+}
+
+export function refresh(scrollContainer?: IScrollContainer) {
+  if (scrollContainer) {
+    updateThumbSize(scrollContainer);
+  } else {
+    [...scrollContainers.values()].forEach((scrollContainer) => {
+      updateThumbSize(scrollContainer);
+    });
+  }
+}
+
+export function getScroll(scrollContainer: IScrollContainer): { left: number, top: number } {
+  return {
+    left: scrollContainer.content.scrollLeft,
+    top: scrollContainer.content.scrollTop
+  };
+}
+export function scroll(scrollContainer: IScrollContainer, { left, top, behavior = 'auto' }: { left?: number, top?: number, behavior?: 'auto' | 'instant' | 'smooth' } = {}) {
+  const current = getScroll(scrollContainer);
+  scrollContainer.content.scroll({ left: left ?? current.left, top: top ?? current.top, behavior });
+}
+
+export function getScrollContainer(selector: string | HTMLElement): IScrollContainer | undefined {
+  const key = typeof selector == 'string' ? document.querySelector<HTMLElement>(selector) : selector;
+  return key ? scrollContainers.get(key) : undefined;
+}
+
+function thumbMouseDown(scrollContainer: IScrollContainer, e: MouseEvent) {
+  scrollContainer.isDragging = true;
+  scrollContainer.startY = e.clientY;
+  scrollContainer.startScrollTop = scrollContainer.content.scrollTop;
+  scrollContainer.thumb.style.cursor = 'grabbing';
+}
+
+function updateThumbSize(scrollContainer: IScrollContainer) {
+  const { container, content, thumb, track } = scrollContainer;
+  const scrollHeight = content.scrollHeight - getPaddingY(content);
+  const containerHeight = container.clientHeight - getPaddingY(container);
+  const visibleRatio = containerHeight / scrollHeight;
+  const thumbHeight = visibleRatio * containerHeight;
+  thumb.style.height = `${thumbHeight > 20 ? thumbHeight : 20}px`;
+  track.style.display = visibleRatio < 1 ? 'block' : 'none';
+}
+
+function scrollContent(scrollContainer: IScrollContainer) {
+  const { container, content, thumb, track } = scrollContainer;
+  const scrollHeight = content.scrollHeight - getPaddingY(content);
+  const containerHeight = container.clientHeight - getPaddingY(container);
+  const scrollRatio = content.scrollTop / (scrollHeight - containerHeight);
+  const top = scrollRatio * (track.clientHeight - thumb.clientHeight);
+  thumb.style.top = `${top}px`;
+}
+
+function getPaddingY(content: HTMLElement): number {
+  const style = getComputedStyle(content);
+  return parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
+}
+
+function getScrollContainerElement(element: HTMLElement) {
+  let container = element;
+  while (container && !container.classList.contains('scroll-container')) {
+    container = container.parentElement as HTMLElement;
+  }
+  return container;
+}
+
+function createScrollContainer(container: HTMLElement): IScrollContainer {
+  return {
+    container: container,
+    content: container.querySelector('.evo-scroll-content') as HTMLElement,
+    track: container.querySelector('.evo-scroll-track') as HTMLElement,
+    thumb: container.querySelector('.evo-scroll-thumb') as HTMLElement,
+    isDragging: false,
+    startY: 0,
+    startScrollTop: 0
+  };
+}
+
+const scrollContainers = new Map<HTMLElement, IScrollContainer>();
+
+const intersectionObserver = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        updateThumbSize(scrollContainers.get(entry.target as HTMLElement) as IScrollContainer);
+      }
+    });
+  },
+  { threshold: 0.1 }
+);
+
+const mutationObserver = new MutationObserver((mutations) => {
+  const containers: IScrollContainer[] = [];
+  mutations.forEach((mutation) => {
+    const sc = scrollContainers.get(getScrollContainerElement(mutation.target as HTMLElement));
+    if (sc && !containers.includes(sc)) {
+      containers.push(sc);
+    }
+  });
+  containers.forEach((container) => {
+    updateThumbSize(container);
+  });
+});
+
+document.querySelectorAll<HTMLElement>('.evo-scroll-container').forEach((container) => {
+  const scrollContainer = createScrollContainer(container);
+  scrollContainers.set(container, scrollContainer);
+  scrollContainer.thumb.addEventListener('mousedown', (e) => { thumbMouseDown(scrollContainer, e); }, { passive: true });
+  scrollContainer.content.addEventListener('scroll', (e) => { scrollContent(scrollContainer); }, { passive: true });
+  intersectionObserver.observe(container);
+  mutationObserver.observe(container, { childList: true, subtree: true });
+});
+document.addEventListener('mousemove', (e) => {
+  [...scrollContainers.values()].forEach((scrollContainer) => {
+    if (!scrollContainer.isDragging) return;
+    const { container, content, thumb } = scrollContainer;
+    const deltaY = e.clientY - scrollContainer.startY;
+    const scrollRatio =
+      (content.scrollHeight - container.clientHeight) /
+      (container.clientHeight - thumb.clientHeight);
+    scrollContainer.content.scrollTop = scrollContainer.startScrollTop + deltaY * scrollRatio;
+  });
+});
+document.addEventListener('mouseup', () => {
+  [...scrollContainers.values()].forEach((scrollContainer) => {
+    scrollContainer.isDragging = false;
+    scrollContainer.thumb.style.cursor = 'grab';
+  });
+});
+window.addEventListener('resize', () => {
+  [...scrollContainers.values()].forEach((scrollContainer) => {
+    updateThumbSize(scrollContainer);
+  });
+});

package/src/components/ScrollContainer/index.ts

@@ -0,0 +1,2 @@
+export { default as ScrollContainer } from './ScrollContainer.astro';
+export * from './ScrollContainer';