From 5af5794dfeca0ae98736b11c86253e21cbef10ca Mon Sep 17 00:00:00 2001
From: mannam <101550345+ManoharMannam@users.noreply.github.com>
Date: Tue, 2 Jan 2024 16:44:57 +0530
Subject: [PATCH] display page number on mouse-hover issue#527

---
 .../static/js/multitool/PdfActionsManager.js  | 20 ++++++++++++++++++
 src/main/resources/templates/multi-tool.html  | 21 ++++++++++++++++++-
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/main/resources/static/js/multitool/PdfActionsManager.js b/src/main/resources/static/js/multitool/PdfActionsManager.js
index 3a4fd33d..55ae36fc 100644
--- a/src/main/resources/static/js/multitool/PdfActionsManager.js
+++ b/src/main/resources/static/js/multitool/PdfActionsManager.js
@@ -171,6 +171,26 @@ class PdfActionsManager {
 
         div.appendChild(insertFileButtonRightContainer);
 
+        const adaptPageNumber = (pageNumber, div) => {
+        const pageNumberElement = document.createElement('span');
+        pageNumberElement.classList.add('page-number');
+        pageNumberElement.textContent = pageNumber;
+
+        div.insertBefore(pageNumberElement, div.firstChild);
+        };
+
+        div.addEventListener('mouseenter', () => {
+               const pageNumber = Array.from(div.parentNode.children).indexOf(div) + 1;
+               adaptPageNumber(pageNumber, div);
+        });
+
+        div.addEventListener('mouseleave', () => {
+                const pageNumberElement = div.querySelector('.page-number');
+                if (pageNumberElement) {
+                    div.removeChild(pageNumberElement);
+                }
+        });
+
         return div;
     }
 }
diff --git a/src/main/resources/templates/multi-tool.html b/src/main/resources/templates/multi-tool.html
index 167d6849..2fef14b4 100644
--- a/src/main/resources/templates/multi-tool.html
+++ b/src/main/resources/templates/multi-tool.html
@@ -13,7 +13,14 @@
                 <div class="row justify-content-center">
                     <h2 th:text="#{multiTool.header}"></h2>
                     <div class="col-md-12" id="pages-container-wrapper">
-                        <div id="pages-container"></div>
+                        <div id="pages-container">
+                            <div class="page-container" th:each="pdf, status: ${pdfList}" th:id="'page-container-' + ${status.index}">
+                                <div class="page-number-container">
+                                    <span th:text="${status.index + 1}"></span>
+                                </div>
+                                <img th:src="${pdf.imageUrl}" alt="PDF Page">
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -207,6 +214,18 @@
         #add-pdf-button {
             margin: 0 auto;
         }
+
+        .page-number {
+            position: absolute;
+            top: 5px;
+            right:5px;
+            color:white;
+            background-color: #007bff; /* Primary blue color */
+            padding: 3px 6px;
+            border-radius: 4px;
+            font-size: 12px;
+            z-index:2;
+        }
     </style>
 </body>