@inizioevoke/astro-core 1.0.0

package/src/components/PdfViewer/PdfViewer.ts

@@ -0,0 +1,183 @@
+import * as pdfjs from './pdf.mjs';
+import type { PDFDocumentProxy } from 'pdfjs-dist';
+import * as ScrollContainer from '../ScrollContainer/ScrollContainer';
+
+pdfjs.GlobalWorkerOptions.workerSrc = './pdf.worker.min.mjs';
+
+interface PdfViewerSettings {
+  workerDir?: string;
+  workerSrc?: string;
+}
+export function init(settings: PdfViewerSettings = {}) {
+  if (!settings.workerDir) {
+    settings.workerDir = './';
+  }
+  if (!settings.workerSrc) {
+    settings.workerSrc = `${settings.workerDir}${settings.workerDir.endsWith('/') ? '' : '/'}pdf.worker.min.mjs`
+  }
+  pdfjs.GlobalWorkerOptions.workerSrc = settings.workerSrc;
+}
+
+export async function createViewer(selector: string) {
+  const pdfViewer = document.querySelector<HTMLElement>(selector);
+  if (pdfViewer) {
+    const ddlPage = pdfViewer.querySelector('select') as HTMLSelectElement;
+    const toolbar = pdfViewer.querySelector('.evo-pdf-viewer-toolbar') as HTMLElement;
+    const toolbarHeight = parseFloat(getComputedStyle(toolbar).height);
+    const pageSelect = toolbar.querySelector('.evo-pdf-viewer-nav-page select') as HTMLSelectElement;
+    const scrollContainer = ScrollContainer.getScrollContainer(pdfViewer.querySelector('.evo-scroll-container') as HTMLElement) as ScrollContainer.IScrollContainer;
+
+    const zoom = (z: number) => {
+      const style = getComputedStyle(pdfViewer);
+      const current = Math.floor(parseFloat(style.getPropertyValue('--evo-pdf-viewer-scale')) * 10);
+      const scale = z === 0 ? 10 : current + z;
+      if (scale >= 1) {
+        const scroll = ScrollContainer.getScroll(scrollContainer);
+        pdfViewer.style.setProperty('--evo-pdf-viewer-scale', (scale/10).toString());
+        ScrollContainer.scroll(scrollContainer, { left: scroll.left * scale / current, top: scroll.top * scale / current });
+        ScrollContainer.refresh(scrollContainer);
+      }
+    };
+
+    const gotoPage = (page: number | string) => {
+      if (typeof page == 'string') {
+        page = parseInt(page, 10);
+      }
+      requestAnimationFrame(() => {
+        const container = pdfViewer.querySelector('.evo-scroll-content') as HTMLElement;
+        const canvas = container.querySelector<HTMLElement>(`canvas[data-page="${page}"]`);
+        if (canvas) { 
+          container.scroll({ top: canvas.getBoundingClientRect().top + container.scrollTop - toolbarHeight }); // , behavior: 'smooth' });
+          pageSelect.selectedIndex = page - 1;
+        }
+      })
+    };
+    
+    pageSelect.addEventListener('change', (e) => {
+      const page = pageSelect.options[pageSelect.selectedIndex].value;
+      gotoPage(page);
+    }, { passive: true });
+
+    pdfViewer.querySelector<HTMLButtonElement>('button.evo-pdf-viewer-toolbar-zoom-out')?.addEventListener('click', () => {
+      zoom(-1);
+    }, { passive: true });
+    
+    pdfViewer.querySelector<HTMLButtonElement>('button.evo-pdf-viewer-toolbar-zoom-in')?.addEventListener('click', () => {
+      zoom(1);
+    }, { passive: true });
+    
+    pdfViewer.querySelector<HTMLButtonElement>('button.evo-pdf-viewer-toolbar-zoom-reset')?.addEventListener('click', () => {
+      zoom(0);
+    }, { passive: true });
+
+    const pdf: PDFDocumentProxy = await pdfjs.getDocument(pdfViewer.getAttribute('data-pdf') as string).promise;
+
+    const bookmarks: Record<string, number> = JSON.parse(atob(pdfViewer.getAttribute('data-bookmarks') as string));
+    if (Object.keys(bookmarks).length > 0) {
+      const toolbarBookmarks = toolbar.querySelector('.evo-pdf-viewer-toolbar-bookmarks') as HTMLElement;
+      const bookmarksSelect = toolbarBookmarks.querySelector('select') as HTMLSelectElement;
+      Object.entries(bookmarks).forEach(([ key, value ]) => {
+        const option = document.createElement('option') as HTMLOptionElement;
+        option.value = value.toString();
+        option.innerText = key;
+        bookmarksSelect.options.add(option);
+      });
+      bookmarksSelect.addEventListener('change', () => {
+        gotoPage(bookmarksSelect.options[bookmarksSelect.selectedIndex].value);
+        bookmarksSelect.selectedIndex = 0;
+      });
+      toolbarBookmarks.classList.remove('hidden');
+    }
+
+    const outputScale = window.devicePixelRatio || 1;
+    const pages = new Array(pdf.numPages).fill(1).map((v, i) => { return i + 1; });
+    
+
+    pdfViewer.querySelector<HTMLButtonElement>('button.evo-pdf-viewer-toolbar-prev')?.addEventListener('click', () => {
+      const page = parseInt(pageSelect.options[pageSelect.selectedIndex].value, 10) - 1;
+      if (page > 0) {
+        gotoPage(page);
+      }
+    }, { passive: true });
+
+    pdfViewer.querySelector<HTMLButtonElement>('button.evo-pdf-viewer-toolbar-next')?.addEventListener('click', () => {
+      const page = parseInt(pageSelect.options[pageSelect.selectedIndex].value, 10) + 1;
+      if (page <= pages.length) {
+        gotoPage(page);
+      }
+    }, { passive: true });
+
+
+    const pdfContainer = pdfViewer.querySelector('.evo-scroll-content') as HTMLElement;
+    pdfViewer.querySelector<HTMLElement>('.evo-pdf-viewer-nav-page-count')!.innerText = pages.length.toString();
+    for (const pageNum of pages) {
+      const option = document.createElement('option');
+      option.value = pageNum.toString();
+      option.innerText = `${pageNum}`;
+      ddlPage.options.add(option);
+
+      const pdfPage = await pdf.getPage(pageNum);
+      const pdfPageWidth = pdfPage.getViewport({ scale: 1}).width;
+      const containerStyle = getComputedStyle(pdfContainer);
+      const trackWidth = parseInt(containerStyle.getPropertyValue('--evo-scroll-container-track-width'));
+      const viewport = pdfPage.getViewport({ scale: parseFloat(containerStyle.width) / pdfPageWidth });
+
+      const canvas = document.createElement('canvas');
+      canvas.setAttribute('data-page', pageNum.toString());
+      const width = Math.floor(viewport.width * outputScale);
+      const height = Math.floor(viewport.height * outputScale);
+      canvas.width = width;
+      canvas.height = height;
+      canvas.style.aspectRatio = `${width}/${height}`;
+      canvas.style.width = `calc(${Math.floor(viewport.width) - (trackWidth * 2)}px * var(--evo-pdf-viewer-scale)`;
+      // canvas.style.height = `${Math.floor(viewport.height)}px`;
+      pdfContainer.append(canvas);
+
+      pdfPage.render({
+        canvas,
+        // canvasContext: canvas.getContext('2d') as CanvasRenderingContext2D,
+        transform: outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : undefined,
+        viewport
+      });
+      ScrollContainer.refresh(scrollContainer);
+    }
+
+    // Function to check and update current page
+    const updateCurrentPage = () => {
+      const canvases = pdfContainer.querySelectorAll<HTMLCanvasElement>('canvas');
+      let visiblePage: HTMLCanvasElement | undefined;
+      let maxVisibility = 0;
+
+      canvases.forEach((canvas) => {
+        const rect = canvas.getBoundingClientRect();
+        const containerRect = scrollContainer.container.getBoundingClientRect();
+        
+        // Calculate intersection height
+        const intersectTop = Math.max(rect.top, containerRect.top);
+        const intersectBottom = Math.min(rect.bottom, containerRect.bottom);
+        const intersectionHeight = Math.max(0, intersectBottom - intersectTop);
+        
+        // Calculate visibility ratio
+        const visibility = intersectionHeight / (rect.height || 1);
+        
+        if (visibility > maxVisibility) {
+          maxVisibility = visibility;
+          visiblePage = canvas;
+        }
+      });
+
+      if (visiblePage && maxVisibility >= 0.1) {
+        const pageNum = visiblePage.getAttribute('data-page');
+        if (pageNum) {
+          pageSelect.selectedIndex = parseInt(pageNum, 10) - 1;
+        }
+      }
+    };
+
+    // Update on scroll
+    scrollContainer.content.addEventListener('scroll', updateCurrentPage, { passive: true });
+    
+    // Initial update
+    updateCurrentPage();
+  }
+}