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()

assets/styles/main.scss

@@ -0,0 +1,3 @@
+@import "variables";
+@import "../../node_modules/bootstrap/scss/bootstrap";
+@import "styles"

assets/styles/styles.scss

@@ -0,0 +1,100 @@
+/*
+ * Globals
+ */
+
+
+/* Custom default button */
+// .btn-secondary,
+// .btn-secondary:hover,
+// .btn-secondary:focus {
+//   color: #333;
+//   text-shadow: none; /* Prevent inheritance from `body` */
+// }
+
+
+/*
+ * Base structure
+
+body {
+  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
+  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
+}
+ */
+
+.cover-container {
+  max-width: 42em;
+}
+
+
+/*
+ * Header
+ */
+
+.nav-masthead .nav-link {
+  color: rgba(255, 255, 255, .5);
+  border-bottom: .25rem solid transparent;
+}
+
+.nav-masthead .nav-link:hover,
+.nav-masthead .nav-link:focus {
+  border-bottom-color: rgba(255, 255, 255, .25);
+}
+
+.nav-masthead .nav-link + .nav-link {
+  margin-left: 1rem;
+}
+
+.nav-masthead .active {
+  color: #fff;
+  border-bottom-color: #fff;
+}
+.bd-placeholder-img {
+    font-size: 1.125rem;
+    text-anchor: middle;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+  }
+
+  @media (min-width: 768px) {
+    .bd-placeholder-img-lg {
+      font-size: 3.5rem;
+    }
+  }
+
+  .b-example-divider {
+    height: 3rem;
+    background-color: rgba(0, 0, 0, .1);
+    border: solid rgba(0, 0, 0, .15);
+    border-width: 1px 0;
+    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
+  }
+
+  .b-example-vr {
+    flex-shrink: 0;
+    width: 1.5rem;
+    height: 100vh;
+  }
+
+  .bi {
+    vertical-align: -.125em;
+    fill: currentColor;
+  }
+
+  .nav-scroller {
+    position: relative;
+    z-index: 2;
+    height: 2.75rem;
+    overflow-y: hidden;
+  }
+
+  .nav-scroller .nav {
+    display: flex;
+    flex-wrap: nowrap;
+    padding-bottom: 1rem;
+    margin-top: -1px;
+    overflow-x: auto;
+    text-align: center;
+    white-space: nowrap;
+    -webkit-overflow-scrolling: touch;
+  }

assets/styles/variables.scss

@@ -0,0 +1 @@
+$modal-content-color:               black;