Merge branch 'metadata' of github.com:24eme/signaturepdf into metadata

public/css/app.css

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

public/js/metadata.js

@@ -87,19 +87,34 @@ var pageRender = async function(pageIndex) {
 
 var addMetadata = function(key, value) {
     let div = document.createElement('div');
-    div.classList.add('form-floating');
+    div.classList.add('form-floating', 'mt-3', 'input-metadata');
-    div.classList.add('mt-3');
+
     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);
+    div.appendChild(deleteButton);
     document.getElementById('form-metadata-container').appendChild(div);
+
     input.focus();
 }
 
+const deleteMetadata = function(el) {
+    if (confirm("Souhaitez-vous supprimer ce champ ?") === false) return;
+
+    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);
@@ -107,6 +122,12 @@ var createEventsListener = function() {
         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

@@ -57,7 +57,7 @@
                     </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" aria-label="Recipient's username">
+                      <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>