Mirrors/Stirling-PDF
Mirrors/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Frooodle/Stirling-PDF.git synced 2024-12-21 19:08:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

add imagehighlighter

Browse Source 
Because the images are now much smaller with the image highlighter we can view images in more detail
This commit is contained in:
jordy 2023-04-22 14:49:08 +02:00
parent fb24398b01
commit 1edb669583
1 changed files with 84 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,6 +5,7 @@
<body>
<div id="image-highlighter"></div>
<div id="page-container">
<div id="content-wrap">
<div th:insert="~{fragments/navbar.html :: navbar}"></div>
@ -55,6 +56,12 @@
<script>
var fileName = null;
/**
*
* Manage Page container scroll
*
*/
const pagesContainer = document.getElementById("pages-container");
var scrollDelta = 0; // variable to store the accumulated scroll delta
@ -88,6 +95,26 @@
}
}
/**
*
* Manage image highlighter clearing
*
*/
const imageHighlighter = document.getElementById('image-highlighter');
imageHighlighter.onclick = (e) => {
imageHighlighter.childNodes.forEach((child) => {
child.classList.add('remove');
setTimeout(() => {
imageHighlighter.removeChild(child);
}, 100)
})
}
/**
*
* Methods for managing PDFs
*
*/
function addPdfs(nextSiblingElement) {
var input = document.createElement('input');
input.type = 'file';
@ -184,12 +211,24 @@
div.classList.add("page-container");
var img = document.createElement('img');
img.src = await renderer.renderPage(i);
img.classList.add('page-image')
const imageSrc = await renderer.renderPage(i)
img.src = imageSrc;
img.pageIdx = i;
img.rend = renderer;
img.doc = pdfDocument;
div.appendChild(img);
img.addEventListener('mousedown', (x) => {
var bigImg = document.createElement('img');
bigImg.onclick = (e) => {
e.preventDefault();
e.stopPropagation();
};
bigImg.src = imageSrc;
imageHighlighter.appendChild(bigImg);
})
const buttonContainer = document.createElement('div');
buttonContainer.classList.add("button-container");
@ -479,6 +518,10 @@
display: none;
}
.page-image {
cursor:pointer;
}
/* "insert pdf" buttons that appear on the right when hover */
.insert-file-button-container {
translate: 0 -50%;
@ -529,6 +572,46 @@
border-radius: 100px;
}
#image-highlighter {
position: fixed;
display:flex;
inset: 0;
z-index: 10000;
background-color: rgba(0, 0, 0, 0);
visibility: hidden;
align-items: center;
justify-content: center;
transition: visbility 0.1s linear, background-color 0.1s linear;
}
#image-highlighter > * {
max-width: 80vw;
max-height: 80vh;
animation: image-highlight .1s linear;
transition: transform .1s linear, opacity .1s linear;
}
#image-highlighter > *.remove {
transform: scale(0.8) !important;
opacity: 0 !important;
}
#image-highlighter:not(:empty) {
background-color: rgba(0, 0, 0, 0.37);
visibility: visible;
}
@keyframes image-highlight {
from {
transform: scale(0.8);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
#add-pdf-button {
margin: 0 auto;
}