Skip to content

Commit 4186ee9

Browse files
kerrishottskerrishotts
committed
Update kitchen sink for UXP 5.2
1 parent 3543290 commit 4186ee9

File tree

11 files changed

+1666
-746
lines changed

11 files changed

+1666
-746
lines changed

‎ui-kitchen-sink/dialogs.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
2+
3+
/* dialog styles */
4+
:not(.xd) dialog {
5+
width: 480px;
6+
height: 240px;
7+
padding: 0;
8+
margin: 0;
9+
display: flex;
10+
}
11+
12+
:not(.xd) dialog form {
13+
width: 100vw;
14+
height: 100vh;
15+
display: flex;
16+
flex-direction: column;
17+
padding: 32px;
18+
}
19+
20+
:not(.xd) dialog form > * {
21+
flex: 0 0 auto;
22+
margin: 8px;
23+
}
24+
25+
.xd dialog form sp-divider {
26+
width: calc(100% - 16px);
27+
}
28+
29+
dialog form sp-body {
30+
flex: 1 1 auto;
31+
}

‎ui-kitchen-sink/dialogs.js‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
// sp-dialog handling
2+
const spDialogs = [
3+
["showInfoSpDialog", "infoSpDialog"],
4+
["showErrorSpDialog", "errorSpDialog"],
5+
["showDestructiveSpDialog", "destructiveSpDialog"],
6+
["showConfirmSpDialog", "confirmSpDialog"],
7+
["showCustomSpDialog", "customSpDialog"],
8+
];
9+
spDialogs.forEach(([btn, dlg]) => {
10+
const btnEl = document.querySelector(`#${btn}`);
11+
const dlgEl = document.querySelector(`#${dlg}`);
12+
if (btnEl && dlgEl) {
13+
btnEl.onclick = () => dlgEl.setAttribute("open");
14+
}
15+
if (dlgEl) {
16+
const allTheButtons = document.querySelectorAll(`#${dlg} sp-button`);
17+
allTheButtons.forEach(el => {
18+
el.onclick = () => dlgEl.removeAttribute("open");
19+
});
20+
}
21+
});
22+
23+
24+
// dialog handling
25+
document.querySelector("#btnOpenDialog").onclick = () => {
26+
document.querySelector("#dlgExample").uxpShowModal({
27+
title: "Dialog Example",
28+
resize: "none", // "both", "horizontal", "vertical",
29+
size: {
30+
width: 480,
31+
height: 240
32+
}
33+
});
34+
};
35+
36+
// enable dialog buttons to close
37+
Array.from(document.querySelectorAll("#dlgExample sp-button")).forEach(button => {
38+
button.onclick = () => document.querySelector("#dlgExample").close();
39+
});
40+
41+
42+
// programmatic dialog
43+
const openProgrammaticDialog = async () => {
44+
const theDialog = document.createElement("dialog");
45+
const theForm = document.createElement("form");
46+
const theHeading = document.createElement("sp-heading");
47+
const theDivider = document.createElement("sp-divider");
48+
const theBody = document.createElement("sp-body");
49+
const theFooter = document.createElement("footer");
50+
const theActionButton = document.createElement("sp-button");
51+
const theCancelButton = document.createElement("sp-button");
52+
53+
theHeading.textContent = "Vectorize Images?";
54+
theDivider.setAttribute("size", "large");
55+
theBody.textContent = "Are you sure you want to vectorize the images? This might take some time.";
56+
theActionButton.textContent = "Vectorize";
57+
theActionButton.setAttribute("variant", "cta");
58+
theCancelButton.textContent = "Don't Vectorize";
59+
theCancelButton.setAttribute("quiet", "true");
60+
theCancelButton.setAttribute("variant", "secondary");
61+
62+
theActionButton.onclick = () => {
63+
theDialog.close("ok");
64+
}
65+
theCancelButton.onclick = () => {
66+
theDialog.close("reasonCanceled");
67+
}
68+
69+
theFooter.appendChild(theCancelButton);
70+
theFooter.appendChild(theActionButton);
71+
72+
theForm.appendChild(theHeading);
73+
theForm.appendChild(theDivider);
74+
theForm.appendChild(theBody);
75+
theForm.appendChild(theFooter);
76+
theDialog.appendChild(theForm);
77+
document.body.appendChild(theDialog);
78+
79+
const r = await theDialog.uxpShowModal({
80+
title: "Programmatic Dialog",
81+
resize: "none", // "both", "horizontal", "vertical",
82+
size: {
83+
width: 480,
84+
height: 240
85+
}
86+
});
87+
console.log(r);
88+
theDialog.remove();
89+
}
90+
document.querySelector("#btnOpenPDialog").onclick = openProgrammaticDialog;
91+
92+
module.exports = {
93+
openProgrammaticDialog
94+
};

‎ui-kitchen-sink/eventlog.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
2+
/* logs */
3+
.console {
4+
flex: 0 0 auto;
5+
overflow: scroll;
6+
height: 140px;
7+
display: none;
8+
}
9+
.console.visible {
10+
display: block;
11+
}
12+
13+
.console #logs {
14+
white-space: pre;
15+
font-family: menlo;
16+
font-size: 8px;
17+
color: black;
18+
background-color: white;
19+
}

‎ui-kitchen-sink/eventlog.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
2+
// logging events
3+
function logEvent(evt) {
4+
const eventType = evt.type;
5+
const filterElement = document.querySelector(`#chk${eventType}`);
6+
if (!filterElement.checked) return;
7+
8+
const logs = document.querySelector("#logs");
9+
const evtText = `` +
10+
`${evt.type} ${evt.target.tagName} ${evt.target.textContent.substr(0,10).replace(/\n/g,"")} ` +
11+
`${evt.target.value !== undefined ? `Value: ${evt.target.value}` : ""} ` +
12+
`${evt.target.checked !== undefined ? `Checked: ${evt.target.checked}` : ""} ` +
13+
`${evt.target.selectedIndex !== undefined ? `Selected: ${evt.target.selectedIndex}` : ""} ` +
14+
`${evt.which !== undefined ? `Which: ${evt.which}` : ""} ` +
15+
`${evt.button !== undefined ? `Button: ${evt.button}` : ""} ` +
16+
`${evt.altKey !== undefined ? `alt: ${evt.altKey}` : ""} ` +
17+
`${evt.shiftKey !== undefined ? `shift: ${evt.shiftKey}` : ""} ` +
18+
`${evt.ctrlKey !== undefined ? `ctrl: ${evt.ctrlKey}` : ""} ` +
19+
`${evt.metaKey !== undefined ? `meta: ${evt.metaKey}` : ""} ` +
20+
`${evt.key !== undefined ? `Key: ${evt.key}` : ""} ` +
21+
`${evt.charCode !== undefined ? `char: ${evt.charCode}` : ""} ` +
22+
`${evt.offsetX !== undefined ? `OffsetX: ${Math.floor(evt.offsetX)},` : ""} ` +
23+
`${evt.offsetY !== undefined ? `${Math.floor(evt.offsetY)}` : ""} ` +
24+
`${evt.clientX !== undefined ? `ClientX: ${Math.floor(evt.clientX)},` : ""} ` +
25+
`${evt.clientY !== undefined ? `${Math.floor(evt.clientY)}` : ""} ` +
26+
`${evt.screenX !== undefined ? `ScreenX: ${Math.floor(evt.screenX)},` : ""} ` +
27+
`${evt.screenY !== undefined ? `${Math.floor(evt.screenY)}` : ""} ` +
28+
`\n`;
29+
logs.innerText = (evtText + logs.innerText).split("\n").slice(0, 200).join("\n");
30+
}
31+
32+
33+
["click", "dblclick", "auxclick", "contextmenu",
34+
"mousedown", "mouseup", "mouseover", "mouseleave", "mouseenter", "mousemove", "mouseout", "mousewheel", "wheel",
35+
"input", "change", "keydown", "keyup", "keypress"
36+
].forEach(evtName => {
37+
document.querySelector(".wrapper").addEventListener(evtName, logEvent);
38+
});
39+
40+
document.querySelector("#toggleConsole").addEventListener("change", evt => {
41+
const checked = evt.target.checked;
42+
const theConsole = document.querySelector("#console");
43+
if (checked) {
44+
theConsole.classList.add("visible");
45+
} else {
46+
theConsole.classList.remove("visible");
47+
}
48+
});

0 commit comments

Comments
 (0)