metadata: suppression metadonnée

TODO: checker si modification

public/css/app.css

@@ -63,6 +63,15 @@
     border-color: transparent !important;
 }
 
+.delete-metadata {
+    cursor: pointer;
+    position: absolute;
+    right: -20px;
+    top: 0;
+    font-size: 1.2rem;
+    user-select: none;
+}
+
 @media (max-width: 480px) {
     .subtitle {
         font-size: .875em

public/js/metadata.js

@@ -52,20 +52,45 @@ var loadPDF = async function(pdfBlob, filename, pdfIndex) {
 
 var addMetadata = function(key, value) {
     let div = document.createElement('div');
-    div.classList.add('form-floating');
-    div.classList.add('mt-3');
+    div.classList.add('form-floating', 'mt-3', 'input-metadata');
+
     let input = document.createElement('input');
     input.value = value;
     input.classList.add('form-control');
+
     let label = document.createElement('label');
     label.innerText = key;
+
+    let deleteButton = document.createElement('div')
+    deleteButton.innerHTML = "×"
+    deleteButton.classList.add('delete-metadata')
+
     div.appendChild(input);
     div.appendChild(label);
-    document.getElementById('container-main').appendChild(div);
+    div.appendChild(deleteButton);
+    document.getElementById('form-metadata-container').appendChild(div);
+
+    input.focus();
+}
+
+const deleteMetadata = function(el) {
+    const input = el.closest('.input-metadata')
+    input.remove()
 }
 
 var createEventsListener = function() {
+    document.getElementById('form_metadata_add').addEventListener('submit', function(e) {
+        let formData = new FormData(this);
+        addMetadata(formData.get('metadata_key'), "");
+        this.reset();
+        e.preventDefault();
+    })
 
+    document.addEventListener('click', function (event) {
+        if (event.target.closest(".delete-metadata")) {
+            deleteMetadata(event.target)
+        }
+    })
 }
 
 async function getPDFBlobFromCache(cacheUrl) {

public/js/signature.js

@@ -903,6 +903,11 @@ var createEventsListener = function() {
         zoomChange(1)
     });
 
+    window.addEventListener('beforeunload', function(event) {
+        event.preventDefault();
+        return true;
+    });
+
     if(hash) {
         updateNbLayers();
         setInterval(function() {

templates/metadata.html.php

@@ -50,7 +50,18 @@
     </div>
     <div id="page-metadata" style="padding-right: 350px;" class="d-none">
         <div id="div-margin-top" style="height: 88px;" class="d-md-none"></div>
-        <div id="container-main"  class="w-50 mx-auto pb-3">
+        <div id="container-main">
+                <div id="form-metadata" class="w-50 mx-auto pt-3 pb-3">
+                    <h3>Métadonnées</h3>
+                    <div id="form-metadata-container">
+                    </div>
+                    <form id="form_metadata_add">
+                    <div class="input-group mt-3">
+                      <input name="metadata_key" type="text" class="form-control" placeholder="Ma nouvelle metadonnée" required aria-label="Recipient's username">
+                      <button class="btn btn-outline-secondary" type="submit">Ajouter</button>
+                    </div>
+                    </form>
+                </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">