Changeset 3334620

Timestamp:

07/26/2025 05:21:07 PM (7 months ago)

Author:

shrikantgaur

Message:

Updated styles and functionality: added zoom, print, and download buttons

Location:

sk-epaper-manager/trunk

Files:

• assets/admin/epaper-admin.css (modified) (2 diffs)
• assets/epaper-script.js (modified) (1 diff)
• assets/epaper-style.css (modified) (6 diffs)
• sk-epaper-manager.php (modified) (2 diffs)
• templates/single-epaper.php (modified) (4 diffs)

sk-epaper-manager/trunk/assets/admin/epaper-admin.css

@@ -14 +14 @@
   position: relative;
   flex: 1 1 calc(33.33% - 10px);
+  max-width: calc(33.33% - 10px);
   border: 1px solid #ccc;
   border-radius: 5px;
@@ -21 +22 @@
 .sk-epaper-image-list img {
   width: 100%;
-  height: auto;
+  height: 250px;
+  object-fit: cover;
   display: block;
   border-radius: 4px;

sk-epaper-manager/trunk/assets/epaper-script.js

@@ -5 +5 @@
 const slides = document.querySelectorAll('.image-slide');
 
+const zoomInBtn = document.getElementById('zoom-in');
+const zoomOutBtn = document.getElementById('zoom-out');
+const downloadBtn = document.getElementById('download-btn');
+const printBtn = document.getElementById('print-btn');
+const printAllBtn = document.getElementById('print-all-btn');
+
 let currentIndex = 0;
 const numImages = slides.length;
+let zoomLevel = 1;
 
 if (currentPageDisplay) {
+  currentPageDisplay.textContent = currentIndex + 1;
+}
+
+function updateSlider() {
+  const translateX = -currentIndex * 100;
+  imageSlider.style.transform = `translateX(${translateX}%)`;
+  if (currentPageDisplay) {
     currentPageDisplay.textContent = currentIndex + 1;
-}
-
-function updateSlider() {
-    const translateX = -currentIndex * 100;
-    imageSlider.style.transform = `translateX(${translateX}%)`;
-    if (currentPageDisplay) {
-        currentPageDisplay.textContent = currentIndex + 1;
-    }
+  }
+  updateDownloadLink();
+  resetZoom();
+}
+
+function resetZoom() {
+  zoomLevel = 1;
+  slides.forEach(slide => {
+    const img = slide.querySelector('img');
+    img.style.transform = 'scale(1)';
+  });
+}
+
+function zoomImage(factor) {
+  zoomLevel += factor;
+  if (zoomLevel < 1) zoomLevel = 1;
+  if (zoomLevel > 5) zoomLevel = 5;
+
+  const currentContainer = slides[currentIndex].querySelector('.zoom-container img');
+  currentContainer.style.transform = `scale(${zoomLevel})`;
+}
+
+function updateDownloadLink() {
+  const img = slides[currentIndex].querySelector('img');
+  downloadBtn.href = img.src;
 }
 
 if (nextButton && prevButton && imageSlider && slides.length > 0) {
-    nextButton.addEventListener('click', () => {
-        currentIndex = (currentIndex + 1) % numImages;
-        updateSlider();
+  nextButton.addEventListener('click', () => {
+    currentIndex = (currentIndex + 1) % numImages;
+    updateSlider();
+  });
+
+  prevButton.addEventListener('click', () => {
+    currentIndex = (currentIndex - 1 + numImages) % numImages;
+    updateSlider();
+  });
+
+  zoomInBtn.addEventListener('click', () => {
+    zoomImage(0.5);
+  });
+
+  zoomOutBtn.addEventListener('click', () => {
+    zoomImage(-0.5);
+  });
+
+  updateSlider();
+} else {
+  console.warn('Slider elements not found.');
+}
+
+// Drag-to-pan
+slides.forEach(slide => {
+  const container = slide.querySelector('.zoom-container');
+  let isDown = false;
+  let startX, startY, scrollLeft, scrollTop;
+
+  container.addEventListener('mousedown', e => {
+    const img = container.querySelector('img');
+    if (zoomLevel <= 1) return;
+    isDown = true;
+    container.classList.add('dragging');
+    startX = e.pageX - container.offsetLeft;
+    startY = e.pageY - container.offsetTop;
+    scrollLeft = container.scrollLeft;
+    scrollTop = container.scrollTop;
+  });
+
+  container.addEventListener('mouseleave', () => {
+    isDown = false;
+    container.classList.remove('dragging');
+  });
+
+  container.addEventListener('mouseup', () => {
+    isDown = false;
+    container.classList.remove('dragging');
+  });
+
+  container.addEventListener('mousemove', e => {
+    if (!isDown) return;
+    e.preventDefault();
+    const x = e.pageX - container.offsetLeft;
+    const y = e.pageY - container.offsetTop;
+    const walkX = (x - startX) * 1;
+    const walkY = (y - startY) * 1;
+    container.scrollLeft = scrollLeft - walkX;
+    container.scrollTop = scrollTop - walkY;
+  });
+});
+
+// ✅ Print Button Functionality
+if (printBtn) {
+  printBtn.addEventListener('click', () => {
+    const currentSlide = slides[currentIndex];
+    const img = currentSlide.querySelector('img');
+    if (!img) return;
+
+    const iframe = document.createElement('iframe');
+    iframe.style.position = 'fixed';
+    iframe.style.width = '0';
+    iframe.style.height = '0';
+    iframe.style.border = '0';
+    document.body.appendChild(iframe);
+
+    const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
+    if (!iframeDoc) return;
+
+    iframeDoc.open();
+    iframeDoc.write(`
+      <html>
+        <head>
+          <title>Print Page</title>
+          <style>
+            @page {
+              size: A4 portrait;
+              margin: 0;
+            }
+            html, body {
+              margin: 0;
+              padding: 0;
+              height: 100%;
+              width: 100%;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              background: white;
+            }
+            img {
+              width: 100%;
+              height: auto;
+              max-height: 100%;
+              object-fit: contain;
+              page-break-after: avoid;
+            }
+          </style>
+        </head>
+        <body>
+          <img src="${img.src}" onload="window.focus(); window.print(); setTimeout(() => window.close(), 100);" />
+        </body>
+      </html>
+    `);
+    iframeDoc.close();
+  });
+}
+
+if(printAllBtn) {
+  printAllBtn.addEventListener('click', () => {
+    const iframe = document.createElement('iframe');
+    iframe.style.position = 'fixed';
+    iframe.style.width = '0';
+    iframe.style.height = '0';
+    iframe.style.border = 'none';
+    document.body.appendChild(iframe);
+
+    const doc = iframe.contentDocument || iframe.contentWindow.document;
+
+    doc.open();
+    doc.write('<html><head><title>Print All</title><style>');
+    doc.write(`
+      @media print {
+        @page {
+          size: A4;
+          margin: 0;
+        }
+        body {
+          margin: 0;
+          text-align: center;
+        }
+        img {
+          page-break-after: always;
+          max-width: 100%;
+          max-height: 100vh;
+        }
+      }
+    `);
+    doc.write('</style></head><body>');
+
+    slides.forEach(slide => {
+      const img = slide.querySelector('img');
+      if (img) {
+        doc.write(`<img src="${img.src}" alt="Slide" />`);
+      }
     });
 
-    prevButton.addEventListener('click', () => {
-        currentIndex = (currentIndex - 1 + numImages) % numImages;
-        updateSlider();
-    });
-
-    updateSlider();
-} else {
-    console.warn('Slider elements not found.');
-}
+    doc.write('</body></html>');
+    doc.close();
+
+    iframe.onload = () => {
+      iframe.contentWindow.focus();
+      iframe.contentWindow.print();
+      setTimeout(() => document.body.removeChild(iframe), 1000);
+    };
+  });
+}

sk-epaper-manager/trunk/assets/epaper-style.css

@@ -2 +2 @@
 .single-epaper .slider-container {
   position: relative;
-  /* width: 80%; */
   margin: 0 auto;
   overflow: hidden;
@@ -22 +21 @@
   width: 100%;
   height: auto;
-  border-radius: 5px; /* Adds rounded corners to images */
-  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* Adds a subtle box shadow to images */
+  border-radius: 5px; 
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
 }
 
@@ -40 +39 @@
     62%,
     1
-  ); /* Adds a semi-transparent background to the arrows */
-  color: #fff; /* Sets the arrow color to white */
-  border-radius: 50%; /* Makes the arrows round */
+  ); 
+  color: #fff; 
+  border-radius: 50%; 
   width: 40px;
   height: 40px;
@@ -70 +69 @@
 .epaper-top-header .epaper-col {
     display: flex;
+    flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
@@ -85 +85 @@
 /* Styles for each epaper-item */
 .epaper-item {
-    width: calc(33% - 10px); /* Adjust as needed for your layout */
-    /* margin-bottom: 20px; */
+    width: calc(33% - 10px);
     border: 1px solid #e0e0e0;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
     background-color: #fff;
-   /* padding: 15px;*/
 }
 
@@ -114 +112 @@
     text-align: center;
 }
+.epaper-content h2 a {
+    text-decoration: none;
+}
+
+.zoom-container {
+  overflow: auto;
+  width: 100%;
+  height: 100%;
+}
+
+.zoom-container img {
+  display: block;
+  margin: 0 auto;
+  max-width: 100%;
+  transition: transform 0.3s ease;
+}
+
+.dragging {
+  cursor: grabbing !important;
+}
+
+/* Zoom & Download Button Group Styling */
+.epaper-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px 0;
+}
+
+.epaper-center .sk-control-button {
+    background-color: #fff;
+    border: none;
+    color: #000;
+    padding: 7px 8px;
+    margin: 0 5px;
+    font-size: 16px;
+    border-radius: 6px;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+.epaper-center .sk-control-button i {
+    font-size: 18px;
+    pointer-events: none;
+}
+
+.epaper-center .sk-control-button:hover {
+    opacity: 0.8
+}

sk-epaper-manager/trunk/sk-epaper-manager.php

@@ -84 +84 @@
 add_action( 'wp_enqueue_scripts', SK_EPAPER_PREFIX . 'enqueue_styles' );
 
+function sk_epaper_enqueue_fontawesome() {
+    wp_enqueue_style(
+         SK_EPAPER_PREFIX .'fontawesome',
+        'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css',
+        array(),
+        '6.5.0',
+        'all'
+    );
+}
+add_action( 'wp_enqueue_scripts', SK_EPAPER_PREFIX . 'enqueue_fontawesome' );
+
 function sk_epaper_enqueue_scripts() {
     wp_enqueue_script(
@@ -146 +157 @@
     ?>
     <div>
-        <label for="<?php echo SK_EPAPER_PREFIX . 'images'; ?>">ePaper Images</label>
         <ul class="sk-epaper-image-list">
             <?php foreach ( $image_ids as $id ) : ?>
                 <li data-id="<?php echo esc_attr( $id ); ?>">
-                    <?php echo wp_get_attachment_image( $id, 'thumbnail' ); ?>
+                    <?php echo wp_get_attachment_image( $id, 'full' ); ?>
                     <span class="remove-image"><span class="text-remove-btn hidden">Remove</span></span>
                 </li>

sk-epaper-manager/trunk/templates/single-epaper.php

@@ -9 +9 @@
 // Get stored attachment IDs
 $epaper_images = get_post_meta(get_the_ID(), 'sk_epaper_images', true);
-
 if (!is_array($epaper_images)) {
     $epaper_images = array_filter(explode(',', $epaper_images));
@@ -27 +26 @@
                                     <?php single_post_title('ePaper: '); ?>
                                 </span>
+                            </div>
+                        </div>
+                        <div class="epaper-center">
+                            <div>
+                                <div>
+                                    <button id="zoom-in" class="zoom-btn sk-control-button" title="Zoom In">
+                                        <i class="fas fa-search-plus"></i>
+                                    </button>
+                                    <button id="zoom-out" class="zoom-btn sk-control-button" title="Zoom Out">
+                                        <i class="fas fa-search-minus"></i>
+                                    </button>
+                                    <button id="print-btn" class="sk-control-button" title="Print">
+                                        <i class="fas fa-print"></i>
+                                    </button>
+                                    <button id="print-all-btn" title="Print All Pages" class="sk-control-button">
+                                      <i class="fa-solid fa-print"></i>
+                                    </button>
+                                    <a id="download-btn" href="#" download class="sk-control-button" title="Download">
+                                        <i class="fas fa-download"></i>
+                                    </a>
+                                </div>
                             </div>
                         </div>
@@ -50 +70 @@
                     <div class="epaper-col">
                         <div class="slider-container">
-                            <div class="arrow left-arrow" id="prev">&lt;</div>
+                            <div class="arrow left-arrow" id="prev"><i class="fas fa-chevron-left"></i></div>
                             <div class="image-slider">
                                 <?php
@@ -57 +77 @@
                                         $attachment_id = absint($attachment_id);
                                         echo '<div class="image-slide">';
-                                        echo wp_get_attachment_image(
-                                            $attachment_id,
-                                            'full',
-                                            false,
-                                            array('alt' => get_the_title($attachment_id))
-                                        );
-                                        echo '</div>';
+                                        echo '<div class="zoom-container">';
+                                        echo wp_get_attachment_image(
+                                            $attachment_id,
+                                            'full',
+                                            false,
+                                            array('alt' => get_the_title($attachment_id))
+                                        );
+                                        echo '</div>';
+                                        echo '</div>';
                                     }
                                 }
                                 ?>
                             </div>
-                            <div class="arrow right-arrow" id="next">&gt;</div>
+                            <div class="arrow right-arrow" id="next"><i class="fas fa-chevron-right"></i></div>
                         </div>
                     </div>