@inizioevoke/astro-core 1.6.4 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inizioevoke/astro-core",
-  "version": "1.6.4",
+  "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/components/PdfViewer/PdfViewer.astro

@@ -11,11 +11,16 @@ interface Props {
   zoom?: 50 | 60 | 70 | 80 | 90 | 100 | 110 | 120 | 130 | 140 | 150;
   page?: number;
   pages?: string;
-  bookmarks?: Record<string, number>;
-  bookmarkText?: string;
+  // bookmarks?: Record<string, number>;
+  // bookmarkText?: string;
   toolbar?: {
+    nav?: boolean;
     page?: boolean;
     zoom?: boolean;
+    bookmarks?: {
+      placeholder?: string;
+      items: Record<string, number>;
+    }
   }
 }
 const { 
@@ -26,8 +31,6 @@ const {
   pdf,
   zoom,
   page = 1,
-  bookmarks,
-  bookmarkText = 'Jump to',
   toolbar,
   ...rest 
 } = Astro.props;
@@ -50,7 +53,7 @@ if (height) {
       <slot name="toolbar-start" />
     </div>
     <div class="evo-pdf-viewer-toolbar-controls">
-      <div class="evo-pdf-viewer-toolbar-arrows">
+      <div class:list={["evo-pdf-viewer-toolbar-arrows", toolbar?.nav === false ? 'evo-hidden' : null]}>
         <button class="evo-pdf-viewer-toolbar-prev" title="Previous">
           <slot name="toolbar-prev">
             <svg class="evo-pdf-viewer-toolbar-icon" width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -69,8 +72,7 @@ if (height) {
       <div class:list={['evo-pdf-viewer-nav-page', toolbar?.page === false ? 'evo-hidden' : null]}>
         <select><option value="1">1</option></select> of <span class="evo-pdf-viewer-nav-page-count">1</span>
       </div>
-      {toolbar?.zoom !== false &&
-      <div class="evo-pdf-viewer-toolbar-zoom">
+      <div class:list={['evo-pdf-viewer-toolbar-zoom', toolbar?.zoom === false ? 'evo-hidden' : null]}>
         <button class="evo-pdf-viewer-toolbar-zoom-out" title="Zoom out">
           <slot name="toolbar-zoom-out">
             <svg class="evo-pdf-viewer-toolbar-icon" width="16px" height="16px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -91,12 +93,12 @@ if (height) {
             </svg>
           </slot>
         </button>
-      </div>}
-      {bookmarks && Object.keys(bookmarks).length > 0 && 
+      </div>
+      {toolbar?.bookmarks && Object.keys(toolbar.bookmarks.items).length > 0 && 
       <div class="evo-pdf-viewer-toolbar-bookmarks">
         <select>
-          <option value="" disabled selected hidden>{bookmarkText}</option>
-          {Object.entries(bookmarks).map((b) => (
+          <option value="" disabled selected hidden>{toolbar.bookmarks.placeholder ?? 'Jump To'}</option>
+          {Object.entries(toolbar.bookmarks.items).map((b) => (
             <option value={b[1]}>{b[0]}</option>
           ))}
         </select>

package/src/components/PdfViewer/PdfViewer.css

@@ -14,6 +14,9 @@
   }
 
   .evo-pdf-viewer-toolbar {
+    --evo-pdf-viewer-toolbar-font-color: #333333;
+    --evo-pdf-viewer-toolbar-separator-color: #cccccc;
+    --evo-pdf-viewer-toolbar-hover: #dddddd;
     display: flex;
     justify-content: var(--evo-pdf-viewer-toolbar-align);
     align-items: center;
@@ -48,13 +51,18 @@
       background-color: transparent;
       /* border: 1px solid #888888;
       border-radius: 6px; */
-      &:hover {
-        background-color: rgba(0,0,0,0.1);
+      &:active {
+        background-color: var(--evo-pdf-viewer-toolbar-hover);
+      }
+      @media (hover: hover) {
+        &:hover {
+          background-color: var(--evo-pdf-viewer-toolbar-hover);
+        }
       }
 
       .evo-pdf-viewer-toolbar-icon {
         path {
-          stroke: #000000;
+          stroke: var(--evo-pdf-viewer-toolbar-font-color);
         }
       }
     }
@@ -64,7 +72,7 @@
       height: 24px;
       padding: 0;
       cursor: pointer;
-      color: #000000;
+      color: var(--evo-pdf-viewer-toolbar-font-color);
       font-family: sans-serif;
       font-size: 16px;
       line-height: 24px;
@@ -79,7 +87,8 @@
       height: 30px;
       margin: 0;
       padding: 0 0 0 8px;
-      border-left: 1px solid black;
+      border-left: 1px solid var(--evo-pdf-viewer-toolbar-separator-color);
+      color: var(--evo-pdf-viewer-toolbar-font-color);
       font-family: sans-serif;
       font-size: 16px;
       line-height: 30px;
@@ -133,6 +142,7 @@
     .evo-scroll-container {
       --evo-scroll-container-track-color: #cccccc;
       .evo-scroll-content {
+        overflow-x: hidden;
         .evo-pdf-viewer-page-wrapper {
           display: block;
           margin: 18px auto;
@@ -167,7 +177,7 @@
     }
   }
 
-  &.evo-pdf-viewer-theme-modern {
+  /* &.evo-pdf-viewer-theme-modern {
     .evo-pdf-viewer-toolbar {
       button {
         background-color: transparent;
@@ -178,30 +188,17 @@
         }
       }
     }
-  }
+  } */
   &.evo-pdf-viewer-theme-dark {
     background-color: #555555;
     .evo-pdf-viewer-toolbar {
-      button {
-        &:hover {
-          background-color: #333333;
-        }
-        .evo-pdf-viewer-toolbar-icon {
-          path {
-            stroke: #ffffff;
-          }
-        }
-      }
+      --evo-pdf-viewer-toolbar-font-color: white;
+      --evo-pdf-viewer-toolbar-separator-color: #888888;
+      --evo-pdf-viewer-toolbar-hover: #333333;
       select {
-        color: white;
         border: 1px solid rgba(255,255,255,0.25);
         background-color: #333333;
       }
-      .evo-pdf-viewer-nav-page,
-      .evo-pdf-viewer-toolbar-bookmarks {
-        color: #ffffff;
-        border-color: #cccccc;
-      }
     }
     .evo-pdf-viewer-container {
       .evo-scroll-container {
@@ -213,26 +210,13 @@
   &.evo-pdf-viewer-theme-black {
     background-color: #000000;
     .evo-pdf-viewer-toolbar {
-      button {
-        &:hover {
-          background-color: #333333;
-        }
-        .evo-pdf-viewer-toolbar-icon {
-          path {
-            stroke: #ffffff;
-          }
-        }
-      }
+      --evo-pdf-viewer-toolbar-font-color: white;
+      --evo-pdf-viewer-toolbar-separator-color: #666666;
+      --evo-pdf-viewer-toolbar-hover: #666666;
       select {
-        color: white;
         border: 1px solid rgba(255,255,255,0.15);
         background-color: #333333;
       }
-      .evo-pdf-viewer-nav-page,
-      .evo-pdf-viewer-toolbar-bookmarks {
-        color: #ffffff;
-        border-color: #cccccc;
-      }
     }
     .evo-pdf-viewer-container {
       .evo-scroll-container {

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
-  };
-}