kamp/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2024-10-01 08:50:11 +02:00
Code

Merge pull request #642 from mannam11/on_hover-pagenumber-display#527

Browse Source 
display page numbers on mouse-hover issue#527
This commit is contained in:
Anthony Stirling 2024-01-02 22:08:44 +00:00 committed by GitHub
commit de9e9a0f84
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 40 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/main/resources/static/js/multitool/PdfActionsManager.js
View File

@ -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;
}
}

21
src/main/resources/templates/multi-tool.html
View File

@ -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>