Ability to create and close popups

This commit is contained in:
Ethan O'Brien 2023-06-22 12:27:21 -05:00
parent 86d28b867a
commit 9709e5df9b
2 changed files with 89 additions and 2 deletions

View file

@ -198,3 +198,41 @@
width: 0;
z-index: 2;
}
.ejs_popup_container {
background: rgba(0,0,0,0.8);
text-align: center;
z-index: 9999;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
color: #ccc;
}
.ejs_popup_container h4 {
color: #ccc;
font-size: 24px;
margin: 0;
padding: 10px;
}
.ejs_button {
border-radius: .25rem;
font-size: .875rem;
padding-left: 1rem;
padding-right: 1rem;
padding-top: .5rem;
padding-bottom: .5rem;
display: inline-block;
background-color: rgba(var(--ejs-primary-color),1);
margin: 0 10px;
color: #fff !important;
touch-action: manipulation;
cursor: pointer;
}
.ejs_popup_body {
height: calc(100% - 130px);
}

View file

@ -328,7 +328,10 @@ class EmulatorJS {
if (hidden) li.hidden = true;
const a = this.createElement("a");
if (functi0n instanceof Function) {
this.addEventListener(li, 'click', functi0n);
this.addEventListener(li, 'click', (e) => {
e.preventDefault();
functi0n();
});
}
a.href = "#";
a.onclick = "return false";
@ -357,12 +360,58 @@ class EmulatorJS {
this.gameManager.quickLoad();
hideMenu();
});
addButton("EmulatorJS", false, () => console.log("4"));
addButton("EmulatorJS", false, () => {
hideMenu();
const body = this.createPopup("EmulatorJS", {
"Close": () => {
this.closePopup();
}
});
body.innerText = "Todo. Write about, include tabs on side with licenses, links to docs/repo/discord?";
});
this.elements.contextmenu.appendChild(parent);
this.elements.parent.appendChild(this.elements.contextmenu);
}
closePopup() {
if (this.currentPopup !== null) {
try {
this.currentPopup.remove();
} catch(e){}
this.currentPopup = null;
}
}
//creates a full box popup.
createPopup(popupTitle, buttons) {
this.closePopup();
this.currentPopup = this.createElement('div');
this.currentPopup.classList.add("ejs_popup_container");
this.elements.parent.appendChild(this.currentPopup);
const title = this.createElement("h4");
title.innerText = popupTitle;
const main = this.createElement("div");
main.classList.add("ejs_popup_body");
this.currentPopup.appendChild(title);
this.currentPopup.appendChild(main);
for (let k in buttons) {
const button = this.createElement("a");
if (buttons[k] instanceof Function) {
button.addEventListener("click", (e) => {
buttons[k]();
e.preventDefault();
});
}
button.classList.add("ejs_button");
button.innerText = k;
this.currentPopup.appendChild(button);
}
return main;
}
selectFile() {
return new Promise((resolve, reject) => {
const file = this.createElement("input");