HTML, CSS, JS and JAVA corrections (#810)
* CSS corrections * HTML corrections * JS corrections * JAVA corrections * remove tab * CSS corrections 2 * JS corrections 2 * back to the roots * max-linie 127 * add slash hr|br * return bootstrap-icons.css * return bootstrap-icons.min.css * return bootstrap.min.css * Update bootstrap-icons.css * Update bootstrap-icons.min.css * Update bootstrap-icons.min.css * Update bootstrap.min.css * CSS corrections * HTML corrections * JS corrections * JAVA corrections * remove tab * CSS corrections 2 * JS corrections 2 * back to the roots * max-linie 127 * add slash hr|br * return bootstrap-icons.css * Update bootstrap-icons.css * Bootstrap CSS * Update prism.css
This commit is contained in:
Ludy
@@ -1,125 +1,123 @@
|
||||
class DragDropManager {
|
||||
dragContainer;
|
||||
wrapper;
|
||||
pageDirection;
|
||||
movePageTo;
|
||||
pageDragging;
|
||||
draggelEl;
|
||||
draggedImageEl;
|
||||
hoveredEl;
|
||||
endInsertionElement;
|
||||
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;
|
||||
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'
|
||||
var styleElement = document.createElement("link");
|
||||
styleElement.rel = "stylesheet";
|
||||
styleElement.href = "css/dragdrop.css";
|
||||
|
||||
document.head.appendChild(styleElement);
|
||||
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">
|
||||
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;
|
||||
</svg>`;
|
||||
this.endInsertionElement = div;
|
||||
|
||||
this.startDraggingPage = this.startDraggingPage.bind(this);
|
||||
this.onDragEl = this.onDragEl.bind(this);
|
||||
this.stopDraggingPage = this.stopDraggingPage.bind(this);
|
||||
this.startDraggingPage = this.startDraggingPage.bind(this);
|
||||
this.onDragEl = this.onDragEl.bind(this);
|
||||
this.stopDraggingPage = this.stopDraggingPage.bind(this);
|
||||
|
||||
this.adapt(div);
|
||||
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.visibility = "hidden";
|
||||
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.visibility = "visible";
|
||||
this.draggedImageEl.style.left = `${clientX}px`;
|
||||
this.draggedImageEl.style.top = `${clientY}px`;
|
||||
}
|
||||
}
|
||||
|
||||
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.visibility = 'hidden';
|
||||
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);
|
||||
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;
|
||||
}
|
||||
|
||||
onDragEl(mouseEvent) {
|
||||
const { clientX, clientY } = mouseEvent;
|
||||
if(this.draggedImageEl) {
|
||||
this.draggedImageEl.style.visibility = 'visible';
|
||||
this.draggedImageEl.style.left = `${clientX}px`;
|
||||
this.draggedImageEl.style.top = `${clientY}px`;
|
||||
}
|
||||
if (this.hoveredEl === this.endInsertionElement) {
|
||||
this.movePageTo(this.draggedEl);
|
||||
return;
|
||||
}
|
||||
this.movePageTo(this.draggedEl, this.hoveredEl);
|
||||
}
|
||||
|
||||
setActions({ movePageTo }) {
|
||||
this.movePageTo = movePageTo;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
adapt(div) {
|
||||
const onDragStart = () => {
|
||||
this.startDraggingPage(div);
|
||||
};
|
||||
|
||||
setActions({ movePageTo }) {
|
||||
this.movePageTo = movePageTo;
|
||||
}
|
||||
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");
|
||||
};
|
||||
|
||||
adapt(div) {
|
||||
const onDragStart = () => {
|
||||
this.startDraggingPage(div);
|
||||
}
|
||||
div.addEventListener("dragstart", onDragStart);
|
||||
div.addEventListener("mouseenter", onMouseEnter);
|
||||
div.addEventListener("mouseleave", onMouseLeave);
|
||||
|
||||
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;
|
||||
}
|
||||
return div;
|
||||
}
|
||||
}
|
||||
|
||||
export default DragDropManager;
|
||||
|
||||
@@ -1,46 +1,46 @@
|
||||
class ImageHiglighter {
|
||||
imageHighlighter;
|
||||
constructor(id) {
|
||||
this.imageHighlighter = document.getElementById(id);
|
||||
this.imageHighlightCallback = this.imageHighlightCallback.bind(this);
|
||||
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'
|
||||
var styleElement = document.createElement("link");
|
||||
styleElement.rel = "stylesheet";
|
||||
styleElement.href = "css/imageHighlighter.css";
|
||||
|
||||
document.head.appendChild(styleElement);
|
||||
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);
|
||||
this.imageHighlighter.onclick = () => {
|
||||
this.imageHighlighter.childNodes.forEach((child) => {
|
||||
child.classList.add("remove");
|
||||
setTimeout(() => {
|
||||
this.imageHighlighter.removeChild(child);
|
||||
}, 100);
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
setActions() {
|
||||
// not needed in this case
|
||||
}
|
||||
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);
|
||||
}
|
||||
|
||||
adapt(div) {
|
||||
const img = div.querySelector('.page-image');
|
||||
img.addEventListener('click', this.imageHighlightCallback)
|
||||
return div;
|
||||
}
|
||||
setActions() {
|
||||
// not needed in this case
|
||||
}
|
||||
|
||||
adapt(div) {
|
||||
const img = div.querySelector(".page-image");
|
||||
img.addEventListener("click", this.imageHighlightCallback);
|
||||
return div;
|
||||
}
|
||||
}
|
||||
|
||||
export default ImageHiglighter;
|
||||
export default ImageHiglighter;
|
||||
|
||||
@@ -1,198 +1,200 @@
|
||||
class PdfActionsManager {
|
||||
pageDirection;
|
||||
pagesContainer;
|
||||
pageDirection;
|
||||
pagesContainer;
|
||||
|
||||
constructor(id) {
|
||||
this.pagesContainer = document.getElementById(id);
|
||||
this.pageDirection = document.documentElement.getAttribute("lang-direction");
|
||||
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'
|
||||
var styleElement = document.createElement("link");
|
||||
styleElement.rel = "stylesheet";
|
||||
styleElement.href = "css/pdfActions.css";
|
||||
|
||||
document.head.appendChild(styleElement);
|
||||
document.head.appendChild(styleElement);
|
||||
}
|
||||
|
||||
getPageContainer(element) {
|
||||
var container = element;
|
||||
while (!container.classList.contains("page-container")) {
|
||||
container = container.parentNode;
|
||||
}
|
||||
return container;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
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");
|
||||
|
||||
rotateCCWButtonCallback(e) {
|
||||
var imgContainer = this.getPageContainer(e.target);
|
||||
const img = imgContainer.querySelector("img");
|
||||
this.rotateElement(img, -90);
|
||||
}
|
||||
|
||||
this.rotateElement(img, -90)
|
||||
};
|
||||
rotateCWButtonCallback(e) {
|
||||
var imgContainer = this.getPageContainer(e.target);
|
||||
const img = imgContainer.querySelector("img");
|
||||
|
||||
rotateCWButtonCallback(e) {
|
||||
var imgContainer = this.getPageContainer(e.target);
|
||||
const img = imgContainer.querySelector("img");
|
||||
this.rotateElement(img, 90);
|
||||
}
|
||||
|
||||
this.rotateElement(img, 90)
|
||||
};
|
||||
deletePageButtonCallback(e) {
|
||||
var imgContainer = this.getPageContainer(e.target);
|
||||
this.pagesContainer.removeChild(imgContainer);
|
||||
if (this.pagesContainer.childElementCount === 0) {
|
||||
const filenameInput = document.getElementById("filename-input");
|
||||
const filenameParagraph = document.getElementById("filename");
|
||||
const downloadBtn = document.getElementById("export-button");
|
||||
|
||||
deletePageButtonCallback(e) {
|
||||
var imgContainer = this.getPageContainer(e.target);
|
||||
this.pagesContainer.removeChild(imgContainer);
|
||||
if (this.pagesContainer.childElementCount === 0) {
|
||||
const filenameInput = document.getElementById('filename-input');
|
||||
const filenameParagraph = document.getElementById('filename');
|
||||
const downloadBtn = document.getElementById('export-button');
|
||||
filenameInput.disabled = true;
|
||||
filenameInput.value = "";
|
||||
filenameParagraph.innerText = "";
|
||||
|
||||
filenameInput.disabled = true;
|
||||
filenameInput.value = "";
|
||||
filenameParagraph.innerText = "";
|
||||
|
||||
downloadBtn.disabled = true;
|
||||
}
|
||||
};
|
||||
|
||||
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);
|
||||
downloadBtn.disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
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');
|
||||
insertFileButtonCallback(e) {
|
||||
var imgContainer = this.getPageContainer(e.target);
|
||||
this.addPdfs(imgContainer);
|
||||
}
|
||||
|
||||
buttonContainer.classList.add("pdf-actions_button-container", "hide-on-drag");
|
||||
setActions({ movePageTo, addPdfs, rotateElement }) {
|
||||
this.movePageTo = movePageTo;
|
||||
this.addPdfs = addPdfs;
|
||||
this.rotateElement = rotateElement;
|
||||
|
||||
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);
|
||||
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);
|
||||
}
|
||||
|
||||
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);
|
||||
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");
|
||||
|
||||
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">
|
||||
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);
|
||||
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">
|
||||
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);
|
||||
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">
|
||||
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);
|
||||
deletePage.onclick = this.deletePageButtonCallback;
|
||||
buttonContainer.appendChild(deletePage);
|
||||
|
||||
div.appendChild(buttonContainer);
|
||||
div.appendChild(buttonContainer);
|
||||
|
||||
const insertFileButtonContainer = document.createElement('div');
|
||||
const insertFileButtonContainer = document.createElement("div");
|
||||
|
||||
insertFileButtonContainer.classList.add(
|
||||
"pdf-actions_insert-file-button-container",
|
||||
leftDirection,
|
||||
`align-center-${leftDirection}`);
|
||||
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">
|
||||
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);
|
||||
insertFileButton.onclick = this.insertFileButtonCallback;
|
||||
insertFileButtonContainer.appendChild(insertFileButton);
|
||||
|
||||
div.appendChild(insertFileButtonContainer);
|
||||
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}`);
|
||||
// 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">
|
||||
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);
|
||||
insertFileButtonRight.onclick = () => addPdfs();
|
||||
insertFileButtonRightContainer.appendChild(insertFileButtonRight);
|
||||
|
||||
div.appendChild(insertFileButtonRightContainer);
|
||||
div.appendChild(insertFileButtonRightContainer);
|
||||
|
||||
const adaptPageNumber = (pageNumber, div) => {
|
||||
const pageNumberElement = document.createElement('span');
|
||||
pageNumberElement.classList.add('page-number');
|
||||
pageNumberElement.textContent = pageNumber;
|
||||
const adaptPageNumber = (pageNumber, div) => {
|
||||
const pageNumberElement = document.createElement("span");
|
||||
pageNumberElement.classList.add("page-number");
|
||||
pageNumberElement.textContent = pageNumber;
|
||||
|
||||
div.insertBefore(pageNumberElement, div.firstChild);
|
||||
};
|
||||
div.insertBefore(pageNumberElement, div.firstChild);
|
||||
};
|
||||
|
||||
div.addEventListener('mouseenter', () => {
|
||||
const pageNumber = Array.from(div.parentNode.children).indexOf(div) + 1;
|
||||
adaptPageNumber(pageNumber, div);
|
||||
});
|
||||
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);
|
||||
}
|
||||
});
|
||||
div.addEventListener("mouseleave", () => {
|
||||
const pageNumberElement = div.querySelector(".page-number");
|
||||
if (pageNumberElement) {
|
||||
div.removeChild(pageNumberElement);
|
||||
}
|
||||
});
|
||||
|
||||
return div;
|
||||
}
|
||||
return div;
|
||||
}
|
||||
}
|
||||
|
||||
export default PdfActionsManager;
|
||||
export default PdfActionsManager;
|
||||
|
||||
@@ -1,285 +1,282 @@
|
||||
class PdfContainer {
|
||||
fileName;
|
||||
pagesContainer;
|
||||
pagesContainerWrapper;
|
||||
pdfAdapters;
|
||||
downloadLink;
|
||||
fileName;
|
||||
pagesContainer;
|
||||
pagesContainerWrapper;
|
||||
pdfAdapters;
|
||||
downloadLink;
|
||||
|
||||
constructor(id, wrapperId, pdfAdapters) {
|
||||
this.pagesContainer = document.getElementById(id)
|
||||
this.pagesContainerWrapper = document.getElementById(wrapperId);
|
||||
this.downloadLink = null;
|
||||
this.movePageTo = this.movePageTo.bind(this);
|
||||
this.addPdfs = this.addPdfs.bind(this);
|
||||
this.addPdfsFromFiles = this.addPdfsFromFiles.bind(this);
|
||||
this.rotateElement = this.rotateElement.bind(this);
|
||||
this.rotateAll = this.rotateAll.bind(this);
|
||||
this.exportPdf = this.exportPdf.bind(this);
|
||||
this.updateFilename = this.updateFilename.bind(this);
|
||||
this.setDownloadAttribute = this.setDownloadAttribute.bind(this);
|
||||
this.preventIllegalChars = this.preventIllegalChars.bind(this);
|
||||
constructor(id, wrapperId, pdfAdapters) {
|
||||
this.pagesContainer = document.getElementById(id);
|
||||
this.pagesContainerWrapper = document.getElementById(wrapperId);
|
||||
this.downloadLink = null;
|
||||
this.movePageTo = this.movePageTo.bind(this);
|
||||
this.addPdfs = this.addPdfs.bind(this);
|
||||
this.addPdfsFromFiles = this.addPdfsFromFiles.bind(this);
|
||||
this.rotateElement = this.rotateElement.bind(this);
|
||||
this.rotateAll = this.rotateAll.bind(this);
|
||||
this.exportPdf = this.exportPdf.bind(this);
|
||||
this.updateFilename = this.updateFilename.bind(this);
|
||||
this.setDownloadAttribute = this.setDownloadAttribute.bind(this);
|
||||
this.preventIllegalChars = this.preventIllegalChars.bind(this);
|
||||
|
||||
this.pdfAdapters = pdfAdapters;
|
||||
this.pdfAdapters = pdfAdapters;
|
||||
|
||||
this.pdfAdapters.forEach(adapter => {
|
||||
adapter.setActions({
|
||||
movePageTo: this.movePageTo,
|
||||
addPdfs: this.addPdfs,
|
||||
rotateElement: this.rotateElement,
|
||||
updateFilename: this.updateFilename
|
||||
})
|
||||
})
|
||||
this.pdfAdapters.forEach((adapter) => {
|
||||
adapter.setActions({
|
||||
movePageTo: this.movePageTo,
|
||||
addPdfs: this.addPdfs,
|
||||
rotateElement: this.rotateElement,
|
||||
updateFilename: this.updateFilename,
|
||||
});
|
||||
});
|
||||
|
||||
window.addPdfs = this.addPdfs;
|
||||
window.exportPdf = this.exportPdf;
|
||||
window.rotateAll = this.rotateAll;
|
||||
window.addPdfs = this.addPdfs;
|
||||
window.exportPdf = this.exportPdf;
|
||||
window.rotateAll = this.rotateAll;
|
||||
|
||||
const filenameInput = document.getElementById('filename-input');
|
||||
const downloadBtn = document.getElementById('export-button');
|
||||
const filenameInput = document.getElementById("filename-input");
|
||||
const downloadBtn = document.getElementById("export-button");
|
||||
|
||||
filenameInput.onkeyup = this.updateFilename;
|
||||
filenameInput.onkeydown = this.preventIllegalChars;
|
||||
filenameInput.disabled = false;
|
||||
filenameInput.innerText = "";
|
||||
downloadBtn.disabled = true;
|
||||
filenameInput.onkeyup = this.updateFilename;
|
||||
filenameInput.onkeydown = this.preventIllegalChars;
|
||||
filenameInput.disabled = false;
|
||||
filenameInput.innerText = "";
|
||||
downloadBtn.disabled = true;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
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);
|
||||
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.addPdfsFromFiles(files, nextSiblingElement);
|
||||
this.updateFilename(files ? files[0].name : "");
|
||||
};
|
||||
|
||||
input.click();
|
||||
}
|
||||
|
||||
async addPdfsFromFiles(files, nextSiblingElement) {
|
||||
this.fileName = files[0].name;
|
||||
for (var i = 0; i < files.length; i++) {
|
||||
await this.addPdfFile(files[i], nextSiblingElement);
|
||||
}
|
||||
|
||||
document.querySelectorAll(".enable-on-file").forEach((element) => {
|
||||
element.disabled = false;
|
||||
});
|
||||
}
|
||||
|
||||
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) {
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = "pdfjs/pdf.worker.js";
|
||||
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 {
|
||||
this.pagesContainer.insertBefore(startElement, endElement);
|
||||
canvas.width = page.view[2];
|
||||
canvas.height = page.view[3];
|
||||
}
|
||||
|
||||
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.addPdfsFromFiles(files, nextSiblingElement);
|
||||
this.updateFilename(files ? files[0].name : "");
|
||||
}
|
||||
|
||||
input.click();
|
||||
}
|
||||
|
||||
async addPdfsFromFiles(files, nextSiblingElement) {
|
||||
this.fileName = files[0].name;
|
||||
for (var i=0; i < files.length; i++) {
|
||||
await this.addPdfFile(files[i], nextSiblingElement);
|
||||
}
|
||||
|
||||
document.querySelectorAll(".enable-on-file").forEach(element => {
|
||||
element.disabled = false;
|
||||
});
|
||||
}
|
||||
|
||||
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) {
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs/pdf.worker.js'
|
||||
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();
|
||||
}
|
||||
// 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, {
|
||||
ignoreEncryption: true,
|
||||
});
|
||||
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();
|
||||
const pageContainers = this.pagesContainer.querySelectorAll(".page-container"); // Select all .page-container elements
|
||||
for (var i = 0; i < pageContainers.length; i++) {
|
||||
const img = pageContainers[i].querySelector("img"); // Find the img element within each .page-container
|
||||
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");
|
||||
|
||||
const filenameInput = document.getElementById("filename-input");
|
||||
|
||||
let inputArr = filenameInput.value.split(".");
|
||||
|
||||
if (inputArr !== null && inputArr !== undefined && inputArr.length > 0) {
|
||||
inputArr = inputArr.filter((n) => n); // remove all empty strings, nulls or undefined
|
||||
|
||||
if (inputArr.length > 1) {
|
||||
inputArr.pop(); // remove right part after last dot
|
||||
}
|
||||
|
||||
filenameInput.value = inputArr.join("");
|
||||
this.fileName = filenameInput.value;
|
||||
}
|
||||
|
||||
async toPdfLib(objectUrl) {
|
||||
const existingPdfBytes = await fetch(objectUrl).then(res => res.arrayBuffer());
|
||||
const pdfDoc = await PDFLib.PDFDocument.load(existingPdfBytes, { ignoreEncryption: true });
|
||||
return pdfDoc;
|
||||
if (!filenameInput.value.includes(".pdf")) {
|
||||
filenameInput.value = filenameInput.value + ".pdf";
|
||||
this.fileName = filenameInput.value;
|
||||
}
|
||||
|
||||
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
|
||||
this.downloadLink = document.createElement("a");
|
||||
this.downloadLink.id = "download-link";
|
||||
this.downloadLink.href = url;
|
||||
// downloadLink.download = this.fileName ? this.fileName : 'managed.pdf';
|
||||
// downloadLink.download = this.fileName;
|
||||
this.downloadLink.setAttribute("download", this.fileName ? this.fileName : "managed.pdf");
|
||||
this.downloadLink.setAttribute("target", "_blank");
|
||||
this.downloadLink.onclick = this.setDownloadAttribute;
|
||||
this.downloadLink.click();
|
||||
}
|
||||
}
|
||||
|
||||
setDownloadAttribute() {
|
||||
this.downloadLink.setAttribute("download", this.fileName ? this.fileName : "managed.pdf");
|
||||
}
|
||||
|
||||
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)
|
||||
}
|
||||
updateFilename(fileName = "") {
|
||||
const filenameInput = document.getElementById("filename-input");
|
||||
const pagesContainer = document.getElementById("pages-container");
|
||||
const downloadBtn = document.getElementById("export-button");
|
||||
|
||||
downloadBtn.disabled = pagesContainer.childElementCount === 0;
|
||||
|
||||
if (!this.fileName) {
|
||||
this.fileName = fileName;
|
||||
}
|
||||
|
||||
async exportPdf() {
|
||||
const pdfDoc = await PDFLib.PDFDocument.create();
|
||||
const pageContainers = this.pagesContainer.querySelectorAll('.page-container'); // Select all .page-container elements
|
||||
for (var i = 0; i < pageContainers.length; i++) {
|
||||
const img = pageContainers[i].querySelector("img"); // Find the img element within each .page-container
|
||||
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');
|
||||
|
||||
const filenameInput = document.getElementById('filename-input');
|
||||
|
||||
let inputArr = filenameInput.value.split('.');
|
||||
|
||||
if (inputArr !== null && inputArr !== undefined && inputArr.length > 0) {
|
||||
|
||||
inputArr = inputArr.filter(n => n); // remove all empty strings, nulls or undefined
|
||||
|
||||
if (inputArr.length > 1) {
|
||||
inputArr.pop(); // remove right part after last dot
|
||||
}
|
||||
|
||||
filenameInput.value = inputArr.join('');
|
||||
this.fileName = filenameInput.value;
|
||||
}
|
||||
|
||||
if (!filenameInput.value.includes('.pdf')) {
|
||||
filenameInput.value = filenameInput.value + '.pdf';
|
||||
this.fileName = filenameInput.value;
|
||||
}
|
||||
|
||||
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
|
||||
this.downloadLink = document.createElement('a');
|
||||
this.downloadLink.id = 'download-link';
|
||||
this.downloadLink.href = url;
|
||||
// downloadLink.download = this.fileName ? this.fileName : 'managed.pdf';
|
||||
// downloadLink.download = this.fileName;
|
||||
this.downloadLink.setAttribute('download', this.fileName ? this.fileName : 'managed.pdf');
|
||||
this.downloadLink.setAttribute('target', '_blank');
|
||||
this.downloadLink.onclick = this.setDownloadAttribute;
|
||||
this.downloadLink.click();
|
||||
}
|
||||
if (!filenameInput.value) {
|
||||
filenameInput.value = this.fileName;
|
||||
}
|
||||
}
|
||||
|
||||
setDownloadAttribute() {
|
||||
this.downloadLink.setAttribute("download", this.fileName ? this.fileName : 'managed.pdf');
|
||||
}
|
||||
|
||||
updateFilename(fileName = "") {
|
||||
const filenameInput = document.getElementById('filename-input');
|
||||
const pagesContainer = document.getElementById('pages-container');
|
||||
const downloadBtn = document.getElementById('export-button');
|
||||
|
||||
downloadBtn.disabled = pagesContainer.childElementCount === 0
|
||||
|
||||
if (!this.fileName) {
|
||||
this.fileName = fileName;
|
||||
}
|
||||
|
||||
if (!filenameInput.value) {
|
||||
filenameInput.value = this.fileName;
|
||||
}
|
||||
}
|
||||
|
||||
preventIllegalChars(e) {
|
||||
// const filenameInput = document.getElementById('filename-input');
|
||||
//
|
||||
// filenameInput.value = filenameInput.value.replace('.pdf', '');
|
||||
//
|
||||
// // prevent .
|
||||
// if (filenameInput.value.includes('.')) {
|
||||
// filenameInput.value.replace('.','');
|
||||
// }
|
||||
}
|
||||
preventIllegalChars(e) {
|
||||
// const filenameInput = document.getElementById('filename-input');
|
||||
//
|
||||
// filenameInput.value = filenameInput.value.replace('.pdf', '');
|
||||
//
|
||||
// // prevent .
|
||||
// if (filenameInput.value.includes('.')) {
|
||||
// filenameInput.value.replace('.','');
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
export default PdfContainer;
|
||||
|
||||
@@ -1,94 +1,95 @@
|
||||
class FileDragManager {
|
||||
overlay;
|
||||
dragCounter;
|
||||
updateFilename;
|
||||
overlay;
|
||||
dragCounter;
|
||||
updateFilename;
|
||||
|
||||
constructor(cb = null) {
|
||||
this.dragCounter = 0;
|
||||
this.setCallback(cb);
|
||||
constructor(cb = null) {
|
||||
this.dragCounter = 0;
|
||||
this.setCallback(cb);
|
||||
|
||||
// Prevent default behavior for drag events
|
||||
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
||||
document.body.addEventListener(eventName, preventDefaults, false);
|
||||
});
|
||||
// Prevent default behavior for drag events
|
||||
["dragenter", "dragover", "dragleave", "drop"].forEach((eventName) => {
|
||||
document.body.addEventListener(eventName, preventDefaults, false);
|
||||
});
|
||||
|
||||
function preventDefaults(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
this.dragenterListener = this.dragenterListener.bind(this);
|
||||
this.dragleaveListener = this.dragleaveListener.bind(this);
|
||||
this.dropListener = this.dropListener.bind(this);
|
||||
|
||||
document.body.addEventListener('dragenter', this.dragenterListener);
|
||||
document.body.addEventListener('dragleave', this.dragleaveListener);
|
||||
// Add drop event listener
|
||||
document.body.addEventListener('drop', this.dropListener);
|
||||
function preventDefaults(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
setActions({ updateFilename }) {
|
||||
this.updateFilename = updateFilename;
|
||||
this.dragenterListener = this.dragenterListener.bind(this);
|
||||
this.dragleaveListener = this.dragleaveListener.bind(this);
|
||||
this.dropListener = this.dropListener.bind(this);
|
||||
|
||||
document.body.addEventListener("dragenter", this.dragenterListener);
|
||||
document.body.addEventListener("dragleave", this.dragleaveListener);
|
||||
// Add drop event listener
|
||||
document.body.addEventListener("drop", this.dropListener);
|
||||
}
|
||||
|
||||
setActions({ updateFilename }) {
|
||||
this.updateFilename = updateFilename;
|
||||
}
|
||||
|
||||
setCallback(cb) {
|
||||
if (cb) {
|
||||
this.callback = cb;
|
||||
} else {
|
||||
this.callback = (files) => console.warn("FileDragManager not set");
|
||||
}
|
||||
}
|
||||
|
||||
setCallback(cb) {
|
||||
if (cb) {
|
||||
this.callback = cb;
|
||||
} else {
|
||||
this.callback = (files) => console.warn("FileDragManager not set");
|
||||
}
|
||||
dragenterListener() {
|
||||
this.dragCounter++;
|
||||
if (!this.overlay) {
|
||||
// Create and show the overlay
|
||||
this.overlay = document.createElement("div");
|
||||
this.overlay.style.position = "fixed";
|
||||
this.overlay.style.top = 0;
|
||||
this.overlay.style.left = 0;
|
||||
this.overlay.style.width = "100%";
|
||||
this.overlay.style.height = "100%";
|
||||
this.overlay.style.background = "rgba(0, 0, 0, 0.5)";
|
||||
this.overlay.style.color = "#fff";
|
||||
this.overlay.style.zIndex = "1000";
|
||||
this.overlay.style.display = "flex";
|
||||
this.overlay.style.alignItems = "center";
|
||||
this.overlay.style.justifyContent = "center";
|
||||
this.overlay.style.pointerEvents = "none";
|
||||
this.overlay.innerHTML = "<p>Drop files anywhere to upload</p>";
|
||||
document.getElementById("content-wrap").appendChild(this.overlay);
|
||||
}
|
||||
}
|
||||
|
||||
dragenterListener() {
|
||||
this.dragCounter++;
|
||||
if (!this.overlay) {
|
||||
// Create and show the overlay
|
||||
this.overlay = document.createElement('div');
|
||||
this.overlay.style.position = 'fixed';
|
||||
this.overlay.style.top = 0;
|
||||
this.overlay.style.left = 0;
|
||||
this.overlay.style.width = '100%';
|
||||
this.overlay.style.height = '100%';
|
||||
this.overlay.style.background = 'rgba(0, 0, 0, 0.5)';
|
||||
this.overlay.style.color = '#fff';
|
||||
this.overlay.style.zIndex = '1000';
|
||||
this.overlay.style.display = 'flex';
|
||||
this.overlay.style.alignItems = 'center';
|
||||
this.overlay.style.justifyContent = 'center';
|
||||
this.overlay.style.pointerEvents = 'none';
|
||||
this.overlay.innerHTML = '<p>Drop files anywhere to upload</p>';
|
||||
document.getElementById('content-wrap').appendChild(this.overlay);
|
||||
dragleaveListener() {
|
||||
this.dragCounter--;
|
||||
if (this.dragCounter === 0) {
|
||||
// Hide and remove the overlay
|
||||
if (this.overlay) {
|
||||
this.overlay.remove();
|
||||
this.overlay = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
dropListener(e) {
|
||||
const dt = e.dataTransfer;
|
||||
const files = dt.files;
|
||||
this.callback(files)
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
//maybe
|
||||
})
|
||||
.finally(() => {
|
||||
// Hide and remove the overlay
|
||||
if (this.overlay) {
|
||||
this.overlay.remove();
|
||||
this.overlay = null;
|
||||
}
|
||||
};
|
||||
|
||||
dragleaveListener() {
|
||||
this.dragCounter--;
|
||||
if (this.dragCounter === 0) {
|
||||
// Hide and remove the overlay
|
||||
if (this.overlay) {
|
||||
this.overlay.remove();
|
||||
this.overlay = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
dropListener(e) {
|
||||
|
||||
const dt = e.dataTransfer;
|
||||
const files = dt.files;
|
||||
this.callback(files).catch((err) => {
|
||||
console.error(err);
|
||||
//maybe
|
||||
}).finally(() => {
|
||||
// Hide and remove the overlay
|
||||
if (this.overlay) {
|
||||
this.overlay.remove();
|
||||
this.overlay = null;
|
||||
}
|
||||
|
||||
this.updateFilename(files ? files[0].name : "");
|
||||
});
|
||||
};
|
||||
this.updateFilename(files ? files[0].name : "");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default FileDragManager;
|
||||
|
||||
@@ -1,35 +1,34 @@
|
||||
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;
|
||||
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;
|
||||
// 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
|
||||
}
|
||||
// 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
|
||||
|
||||
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;
|
||||
|
||||
// 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);
|
||||
}
|
||||
});
|
||||
}
|
||||
// If scroll is not already in progress, start the scroll loop
|
||||
if (!isScrolling) {
|
||||
isScrolling = true;
|
||||
requestAnimationFrame(scrollLoop);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export default scrollDivHorizontally;
|
||||
|
||||
Reference in New Issue
Block a user