Update reader.html

reader.html

@@ -69,22 +69,20 @@
       background-color: #0056b3;
     }
 
-    
     #page-input {
-    position: absolute;
-    top: 20px;
-    font-size: 24px;
-    padding: 10px 20px;
-    border: none;
-    border-radius: 10px;
-    text-align: center;
-    z-index: 1;
-    width: 200px;
-    @media (orientation: portrait) {
-    transform: translate(30px, 0px);
+      position: absolute;
+      top: 20px;
+      font-size: 24px;
+      padding: 10px 20px;
+      border: none;
+      border-radius: 10px;
+      text-align: center;
+      z-index: 1;
+      width: 190px;
+      @media (orientation: portrait) {
+  transform: translate(30px, 0px);
 }
     }
-    
 
     #page-input:focus {
       outline: none;
@@ -119,7 +117,7 @@
   <div id="reader-container">
     <div id="page-number"></div>
     <input id="page-input" type="number" placeholder="Introdu pagina" oninput="handlePageInput(this.value)">
-    <img id="page-image" src="pages/1.jpg" alt="Pagina 1" loading="eager" style="display: none;">
+    <img id="page-image" src="pages/1.jpg" alt="Pagina 1" style="display: none;">
     <div id="loading-message">Imaginea se încarcă, vă rog așteptați</div>
   </div>
 
@@ -137,18 +135,6 @@
     const pageNumberElement = document.getElementById('page-number');
     const loadingMessage = document.getElementById('loading-message');
 
-    const preloadImages = [];
-
-    const preload = (pages) => {
-      pages.forEach(page => {
-        if (page >= 1 && page <= TOTAL_PAGES) {
-          const img = new Image();
-          img.src = `pages/${page}.jpg`;
-          preloadImages.push(img);
-        }
-      });
-    };
-
     const updatePage = () => {
       imageElement.src = `pages/${currentPage}.jpg`;
       imageElement.alt = `Pagina ${currentPage}`;
@@ -158,13 +144,6 @@
       pageNumberElement.textContent = `${pageNumber - 1}-${pageNumber}`;
       imageElement.style.display = 'none';
       loadingMessage.style.display = 'block';
-
-      const pagesToPreload = [
-        currentPage - 1, currentPage, currentPage + 1,
-        currentPage + 2, currentPage + 3,
-        currentPage - 2, currentPage - 3
-      ];
-      preload(pagesToPreload.filter(page => page >= 1 && page <= TOTAL_PAGES));
     };
 
     imageElement.onload = () => {
@@ -186,14 +165,97 @@
       }
     });
 
-    document.addEventListener('keydown', (e) => {
-      if (e.key === 'ArrowLeft') {
-        prevButton.click();
-      } else if (e.key === 'ArrowRight') {
-        nextButton.click();
+    let scale = 1;
+    const zoomStep = 0.1;
+    const maxScale = 3;
+    const minScale = 1;
+    let translateX = 0;
+    let translateY = 0;
+
+    const zoom = (delta) => {
+      scale = Math.min(maxScale, Math.max(minScale, scale + delta));
+      applyTransform();
+    };
+
+    const applyTransform = () => {
+      imageElement.style.transform = `scale(${scale}) translate(${translateX}px, ${translateY}px)`;
+    };
+
+    imageElement.addEventListener('wheel', (e) => {
+      e.preventDefault();
+      zoom(e.deltaY < 0 ? zoomStep : -zoomStep);
+    });
+
+    let startX = 0;
+    let startY = 0;
+    let isDragging = false;
+
+    imageElement.addEventListener('mousedown', (e) => {
+      e.preventDefault();
+      startX = e.clientX;
+      startY = e.clientY;
+      isDragging = true;
+      imageElement.style.cursor = 'grabbing';
+    });
+
+    window.addEventListener('mousemove', (e) => {
+      if (isDragging) {
+        const dx = e.clientX - startX;
+        const dy = e.clientY - startY;
+        translateX += dx / scale;
+        translateY += dy / scale;
+        startX = e.clientX;
+        startY = e.clientY;
+        applyTransform();
+      }
+    });
+
+    window.addEventListener('mouseup', () => {
+      isDragging = false;
+      imageElement.style.cursor = 'grab';
+    });
+
+    let touchStartDistance = 0;
+    imageElement.addEventListener('touchstart', (e) => {
+      if (e.touches.length === 2) {
+        e.preventDefault();
+        touchStartDistance = Math.hypot(
+          e.touches[0].clientX - e.touches[1].clientX,
+          e.touches[0].clientY - e.touches[1].clientY
+        );
+      } else if (e.touches.length === 1) {
+        startX = e.touches[0].clientX;
+        startY = e.touches[0].clientY;
+        isDragging = true;
+      }
+    });
+
+    imageElement.addEventListener('touchmove', (e) => {
+      if (e.touches.length === 2) {
+        e.preventDefault();
+        const currentDistance = Math.hypot(
+          e.touches[0].clientX - e.touches[1].clientX,
+          e.touches[0].clientY - e.touches[1].clientY
+        );
+        const delta = (currentDistance - touchStartDistance) / 100;
+        zoom(delta);
+        touchStartDistance = currentDistance;
+      } else if (e.touches.length === 1 && isDragging) {
+        e.preventDefault();
+        const dx = e.touches[0].clientX - startX;
+        const dy = e.touches[0].clientY - startY;
+        translateX += dx / scale;
+        translateY += dy / scale;
+        startX = e.touches[0].clientX;
+        startY = e.touches[0].clientY;
+        applyTransform();
       }
     });
 
+    imageElement.addEventListener('touchend', () => {
+      isDragging = false;
+    });
+
     function handlePageInput(value) {
       const pageNumber = parseInt(value);
       if (!isNaN(pageNumber)) {
@@ -203,8 +265,6 @@
           currentPage = (pageNumber - 1) / 2;
         }
         updatePage();
-
-        
       }
     }