Skip to content

Instantly share code, notes, and snippets.

@marcmartino
Created June 10, 2020 15:11
Show Gist options
  • Save marcmartino/03c56151a0a7ce006be2eb0fcc7c9246 to your computer and use it in GitHub Desktop.
Save marcmartino/03c56151a0a7ce006be2eb0fcc7c9246 to your computer and use it in GitHub Desktop.
Generated by XState Viz: https://xstate.js.org/viz
let prod = false;
const getVizPromiseInput = () => {
return document.getElementById("serviceInput").value;
};
const clearVizPromiseInput = () => {
document.getElementById("serviceInput").value = "";
};
const disableViz = () => {
document.getElementById("serviceCont").className = "disabled";
};
const enableViz = () => {
document.getElementById("serviceCont").className = "";
};
const resolveWithTextInput = (resolve) => {
resolve(getVizPromiseInput());
clearVizPromiseInput();
};
const getVizPromise = () => {
const doneBtn = document.getElementById("serviceDone");
const errBtn = document.getElementById("serviceError");
enableViz()
return new Promise((resolve, reject) => {
const doneClick = () => {
resolveWithTextInput(resolve);
doneBtn?.removeEventListener("click", doneClick);
disableViz()
clearVizPromiseInput()
};
const errClick = () => {
reject();
errBtn?.removeEventListener("click", errClick);
disableViz()
clearVizPromiseInput()
};
doneBtn?.addEventListener("click", doneClick);
errBtn?.addEventListener("click", errClick);
});
};
const setupVizPromiseInput = () => {
// add the newly created element and its content into the DOM
if (!document.getElementById("serviceCont")) {
var header = document.getElementsByTagName("header")[0];
header.insertAdjacentHTML(
"afterbegin",
`
<div id="serviceCont" class="disabled" >
<div id="serviceError" class="serviceButton" style="background-color: #cc6a7e;">err </div>&nbsp;
<div id="serviceDone" class="serviceButton" style="background-color: #4ac752;">done</div>&nbsp;
<input id="serviceInput" />
</div>`
);
const style = document.createElement("style");
style.innerHTML = `
#serviceCont {
display: flex;
flex-direction: row;
height: 60px;
}
#serviceCont.disabled {
opacity: .5
}
.serviceButton {
cursor: pointer;
padding: 20px; margin-right: 10px;
}
#serviceCont.disabled .serviceButton {
cursor: auto;
background-color: gray
}
`;
document.head.appendChild(style);
}
};
!prod && setupVizPromiseInput();
getVizPromise()
.then((val) => alert(`click ${val || 'empty'}`))
.catch(() => alert("err"));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment