diff --git a/public/css/app.css b/public/css/app.css index 89db3b0..9a8d7d2 100644 --- a/public/css/app.css +++ b/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 diff --git a/public/js/metadata.js b/public/js/metadata.js index 3511845..5d38295 100644 --- a/public/js/metadata.js +++ b/public/js/metadata.js @@ -52,19 +52,32 @@ 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); + 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); @@ -72,6 +85,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) {