Anthony Stirling
GitHub
commit
2d4aff3b08
9 changed files with 817 additions and 509 deletions
78
src/main/resources/static/css/dragdrop.css
Normal file
78
src/main/resources/static/css/dragdrop.css
Normal file
|
|
@ -0,0 +1,78 @@
|
||||||
|
#drag-container {
|
||||||
|
position: fixed;
|
||||||
|
display:flex;
|
||||||
|
inset: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 10000;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#drag-container:not(:empty) {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
#drag-container .dragged-img {
|
||||||
|
position: fixed;
|
||||||
|
max-width: 200px;
|
||||||
|
max-height: 200px;
|
||||||
|
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.58);
|
||||||
|
transform-origin: top left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drag-manager_dragging {
|
||||||
|
width: 0px;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drag-manager_draghover {
|
||||||
|
width: 375px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drag-manager_draghover .insert-file-button-container {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drag-manager_draghover .button-container {
|
||||||
|
visibility: hidden !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html[lang-direction=ltr] .drag-manager_draghover img {
|
||||||
|
left: calc(50% + 62.5px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html[lang-direction=rtl] .drag-manager_draghover img {
|
||||||
|
left: 125px
|
||||||
|
}
|
||||||
|
|
||||||
|
.drag-manager_dragging-container .hide-on-drag {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drag-manager_endpoint {
|
||||||
|
width: 80px;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #FFFFFF10;
|
||||||
|
transition: width 0.1s;
|
||||||
|
animation: end-drop-expand .3s ease;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drag-manager_endpoint svg {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drag-manager_endpoint.drag-manager_draghover {
|
||||||
|
width: 150px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes end-drop-expand {
|
||||||
|
from {
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
width: 80px;
|
||||||
|
}
|
||||||
|
}
|
||||||
40
src/main/resources/static/css/imageHighlighter.css
Normal file
40
src/main/resources/static/css/imageHighlighter.css
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
|
||||||
|
#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;
|
||||||
|
}
|
||||||
|
}
|
||||||
87
src/main/resources/static/css/pdfActions.css
Normal file
87
src/main/resources/static/css/pdfActions.css
Normal file
|
|
@ -0,0 +1,87 @@
|
||||||
|
|
||||||
|
.pdf-actions_button-container {
|
||||||
|
z-index: 2;
|
||||||
|
display:flex;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.1s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdf-actions_container:hover .pdf-actions_button-container {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdf-actions_button-container > * {
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
margin: 3px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdf-actions_container svg {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
.pdf-actions_container:nth-child(1) .pdf-actions_move-left-button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.pdf-actions_container:last-child .pdf-actions_move-right-button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* "insert pdf" buttons that appear on the right when hover */
|
||||||
|
.pdf-actions_insert-file-button-container {
|
||||||
|
translate: 0 -50%;
|
||||||
|
width: 80px;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
z-index: 1;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdf-actions_insert-file-button-container.left {
|
||||||
|
left: -20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdf-actions_insert-file-button-container.right {
|
||||||
|
right: -20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
html[lang-direction=ltr] .pdf-actions_insert-file-button-container.right {
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
html[lang-direction=rtl] .pdf-actions_insert-file-button-container.left {
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdf-actions_insert-file-button-container.left .pdf-actions_insert-file-button {
|
||||||
|
left: 0;
|
||||||
|
translate: 0 -50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdf-actions_insert-file-button-container.right .pdf-actions_insert-file-button {
|
||||||
|
right: 0;
|
||||||
|
translate: 0 -50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
html[lang-direction=ltr] .pdf-actions_container:last-child > .pdf-actions_insert-file-button-container.right {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
html[lang-direction=rtl] .pdf-actions_container:last-child > .pdf-actions_insert-file-button-container.left {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdf-actions_insert-file-button-container:hover {
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 0.05s;
|
||||||
|
}
|
||||||
|
.pdf-actions_insert-file-button {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 50%;
|
||||||
|
translate: 50% -50%;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
border-radius: 100px;
|
||||||
|
}
|
||||||
127
src/main/resources/static/js/multitool/DragDropManager.js
Normal file
127
src/main/resources/static/js/multitool/DragDropManager.js
Normal file
|
|
@ -0,0 +1,127 @@
|
||||||
|
|
||||||
|
|
||||||
|
class DragDropManager {
|
||||||
|
dragContainer;
|
||||||
|
wrapper;
|
||||||
|
pageDirection;
|
||||||
|
movePageTo;
|
||||||
|
pageDragging;
|
||||||
|
draggelEl;
|
||||||
|
draggedImageEl;
|
||||||
|
hoveredEl;
|
||||||
|
endInsertionElement;
|
||||||
|
|
||||||
|
constructor(id, wrapperId) {
|
||||||
|
this.dragContainer = document.getElementById(id);
|
||||||
|
this.pageDirection = document.documentElement.getAttribute("lang-direction");
|
||||||
|
this.wrapper = document.getElementById(wrapperId);
|
||||||
|
this.pageDragging = false;
|
||||||
|
this.hoveredEl = undefined;
|
||||||
|
this.draggelEl = undefined
|
||||||
|
this.draggedImageEl = undefined;
|
||||||
|
|
||||||
|
var styleElement = document.createElement('link');
|
||||||
|
styleElement.rel = 'stylesheet';
|
||||||
|
styleElement.href = 'css/dragdrop.css'
|
||||||
|
|
||||||
|
document.head.appendChild(styleElement);
|
||||||
|
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.classList.add('drag-manager_endpoint');
|
||||||
|
div.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-arrow-down" viewBox="0 0 16 16">
|
||||||
|
<path d="M8.5 6.5a.5.5 0 0 0-1 0v3.793L6.354 9.146a.5.5 0 1 0-.708.708l2 2a.5.5 0 0 0 .708 0l2-2a.5.5 0 0 0-.708-.708L8.5 10.293V6.5z"/>
|
||||||
|
<path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z"/>
|
||||||
|
</svg>`
|
||||||
|
this.endInsertionElement = div;
|
||||||
|
|
||||||
|
this.startDraggingPage = this.startDraggingPage.bind(this);
|
||||||
|
this.onDragEl = this.onDragEl.bind(this);
|
||||||
|
this.stopDraggingPage = this.stopDraggingPage.bind(this);
|
||||||
|
|
||||||
|
this.adapt(div);
|
||||||
|
}
|
||||||
|
|
||||||
|
startDraggingPage(div,) {
|
||||||
|
this.pageDragging = true;
|
||||||
|
this.draggedEl = div;
|
||||||
|
const img = div.querySelector('img');
|
||||||
|
div.classList.add('drag-manager_dragging');
|
||||||
|
const imageSrc = img.src;
|
||||||
|
|
||||||
|
const imgEl = document.createElement('img');
|
||||||
|
imgEl.classList.add('dragged-img');
|
||||||
|
imgEl.src = imageSrc;
|
||||||
|
this.draggedImageEl = imgEl;
|
||||||
|
imgEl.style.left = screenX;
|
||||||
|
imgEl.style.right = screenY;
|
||||||
|
imgEl.style.transform = `rotate(${img.style.rotate === '' ? '0deg' : img.style.rotate}) translate(-50%, -50%)`;
|
||||||
|
this.dragContainer.appendChild(imgEl);
|
||||||
|
|
||||||
|
window.addEventListener('mouseup', this.stopDraggingPage)
|
||||||
|
window.addEventListener('mousemove', this.onDragEl)
|
||||||
|
this.wrapper.classList.add('drag-manager_dragging-container');
|
||||||
|
this.wrapper.appendChild(this.endInsertionElement);
|
||||||
|
}
|
||||||
|
|
||||||
|
onDragEl(mouseEvent) {
|
||||||
|
const { clientX, clientY } = mouseEvent;
|
||||||
|
if(this.draggedImageEl) {
|
||||||
|
this.draggedImageEl.style.left = `${clientX}px`;
|
||||||
|
this.draggedImageEl.style.top = `${clientY}px`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
stopDraggingPage() {
|
||||||
|
window.removeEventListener('mousemove', this.onDragEl);
|
||||||
|
this.wrapper.classList.remove('drag-manager_dragging-container');
|
||||||
|
this.wrapper.removeChild(this.endInsertionElement);
|
||||||
|
window.removeEventListener('mouseup', this.stopDraggingPage)
|
||||||
|
this.draggedImageEl = undefined;
|
||||||
|
this.pageDragging = false;
|
||||||
|
this.draggedEl.classList.remove('drag-manager_dragging');
|
||||||
|
this.hoveredEl?.classList.remove('drag-manager_draghover');
|
||||||
|
this.dragContainer.childNodes.forEach((dragChild) => {
|
||||||
|
this.dragContainer.removeChild(dragChild);
|
||||||
|
})
|
||||||
|
if(!this.hoveredEl) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if(this.hoveredEl === this.endInsertionElement) {
|
||||||
|
this.movePageTo(this.draggedEl);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.movePageTo(this.draggedEl, this.hoveredEl);
|
||||||
|
}
|
||||||
|
|
||||||
|
setActions({ movePageTo }) {
|
||||||
|
this.movePageTo = movePageTo;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
adapt(div) {
|
||||||
|
const onDragStart = () => {
|
||||||
|
this.startDraggingPage(div);
|
||||||
|
}
|
||||||
|
|
||||||
|
const onMouseEnter = () => {
|
||||||
|
if (this.pageDragging) {
|
||||||
|
this.hoveredEl = div;
|
||||||
|
div.classList.add('drag-manager_draghover');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const onMouseLeave = () => {
|
||||||
|
this.hoveredEl = undefined
|
||||||
|
div.classList.remove('drag-manager_draghover');
|
||||||
|
}
|
||||||
|
|
||||||
|
div.addEventListener('dragstart', onDragStart);
|
||||||
|
div.addEventListener('mouseenter', onMouseEnter);
|
||||||
|
div.addEventListener('mouseleave', onMouseLeave);
|
||||||
|
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DragDropManager;
|
||||||
46
src/main/resources/static/js/multitool/ImageHighlighter.js
Normal file
46
src/main/resources/static/js/multitool/ImageHighlighter.js
Normal file
|
|
@ -0,0 +1,46 @@
|
||||||
|
class ImageHiglighter {
|
||||||
|
imageHighlighter;
|
||||||
|
constructor(id) {
|
||||||
|
this.imageHighlighter = document.getElementById(id);
|
||||||
|
this.imageHighlightCallback = this.imageHighlightCallback.bind(this);
|
||||||
|
|
||||||
|
var styleElement = document.createElement('link');
|
||||||
|
styleElement.rel = 'stylesheet';
|
||||||
|
styleElement.href = 'css/imageHighlighter.css'
|
||||||
|
|
||||||
|
document.head.appendChild(styleElement);
|
||||||
|
|
||||||
|
this.imageHighlighter.onclick = () => {
|
||||||
|
this.imageHighlighter.childNodes.forEach((child) => {
|
||||||
|
child.classList.add('remove');
|
||||||
|
setTimeout(() => {
|
||||||
|
this.imageHighlighter.removeChild(child);
|
||||||
|
}, 100)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
imageHighlightCallback(highlightEvent) {
|
||||||
|
var bigImg = document.createElement('img');
|
||||||
|
bigImg.onclick = (imageClickEvent) => {
|
||||||
|
// This prevents the highlighter's onClick from closing the image when clicking
|
||||||
|
// on the image instead of next to it.
|
||||||
|
imageClickEvent.preventDefault();
|
||||||
|
imageClickEvent.stopPropagation();
|
||||||
|
};
|
||||||
|
bigImg.src = highlightEvent.target.src;
|
||||||
|
this.imageHighlighter.appendChild(bigImg);
|
||||||
|
};
|
||||||
|
|
||||||
|
setActions() {
|
||||||
|
// not needed in this case
|
||||||
|
}
|
||||||
|
|
||||||
|
adapt(div) {
|
||||||
|
const img = div.querySelector('.page-image');
|
||||||
|
img.addEventListener('click', this.imageHighlightCallback)
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ImageHiglighter;
|
||||||
167
src/main/resources/static/js/multitool/PdfActionsManager.js
Normal file
167
src/main/resources/static/js/multitool/PdfActionsManager.js
Normal file
|
|
@ -0,0 +1,167 @@
|
||||||
|
class PdfActionsManager {
|
||||||
|
pageDirection;
|
||||||
|
pagesContainer;
|
||||||
|
|
||||||
|
constructor(id) {
|
||||||
|
this.pagesContainer = document.getElementById(id);
|
||||||
|
this.pageDirection = document.documentElement.getAttribute("lang-direction");
|
||||||
|
|
||||||
|
var styleElement = document.createElement('link');
|
||||||
|
styleElement.rel = 'stylesheet';
|
||||||
|
styleElement.href = 'css/pdfActions.css'
|
||||||
|
|
||||||
|
document.head.appendChild(styleElement);
|
||||||
|
}
|
||||||
|
|
||||||
|
getPageContainer(element) {
|
||||||
|
var container = element
|
||||||
|
while (!container.classList.contains('page-container')) {
|
||||||
|
container = container.parentNode;
|
||||||
|
}
|
||||||
|
return container;
|
||||||
|
}
|
||||||
|
|
||||||
|
moveUpButtonCallback(e) {
|
||||||
|
var imgContainer = this.getPageContainer(e.target);
|
||||||
|
|
||||||
|
const sibling = imgContainer.previousSibling;
|
||||||
|
if (sibling) {
|
||||||
|
this.movePageTo(imgContainer, sibling, true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
moveDownButtonCallback(e) {
|
||||||
|
var imgContainer = this.getPageContainer(e.target);
|
||||||
|
const sibling = imgContainer.nextSibling;
|
||||||
|
if (sibling) {
|
||||||
|
this.movePageTo(imgContainer, sibling.nextSibling, true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
rotateCCWButtonCallback(e) {
|
||||||
|
var imgContainer = this.getPageContainer(e.target);
|
||||||
|
const img = imgContainer.querySelector("img");
|
||||||
|
|
||||||
|
this.rotateElement(img, -90)
|
||||||
|
};
|
||||||
|
|
||||||
|
rotateCWButtonCallback(e) {
|
||||||
|
var imgContainer = this.getPageContainer(e.target);
|
||||||
|
const img = imgContainer.querySelector("img");
|
||||||
|
|
||||||
|
this.rotateElement(img, 90)
|
||||||
|
};
|
||||||
|
|
||||||
|
deletePageButtonCallback(e) {
|
||||||
|
var imgContainer = this.getPageContainer(e.target);
|
||||||
|
this.pagesContainer.removeChild(imgContainer);
|
||||||
|
};
|
||||||
|
|
||||||
|
insertFileButtonCallback(e) {
|
||||||
|
var imgContainer = this.getPageContainer(e.target);
|
||||||
|
this.addPdfs(imgContainer)
|
||||||
|
};
|
||||||
|
|
||||||
|
setActions({ movePageTo, addPdfs, rotateElement }) {
|
||||||
|
this.movePageTo = movePageTo;
|
||||||
|
this.addPdfs = addPdfs;
|
||||||
|
this.rotateElement = rotateElement;
|
||||||
|
|
||||||
|
this.moveUpButtonCallback = this.moveUpButtonCallback.bind(this);
|
||||||
|
this.moveDownButtonCallback = this.moveDownButtonCallback.bind(this);
|
||||||
|
this.rotateCCWButtonCallback = this.rotateCCWButtonCallback.bind(this);
|
||||||
|
this.rotateCWButtonCallback = this.rotateCWButtonCallback.bind(this);
|
||||||
|
this.deletePageButtonCallback = this.deletePageButtonCallback.bind(this);
|
||||||
|
this.insertFileButtonCallback = this.insertFileButtonCallback.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
adapt(div) {
|
||||||
|
div.classList.add('pdf-actions_container');
|
||||||
|
const leftDirection = this.pageDirection === 'rtl' ? 'right' : 'left'
|
||||||
|
const rightDirection = this.pageDirection === 'rtl' ? 'left' : 'right'
|
||||||
|
const buttonContainer = document.createElement('div');
|
||||||
|
|
||||||
|
buttonContainer.classList.add("pdf-actions_button-container", "hide-on-drag");
|
||||||
|
|
||||||
|
const moveUp = document.createElement('button');
|
||||||
|
moveUp.classList.add("pdf-actions_move-left-button","btn", "btn-secondary");
|
||||||
|
moveUp.innerHTML = `<i class="bi bi-arrow-${leftDirection}-short"></i>`;
|
||||||
|
moveUp.onclick = this.moveUpButtonCallback;
|
||||||
|
buttonContainer.appendChild(moveUp);
|
||||||
|
|
||||||
|
const moveDown = document.createElement('button');
|
||||||
|
moveDown.classList.add("pdf-actions_move-right-button","btn", "btn-secondary");
|
||||||
|
moveDown.innerHTML = `<i class="bi bi-arrow-${rightDirection}-short"></i>`;
|
||||||
|
moveDown.onclick = this.moveDownButtonCallback;
|
||||||
|
buttonContainer.appendChild(moveDown);
|
||||||
|
|
||||||
|
const rotateCCW = document.createElement('button');
|
||||||
|
rotateCCW.classList.add("btn", "btn-secondary");
|
||||||
|
rotateCCW.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
|
||||||
|
<path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z" />
|
||||||
|
<path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z" />
|
||||||
|
</svg>`;
|
||||||
|
rotateCCW.onclick = this.rotateCCWButtonCallback;
|
||||||
|
buttonContainer.appendChild(rotateCCW);
|
||||||
|
|
||||||
|
const rotateCW = document.createElement('button');
|
||||||
|
rotateCW.classList.add("btn", "btn-secondary");
|
||||||
|
rotateCW.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
|
||||||
|
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
|
||||||
|
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
|
||||||
|
</svg>`;
|
||||||
|
rotateCW.onclick = this.rotateCWButtonCallback;
|
||||||
|
buttonContainer.appendChild(rotateCW);
|
||||||
|
|
||||||
|
const deletePage = document.createElement('button');
|
||||||
|
deletePage.classList.add("btn", "btn-danger");
|
||||||
|
deletePage.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
|
||||||
|
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z"/>
|
||||||
|
<path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z"/>
|
||||||
|
</svg>`;
|
||||||
|
deletePage.onclick = this.deletePageButtonCallback;
|
||||||
|
buttonContainer.appendChild(deletePage);
|
||||||
|
|
||||||
|
div.appendChild(buttonContainer);
|
||||||
|
|
||||||
|
const insertFileButtonContainer = document.createElement('div');
|
||||||
|
|
||||||
|
insertFileButtonContainer.classList.add(
|
||||||
|
"pdf-actions_insert-file-button-container",
|
||||||
|
leftDirection,
|
||||||
|
`align-center-${leftDirection}`);
|
||||||
|
|
||||||
|
const insertFileButton = document.createElement('button');
|
||||||
|
insertFileButton.classList.add("btn", "btn-primary", "pdf-actions_insert-file-button");
|
||||||
|
insertFileButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-plus" viewBox="0 0 16 16">
|
||||||
|
<path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z"/>
|
||||||
|
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
|
||||||
|
</svg>`;
|
||||||
|
insertFileButton.onclick = this.insertFileButtonCallback;
|
||||||
|
insertFileButtonContainer.appendChild(insertFileButton);
|
||||||
|
|
||||||
|
div.appendChild(insertFileButtonContainer);
|
||||||
|
|
||||||
|
// add this button to every element, but only show it on the last one :D
|
||||||
|
const insertFileButtonRightContainer = document.createElement('div');
|
||||||
|
insertFileButtonRightContainer.classList.add(
|
||||||
|
"pdf-actions_insert-file-button-container",
|
||||||
|
rightDirection,
|
||||||
|
`align-center-${rightDirection}`);
|
||||||
|
|
||||||
|
const insertFileButtonRight = document.createElement('button');
|
||||||
|
insertFileButtonRight.classList.add("btn", "btn-primary", "pdf-actions_insert-file-button");
|
||||||
|
insertFileButtonRight.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-plus" viewBox="0 0 16 16">
|
||||||
|
<path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z"/>
|
||||||
|
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
|
||||||
|
insertFileButtonRight</svg>`;
|
||||||
|
insertFileButtonRight.onclick = () => addPdfs();
|
||||||
|
insertFileButtonRightContainer.appendChild(insertFileButtonRight);
|
||||||
|
|
||||||
|
div.appendChild(insertFileButtonRightContainer);
|
||||||
|
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PdfActionsManager;
|
||||||
206
src/main/resources/static/js/multitool/PdfContainer.js
Normal file
206
src/main/resources/static/js/multitool/PdfContainer.js
Normal file
|
|
@ -0,0 +1,206 @@
|
||||||
|
class PdfContainer {
|
||||||
|
fileName;
|
||||||
|
pagesContainer;
|
||||||
|
pagesContainerWrapper;
|
||||||
|
pdfAdapters;
|
||||||
|
|
||||||
|
constructor(id, wrapperId, pdfAdapters) {
|
||||||
|
this.fileName = null;
|
||||||
|
this.pagesContainer = document.getElementById(id)
|
||||||
|
this.pagesContainerWrapper = document.getElementById(wrapperId);
|
||||||
|
this.movePageTo = this.movePageTo.bind(this);
|
||||||
|
this.addPdfs = this.addPdfs.bind(this);
|
||||||
|
this.rotateElement = this.rotateElement.bind(this);
|
||||||
|
this.rotateAll = this.rotateAll.bind(this);
|
||||||
|
this.exportPdf = this.exportPdf.bind(this);
|
||||||
|
|
||||||
|
this.pdfAdapters = pdfAdapters;
|
||||||
|
|
||||||
|
this.pdfAdapters.forEach(adapter => {
|
||||||
|
adapter.setActions({
|
||||||
|
movePageTo: this.movePageTo,
|
||||||
|
addPdfs: this.addPdfs,
|
||||||
|
rotateElement: this.rotateElement,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
window.addPdfs = this.addPdfs;
|
||||||
|
window.exportPdf = this.exportPdf;
|
||||||
|
window.rotateAll = this.rotateAll;
|
||||||
|
}
|
||||||
|
|
||||||
|
movePageTo(startElement, endElement, scrollTo = false) {
|
||||||
|
const childArray = Array.from(this.pagesContainer.childNodes);
|
||||||
|
const startIndex = childArray.indexOf(startElement);
|
||||||
|
const endIndex = childArray.indexOf(endElement);
|
||||||
|
this.pagesContainer.removeChild(startElement);
|
||||||
|
if(!endElement) {
|
||||||
|
this.pagesContainer.append(startElement);
|
||||||
|
} else {
|
||||||
|
this.pagesContainer.insertBefore(startElement, endElement);
|
||||||
|
}
|
||||||
|
|
||||||
|
if(scrollTo) {
|
||||||
|
const { width } = startElement.getBoundingClientRect();
|
||||||
|
const vector = (endIndex !== -1 && startIndex > endIndex)
|
||||||
|
? 0-width
|
||||||
|
: width;
|
||||||
|
|
||||||
|
this.pagesContainerWrapper.scroll({
|
||||||
|
left: this.pagesContainerWrapper.scrollLeft + vector,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
addPdfs(nextSiblingElement) {
|
||||||
|
var input = document.createElement('input');
|
||||||
|
input.type = 'file';
|
||||||
|
input.multiple = true;
|
||||||
|
input.setAttribute("accept", "application/pdf");
|
||||||
|
|
||||||
|
input.onchange = async(e) => {
|
||||||
|
const files = e.target.files;
|
||||||
|
this.fileName = files[0].name;
|
||||||
|
for (var i=0; i < files.length; i++) {
|
||||||
|
this.addPdfFile(files[i], nextSiblingElement);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.querySelectorAll(".enable-on-file").forEach(element => {
|
||||||
|
element.disabled = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
input.click();
|
||||||
|
}
|
||||||
|
|
||||||
|
rotateElement(element, deg) {
|
||||||
|
var lastTransform = element.style.rotate;
|
||||||
|
if (!lastTransform) {
|
||||||
|
lastTransform = "0";
|
||||||
|
}
|
||||||
|
const lastAngle = parseInt(lastTransform.replace(/[^\d-]/g, ''));
|
||||||
|
const newAngle = lastAngle + deg;
|
||||||
|
|
||||||
|
element.style.rotate = newAngle + "deg";
|
||||||
|
}
|
||||||
|
|
||||||
|
async addPdfFile(file, nextSiblingElement) {
|
||||||
|
const { renderer, pdfDocument } = await this.loadFile(file);
|
||||||
|
|
||||||
|
for (var i=0; i < renderer.pageCount; i++) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
|
||||||
|
div.classList.add("page-container");
|
||||||
|
|
||||||
|
var img = document.createElement('img');
|
||||||
|
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);
|
||||||
|
|
||||||
|
this.pdfAdapters.forEach((adapter) => {
|
||||||
|
adapter.adapt?.(div)
|
||||||
|
})
|
||||||
|
if (nextSiblingElement) {
|
||||||
|
this.pagesContainer.insertBefore(div, nextSiblingElement);
|
||||||
|
} else {
|
||||||
|
this.pagesContainer.appendChild(div);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async loadFile(file) {
|
||||||
|
var objectUrl = URL.createObjectURL(file);
|
||||||
|
var pdfDocument = await this.toPdfLib(objectUrl);
|
||||||
|
var renderer = await this.toRenderer(objectUrl);
|
||||||
|
return { renderer, pdfDocument };
|
||||||
|
}
|
||||||
|
|
||||||
|
async toRenderer(objectUrl) {
|
||||||
|
const pdf = await pdfjsLib.getDocument(objectUrl).promise;
|
||||||
|
return {
|
||||||
|
document: pdf,
|
||||||
|
pageCount: pdf.numPages,
|
||||||
|
renderPage: async function(pageIdx) {
|
||||||
|
const page = await this.document.getPage(pageIdx+1);
|
||||||
|
|
||||||
|
const canvas = document.createElement("canvas");
|
||||||
|
|
||||||
|
// set the canvas size to the size of the page
|
||||||
|
if (page.rotate == 90 || page.rotate == 270) {
|
||||||
|
canvas.width = page.view[3];
|
||||||
|
canvas.height = page.view[2];
|
||||||
|
} else {
|
||||||
|
canvas.width = page.view[2];
|
||||||
|
canvas.height = page.view[3];
|
||||||
|
}
|
||||||
|
|
||||||
|
// render the page onto the canvas
|
||||||
|
var renderContext = {
|
||||||
|
canvasContext: canvas.getContext("2d"),
|
||||||
|
viewport: page.getViewport({ scale: 1 })
|
||||||
|
};
|
||||||
|
|
||||||
|
await page.render(renderContext).promise;
|
||||||
|
return canvas.toDataURL();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
async toPdfLib(objectUrl) {
|
||||||
|
const existingPdfBytes = await fetch(objectUrl).then(res => res.arrayBuffer());
|
||||||
|
const pdfDoc = await PDFLib.PDFDocument.load(existingPdfBytes);
|
||||||
|
return pdfDoc;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
rotateAll(deg) {
|
||||||
|
for (var i=0; i<this.pagesContainer.childNodes.length; i++) {
|
||||||
|
const img = this.pagesContainer.childNodes[i].querySelector("img");
|
||||||
|
if (!img) continue;
|
||||||
|
this.rotateElement(img, deg)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async exportPdf() {
|
||||||
|
const pdfDoc = await PDFLib.PDFDocument.create();
|
||||||
|
for (var i=0; i<this.pagesContainer.childNodes.length; i++) {
|
||||||
|
const img = this.pagesContainer.childNodes[i].querySelector("img");
|
||||||
|
if (!img) continue;
|
||||||
|
const pages = await pdfDoc.copyPages(img.doc, [img.pageIdx])
|
||||||
|
const page = pages[0];
|
||||||
|
|
||||||
|
const rotation = img.style.rotate;
|
||||||
|
if (rotation) {
|
||||||
|
const rotationAngle = parseInt(rotation.replace(/[^\d-]/g, ''));
|
||||||
|
page.setRotation(PDFLib.degrees(page.getRotation().angle + rotationAngle))
|
||||||
|
}
|
||||||
|
|
||||||
|
pdfDoc.addPage(page);
|
||||||
|
}
|
||||||
|
const pdfBytes = await pdfDoc.save();
|
||||||
|
const pdfBlob = new Blob([pdfBytes], { type: 'application/pdf' });
|
||||||
|
const url = URL.createObjectURL(pdfBlob);
|
||||||
|
const downloadOption = localStorage.getItem('downloadOption');
|
||||||
|
|
||||||
|
if (downloadOption === 'sameWindow') {
|
||||||
|
// Open the file in the same window
|
||||||
|
window.location.href = url;
|
||||||
|
} else if (downloadOption === 'newWindow') {
|
||||||
|
// Open the file in a new window
|
||||||
|
window.open(url, '_blank');
|
||||||
|
} else {
|
||||||
|
// Download the file
|
||||||
|
const downloadLink = document.createElement('a');
|
||||||
|
downloadLink.href = url;
|
||||||
|
downloadLink.download = this.fileName ? this.fileName : 'managed.pdf';
|
||||||
|
downloadLink.click();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PdfContainer;
|
||||||
35
src/main/resources/static/js/multitool/horizontalScroll.js
Normal file
35
src/main/resources/static/js/multitool/horizontalScroll.js
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
const scrollDivHorizontally = (id) => {
|
||||||
|
var scrollDelta = 0; // variable to store the accumulated scroll delta
|
||||||
|
var isScrolling = false; // variable to track if scroll is already in progress
|
||||||
|
const divToScrollHorizontally = document.getElementById(id)
|
||||||
|
function scrollLoop() {
|
||||||
|
// Scroll the div horizontally by a fraction of the accumulated scroll delta
|
||||||
|
divToScrollHorizontally.scrollLeft += scrollDelta * 0.1;
|
||||||
|
|
||||||
|
// Reduce the accumulated scroll delta by a fraction
|
||||||
|
scrollDelta *= 0.9;
|
||||||
|
|
||||||
|
// If scroll delta is still significant, continue the scroll loop
|
||||||
|
if (Math.abs(scrollDelta) > 0.1) {
|
||||||
|
requestAnimationFrame(scrollLoop);
|
||||||
|
} else {
|
||||||
|
isScrolling = false; // Reset scroll in progress flag
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
divToScrollHorizontally.addEventListener("wheel", function(e) {
|
||||||
|
e.preventDefault(); // prevent default mousewheel behavior
|
||||||
|
|
||||||
|
// Accumulate the horizontal scroll delta
|
||||||
|
scrollDelta -= e.deltaX || e.wheelDeltaX || -e.deltaY || -e.wheelDeltaY;
|
||||||
|
|
||||||
|
// If scroll is not already in progress, start the scroll loop
|
||||||
|
if (!isScrolling) {
|
||||||
|
isScrolling = true;
|
||||||
|
requestAnimationFrame(scrollLoop);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export default scrollDivHorizontally;
|
||||||
|
|
@ -3,7 +3,6 @@
|
||||||
|
|
||||||
<th:block th:insert="~{fragments/common :: head(title=#{multiTool.title})}"></th:block>
|
<th:block th:insert="~{fragments/common :: head(title=#{multiTool.title})}"></th:block>
|
||||||
|
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="image-highlighter"></div>
|
<div id="image-highlighter"></div>
|
||||||
<div id="page-container">
|
<div id="page-container">
|
||||||
|
|
@ -53,390 +52,40 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div th:insert="~{fragments/footer.html :: footer}"></div>
|
<div th:insert="~{fragments/footer.html :: footer}"></div>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="drag-container"></div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
import PdfContainer from '/js/multitool/PdfContainer.js';
|
||||||
|
import DragDropManager from "/js/multitool/DragDropManager.js";
|
||||||
|
import scrollDivHorizontally from "/js/multitool/horizontalScroll.js";
|
||||||
|
import ImageHighlighter from "/js/multitool/ImageHighlighter.js";
|
||||||
|
import PdfActionsManager from '/js/multitool/PdfActionsManager.js';
|
||||||
|
|
||||||
<script>
|
// enables drag and drop
|
||||||
var fileName = null;
|
const dragDropManager = new DragDropManager('drag-container', 'pages-container');
|
||||||
|
// enables image highlight on click
|
||||||
|
const imageHighlighter = new ImageHighlighter('image-highlighter');
|
||||||
|
// enables the default action buttons on each pdf
|
||||||
|
const pdfActionsManager = new PdfActionsManager('pages-container');
|
||||||
|
|
||||||
/**
|
// Scroll the wrapper horizontally
|
||||||
*
|
scrollDivHorizontally('pages-container-wrapper');
|
||||||
* Manage Page container scroll
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
const pagesContainer = document.getElementById("pages-container");
|
|
||||||
const pagesContainerWrapper = document.getElementById("pages-container-wrapper")
|
|
||||||
|
|
||||||
const pageDirection = document.documentElement.getAttribute("lang-direction");
|
// Automatically exposes rotateAll, addPdfs and exportPdf to the window for the global buttons.
|
||||||
|
const pdfContainer = new PdfContainer(
|
||||||
var scrollDelta = 0; // variable to store the accumulated scroll delta
|
'pages-container',
|
||||||
var isScrolling = false; // variable to track if scroll is already in progress
|
'pages-container-wrapper',
|
||||||
|
[
|
||||||
pagesContainerWrapper.addEventListener("wheel", function(e) {
|
dragDropManager,
|
||||||
e.preventDefault(); // prevent default mousewheel behavior
|
imageHighlighter,
|
||||||
|
pdfActionsManager,
|
||||||
// Accumulate the horizontal scroll delta
|
]
|
||||||
scrollDelta -= e.deltaX || e.wheelDeltaX || -e.deltaY || -e.wheelDeltaY;
|
)
|
||||||
|
|
||||||
// If scroll is not already in progress, start the scroll loop
|
|
||||||
if (!isScrolling) {
|
|
||||||
isScrolling = true;
|
|
||||||
requestAnimationFrame(scrollLoop);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function scrollLoop() {
|
|
||||||
// Scroll the div horizontally by a fraction of the accumulated scroll delta
|
|
||||||
pagesContainerWrapper.scrollLeft += scrollDelta * 0.1;
|
|
||||||
|
|
||||||
// Reduce the accumulated scroll delta by a fraction
|
|
||||||
scrollDelta *= 0.9;
|
|
||||||
|
|
||||||
// If scroll delta is still significant, continue the scroll loop
|
|
||||||
if (Math.abs(scrollDelta) > 0.1) {
|
|
||||||
requestAnimationFrame(scrollLoop);
|
|
||||||
} else {
|
|
||||||
isScrolling = false; // Reset scroll in progress flag
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
* Manage image highlighter clearing
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
const imageHighlighter = document.getElementById('image-highlighter');
|
|
||||||
imageHighlighter.onclick = () => {
|
|
||||||
imageHighlighter.childNodes.forEach((child) => {
|
|
||||||
child.classList.add('remove');
|
|
||||||
setTimeout(() => {
|
|
||||||
imageHighlighter.removeChild(child);
|
|
||||||
}, 100)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const imageHighlightCallback = (highlightEvent) => {
|
|
||||||
var bigImg = document.createElement('img');
|
|
||||||
bigImg.onclick = (imageClickEvent) => {
|
|
||||||
// This prevents the highlighter's onClick from closing the image when clicking on the image
|
|
||||||
// instead of next to it.
|
|
||||||
imageClickEvent.preventDefault();
|
|
||||||
imageClickEvent.stopPropagation();
|
|
||||||
};
|
|
||||||
bigImg.src = highlightEvent.target.src;
|
|
||||||
imageHighlighter.appendChild(bigImg);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
* Methods for managing PDFs
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
function addPdfs(nextSiblingElement) {
|
|
||||||
var input = document.createElement('input');
|
|
||||||
input.type = 'file';
|
|
||||||
input.multiple = true;
|
|
||||||
input.setAttribute("accept", "application/pdf");
|
|
||||||
|
|
||||||
input.onchange = async(e) => {
|
|
||||||
const files = e.target.files;
|
|
||||||
fileName = files[0].name;
|
|
||||||
for (var i=0; i < files.length; i++) {
|
|
||||||
addPdfFile(files[i], nextSiblingElement);
|
|
||||||
}
|
|
||||||
|
|
||||||
document.querySelectorAll(".enable-on-file").forEach(element => {
|
|
||||||
element.disabled = false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
input.click();
|
|
||||||
}
|
|
||||||
|
|
||||||
async function addPdfFile(file, nextSiblingElement) {
|
|
||||||
const { renderer, pdfDocument } = await loadFile(file);
|
|
||||||
|
|
||||||
const moveUpButtonCallback = e => {
|
|
||||||
var imgContainer = e.target;
|
|
||||||
const startingPosition = imgContainer.getBoundingClientRect();
|
|
||||||
while (!imgContainer.classList.contains("page-container")) {
|
|
||||||
imgContainer = imgContainer.parentNode;
|
|
||||||
}
|
|
||||||
const sibling = imgContainer.previousSibling;
|
|
||||||
if (sibling) {
|
|
||||||
pagesContainer.removeChild(imgContainer);
|
|
||||||
pagesContainer.insertBefore(imgContainer, sibling);
|
|
||||||
|
|
||||||
const { width } = imgContainer.getBoundingClientRect();
|
|
||||||
pagesContainerWrapper.scroll({
|
|
||||||
left: pagesContainerWrapper.scrollLeft - width,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const moveDownButtonCallback = e => {
|
|
||||||
var imgContainer = e.target;
|
|
||||||
while (!imgContainer.classList.contains("page-container")) {
|
|
||||||
imgContainer = imgContainer.parentNode;
|
|
||||||
}
|
|
||||||
const sibling = imgContainer.nextSibling;
|
|
||||||
if (sibling) {
|
|
||||||
pagesContainer.removeChild(imgContainer);
|
|
||||||
if (sibling.nextSibling) {
|
|
||||||
pagesContainer.insertBefore(imgContainer, sibling.nextSibling);
|
|
||||||
} else {
|
|
||||||
pagesContainer.appendChild(imgContainer)
|
|
||||||
}
|
|
||||||
const { width } = imgContainer.getBoundingClientRect();
|
|
||||||
pagesContainerWrapper.scroll({
|
|
||||||
left: pagesContainerWrapper.scrollLeft + width,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const rotateCCWButtonCallback = e => {
|
|
||||||
var imgContainer = e.target;
|
|
||||||
while (!imgContainer.classList.contains("page-container")) {
|
|
||||||
imgContainer = imgContainer.parentNode;
|
|
||||||
}
|
|
||||||
const img = imgContainer.querySelector("img");
|
|
||||||
|
|
||||||
rotateElement(img, -90)
|
|
||||||
};
|
|
||||||
const rotateCWButtonCallback = e => {
|
|
||||||
var imgContainer = e.target;
|
|
||||||
while (!imgContainer.classList.contains("page-container")) {
|
|
||||||
imgContainer = imgContainer.parentNode;
|
|
||||||
}
|
|
||||||
const img = imgContainer.querySelector("img");
|
|
||||||
|
|
||||||
rotateElement(img, 90)
|
|
||||||
};
|
|
||||||
const deletePageButtonCallback = e => {
|
|
||||||
var imgContainer = e.target;
|
|
||||||
while (!imgContainer.classList.contains("page-container")) {
|
|
||||||
imgContainer = imgContainer.parentNode;
|
|
||||||
}
|
|
||||||
pagesContainer.removeChild(imgContainer);
|
|
||||||
};
|
|
||||||
const insertFileButtonCallback = e => {
|
|
||||||
var imgContainer = e.target;
|
|
||||||
while (!imgContainer.classList.contains("page-container")) {
|
|
||||||
imgContainer = imgContainer.parentNode;
|
|
||||||
}
|
|
||||||
addPdfs(imgContainer)
|
|
||||||
};
|
|
||||||
|
|
||||||
for (var i=0; i < renderer.pageCount; i++) {
|
|
||||||
const div = document.createElement('div');
|
|
||||||
div.classList.add("page-container");
|
|
||||||
|
|
||||||
var img = document.createElement('img');
|
|
||||||
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);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Making pages larger when clicking on them
|
|
||||||
*/
|
|
||||||
img.addEventListener('click',imageHighlightCallback)
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Rendering the various buttons to manipulate and move pdf pages
|
|
||||||
*/
|
|
||||||
|
|
||||||
const leftDirection = pageDirection === 'rtl' ? 'right' : 'left'
|
|
||||||
const rightDirection = pageDirection === 'rtl' ? 'left' : 'right'
|
|
||||||
const buttonContainer = document.createElement('div');
|
|
||||||
buttonContainer.classList.add("button-container");
|
|
||||||
|
|
||||||
const moveUp = document.createElement('button');
|
|
||||||
moveUp.classList.add("move-left-button","btn", "btn-secondary");
|
|
||||||
moveUp.innerHTML = `<i class="bi bi-arrow-${leftDirection}-short"></i>`;
|
|
||||||
moveUp.onclick = moveUpButtonCallback;
|
|
||||||
buttonContainer.appendChild(moveUp);
|
|
||||||
|
|
||||||
const moveDown = document.createElement('button');
|
|
||||||
moveDown.classList.add("move-right-button","btn", "btn-secondary");
|
|
||||||
moveDown.innerHTML = `<i class="bi bi-arrow-${rightDirection}-short"></i>`;
|
|
||||||
moveDown.onclick = moveDownButtonCallback;
|
|
||||||
buttonContainer.appendChild(moveDown);
|
|
||||||
|
|
||||||
const rotateCCW = document.createElement('button');
|
|
||||||
rotateCCW.classList.add("btn", "btn-secondary");
|
|
||||||
rotateCCW.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
|
|
||||||
<path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z" />
|
|
||||||
<path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z" />
|
|
||||||
</svg>`;
|
|
||||||
rotateCCW.onclick = rotateCCWButtonCallback;
|
|
||||||
buttonContainer.appendChild(rotateCCW);
|
|
||||||
|
|
||||||
const rotateCW = document.createElement('button');
|
|
||||||
rotateCW.classList.add("btn", "btn-secondary");
|
|
||||||
rotateCW.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
|
|
||||||
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
|
|
||||||
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
|
|
||||||
</svg>`;
|
|
||||||
rotateCW.onclick = rotateCWButtonCallback;
|
|
||||||
buttonContainer.appendChild(rotateCW);
|
|
||||||
|
|
||||||
const deletePage = document.createElement('button');
|
|
||||||
deletePage.classList.add("btn", "btn-danger");
|
|
||||||
deletePage.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
|
|
||||||
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z"/>
|
|
||||||
<path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z"/>
|
|
||||||
</svg>`;
|
|
||||||
deletePage.onclick = deletePageButtonCallback;
|
|
||||||
buttonContainer.appendChild(deletePage);
|
|
||||||
|
|
||||||
div.appendChild(buttonContainer);
|
|
||||||
|
|
||||||
const insertFileButtonContainer = document.createElement('div');
|
|
||||||
|
|
||||||
insertFileButtonContainer.classList.add(
|
|
||||||
"insert-file-button-container",
|
|
||||||
leftDirection,
|
|
||||||
`align-center-${leftDirection}`);
|
|
||||||
|
|
||||||
const insertFileButton = document.createElement('button');
|
|
||||||
insertFileButton.classList.add("btn", "btn-primary", "insert-file-button");
|
|
||||||
insertFileButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-plus" viewBox="0 0 16 16">
|
|
||||||
<path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z"/>
|
|
||||||
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
|
|
||||||
</svg>`;
|
|
||||||
insertFileButton.onclick = insertFileButtonCallback;
|
|
||||||
insertFileButtonContainer.appendChild(insertFileButton);
|
|
||||||
|
|
||||||
div.appendChild(insertFileButtonContainer);
|
|
||||||
|
|
||||||
// add this button to every element, but only show it on the last one :D
|
|
||||||
const insertFileButtonRightContainer = document.createElement('div');
|
|
||||||
insertFileButtonRightContainer.classList.add(
|
|
||||||
"insert-file-button-container",
|
|
||||||
rightDirection,
|
|
||||||
`align-center-${rightDirection}`);
|
|
||||||
|
|
||||||
const insertFileButtonRight = document.createElement('button');
|
|
||||||
insertFileButtonRight.classList.add("btn", "btn-primary", "insert-file-button");
|
|
||||||
insertFileButtonRight.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-plus" viewBox="0 0 16 16">
|
|
||||||
<path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z"/>
|
|
||||||
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
|
|
||||||
insertFileButtonRight</svg>`;
|
|
||||||
insertFileButtonRight.onclick = () => addPdfs();
|
|
||||||
insertFileButtonRightContainer.appendChild(insertFileButtonRight);
|
|
||||||
|
|
||||||
div.appendChild(insertFileButtonRightContainer);
|
|
||||||
|
|
||||||
if (nextSiblingElement) {
|
|
||||||
pagesContainer.insertBefore(div, nextSiblingElement);
|
|
||||||
} else {
|
|
||||||
pagesContainer.appendChild(div);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function rotateElement(element, deg) {
|
|
||||||
var lastTransform = element.style.rotate;
|
|
||||||
if (!lastTransform) {
|
|
||||||
lastTransform = "0";
|
|
||||||
}
|
|
||||||
const lastAngle = parseInt(lastTransform.replace(/[^\d-]/g, ''));
|
|
||||||
const newAngle = lastAngle + deg;
|
|
||||||
|
|
||||||
element.style.rotate = newAngle + "deg";
|
|
||||||
}
|
|
||||||
|
|
||||||
function rotateAll(deg) {
|
|
||||||
for (var i=0; i<pagesContainer.childNodes.length; i++) {
|
|
||||||
const img = pagesContainer.childNodes[i].querySelector("img");
|
|
||||||
if (!img) continue;
|
|
||||||
rotateElement(img, deg)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function exportPdf() {
|
|
||||||
const pdfDoc = await PDFLib.PDFDocument.create();
|
|
||||||
for (var i=0; i<pagesContainer.childNodes.length; i++) {
|
|
||||||
const img = pagesContainer.childNodes[i].querySelector("img");
|
|
||||||
if (!img) continue;
|
|
||||||
const pages = await pdfDoc.copyPages(img.doc, [img.pageIdx])
|
|
||||||
const page = pages[0];
|
|
||||||
|
|
||||||
const rotation = img.style.rotate;
|
|
||||||
if (rotation) {
|
|
||||||
const rotationAngle = parseInt(rotation.replace(/[^\d-]/g, ''));
|
|
||||||
page.setRotation(PDFLib.degrees(page.getRotation().angle + rotationAngle))
|
|
||||||
}
|
|
||||||
|
|
||||||
pdfDoc.addPage(page);
|
|
||||||
}
|
|
||||||
const pdfBytes = await pdfDoc.save();
|
|
||||||
const pdfBlob = new Blob([pdfBytes], { type: 'application/pdf' });
|
|
||||||
const url = URL.createObjectURL(pdfBlob);
|
|
||||||
const downloadOption = localStorage.getItem('downloadOption');
|
|
||||||
|
|
||||||
if (downloadOption === 'sameWindow') {
|
|
||||||
// Open the file in the same window
|
|
||||||
window.location.href = url;
|
|
||||||
} else if (downloadOption === 'newWindow') {
|
|
||||||
// Open the file in a new window
|
|
||||||
window.open(url, '_blank');
|
|
||||||
} else {
|
|
||||||
// Download the file
|
|
||||||
const downloadLink = document.createElement('a');
|
|
||||||
downloadLink.href = url;
|
|
||||||
downloadLink.download = fileName ? fileName : 'managed.pdf';
|
|
||||||
downloadLink.click();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadFile(file) {
|
|
||||||
var objectUrl = URL.createObjectURL(file);
|
|
||||||
var pdfDocument = await toPdfLib(objectUrl);
|
|
||||||
var renderer = await toRenderer(objectUrl);
|
|
||||||
return { renderer, pdfDocument };
|
|
||||||
}
|
|
||||||
async function toPdfLib(objectUrl) {
|
|
||||||
const existingPdfBytes = await fetch(objectUrl).then(res => res.arrayBuffer());
|
|
||||||
const pdfDoc = await PDFLib.PDFDocument.load(existingPdfBytes);
|
|
||||||
return pdfDoc;
|
|
||||||
}
|
|
||||||
async function toRenderer(objectUrl) {
|
|
||||||
const pdf = await pdfjsLib.getDocument(objectUrl).promise;
|
|
||||||
return {
|
|
||||||
document: pdf,
|
|
||||||
pageCount: pdf.numPages,
|
|
||||||
renderPage: async function(pageIdx) {
|
|
||||||
const page = await this.document.getPage(pageIdx+1);
|
|
||||||
|
|
||||||
const canvas = document.createElement("canvas");
|
|
||||||
|
|
||||||
// set the canvas size to the size of the page
|
|
||||||
if (page.rotate == 90 || page.rotate == 270) {
|
|
||||||
canvas.width = page.view[3];
|
|
||||||
canvas.height = page.view[2];
|
|
||||||
} else {
|
|
||||||
canvas.width = page.view[2];
|
|
||||||
canvas.height = page.view[3];
|
|
||||||
}
|
|
||||||
|
|
||||||
// render the page onto the canvas
|
|
||||||
var renderContext = {
|
|
||||||
canvasContext: canvas.getContext("2d"),
|
|
||||||
viewport: page.getViewport({ scale: 1 })
|
|
||||||
};
|
|
||||||
|
|
||||||
await page.render(renderContext).promise;
|
|
||||||
return canvas.toDataURL();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
@ -444,6 +93,7 @@
|
||||||
max-width: 95vw;
|
max-width: 95vw;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#global-buttons-container {
|
#global-buttons-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
|
|
@ -518,19 +168,21 @@
|
||||||
|
|
||||||
.page-container {
|
.page-container {
|
||||||
height:250px;
|
height:250px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column-reverse;
|
flex-direction: column-reverse;
|
||||||
aspect-ratio: 1;
|
aspect-ratio: 1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
transition: width 1s linear;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-container img {
|
.page-container img {
|
||||||
max-width: calc(100% - 15px);
|
/* max-width: calc(100% - 15px); */
|
||||||
max-height: calc(100% - 15px);
|
max-height: calc(100% - 15px);
|
||||||
|
max-width: 237px;
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
|
|
@ -541,136 +193,6 @@
|
||||||
transition: rotate 0.3s;
|
transition: rotate 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-container .button-container {
|
|
||||||
z-index: 2;
|
|
||||||
display:flex;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.1s linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-container:hover .button-container {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-container .button-container > * {
|
|
||||||
padding: 0.25rem 0.5rem;
|
|
||||||
margin: 3px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.page-container svg {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
}
|
|
||||||
.page-container:nth-child(1) .move-left-button {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.page-container:last-child .move-right-button {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-image {
|
|
||||||
cursor:pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* "insert pdf" buttons that appear on the right when hover */
|
|
||||||
.insert-file-button-container {
|
|
||||||
translate: 0 -50%;
|
|
||||||
width: 80px;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
z-index: 1;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.insert-file-button-container.left {
|
|
||||||
left: -20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.insert-file-button-container.right {
|
|
||||||
right: -20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
html[lang-direction=ltr] .insert-file-button-container.right {
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
html[lang-direction=rtl] .insert-file-button-container.left {
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.insert-file-button-container.left .insert-file-button {
|
|
||||||
left: 0;
|
|
||||||
translate: 0 -50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.insert-file-button-container.right .insert-file-button {
|
|
||||||
right: 0;
|
|
||||||
translate: 0 -50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
html[lang-direction=ltr] .page-container:last-child > .insert-file-button-container.right {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
html[lang-direction=rtl] .page-container:last-child > .insert-file-button-container.left {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.insert-file-button-container:hover {
|
|
||||||
opacity: 1;
|
|
||||||
transition: opacity 0.05s;
|
|
||||||
}
|
|
||||||
.insert-file-button {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
right: 50%;
|
|
||||||
translate: 50% -50%;
|
|
||||||
aspect-ratio: 1;
|
|
||||||
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 a new issue