metadata: render pdf in right column

public/js/metadata.js

@@ -42,6 +42,14 @@ var loadPDF = async function(pdfBlob, filename, pdfIndex) {
 
                 addMetadata(metaKey, metadata.info.Custom[metaKey]);
             }
+
+            for(let pageNumber = 1; pageNumber <= pdf.numPages; pageNumber++ ) {
+                pdf.getPage(pageNumber).then(function(page) {
+                    let pageIndex = (page.pageNumber - 1);
+                    pages[pageIndex] = page;
+                    pageRender(pageIndex);
+                });
+            }
         });
     }, function (reason) {
         console.error(reason);
@@ -50,6 +58,33 @@ var loadPDF = async function(pdfBlob, filename, pdfIndex) {
     return loadingTask;
 }
 
+var pageRender = async function(pageIndex) {
+
+  let page = pages[pageIndex];
+
+  let viewport = page.getViewport({scale: 1});
+  let sizeWidth = document.getElementById('container-pages').offsetWidth;
+  let scaleWidth = sizeWidth / viewport.width;
+  let viewportWidth = page.getViewport({scale: scaleWidth });
+
+  viewport = viewportWidth;
+
+  let canvasPDF = document.createElement('canvas');
+  canvasPDF.classList.add('shadow-sm');
+  document.getElementById('container-pages').appendChild(canvasPDF);
+  let context = canvasPDF.getContext('2d');
+  canvasPDF.height = viewport.height;
+  canvasPDF.width = viewport.width;
+
+  if(pdfRenderTasks[pageIndex]) {
+    pdfRenderTasks[pageIndex].cancel();
+  }
+  pdfRenderTasks[pageIndex] = await page.render({
+    canvasContext: context,
+    viewport: viewport,
+  });
+}
+
 var addMetadata = function(key, value) {
     let div = document.createElement('div');
     div.classList.add('form-floating');

templates/metadata.html.php

@@ -48,11 +48,11 @@
             <small>Logiciel libre <span class="d-none d-md-inline">sous license AGPL-3.0 </span>: <a href="https://github.com/24eme/signaturepdf">voir le code source</a></small>
         </footer>
     </div>
-    <div id="page-metadata" style="padding-right: 350px;" class="d-none">
+    <div id="page-metadata" class="d-none">
         <div id="div-margin-top" style="height: 88px;" class="d-md-none"></div>
-        <div id="container-main">
+        <div style="width: 60%; overflow: auto;" class="vh-100" id="container-main">
-                <div id="form-metadata" class="w-50 mx-auto pt-3 pb-3">
+                <div id="form-metadata" class="mx-auto w-75 pt-3 pb-5">
-                    <h3>Métadonnées</h3>
+                    <h3>Liste des métadonnées du PDF</h3>
                     <div id="form-metadata-container">
                     </div>
                     <form id="form_metadata_add">
@@ -64,25 +64,27 @@
                 </div>
         </div>
         <div id="div-margin-bottom" style="height: 55px;" class="d-md-none"></div>
-        <div class="offcanvas offcanvas-end show d-none d-md-block shadow-sm" data-bs-backdrop="false" data-bs-scroll="true" data-bs-keyboard="false" tabindex="-1" id="sidebarTools" aria-labelledby="sidebarToolsLabel">
+        <div style="width: 40%;" class="offcanvas offcanvas-end show d-none d-md-block shadow-sm" data-bs-backdrop="false" data-bs-scroll="true" data-bs-keyboard="false" tabindex="-1" id="sidebarTools" aria-labelledby="sidebarToolsLabel">
             <a class="btn btn-close btn-sm position-absolute opacity-25 d-none d-sm-none d-md-block" title="Fermer ce PDF et retourner à l'accueil" style="position: absolute; top: 2px; right: 2px; font-size: 10px;" href="/metadata"></a>
-            <div class="offcanvas-header mb-0 pb-0">
+            <div class="offcanvas-header d-block mb-0 pb-0 border-bottom">
                 <h5 class="mb-1 d-block w-100" id="sidebarToolsLabel">Édition de métadonnées<span class="float-end me-2" title="Ce PDF est stocké sur votre ordinateur pour être signé par vous uniquement"><i class="bi-ui-checks-grid"></i></span></h5>
                 <button type="button" class="btn-close text-reset d-md-none" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+                <p id="text_document_name" class="text-muted mb-2" style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden;" title=""><i class="bi bi-files"></i> <span></span></p>
             </div>
-            <div class="offcanvas-body pt-0" style="padding-bottom: 60px;">
+            <div class="offcanvas-body bg-light" style="padding-bottom: 60px;">
-                <p id="text_document_name" class="text-muted" style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden;" title=""><i class="bi bi-files"></i> <span></span></p>
+                <div id="container-pages">
-                <div class="position-absolute bottom-0 pb-2 ps-0 pe-4 w-100">
+                </div>
+            </div>
+            <div class="position-absolute bg-white bottom-0 pb-2 ps-2 pe-2 w-100 border-top shadow-lg">
                 <form id="form_pdf" action="/organize" method="post" enctype="multipart/form-data">
                     <input id="input_pdf" name="pdf[]" type="file" class="d-none" />
                     <input id="input_pages" type="hidden" value="" name="pages" />
                     <div id="btn_container" class="d-grid gap-2 mt-2">
-                            <button class="btn btn-primary" type="submit" id="save"><i class="bi bi-download"></i> Télécharger le PDF</button>
+                        <button class="btn btn-primary" type="submit" id="save"><i class="bi bi-download"></i> Enregistrer et télécharger le PDF</button>
                     </div>
                 </form>
             </div>
         </div>
-        </div>
         <div id="bottom_bar" class="position-fixed bottom-0 start-0 bg-white w-100 p-2 shadow-sm d-md-none">
             <div id="bottom_bar_action" class="d-grid gap-2">
                 <button class="btn btn-primary" type="submit" id="save_mobile"><i class="bi bi-download"></i> Télécharger le PDF</button>