From 0f5a23145ea8050f562f94ab85df2ef8add74c27 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Arnaud=20Gu=C3=A9ras?= Date: Wed, 30 Oct 2024 09:32:48 +0100 Subject: [PATCH] fix mockup upload --- .../assets/js/mockup/mockup-upload.js | 37 ++++++++++++------- 1 file changed, 24 insertions(+), 13 deletions(-) diff --git a/themes/xen-project/assets/js/mockup/mockup-upload.js b/themes/xen-project/assets/js/mockup/mockup-upload.js index fd915ea..eb1c7e7 100644 --- a/themes/xen-project/assets/js/mockup/mockup-upload.js +++ b/themes/xen-project/assets/js/mockup/mockup-upload.js @@ -51,12 +51,12 @@ const mockupUpload = { display: none; } .mockup-toolbar .mockup-button.choose-mockup:before { - background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='14 2 14 8 20 8' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); + background-image: url('data:image/svg+xml,'); } .clear-history-btn { margin-left: 10px; - padding: 5px; + padding: 5px;  font-size: 0.8em; background-color: #f44336; border: none; @@ -82,7 +82,11 @@ const mockupUpload = { align-items: center; justify-content: space-between; } - + .mockup-upload .custom-options { + left:auto; + min-width:100%; + white-space:nowrap; + } `, js: ({ toolbar, mockup, saveToLocalStorage, loadFromLocalStorage }) => { const mockupUpload = toolbar.querySelector(".mockup-upload"); @@ -109,9 +113,9 @@ const mockupUpload = { reader.readAsDataURL(blob); }); - await saveImageToIndexedDB(base64, file.name); saveToLocalStorage("mockupMockupImage", base64); createImage(base64); + await saveImageToIndexedDB(base64, file.name); await loadSavedImages(); } @@ -146,21 +150,27 @@ const mockupUpload = { const option = document.createElement("span"); option.className = "custom-option"; option.dataset.value = image.id; - option.textContent = `${image.fileName} (${new Date(image.timestamp).toLocaleString()})`; + option.textContent = `${image.fileName.replace(/\.+?$/, "")}`; savedImagesOptions.appendChild(option); option.addEventListener("click", async () => { const db = await openDB(); const transaction = db.transaction(storeName, "readonly"); const store = transaction.objectStore(storeName); - const selectedImage = await store.get(parseInt(option.dataset.value)); - if (selectedImage.result && selectedImage.result.data) { - createImage(selectedImage.result.data); // Use the base64 data directly - customSelectTrigger.textContent = option.textContent; - customSelect.classList.remove("open"); - } else { - console.error("Image data not found for ID:", option.dataset.value); - } + store.get(parseInt(option.dataset.value)).onsuccess = (event) => { + const selectedImage = event.target.result; + if (selectedImage.error) { + console.error("Error getting image from IndexedDB:", selectedImage.error); + } else { + if (selectedImage?.data) { + createImage(selectedImage.data); // Use the base64 data directly + customSelectTrigger.textContent = option.textContent; + customSelect.classList.remove("open"); + } else { + console.error("Image data not found for ID:", option.dataset.value); + } + } + }; }); }); } @@ -206,6 +216,7 @@ function openDB() { request.onupgradeneeded = (event) => { const db = event.target.result; db.createObjectStore(storeName, { keyPath: "id", autoIncrement: true }); + resolve(db); }; }); } -- 2.39.5