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 0a414636..d602cbe9 100644 --- a/src/main/resources/templates/multi-tool.html +++ b/src/main/resources/templates/multi-tool.html @@ -13,7 +13,14 @@

-
+
+
+
+ +
+ PDF Page +
+
@@ -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; + }