diff --git a/document-sandbox-samples/per-element-metadata/src/index.html b/document-sandbox-samples/per-element-metadata/src/index.html
index 86177f1..b3a4488 100644
--- a/document-sandbox-samples/per-element-metadata/src/index.html
+++ b/document-sandbox-samples/per-element-metadata/src/index.html
@@ -10,6 +10,7 @@
margin-top: 10px;
display: flex;
flex-direction: column;
+ font-family: sans-serif;
padding: 0; /* Remove padding */
}
@@ -19,7 +20,7 @@
border-radius: 16px;
border-style: solid;
color: rgb(255, 255, 255);
- font-family: sans-serif;
+ /* font-family: sans-serif; */
height: 32px;
}
@@ -33,6 +34,17 @@
cursor: pointer;
}
+ .secondary-button {
+ background-color: #A6C1FF;
+ border-color: #A6C1FF;
+ color: black;
+ }
+
+ .secondary-button:not([disabled]):hover {
+ background-color: #849BE4;
+ border-color: #849BE4;
+ }
+
.node-options {
border: 1px solid #ccc;
padding: 10px;
@@ -48,10 +60,30 @@
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 10px;
- width: 100%;
+ width: auto;
height: 100px;
resize: none; /* Prevent resizing */
}
+
+ .toast {
+ display: none;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ font-weight: 700;
+ font-family: sans-serif;
+ text-align: center;
+ padding: 10px;
+ }
+ #addSuccess {
+ background-color: #73b973e3;
+ color: #000080;
+ }
+ #removeSuccess {
+ background-color: #df7b7be3;
+ color: #000080;
+ }
+
@@ -59,6 +91,12 @@
Please note that this document does not use the spectrum web components theme for Express.
You may use "addOnUISdk.app.ui.theme" to get the current theme and style accordingly.
-->
+
+ Added metadata 🎉
+
+
+ Removed metadata.
+
-
-
+
+
-
-
+
+
-
+
-
+
-
+
-
+
-
+
diff --git a/document-sandbox-samples/per-element-metadata/src/ui/index.js b/document-sandbox-samples/per-element-metadata/src/ui/index.js
index 6c451d8..896b943 100644
--- a/document-sandbox-samples/per-element-metadata/src/ui/index.js
+++ b/document-sandbox-samples/per-element-metadata/src/ui/index.js
@@ -39,10 +39,25 @@ function setupOptionChange(sandboxProxy) {
function setupAddButton(sandboxProxy) {
const addBtn = document.getElementById("add");
addBtn.addEventListener("click", async (event) => {
- const key = document.getElementById("key");
- const value = document.getElementById("value");
-
- await sandboxProxy.setItem(key.value, value.value);
+ const key = document.getElementById("metadata-key");
+ const value = document.getElementById("metadata-value");
+
+ try {
+ await sandboxProxy.setItem(key.value, value.value);
+
+ // Display success message for 2 seconds
+ const addedToast = document.getElementById("addSuccess");
+ addedToast.style.display = "block";
+ setTimeout(function() {
+ addedToast.style.display = "none";
+ }, 2000);
+
+ } catch (error) {
+ const text = document.getElementById("text");
+ text.value = error;
+ text.style.border = "2px solid red";
+ }
+
});
addBtn.disabled = false;
}
@@ -50,9 +65,24 @@ function setupAddButton(sandboxProxy) {
function setupRemoveButton(sandboxProxy) {
const removeBtn = document.getElementById("remove");
removeBtn.addEventListener("click", async (event) => {
- const key = document.getElementById("key");
-
+ const key = document.getElementById("metadata-key");
+
await sandboxProxy.removeItem(key.value);
+
+ // Clear inputs after removal
+ const value = document.getElementById("metadata-value");
+ const text = document.getElementById("text");
+ key.value = '';
+ value.value = '';
+ text.value = '';
+ text.style.border = "0px";
+
+ // Display success message for 2 seconds
+ const removedToast = document.getElementById("removeSuccess");
+ removedToast.style.display = "block";
+ setTimeout(function() {
+ removedToast.style.display = "none";
+ }, 2000);
});
removeBtn.disabled = false;
}
@@ -77,7 +107,7 @@ function setupGetAllButton(sandboxProxy) {
function setupGetButton(sandboxProxy) {
const getBtn = document.getElementById("get");
getBtn.addEventListener("click", async (event) => {
- const key = document.getElementById("key");
+ const key = document.getElementById("metadata-key");
const value = await sandboxProxy.getItem(key.value);
const text = document.getElementById("text");
@@ -90,6 +120,23 @@ function setupClearButton(sandboxProxy) {
const clearBtn = document.getElementById("clear");
clearBtn.addEventListener("click", async (event) => {
await sandboxProxy.clearItems();
+
+ // Clear inputs after metadata cleared
+ const key = document.getElementById("metadata-key");
+ const value = document.getElementById("metadata-value");
+ const text = document.getElementById("text");
+ key.value = '';
+ value.value = '';
+ text.value = '';
+ text.style.border = "0px";
+
+ // Display success message for 2 seconds
+ const removedToast = document.getElementById("removeSuccess");
+ removedToast.style.display = "block";
+ setTimeout(function() {
+ removedToast.style.display = "none";
+ }, 2000);
+
});
clearBtn.disabled = false;
}