Update reader.html

reader.html

@@ -26,16 +26,24 @@
       align-items: center;
     }
 
-    #reader-container img {
+    #page-image, #next-page-image {
+      position: absolute;
       width: 100%;
       height: auto;
       transform-origin: center center;
-      transition: transform 0.3s;
+      transition: opacity 0.2s ease;
       cursor: grab;
+      opacity: 1;
+      z-index: 1;
+    }
+
+    #next-page-image {
+      opacity: 0;
+      z-index: 0;
     }
 
     @media (min-width: 768px) {
-      #reader-container img {
+      #page-image, #next-page-image {
         height: 90vh;
         width: auto;
       }
@@ -79,11 +87,6 @@
       text-align: center;
       z-index: 1;
       width: 210px;
-      @media (orientation: portrait) {
-  transform: translate(50px, 0px);
-}
-    
-      z-index: 1;
     }
 
     #page-input:focus {
@@ -119,7 +122,8 @@
   <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" style="display: none;">
+    <img id="page-image" src="pages/1.jpg" alt="Pagina 1">
+    <img id="next-page-image" src="" alt="" style="display: none;">
     <div id="loading-message">Imaginea se încarcă, vă rog așteptați</div>
   </div>
 
@@ -130,184 +134,77 @@
 
   <script>
     const TOTAL_PAGES = 92;
-let currentPage = 1;
-const imageElement = document.getElementById('page-image');
-const prevButton = document.getElementById('prev-button');
-const nextButton = document.getElementById('next-button');
-const pageNumberElement = document.getElementById('page-number');
-const loadingMessage = document.getElementById('loading-message');
-
-// Array to store preloaded images
-const preloadImages = [];
-
-// Function to preload images for given page numbers
-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 = () => {
-  // Unload images that are no longer needed
-  const currentPages = [currentPage - 2, currentPage - 1, currentPage, currentPage + 1, currentPage + 2];
-  preloadImages.forEach((img, index) => {
-    const page = img.src.split('/').pop().split('.')[0];
-    if (!currentPages.includes(page)) {
-      preloadImages.splice(index, 1);
-    }
-  });
-
-  imageElement.src = `pages/${currentPage}.jpg`;
-  imageElement.alt = `Pagina ${currentPage}`;
-  prevButton.disabled = currentPage === 1;
-  nextButton.disabled = currentPage === TOTAL_PAGES;
-  const pageNumber = currentPage * 2 + 1;
-  pageNumberElement.textContent = `${pageNumber - 1}-${pageNumber}`;
-  imageElement.style.display = 'none';
-  loadingMessage.style.display = 'block';
-
-  // Preload next and previous 2 pages
-  const pagesToPreload = [
-    currentPage - 1, currentPage, currentPage + 1,
-    currentPage + 2, currentPage + 3,
-    currentPage - 2, currentPage - 3
-  ];
-  const uniquePages = pagesToPreload
-    .filter(page => page >= 1 && page <= TOTAL_PAGES)
-    .map(page => Math.floor(page))
-    .filter((value, index, self) => self.indexOf(value) === index);
-
-  preload(uniquePages);
-};
-
-imageElement.onload = () => {
-  imageElement.style.display = 'block';
-  loadingMessage.style.display = 'none';
-};
-
-prevButton.addEventListener('click', () => {
-  if (currentPage > 1) {
-    currentPage--;
-    updatePage();
-  }
-});
-
-nextButton.addEventListener('click', () => {
-  if (currentPage < TOTAL_PAGES) {
-    currentPage++;
-    updatePage();
-  }
-});
-
-
-    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();
+    let currentPage = 1;
+    const currentImageElement = document.getElementById('page-image');
+    const nextPageImageElement = document.getElementById('next-page-image');
+    const prevButton = document.getElementById('prev-button');
+    const nextButton = document.getElementById('next-button');
+    const pageNumberElement = document.getElementById('page-number');
+    const loadingMessage = document.getElementById('loading-message');
+
+    // Function to update the displayed page with cross-fade
+    const updatePage = (newPage) => {
+      currentPage = newPage;
+      prevButton.disabled = currentPage === 1;
+      nextButton.disabled = currentPage === TOTAL_PAGES;
+
+      const pageNumber = currentPage * 2 + 1;
+      pageNumberElement.textContent = `${pageNumber - 1}-${pageNumber}`;
+
+      // Load the new image into the next image element
+      nextPageImageElement.src = `pages/${currentPage}.jpg`;
+      nextPageImageElement.alt = `Pagina ${currentPage}`;
+
+      // Start the cross-fade transition
+      currentImageElement.style.opacity = '0';
+      nextPageImageElement.style.opacity = '1';
+      nextPageImageElement.style.zIndex = '2';
+
+      setTimeout(() => {
+        // Swap the images
+        [currentImageElement.src, nextPageImageElement.src] = [nextPageImageElement.src, ''];
+        currentImageElement.style.opacity = '1';
+        currentImageElement.style.zIndex = '1';
+        nextPageImageElement.style.opacity = '0';
+        nextPageImageElement.style.zIndex = '0';
+      }, 200); // Match the transition duration (0.2s)
     };
 
-    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();
+    // Event listeners for buttons
+    prevButton.addEventListener('click', () => {
+      if (currentPage > 1) {
+        updatePage(currentPage - 1);
       }
     });
 
-    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;
+    nextButton.addEventListener('click', () => {
+      if (currentPage < TOTAL_PAGES) {
+        updatePage(currentPage + 1);
       }
     });
 
-    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();
+    // Keyboard navigation
+    window.addEventListener('keydown', (e) => {
+      if (e.key === 'ArrowLeft' && !prevButton.disabled) {
+        prevButton.click();
+      } else if (e.key === 'ArrowRight' && !nextButton.disabled) {
+        nextButton.click();
       }
     });
 
-    imageElement.addEventListener('touchend', () => {
-      isDragging = false;
-    });
-
+    // Handle page input
     function handlePageInput(value) {
       const pageNumber = parseInt(value);
       if (!isNaN(pageNumber)) {
-        if (pageNumber % 2 === 0) {
-          currentPage = pageNumber / 2;
-        } else {
-          currentPage = (pageNumber - 1) / 2;
-        }
-        updatePage();
+        let newPage = Math.ceil(pageNumber / 2);
+        if (newPage < 1) newPage = 1;
+        if (newPage > TOTAL_PAGES) newPage = TOTAL_PAGES;
+        updatePage(newPage);
       }
     }
 
-    updatePage();
+    // Initialize the first page
+    updatePage(1);
   </script>
 </body>
-</html>
+</html>