Skip to content

Commit 7213a26

Browse files
undavideundavide
authored
Merge pull request #32 from AdobeDocs/barranca/grids-color-picker
Implement native Color Picker in the Grids tutorial sample
2 parents eee85fc + 739064e commit 7213a26

File tree

4 files changed

+86
-59
lines changed

4 files changed

+86
-59
lines changed

‎document-sandbox-samples/express-grids-addon/grids-design-end/package.json‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "grids",
3-
"version": "1.0.0",
3+
"version": "1.0.2",
44
"description": "Adobe Creative Cloud Web Add-on.",
55
"scripts": {
66
"clean": "ccweb-add-on-scripts clean",
@@ -15,26 +15,26 @@
1515
"Adobe Express"
1616
],
1717
"devDependencies": {
18-
"@adobe/ccweb-add-on-scripts": "^2.0.0",
18+
"@adobe/ccweb-add-on-scripts": "^3.0.0",
1919
"@types/adobe__ccweb-add-on-sdk": "^1.3.0",
20-
"@babel/core": "^7.23.0",
21-
"@babel/preset-env": "^7.22.20",
22-
"babel-loader": "^9.1.3",
23-
"copy-webpack-plugin": "^11.0.0",
24-
"css-loader": "^6.8.1",
25-
"html-webpack-plugin": "^5.5.3",
26-
"style-loader": "^3.3.3",
27-
"webpack": "^5.88.2",
28-
"webpack-cli": "^5.1.4"
20+
"@babel/core": "^7.28.0",
21+
"@babel/preset-env": "^7.28.0",
22+
"babel-loader": "^10.0.0",
23+
"copy-webpack-plugin": "^13.0.0",
24+
"css-loader": "^7.1.2",
25+
"html-webpack-plugin": "^5.6.3",
26+
"style-loader": "^4.0.0",
27+
"webpack": "^5.101.0",
28+
"webpack-cli": "^6.0.1"
2929
},
3030
"dependencies": {
31-
"@spectrum-web-components/action-button": "^0.39.1",
32-
"@spectrum-web-components/button": "^0.39.1",
33-
"@spectrum-web-components/button-group": "^0.39.1",
34-
"@spectrum-web-components/field-label": "^0.39.1",
35-
"@spectrum-web-components/number-field": "^0.39.1",
36-
"@spectrum-web-components/slider": "^0.39.1",
37-
"@spectrum-web-components/swatch": "^0.39.1",
38-
"@spectrum-web-components/theme": "^0.39.1"
31+
"@spectrum-web-components/action-button": "^1.7.0",
32+
"@spectrum-web-components/button": "^1.7.0",
33+
"@spectrum-web-components/button-group": "^1.7.0",
34+
"@spectrum-web-components/field-label": "^1.7.0",
35+
"@spectrum-web-components/number-field": "^1.7.0",
36+
"@spectrum-web-components/slider": "^1.7.0",
37+
"@spectrum-web-components/swatch": "^1.7.0",
38+
"@spectrum-web-components/theme": "^1.7.0"
3939
}
40-
}
40+
}

‎document-sandbox-samples/express-grids-addon/grids-design-end/src/index.html‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ <h2>Design Grid creator</h2>
3030
</sp-number-field>
3131
</div>
3232
<sp-swatch id="rowsColorSwatch" class="color-well"></sp-swatch>
33-
<input type="color" id="rowsColorPicker" style="display: none;">
3433
</div>
3534
<div class="row">
3635
<div class="column">
@@ -39,7 +38,6 @@ <h2>Design Grid creator</h2>
3938
</sp-number-field>
4039
</div>
4140
<sp-swatch id="colsColorSwatch" class="color-well"></sp-swatch>
42-
<input type="color" id="colsColorPicker" style="display: none;">
4341
</div>
4442
</div>
4543
<div class="row">

‎document-sandbox-samples/express-grids-addon/grids-design-end/src/ui/index.js‎

Lines changed: 46 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,10 @@ import "@spectrum-web-components/number-field/sp-number-field.js";
2525
import "@spectrum-web-components/slider/sp-slider.js";
2626
import "@spectrum-web-components/swatch/sp-swatch.js";
2727

28-
import addOnUISdk from "https://new.express.adobe.com/static/add-on-sdk/sdk.js";
28+
import addOnUISdk, {
29+
ColorPickerEvent,
30+
ColorPickerPlacement,
31+
} from "https://new.express.adobe.com/static/add-on-sdk/sdk.js";
2932

3033
addOnUISdk.ready.then(async () => {
3134
console.log("addOnUISdk is ready for use.");
@@ -46,30 +49,56 @@ addOnUISdk.ready.then(async () => {
4649

4750
// Color pickers ------------------------------------------
4851

49-
const colsColorPicker = document.getElementById("colsColorPicker");
5052
const colsColorSwatch = document.getElementById("colsColorSwatch");
51-
const rowsColorPicker = document.getElementById("rowsColorPicker");
5253
const rowsColorSwatch = document.getElementById("rowsColorSwatch");
5354

54-
colsColorPicker.value = "#ffcccc";
55-
colsColorSwatch.color = "#ffcccc";
56-
rowsColorPicker.value = "#ccccff";
57-
rowsColorSwatch.color = "#ccccff";
55+
// Initialize colors and store current values
56+
let colsColor = "#ffcccc";
57+
let rowsColor = "#ccccff";
5858

59+
colsColorSwatch.color = colsColor;
60+
rowsColorSwatch.color = rowsColor;
61+
62+
// Setup color picker for columns
5963
colsColorSwatch.addEventListener("click", function () {
60-
colsColorPicker.click();
64+
addOnUISdk.app.showColorPicker(colsColorSwatch, {
65+
title: "Column Grid Color",
66+
initialColor: colsColor,
67+
placement: ColorPickerPlacement.right,
68+
});
6169
});
62-
colsColorPicker.addEventListener("input", function (event) {
63-
const selectedColor = event.target.value;
64-
colsColorSwatch.setAttribute("color", selectedColor);
70+
71+
colsColorSwatch.addEventListener(
72+
ColorPickerEvent.colorChange,
73+
function (event) {
74+
colsColor = event.detail.color;
75+
colsColorSwatch.setAttribute("color", colsColor);
76+
}
77+
);
78+
79+
colsColorSwatch.addEventListener(ColorPickerEvent.close, function (event) {
80+
console.log("Columns color picker closed");
6581
});
6682

83+
// Setup color picker for rows
6784
rowsColorSwatch.addEventListener("click", function () {
68-
rowsColorPicker.click();
85+
addOnUISdk.app.showColorPicker(rowsColorSwatch, {
86+
title: "Row Grid Color",
87+
initialColor: rowsColor,
88+
placement: ColorPickerPlacement.right,
89+
});
6990
});
70-
rowsColorPicker.addEventListener("input", function (event) {
71-
const selectedColor = event.target.value;
72-
rowsColorSwatch.setAttribute("color", selectedColor);
91+
92+
rowsColorSwatch.addEventListener(
93+
ColorPickerEvent.colorChange,
94+
function (event) {
95+
rowsColor = event.detail.color;
96+
rowsColorSwatch.setAttribute("color", rowsColor);
97+
}
98+
);
99+
100+
rowsColorSwatch.addEventListener(ColorPickerEvent.close, function (event) {
101+
console.log("Rows color picker closed");
73102
});
74103

75104
// CTA Buttons --------------------------------------------
@@ -90,8 +119,8 @@ addOnUISdk.ready.then(async () => {
90119
columns: colsInput.value,
91120
rows: rowsInput.value,
92121
gutter: gutterInput.value,
93-
columnColor: colsColorPicker.value,
94-
rowColor: rowsColorPicker.value,
122+
columnColor: colsColor,
123+
rowColor: rowsColor,
95124
});
96125
deleteGridBtn.disabled = false;
97126
};

‎document-sandbox-samples/express-grids-addon/grids-design-start/package.json‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "grids",
3-
"version": "1.0.0",
3+
"version": "1.0.2",
44
"description": "Adobe Creative Cloud Web Add-on.",
55
"scripts": {
66
"clean": "ccweb-add-on-scripts clean",
@@ -15,26 +15,26 @@
1515
"Adobe Express"
1616
],
1717
"devDependencies": {
18-
"@adobe/ccweb-add-on-scripts": "^2.0.0",
18+
"@adobe/ccweb-add-on-scripts": "^3.0.0",
1919
"@types/adobe__ccweb-add-on-sdk": "^1.3.0",
20-
"@babel/core": "^7.23.0",
21-
"@babel/preset-env": "^7.22.20",
22-
"babel-loader": "^9.1.3",
23-
"copy-webpack-plugin": "^11.0.0",
24-
"css-loader": "^6.8.1",
25-
"html-webpack-plugin": "^5.5.3",
26-
"style-loader": "^3.3.3",
27-
"webpack": "^5.88.2",
28-
"webpack-cli": "^5.1.4"
20+
"@babel/core": "^7.28.0",
21+
"@babel/preset-env": "^7.28.0",
22+
"babel-loader": "^10.0.0",
23+
"copy-webpack-plugin": "^13.0.0",
24+
"css-loader": "^7.1.2",
25+
"html-webpack-plugin": "^5.6.3",
26+
"style-loader": "^4.0.0",
27+
"webpack": "^5.101.0",
28+
"webpack-cli": "^6.0.1"
2929
},
3030
"dependencies": {
31-
"@spectrum-web-components/action-button": "^0.39.1",
32-
"@spectrum-web-components/button": "^0.39.1",
33-
"@spectrum-web-components/button-group": "^0.39.1",
34-
"@spectrum-web-components/field-label": "^0.39.1",
35-
"@spectrum-web-components/number-field": "^0.39.1",
36-
"@spectrum-web-components/slider": "^0.39.1",
37-
"@spectrum-web-components/swatch": "^0.39.1",
38-
"@spectrum-web-components/theme": "^0.39.1"
31+
"@spectrum-web-components/action-button": "^1.7.0",
32+
"@spectrum-web-components/button": "^1.7.0",
33+
"@spectrum-web-components/button-group": "^1.7.0",
34+
"@spectrum-web-components/field-label": "^1.7.0",
35+
"@spectrum-web-components/number-field": "^1.7.0",
36+
"@spectrum-web-components/slider": "^1.7.0",
37+
"@spectrum-web-components/swatch": "^1.7.0",
38+
"@spectrum-web-components/theme": "^1.7.0"
3939
}
40-
}
40+
}

0 commit comments

Comments
 (0)