Bug fixes and optimisations
This commit is contained in:
Saud Fatayerji
parent
8d1057477b
commit
7f9f45c720
1 changed files with 83 additions and 76 deletions
|
|
@ -23,21 +23,21 @@
|
|||
</svg>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-secondary" onclick="rotateAll(-90)">
|
||||
<button class="btn btn-secondary enable-on-file" onclick="rotateAll(-90)" disabled>
|
||||
<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>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-secondary" onclick="rotateAll(90)">
|
||||
<button class="btn btn-secondary enable-on-file" onclick="rotateAll(90)" disabled>
|
||||
<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>
|
||||
</button>
|
||||
|
||||
<button id="export-button" class="btn btn-primary" onclick="exportPdf()">
|
||||
<button id="export-button" class="btn btn-primary enable-on-file" onclick="exportPdf()" disabled>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16">
|
||||
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
|
||||
<path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
|
||||
|
|
@ -56,20 +56,25 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
var myDocument = null;
|
||||
var myRenderer = null;
|
||||
var fileName = null;
|
||||
const pagesContainer = document.getElementById("pages-container");
|
||||
|
||||
function addPdfs() {
|
||||
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]);
|
||||
}
|
||||
|
||||
document.querySelectorAll(".enable-on-file").forEach(element => {
|
||||
element.disabled = false;
|
||||
});
|
||||
}
|
||||
|
||||
input.click();
|
||||
|
|
@ -77,6 +82,73 @@
|
|||
|
||||
async function addPdfFile(file) {
|
||||
const { renderer, pdfDocument } = await loadFile(file);
|
||||
|
||||
const moveUpButtonCallback = e => {
|
||||
var imgContainer = e.target;
|
||||
while (!imgContainer.classList.contains("page-container")) {
|
||||
imgContainer = imgContainer.parentNode;
|
||||
}
|
||||
console.log("imgContainer", imgContainer);
|
||||
const sibling = imgContainer.previousSibling;
|
||||
console.log("sibling", sibling);
|
||||
if (sibling) {
|
||||
pagesContainer.removeChild(imgContainer);
|
||||
pagesContainer.insertBefore(imgContainer, sibling);
|
||||
imgContainer.scrollIntoView({
|
||||
behavior: "instant",
|
||||
block: "center",
|
||||
})
|
||||
}
|
||||
};
|
||||
const moveDownButtonCallback = e => {
|
||||
var imgContainer = e.target;
|
||||
while (!imgContainer.classList.contains("page-container")) {
|
||||
imgContainer = imgContainer.parentNode;
|
||||
}
|
||||
console.log("imgContainer", imgContainer);
|
||||
const sibling = imgContainer.nextSibling;
|
||||
console.log("sibling", sibling);
|
||||
if (sibling) {
|
||||
pagesContainer.removeChild(imgContainer);
|
||||
if (sibling.nextSibling) {
|
||||
pagesContainer.insertBefore(imgContainer, sibling.nextSibling);
|
||||
console.log("insert sibling.nextSibling", sibling.nextSibling);
|
||||
} else {
|
||||
pagesContainer.appendChild(imgContainer)
|
||||
console.log("append");
|
||||
}
|
||||
imgContainer.scrollIntoView({
|
||||
behavior: "instant",
|
||||
block: "center",
|
||||
})
|
||||
}
|
||||
};
|
||||
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);
|
||||
};
|
||||
|
||||
for (var i=0; i < renderer.pageCount; i++) {
|
||||
const div = document.createElement('div');
|
||||
div.classList.add("page-container");
|
||||
|
|
@ -94,51 +166,13 @@
|
|||
const moveUp = document.createElement('button');
|
||||
moveUp.classList.add("move-up-button","btn", "btn-secondary");
|
||||
moveUp.innerHTML = '<i class="bi bi-arrow-up-short"></i>';
|
||||
moveUp.onclick = e => {
|
||||
var imgContainer = e.target;
|
||||
while (!imgContainer.classList.contains("page-container")) {
|
||||
imgContainer = imgContainer.parentNode;
|
||||
}
|
||||
console.log("imgContainer", imgContainer);
|
||||
const sibling = imgContainer.previousSibling;
|
||||
console.log("sibling", sibling);
|
||||
if (sibling) {
|
||||
pagesContainer.removeChild(imgContainer);
|
||||
pagesContainer.insertBefore(imgContainer, sibling);
|
||||
imgContainer.scrollIntoView({
|
||||
behavior: "instant",
|
||||
block: "center",
|
||||
})
|
||||
}
|
||||
}
|
||||
moveUp.onclick = moveUpButtonCallback;
|
||||
buttonContainer.appendChild(moveUp);
|
||||
|
||||
const moveDown = document.createElement('button');
|
||||
moveDown.classList.add("move-down-button","btn", "btn-secondary");
|
||||
moveDown.innerHTML = '<i class="bi bi-arrow-down-short"></i>';
|
||||
moveDown.onclick = e => {
|
||||
var imgContainer = e.target;
|
||||
while (!imgContainer.classList.contains("page-container")) {
|
||||
imgContainer = imgContainer.parentNode;
|
||||
}
|
||||
console.log("imgContainer", imgContainer);
|
||||
const sibling = imgContainer.nextSibling;
|
||||
console.log("sibling", sibling);
|
||||
if (sibling) {
|
||||
pagesContainer.removeChild(imgContainer);
|
||||
if (sibling.nextSibling) {
|
||||
pagesContainer.insertBefore(imgContainer, sibling.nextSibling);
|
||||
console.log("insert sibling.nextSibling", sibling.nextSibling);
|
||||
} else {
|
||||
pagesContainer.appendChild(imgContainer)
|
||||
console.log("append");
|
||||
}
|
||||
imgContainer.scrollIntoView({
|
||||
behavior: "instant",
|
||||
block: "center",
|
||||
})
|
||||
}
|
||||
}
|
||||
moveDown.onclick = moveDownButtonCallback;
|
||||
buttonContainer.appendChild(moveDown);
|
||||
|
||||
const rotateCCW = document.createElement('button');
|
||||
|
|
@ -147,15 +181,7 @@
|
|||
<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 = e => {
|
||||
var imgContainer = e.target;
|
||||
while (!imgContainer.classList.contains("page-container")) {
|
||||
imgContainer = imgContainer.parentNode;
|
||||
}
|
||||
const img = imgContainer.querySelector("img");
|
||||
|
||||
rotateElement(img, -90)
|
||||
}
|
||||
rotateCCW.onclick = rotateCCWButtonCallback;
|
||||
buttonContainer.appendChild(rotateCCW);
|
||||
|
||||
const rotateCW = document.createElement('button');
|
||||
|
|
@ -164,15 +190,7 @@
|
|||
<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 = e => {
|
||||
var imgContainer = e.target;
|
||||
while (!imgContainer.classList.contains("page-container")) {
|
||||
imgContainer = imgContainer.parentNode;
|
||||
}
|
||||
const img = imgContainer.querySelector("img");
|
||||
|
||||
rotateElement(img, 90)
|
||||
}
|
||||
rotateCW.onclick = rotateCWButtonCallback;
|
||||
buttonContainer.appendChild(rotateCW);
|
||||
|
||||
const deletePage = document.createElement('button');
|
||||
|
|
@ -181,13 +199,7 @@
|
|||
<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 = e => {
|
||||
var imgContainer = e.target;
|
||||
while (!imgContainer.classList.contains("page-container")) {
|
||||
imgContainer = imgContainer.parentNode;
|
||||
}
|
||||
pagesContainer.removeChild(imgContainer);
|
||||
}
|
||||
deletePage.onclick = deletePageButtonCallback;
|
||||
buttonContainer.appendChild(deletePage);
|
||||
|
||||
div.appendChild(buttonContainer);
|
||||
|
|
@ -236,7 +248,7 @@
|
|||
|
||||
const downloadLink = document.createElement('a');
|
||||
downloadLink.href = url;
|
||||
downloadLink.download = 'example.pdf';
|
||||
downloadLink.download = fileName ? fileName : 'managed.pdf';
|
||||
downloadLink.click(); // Simulate a click on the download link to start the download
|
||||
}
|
||||
|
||||
|
|
@ -244,11 +256,6 @@
|
|||
var objectUrl = URL.createObjectURL(file);
|
||||
var pdfDocument = await toPdfLib(objectUrl);
|
||||
var renderer = await toRenderer(objectUrl);
|
||||
|
||||
myDocument = pdfDocument;
|
||||
myRenderer = renderer;
|
||||
console.log(renderer, pdfDocument)
|
||||
|
||||
return { renderer, pdfDocument };
|
||||
}
|
||||
async function toPdfLib(objectUrl) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue