@inizioevoke/astro-core 1.5.2 → 1.6.1

package/src/components/ScrollContainer/ScrollContainer.css

@@ -9,6 +9,7 @@
     --evo-scroll-container-thumb-color: #666666;
     --evo-scroll-container-thumb-border-width: 0px;
     --evo-scroll-container-thumb-border-color: var(--evo-scroll-container-track-color);
+    --evo-scroll-container-content-padding-right: calc(1rem + var(--evo-scroll-container-track-width));
   }
 
   evo-scroll-container,
@@ -27,7 +28,7 @@
     .evo-scroll-content {
       height: 100%;
       overflow-y: scroll;
-      padding-right: calc(1rem + var(--evo-scroll-container-track-width));
+      padding-right: var(--evo-scroll-container-content-padding-right);
       -ms-overflow-style: none;
       scrollbar-width: none;
       &::-webkit-scrollbar {

package/src/components/ScrollContainer/ScrollContainer.ts

@@ -30,7 +30,6 @@ export class EvoScrollContainerElement extends HTMLElement {
     return 'evo-scroll-container';
   }
 
-  // #container: HTMLElement & { evoScrollContainer: ScrollContainer };
   #content!: HTMLElement;
   #track!: HTMLElement;
   #thumb!: HTMLElement;
@@ -41,15 +40,14 @@ export class EvoScrollContainerElement extends HTMLElement {
   #scrollbarSettings: ScrollbarSettings = {};
   #mouseupHandler: any = undefined;
   #mousemoveHandler: any = undefined;
+  #boundResizeHandler: () => void;
 
   constructor() {
     super();
+    this.#boundResizeHandler = this.refresh.bind(this);
   }
 
   connectedCallback() {
-    // const _this = this;
-    // this.#container = container as HTMLElement & { evoScrollContainer: ScrollContainer };
-    // this.#container.evoScrollContainer = this;
     this.#content = this.querySelector('.evo-scroll-content') as HTMLElement;
     this.#track = this.querySelector('.evo-scroll-track') as HTMLElement;
     this.#thumb = this.querySelector('.evo-scroll-thumb') as HTMLElement;
@@ -63,41 +61,13 @@ export class EvoScrollContainerElement extends HTMLElement {
     intersectionObserver.observe(this);
     mutationObserver.observe(this, { attributes: true, childList: true, subtree: true });
 
-    window.addEventListener('resize', this.refresh.bind(this), { passive: true });
+    window.addEventListener('resize', this.#boundResizeHandler, { passive: 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 });
-  // }
+  disconnectedCallback() {
+    intersectionObserver.unobserve(this);
+    window.removeEventListener('resize', this.#boundResizeHandler);
+  }
 
   scroll(opts?: ScrollToOptions): void;
   scroll(x: number, y: number): void;
@@ -115,17 +85,6 @@ export class EvoScrollContainerElement extends HTMLElement {
   scrollBy(x: number, y: number): void;
   scrollBy(...args: any[]) {
     this.#content.scrollBy(...args);
-    // let opts: ScrollToOptions = {};
-    // if (args.length === 1) {
-    //   opts = args[0] as ScrollToOptions;
-    // } else if (args.length == 2) {
-    //   opts.left = args[0];
-    //   opts.top = args[1];
-    // }
-    // const current = this.getScroll();
-    // opts.left = current.left + (opts.left ?? 0);
-    // opts.top = current.top + (opts.top ?? 0);
-    // this.scroll(opts);
   }
 
   get scrollLeft() {
@@ -147,8 +106,6 @@ export class EvoScrollContainerElement extends HTMLElement {
     return this.#content.scrollHeight;
   }
   
-  
-
   getScroll() {
     return {
       left: this.#content.scrollLeft,
@@ -159,7 +116,7 @@ export class EvoScrollContainerElement extends HTMLElement {
   resize({ height }: { height?: number }) {
     if (typeof height == 'number') {
       this.style.height = `${height}px`;
-      refresh();
+      this.refresh();
     }
   }
 
@@ -177,6 +134,13 @@ export class EvoScrollContainerElement extends HTMLElement {
   #updateThumbSize() {
     const scrollHeight = this.#content.scrollHeight - getPaddingY(this.#content);
     const containerHeight = this.clientHeight - getPaddingY(this);
+    
+    if (scrollHeight <= 0) {
+      this.#thumb.style.height = '20px';
+      // this.#track.style.display = 'none';
+      return;
+    }
+    
     const visibleRatio = containerHeight / scrollHeight;
     const thumbHeight = visibleRatio * containerHeight;
     if (this.#scrollbarSettings.thumbHeight != undefined) {
@@ -205,12 +169,17 @@ export class EvoScrollContainerElement extends HTMLElement {
   }
 
   #thumbMouseMove(e: MouseEvent) {
-    // console.log(performance.now());
     if (this.#isDragging) {
       const deltaY = e.clientY - this.#startY;
+      const thumbTrackHeight = this.clientHeight - this.#thumb.clientHeight;
+      
+      if (thumbTrackHeight <= 0) {
+        return;
+      }
+      
       const scrollRatio =
-        (this.#content.scrollHeight - this.clientHeight) /
-        (this.clientHeight - this.#thumb.clientHeight);
+        (this.#content.scrollHeight - this.clientHeight) / thumbTrackHeight;
+      
       this.#content.scrollTop = this.#startScrollTop + deltaY * scrollRatio;
     } else {
       this.#mouseDetach();
@@ -228,9 +197,15 @@ export class EvoScrollContainerElement extends HTMLElement {
   #scrollContent() {
     const scrollHeight = this.#content.scrollHeight - getPaddingY(this.#content);
     const containerHeight = this.clientHeight - getPaddingY(this);
-    const scrollRatio = this.#content.scrollTop / (scrollHeight - containerHeight);
-    const top = scrollRatio * (this.#track.clientHeight - this.#thumb.clientHeight);
-    this.#thumb.style.top = `${top}px`;
+    const scrollableHeight = scrollHeight - containerHeight;
+
+    if (scrollableHeight <= 0) {
+      this.#thumb.style.top = '0px';
+    } else {
+      const scrollRatio = this.#content.scrollTop / scrollableHeight;
+      const top = scrollRatio * (this.#track.clientHeight - this.#thumb.clientHeight);
+      this.#thumb.style.top = `${top}px`;
+    }
   }
 }
 if (!customElements.get(EvoScrollContainerElement.htmlTagName)) {
@@ -284,25 +259,8 @@ export function getScrollContainer(selector: string | HTMLElement): IScrollConta
   }
   const scrollContainer = typeof selector == 'string' ? document.querySelector<HTMLElement>(selector) : selector;
   return scrollContainer instanceof EvoScrollContainerElement ? scrollContainer as IScrollContainer : undefined;
-  // const key = typeof selector == 'string' ? document.querySelector<HTMLElement>(selector) : selector;
-  // return key ? scrollContainers.get(key) : undefined;
 }
 
-// export function createScrollContainer(selector: string | HTMLElement): IScrollContainer | undefined {
-//   const container = typeof selector == 'string' ? document.querySelector<HTMLElement>(selector) : selector;
-//   if (container) {
-//     if (scrollContainers.has(container)) {
-//       return scrollContainers.get(container);
-//     } else {
-//       const scrollContainer = new ScrollContainer(container);
-//       initNewScrollContainer(container, scrollContainer);
-//       return scrollContainer;
-//     }
-//   } else {
-//     return undefined;
-//   }
-// }
-
 interface ScrollbarSettings {
   trackVisible?: boolean;
   thumbHeight?: number;
@@ -312,26 +270,3 @@ function getPaddingY(content: HTMLElement): number {
   const style = getComputedStyle(content);
   return parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
 }
-
-// const scrollContainers = new Map<HTMLElement, ScrollContainer>();
-
-
-
-// function initNewScrollContainer(container: HTMLElement, scrollContainer: ScrollContainer) {
-//   scrollContainers.set(container, scrollContainer);
-
-//   intersectionObserver.observe(container);
-//   mutationObserver.observe(container, { attributes: true, childList: true, subtree: true });
-// }
-
-// document.querySelectorAll<HTMLElement>('.evo-scroll-container').forEach((container) => {
-//   const scrollContainer = new ScrollContainer(container);
-//   initNewScrollContainer(container, scrollContainer);
-// });
-
-// window.addEventListener('resize', () => {
-//   // [...scrollContainers.values()].forEach((scrollContainer) => {
-//   [...document.querySelectorAll<ScrollContainer>('scroll-container')].forEach((scrollContainer) => {
-//     scrollContainer.refresh();
-//   });
-// }, { passive: true });

package/src/components/v2.ts

@@ -0,0 +1,3 @@
+export { default as Modal } from './Modal/v2/Modal.astro';
+export { default as ModalOverlay } from './Modal/v2/ModalOverlay.astro';
+export { default as ModalTrigger } from './Modal/v2/ModalTrigger.astro';

package/src/lib/swipe.ts

@@ -0,0 +1,109 @@
+export type SwipeDirection = 'left' | 'right' | 'up' | 'down';
+export type SwipeThreshold = '1/4' | '1/3' | '1/2' | number;
+
+export interface OnSwipeHandlerArgs {
+  direction: SwipeDirection;
+  threshold: number;
+  distance: {
+    x: number;
+    y: number;
+  },
+  duration: number;
+}
+export type OnSwipeHandler = (args: OnSwipeHandlerArgs) => void;
+
+export interface SwipeController {
+  enable: () => void;
+  disable: () => void;
+  dispose: () => void;
+}
+
+export default function onSwipe(direction: SwipeDirection, swipeThreshold: SwipeThreshold, handler: OnSwipeHandler): SwipeController {
+  const threshold: number = typeof swipeThreshold == 'number' ? swipeThreshold : (() => {
+    const ratios: Record<string, number> = { '1/4': 0.25, '1/3': 0.333, '1/2': 0.5 };
+    switch (direction) {
+      case 'up':
+      case 'down':
+        return Math.round(screen.height * (ratios[swipeThreshold] ?? ratios['1/3']));
+      default:
+        return Math.round(screen.width * (ratios[swipeThreshold] ?? ratios['1/3']));
+    }
+  })();
+
+  let listening = false;
+  let x: number = NaN;
+  let y: number = NaN;
+  let start: number = NaN;
+
+  const handleSwipe = (deltaX: number, deltaY: number, duration: number) => {
+    let flag = false;
+    switch (direction) {
+      case 'up':
+        flag = Math.abs(deltaY) >= threshold && Math.abs(deltaX) < threshold && deltaY > 0;
+        break;
+      case 'down':
+        flag = Math.abs(deltaY) >= threshold && Math.abs(deltaX) < threshold && deltaY < 0;
+        break;
+      case 'left':
+        flag = Math.abs(deltaX) >= threshold && Math.abs(deltaY) < threshold && deltaX > 0;
+        break;
+      case 'right':
+        flag = Math.abs(deltaX) >= threshold && Math.abs(deltaY) < threshold && deltaX < 0;
+        break;
+    }
+    if (flag) {
+      try {
+        handler({ direction, threshold, distance: { x: deltaX, y: deltaY }, duration});
+      } catch (err) {
+        console.error(err);
+      }
+    }
+  }
+
+  const touchstart = (e: TouchEvent) => {
+    if (!listening) return;
+    if (e.touches.length === 1 && isNaN(x)) {
+      start = performance.now();
+      x = e.touches[0].clientX;
+      y = e.touches[0].clientY;
+    } else {
+      start = NaN;
+      x = NaN;
+      y = NaN;
+    }
+  };
+
+  const touchend = (e: TouchEvent) => {
+    if (!listening) return;
+    if (e.changedTouches.length === 1 && !isNaN(x) && !isNaN(y)) {
+      const deltaX = x - e.changedTouches[0].clientX;
+      const deltaY = y - e.changedTouches[0].clientY;
+      handleSwipe(deltaX, deltaY, performance.now() - start);
+      x = NaN;
+      y = NaN;
+      start = NaN;
+    }
+  };
+
+  const enable = () => {
+    if (!listening) {
+      listening = true;
+      window.addEventListener('touchstart', touchstart, { passive: true });
+      window.addEventListener('touchend', touchend, { passive: true });
+    }
+  };
+
+  const disable = () => {
+    listening = false;
+    window.removeEventListener('touchstart', touchstart);
+    window.removeEventListener('touchend', touchend);
+  };
+
+  enable();
+
+  return {
+    enable,
+    disable,
+    dispose: disable
+  };
+}

package/src/lib/v2.ts

@@ -0,0 +1 @@
+export * as Modal from '../components/Modal/v2/Modal';