init project

assets/scripts/main.js

@@ -0,0 +1,109 @@
+const pdfFileField = document.getElementById("pdfFile")
+const pdfModal = document.getElementById("pdfModal")
+const pdfModalLabel = document.getElementById("pdfModalLabel")
+const pdfModalContent = document.getElementById("pdfModalContent")
+
+// FILE
+
+function pdfFileGetName() {
+    return pdfFileField.files[0].name
+}
+
+function pdfFileClear() {
+    pdfFileField.value = ""
+}
+
+async function pdfFileToBlob() {
+    return new Promise((resolve, reject) => {
+        const fr = new FileReader()
+        const file = pdfFileField.files[0]
+        fr.readAsArrayBuffer(file)
+        fr.onload = function() {
+            const blob = new Blob([fr.result])
+            resolve(blob)
+        }
+    })
+}
+
+// MODAL
+
+function pdfModalShow() {
+    pdfModalLabelUpdate();
+    pdfModalContentclear()
+    new bootstrap.Modal("#pdfModal").show()
+    pdfModalContentLoad()
+}
+
+function pdfModalContentclear() {
+    pdfModalContent.innerHTML = ""
+}
+
+async function pdfModalContentLoad() {
+    var pdfjsLib = window['pdfjs-dist/build/pdf'];
+    pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
+    const pdfBlob = await pdfFileToBlob()
+    let url = await URL.createObjectURL(pdfBlob)
+    let loadingTask = pdfjsLib.getDocument(url)
+    loadingTask.promise.then(function(pdf) {
+        for(let pageNumber = 1; pageNumber <= pdf.numPages; pageNumber++ ) {
+            let pageIndex = pageNumber - 1;
+            pdfModalContent.insertAdjacentHTML('beforeend', '<div class="position-relative mt-1 ms-1 me-1 d-inline-block" id="canvas-container-' + pageIndex +'"><canvas id="canvas-pdf-'+pageIndex+'" class="shadow-sm canvas-pdf"></canvas><div class="position-absolute top-0 start-0"><canvas id="canvas-edition-'+pageIndex+'"></canvas></div></div>');
+        }
+        
+        for(let pageNumber = 1; pageNumber <= pdf.numPages; pageNumber++ ) {
+            pdf.getPage(pageNumber).then(function(page) {
+                let pageIndex = page.pageNumber - 1;
+                
+
+                console.log('Page loaded');
+                
+                var scale = 1.5;
+                var viewport = page.getViewport({scale: scale});
+            
+                // Prepare canvas using PDF page dimensions
+                var canvas = document.getElementById('canvas-pdf-' + pageIndex);
+                var context = canvas.getContext('2d');
+                canvas.height = viewport.height;
+                canvas.width = viewport.width;
+            
+                // Render PDF page into canvas context
+                var renderContext = {
+                    canvasContext: context,
+                    viewport: viewport
+                };
+                var renderTask = page.render(renderContext);
+                renderTask.promise.then(function () {
+                    console.log('Page rendered');
+                });
+            });
+        }
+    }, function (reason) {
+        // PDF loading error
+        console.error(reason);
+    })
+
+    return loadingTask;
+}
+
+function pdfModalLabelUpdate() {
+    pdfModalLabel.innerText = pdfFileGetName()
+}
+
+// START
+
+async function start() {
+    pdfFileField.addEventListener('change', async function(event) {
+        pdfModalShow()
+    })
+
+    pdfModal.addEventListener('hidden.bs.modal', event => {
+        pdfFileClear()
+    })
+
+
+    window.addEventListener('load', function () {
+        pdfModalShow()
+    })
+}
+
+start()