mirror of
https://github.com/Frooodle/Stirling-PDF.git
synced 2024-12-21 19:08:24 +01:00
add imagehighlighter
Because the images are now much smaller with the image highlighter we can view images in more detail
This commit is contained in:
parent
fb24398b01
commit
1edb669583
@ -5,6 +5,7 @@
|
|||||||
|
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<div id="image-highlighter"></div>
|
||||||
<div id="page-container">
|
<div id="page-container">
|
||||||
<div id="content-wrap">
|
<div id="content-wrap">
|
||||||
<div th:insert="~{fragments/navbar.html :: navbar}"></div>
|
<div th:insert="~{fragments/navbar.html :: navbar}"></div>
|
||||||
@ -55,6 +56,12 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
var fileName = null;
|
var fileName = null;
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* Manage Page container scroll
|
||||||
|
*
|
||||||
|
*/
|
||||||
const pagesContainer = document.getElementById("pages-container");
|
const pagesContainer = document.getElementById("pages-container");
|
||||||
|
|
||||||
var scrollDelta = 0; // variable to store the accumulated scroll delta
|
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) {
|
function addPdfs(nextSiblingElement) {
|
||||||
var input = document.createElement('input');
|
var input = document.createElement('input');
|
||||||
input.type = 'file';
|
input.type = 'file';
|
||||||
@ -184,12 +211,24 @@
|
|||||||
div.classList.add("page-container");
|
div.classList.add("page-container");
|
||||||
|
|
||||||
var img = document.createElement('img');
|
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.pageIdx = i;
|
||||||
img.rend = renderer;
|
img.rend = renderer;
|
||||||
img.doc = pdfDocument;
|
img.doc = pdfDocument;
|
||||||
div.appendChild(img);
|
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');
|
const buttonContainer = document.createElement('div');
|
||||||
buttonContainer.classList.add("button-container");
|
buttonContainer.classList.add("button-container");
|
||||||
|
|
||||||
@ -479,6 +518,10 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.page-image {
|
||||||
|
cursor:pointer;
|
||||||
|
}
|
||||||
|
|
||||||
/* "insert pdf" buttons that appear on the right when hover */
|
/* "insert pdf" buttons that appear on the right when hover */
|
||||||
.insert-file-button-container {
|
.insert-file-button-container {
|
||||||
translate: 0 -50%;
|
translate: 0 -50%;
|
||||||
@ -529,6 +572,46 @@
|
|||||||
border-radius: 100px;
|
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 {
|
#add-pdf-button {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user