Skip to content

Commit 371d3a5

Browse files
undavideundavide
authored
Merge pull request #27 from AdobeDocs/barranca/per-element-metadata
Add per-element-metadata sample
2 parents 823a9e9 + 580fb86 commit 371d3a5

File tree

12 files changed

+390
-0
lines changed

12 files changed

+390
-0
lines changed

‎document-sandbox-samples/per-element-metadata/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.DS_Store
2+
dist/
3+
node_modules/
4+
package-lock.json

‎document-sandbox-samples/per-element-metadata/README.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
## About
2+
3+
Test add-on for testing per-element metadata feature.
4+
5+
## Tools
6+
7+
- HTML
8+
- CSS
9+
- JavaScript
10+
11+
## Setup
12+
13+
1. To install the dependencies, run `npm install`.
14+
2. To build the application, run `npm run build`.
15+
3. To start the application, run `npm run start`.

‎document-sandbox-samples/per-element-metadata/package.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "per-element-metadata",
3+
"version": "1.0.0",
4+
"description": "Adobe Creative Cloud Web Add-on.",
5+
"scripts": {
6+
"clean": "ccweb-add-on-scripts clean",
7+
"build": "ccweb-add-on-scripts build",
8+
"start": "ccweb-add-on-scripts start",
9+
"package": "ccweb-add-on-scripts package"
10+
},
11+
"keywords": [
12+
"Adobe",
13+
"Creative Cloud Web",
14+
"Add-on",
15+
"panel"
16+
],
17+
"devDependencies": {
18+
"@adobe/ccweb-add-on-scripts": "^2.0.0",
19+
"@adobe/ccweb-add-on-sdk-types": "^1.5.0"
20+
}
21+
}

‎document-sandbox-samples/per-element-metadata/src/index.html‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Get Started</title>
7+
<style>
8+
.container {
9+
margin: 24px;
10+
margin-top: 10px;
11+
display: flex;
12+
flex-direction: column;
13+
padding: 0; /* Remove padding */
14+
}
15+
16+
button {
17+
background-color: rgb(82, 88, 228);
18+
border-color: rgb(82, 88, 228);
19+
border-radius: 16px;
20+
border-style: solid;
21+
color: rgb(255, 255, 255);
22+
font-family: sans-serif;
23+
height: 32px;
24+
}
25+
26+
button:disabled {
27+
background-color: rgb(177, 177, 177);
28+
border-color: rgb(177, 177, 177);
29+
}
30+
31+
button:not([disabled]):hover {
32+
background-color: rgb(64, 70, 202);
33+
cursor: pointer;
34+
}
35+
36+
.node-options {
37+
border: 1px solid #ccc;
38+
padding: 10px;
39+
margin-bottom: 20px;
40+
}
41+
42+
.node-options label {
43+
display: block;
44+
margin-bottom: 5px;
45+
}
46+
47+
#text {
48+
background-color: #f0f0f0;
49+
border: 1px solid #ccc;
50+
padding: 10px;
51+
width: 100%;
52+
height: 100px;
53+
resize: none; /* Prevent resizing */
54+
}
55+
</style>
56+
</head>
57+
<body>
58+
<!--
59+
Please note that this document does not use the spectrum web components theme for Express.
60+
You may use "addOnUISdk.app.ui.theme" to get the current theme and style accordingly.
61+
-->
62+
<div class="container">
63+
<fieldset class="node-options">
64+
<legend>Node Options</legend>
65+
<label>
66+
<input type="radio" name="nodeOption" value="selected" id="useSelectedNode" checked />
67+
Use Selected Node
68+
</label>
69+
<label>
70+
<input type="radio" name="nodeOption" value="currentPage" id="useCurrentPageNode" />
71+
Use Current Page Node
72+
</label>
73+
<label>
74+
<input type="radio" name="nodeOption" value="root" id="useRootNode" />
75+
Use Root Node
76+
</label>
77+
</fieldset>
78+
<label for="key">Metadata Key:</label>
79+
<input id="key" placeholder="key" />
80+
<br />
81+
<label for="value">Metadata Value:</label>
82+
<input id="value" placeholder="value" />
83+
<br />
84+
<button id="add" disabled>Add Metadata</button>
85+
<br />
86+
<button id="remove" disabled>Remove Metadata</button>
87+
<br />
88+
<button id="clear" disabled>Clear Metadata</button>
89+
<br />
90+
<br />
91+
<textarea id="text" placeholder="output" readonly></textarea>
92+
<br />
93+
<button id="get" disabled>Get Item</button>
94+
<br />
95+
<button id="getall" disabled>Get All Metadata</button>
96+
<br />
97+
<button id="remainingQuota" disabled>Remaining Quota</button>
98+
</div>
99+
100+
<script type="module" src="ui/index.js"></script>
101+
</body>
102+
</html>

‎document-sandbox-samples/per-element-metadata/src/manifest.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"testId": "per-element-add-on-id-3",
3+
"name": "Per Element Metadata",
4+
"version": "1.0.0",
5+
"manifestVersion": 2,
6+
"requirements": {
7+
"experimentalApis": true,
8+
"apps": [
9+
{
10+
"name": "Express",
11+
"apiVersion": 1
12+
}
13+
]
14+
},
15+
"entryPoints": [
16+
{
17+
"type": "panel",
18+
"id": "panel1",
19+
"main": "index.html",
20+
"documentSandbox": "sandbox/code.js"
21+
}
22+
]
23+
}

‎document-sandbox-samples/per-element-metadata/src/sandbox/add-on-sandbox-sdk.d.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// DO NOT modify this file.
2+
3+
declare module "add-on-sdk-document-sandbox" {
4+
import { AddOnDocumentSandboxSdkTypes } from "@adobe/ccweb-add-on-sdk-types";
5+
export default AddOnDocumentSandboxSdkTypes.default;
6+
export * from "@adobe/ccweb-add-on-sdk-types/sandbox/add-on-sdk-document-sandbox";
7+
}
8+
9+
declare module "express-document-sdk" {
10+
export * from "@adobe/ccweb-add-on-sdk-types/sandbox/express-document-sdk";
11+
}

‎document-sandbox-samples/per-element-metadata/src/sandbox/code.js‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import addOnSandboxSdk from "add-on-sdk-document-sandbox";
2+
import { editor } from "express-document-sdk";
3+
4+
// Get the document sandbox runtime.
5+
const { runtime } = addOnSandboxSdk.instance;
6+
7+
function start() {
8+
let option = "selected";
9+
let node;
10+
// APIs to be exposed to the UI runtime
11+
// i.e., to the `index.html` file of this add-on.
12+
const sandboxApi = {
13+
setItem: (key, value) => {
14+
node = getNodeByOption(option);
15+
node.addOnData.setItem(key, value);
16+
},
17+
removeItem: (key) => {
18+
node = getNodeByOption(option);
19+
node.addOnData.removeItem(key);
20+
},
21+
getAll: () => {
22+
node = getNodeByOption(option);
23+
let keys, items = [];
24+
keys = node.addOnData.keys();
25+
keys.forEach((key) => {
26+
// push the key and value to items
27+
items.push({ key: key, value: node.addOnData.getItem(key) });
28+
});
29+
return items;
30+
},
31+
getItem: (key) => {
32+
node = getNodeByOption(option);
33+
return node.addOnData.getItem(key);
34+
},
35+
clearItems: () => {
36+
node = getNodeByOption(option);
37+
node.addOnData.clear();
38+
},
39+
40+
remainingQuota: () => {
41+
node = getNodeByOption(option);
42+
return node.addOnData.remainingQuota;
43+
},
44+
45+
selectedOption: (selectedOption) => {
46+
option = selectedOption;
47+
console.log("Selected option:", option);
48+
}
49+
};
50+
51+
// Expose `sandboxApi` to the UI runtime.
52+
runtime.exposeApi(sandboxApi);
53+
}
54+
55+
function getNodeByOption(option) {
56+
let node;
57+
if (option === "selected") {
58+
// Ensure there is exactly one node selected
59+
if (editor.context.selection.length === 1) {
60+
node = editor.context.selection[0];
61+
} else {
62+
throw new Error("Select exactly one node to perform this operation on.");
63+
}
64+
} else if (option === "currentPage") {
65+
node = editor.context.currentPage;
66+
} else if (option === "root") {
67+
node = editor.documentRoot;
68+
}
69+
return node;
70+
}
71+
72+
start();

‎document-sandbox-samples/per-element-metadata/src/sandbox/tsconfig.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"extends": "../../tsconfig.json",
3+
"compilerOptions": {
4+
"lib": ["ES2020"],
5+
"module": "ES2020",
6+
"target": "ES2020",
7+
"typeRoots": ["@adobe/ccweb-add-on-sdk-types/add-on-sandbox-sdk"]
8+
},
9+
"include": ["./**/*"]
10+
}

‎document-sandbox-samples/per-element-metadata/src/ui/add-on-ui-sdk.d.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// DO NOT modify this file.
2+
3+
declare module "https://new.express.adobe.com/static/add-on-sdk/sdk.js" {
4+
import { AddOnUISdkTypes } from "@adobe/ccweb-add-on-sdk-types";
5+
export default AddOnUISdkTypes.default;
6+
export * from "@adobe/ccweb-add-on-sdk-types/ui/ui-sdk";
7+
}

‎document-sandbox-samples/per-element-metadata/src/ui/index.js‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import addOnUISdk from "https://new.express.adobe.com/static/add-on-sdk/sdk.js";
2+
3+
addOnUISdk.ready.then(async () => {
4+
console.log("addOnUISdk is ready for use.");
5+
6+
// Get the UI runtime.
7+
const { runtime } = addOnUISdk.instance;
8+
9+
// Get the proxy object, which is required
10+
// to call the APIs defined in the Document Sandbox runtime
11+
// i.e., in the `code.js` file of this add-on.
12+
const sandboxProxy = await runtime.apiProxy("documentSandbox");
13+
14+
// Initialize UI elements and event listeners
15+
initializeUI(sandboxProxy);
16+
});
17+
18+
function initializeUI(sandboxProxy) {
19+
setupOptionChange(sandboxProxy);
20+
setupAddButton(sandboxProxy);
21+
setupRemoveButton(sandboxProxy);
22+
setupGetAllButton(sandboxProxy);
23+
setupGetButton(sandboxProxy);
24+
setupClearButton(sandboxProxy);
25+
setupRemainingQuota(sandboxProxy);
26+
}
27+
28+
function setupOptionChange(sandboxProxy) {
29+
const nodeOptions = document.querySelectorAll('input[name="nodeOption"]');
30+
31+
nodeOptions.forEach(option => {
32+
option.addEventListener('change', async () => {
33+
const selectedOption = document.querySelector('input[name="nodeOption"]:checked').value;
34+
await sandboxProxy.selectedOption(selectedOption);
35+
});
36+
});
37+
}
38+
39+
function setupAddButton(sandboxProxy) {
40+
const addBtn = document.getElementById("add");
41+
addBtn.addEventListener("click", async (event) => {
42+
const key = document.getElementById("key");
43+
const value = document.getElementById("value");
44+
45+
await sandboxProxy.setItem(key.value, value.value);
46+
});
47+
addBtn.disabled = false;
48+
}
49+
50+
function setupRemoveButton(sandboxProxy) {
51+
const removeBtn = document.getElementById("remove");
52+
removeBtn.addEventListener("click", async (event) => {
53+
const key = document.getElementById("key");
54+
55+
await sandboxProxy.removeItem(key.value);
56+
});
57+
removeBtn.disabled = false;
58+
}
59+
60+
function setupGetAllButton(sandboxProxy) {
61+
const getAllBtn = document.getElementById("getall");
62+
getAllBtn.addEventListener("click", async (event) => {
63+
const text = document.getElementById("text");
64+
text.rows = 1;
65+
66+
const metadata = await sandboxProxy.getAll();
67+
let value = "";
68+
metadata.forEach((element) => {
69+
value += `${element.key}\t${element.value}\n`;
70+
});
71+
text.rows = metadata.length;
72+
text.value = value;
73+
});
74+
getAllBtn.disabled = false;
75+
}
76+
77+
function setupGetButton(sandboxProxy) {
78+
const getBtn = document.getElementById("get");
79+
getBtn.addEventListener("click", async (event) => {
80+
const key = document.getElementById("key");
81+
const value = await sandboxProxy.getItem(key.value);
82+
83+
const text = document.getElementById("text");
84+
text.value = value;
85+
});
86+
getBtn.disabled = false;
87+
}
88+
89+
function setupClearButton(sandboxProxy) {
90+
const clearBtn = document.getElementById("clear");
91+
clearBtn.addEventListener("click", async (event) => {
92+
await sandboxProxy.clearItems();
93+
});
94+
clearBtn.disabled = false;
95+
}
96+
97+
function setupRemainingQuota(sandboxProxy) {
98+
const remainingQuotaBtn = document.getElementById("remainingQuota");
99+
remainingQuotaBtn.addEventListener("click", async (event) => {
100+
const remainingQuota = await sandboxProxy.remainingQuota();
101+
text.value = `Remaining quota\nsizeInBytes:${remainingQuota.sizeInBytes}\nnumKeys:${remainingQuota.numKeys}`;
102+
});
103+
remainingQuotaBtn.disabled = false;
104+
}

0 commit comments

Comments
 (0)