@inizioevoke/astro-core 1.6.5 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inizioevoke/astro-core",
-  "version": "1.6.5",
+  "version": "1.7.0",
   "description": "",
   "license": "ISC",
   "author": "",
@@ -14,7 +14,7 @@
     "./lib/Modal": "./src/components/Modal/index.ts",
     "./lib/PdfViewer": "./src/components/PdfViewer/index.ts",
     "./lib/ScrollContainer": "./src/components/ScrollContainer/index.ts",
-    "./lib/swipe": "./src/lib/swipe.ts",
+    "./lib/gestures": "./src/lib/gestures/index.ts",
     "./v2": "./src/components/v2.ts",
     "./v2/lib": "./src/lib/v2.ts",
     "./v2/lib/Modal": "./src/components/Modal/v2/index.ts"

package/src/lib/gestures/index.ts

@@ -0,0 +1,2 @@
+export * from './pinch';
+export * from './swipe';

package/src/lib/gestures/pinch.ts

@@ -0,0 +1,66 @@
+export function createPinchListener() {
+  type PinchDirection = 'in' | 'out';
+
+  let initialDist: number = 0;
+  let lastDistance: number = 0;
+  let currentScale: number = 1;
+  let activeScale: number = 1;
+
+  function getTouchDistance(touches: TouchList) {
+    return Math.hypot(touches[0].clientX - touches[1].clientX, touches[0].clientY - touches[1].clientY);
+  }
+  
+  function reset() {
+    window.removeEventListener('touchmove', touchmove);
+    window.removeEventListener('touchend', touchend);
+    currentScale = activeScale;
+    initialDist = 0;
+    lastDistance = 0;
+  }
+
+  const touchstart = (e: TouchEvent) => {
+    if (e.touches.length === 2) {
+      initialDist = getTouchDistance(e.touches);
+      lastDistance = initialDist;
+      window.addEventListener('touchmove', touchmove, { passive: true });
+      window.addEventListener('touchend', touchend, { passive: true });
+    } else {
+      reset();
+    }
+  };
+
+  const touchmove = (e: TouchEvent) => {
+    if (e.touches.length === 2) {
+      const currentDistance = getTouchDistance(e.touches);
+      const ratio = currentDistance / initialDist;
+
+      const rawScale = currentScale * ratio;
+
+      // Detect if we're crossing 1 from either direction
+      const crossingOne =
+        (currentScale > 1 && rawScale < 1) ||
+        (currentScale < 1 && rawScale > 1);
+
+      activeScale = crossingOne ? 1 : rawScale; // snap to 1
+
+      let direction: PinchDirection | undefined = undefined;
+      if (currentDistance > lastDistance) {
+        direction = 'in';
+      } else if (currentDistance < lastDistance) {
+        direction = 'out';
+      }
+
+      if (direction !== undefined) {
+        console.log(activeScale, direction);
+        lastDistance = currentDistance;
+      }
+    }
+  };
+
+  const touchend = (e: TouchEvent) => {
+    if (e.touches.length < 2) {
+      reset();
+    }
+  };
+  window.addEventListener('touchstart', touchstart, { passive: true });
+}

package/src/lib/gestures/swipe.ts

@@ -0,0 +1,153 @@
+export type SwipeDirection = 'left' | 'right' | 'left-right' | 'up' | 'down' | '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 function createSwipeListener(direction: SwipeDirection, threshold: SwipeThreshold, handler: OnSwipeHandler): SwipeController {
+  const swipeThreshold: number = typeof threshold == 'number' ? threshold : (() => {
+    const ratios: Record<string, number> = { '1/4': 0.25, '1/3': 0.333, '1/2': 0.5 };
+    switch (direction) {
+      case 'up':
+      case 'down':
+      case 'up-down':
+        return Math.round(window.innerHeight * (ratios[threshold] ?? ratios['1/3'])); // screen.height
+      default:
+        return Math.round(window.innerWidth * (ratios[threshold] ?? ratios['1/3'])); // screen.width
+    }
+  })();
+
+  let listening = false;
+  let x: number = NaN;
+  let y: number = NaN;
+  let start: number = NaN;
+
+  const isUp = (deltaX: number, deltaY: number) => {
+    return Math.abs(deltaY) >= swipeThreshold && Math.abs(deltaX) < swipeThreshold && deltaY > 0;
+  }
+  const isDown = (deltaX: number, deltaY: number) => {
+    return Math.abs(deltaY) >= swipeThreshold && Math.abs(deltaX) < swipeThreshold && deltaY < 0;
+  }
+  const isLeft = (deltaX: number, deltaY: number) => {
+    return Math.abs(deltaX) >= swipeThreshold && Math.abs(deltaY) < swipeThreshold && deltaX > 0;
+  }
+  const isRight = (deltaX: number, deltaY: number) => {
+    return Math.abs(deltaX) >= swipeThreshold && Math.abs(deltaY) < swipeThreshold && deltaX < 0;
+  }
+
+  const handleSwipe = (deltaX: number, deltaY: number, duration: number) => {
+    let swipeDirection: SwipeDirection | undefined = undefined;
+    switch (direction) {
+      case 'up':
+        if (isUp(deltaX, deltaY)) {
+          swipeDirection = 'up';
+        }
+        break;
+      case 'down':
+        if (isDown(deltaX, deltaY)) {
+          swipeDirection = 'down';
+        }
+        break;
+      case 'up-down':
+        if (isUp(deltaX, deltaY)) {
+          swipeDirection = 'up';
+        } else if (isDown(deltaX, deltaY)) {
+          swipeDirection = 'down';
+        }
+        break;
+      case 'left':
+        if (isLeft(deltaX, deltaY)) {
+          swipeDirection = 'left';
+        }
+        break;
+      case 'right':
+        if (isRight(deltaX, deltaY)) {
+          swipeDirection = 'right';
+        }
+        break;
+      case 'left-right':
+        if (isLeft(deltaX, deltaY)) {
+          swipeDirection = 'left';
+        } else if (isRight(deltaX, deltaY)) {
+          swipeDirection = 'right';
+        }
+        break;
+    }
+    if (swipeDirection) {
+      try {
+        handler({ direction: swipeDirection, threshold: swipeThreshold, 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 touchcancel = () => {
+    x = NaN;
+    y = NaN;
+    start = 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 });
+      window.addEventListener('touchcancel', touchcancel, { passive: true });
+    }
+  };
+
+  const disable = () => {
+    listening = false;
+    window.removeEventListener('touchstart', touchstart);
+    window.removeEventListener('touchend', touchend);
+    window.removeEventListener('touchcancel', touchcancel);
+  };
+
+  enable();
+
+  return {
+    enable,
+    disable,
+    dispose: disable
+  };
+}

package/src/lib/swipe.ts

@@ -1,109 +0,0 @@
-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
-  };
-}