Skip to content
Snippets Groups Projects
Verified Commit 15ceae2a authored by João Magalhães's avatar João Magalhães :rocket:
Browse files

refactor: removed old modal structure

parent 14da0a41
No related branches found
No related tags found
1 merge request!9Version 0.4.0 🍾
Pipeline #1382 passed
Stage: build
Stage: deploy
Hide whitespace changes
Inline Side-by-side
examples/web/index.css
+ 0
− 132
View file @ 15ceae2a
......@@ -256,138 +256,6 @@ p {
width: 64px;
}
.modal-container {
align-items: center;
background-color: rgba(20, 20, 20, 0.95);
display: flex;
height: 100%;
justify-content: center;
left: 0px;
opacity: 0;
-o-opacity: 0;
-ms-opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
-webkit-opacity: 0;
padding: 0px 12px 0px 12px;
pointer-events: none;
position: fixed;
text-align: center;
top: 0px;
transition: opacity 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
-o-transition: opacity 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
-ms-transition: opacity 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
-moz-transition: opacity 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
-khtml-transition: opacity 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
-webkit-transition: opacity 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
width: 100%;
z-index: 10;
}
.modal-container.visible {
opacity: 1.0;
-o-opacity: 1.0;
-ms-opacity: 1.0;
-moz-opacity: 1.0;
-khtml-opacity: 1.0;
-webkit-opacity: 1.0;
transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
-o-transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
-ms-transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
-moz-transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
-khtml-transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
-webkit-transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.modal-container > .modal {
background-color: #264653;
border-radius: 6px 6px 6px 6px;
-o-border-radius: 6px 6px 6px 6px;
-ms-border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
-khtml-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24);
-o-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24);
-ms-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24);
-moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24);
-khtml-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24);
-webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24);
margin-top: 30px;
max-width: 100%;
padding: 24px 24px 24px 24px;
text-align: left;
transform: scale(0.96);
-o-transform: scale(0.96);
-ms-transform: scale(0.96);
-moz-transform: scale(0.96);
-khtml-transform: scale(0.96);
-webkit-transform: scale(0.96);
transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
-o-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
-ms-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
-moz-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
-khtml-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
-webkit-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
width: 480px;
}
.modal-container.visible > .modal {
margin-top: 0px;
pointer-events: all;
transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
-moz-transform: scale(1);
-khtml-transform: scale(1);
-webkit-transform: scale(1);
transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
-o-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
-ms-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
-moz-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
-khtml-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
-webkit-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.modal-container > .modal .modal-top-buttons {
float: right;
margin-right: -10px;
margin-top: -10px;
}
.modal-container > .modal .modal-title {
font-size: 32px;
margin-top: 0px;
text-align: left;
}
.modal-container > .modal .modal-text {
font-size: 20px;
line-height: 22px;
}
.modal-container > .modal .modal-buttons {
font-size: 22px;
margin-top: 24px;
text-align: center;
user-select: none;
-o-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
}
.modal-container > .modal .modal-buttons > .button.simple {
display: inline-block;
margin-right: 12px;
min-width: 120px;
}
.modal-container > .modal .modal-buttons > .button.simple:last-child {
margin-right: 0px;
}
.keyboard {
font-size: 0px;
text-align: center;
......
examples/web/index.html
+ 0
− 15
View file @ 15ceae2a
......@@ -122,21 +122,6 @@
<div id="toast" class="toast"></div>
</div>
</body>
<div id="modal-container" class="modal-container">
<div id="modal" class="modal">
<div class="modal-top-buttons">
<span id="modal-close" class="button simple rounded no-text">
<img class="medium" src="res/close.svg" alt="close" />
</span>
</div>
<h2 id="modal-title" class="modal-title"></h2>
<p id="modal-text" class="modal-text"></p>
<div class="modal-buttons">
<span id="modal-cancel" class="button simple red border padded-large">Cancel</span>
<span id="modal-confirm" class="button simple border padded-large">Confirm</span>
</div>
</div>
</div>
<div id="overlay" class="overlay">
<div class="overlay-container">
<div class="overlay-text">
......
examples/web/index.ts
+ 1
− 59
View file @ 15ceae2a
......@@ -339,8 +339,7 @@ class GameboyEmulator extends Observable implements Emulator {
this.registerKeys(),
this.registerButtons(),
this.registerKeyboard(),
this.registerToast(),
this.registerModal()
this.registerToast()
]);
}
......@@ -475,11 +474,6 @@ class GameboyEmulator extends Observable implements Emulator {
const buttonBenchmark = document.getElementById("button-benchmark")!;
buttonBenchmark.addEventListener("click", async () => {
const result = await this.showModal(
"Are you sure you want to start a benchmark?\nThe benchmark is considered an expensive operation!",
"Confirm"
);
if (!result) return;
buttonBenchmark.classList.add("enabled");
this.pause();
try {
......@@ -730,29 +724,6 @@ class GameboyEmulator extends Observable implements Emulator {
});
}
registerModal() {
const modalClose = document.getElementById("modal-close")!;
modalClose.addEventListener("click", () => {
this.hideModal(false);
});
const modalCancel = document.getElementById("modal-cancel")!;
modalCancel.addEventListener("click", () => {
this.hideModal(false);
});
const modalConfirm = document.getElementById("modal-confirm")!;
modalConfirm.addEventListener("click", () => {
this.hideModal(true);
});
document.addEventListener("keydown", (event) => {
if (event.key === "Escape") {
this.hideModal(false);
}
});
}
async initBase() {
this.setVersion(info.version);
}
......@@ -770,26 +741,6 @@ class GameboyEmulator extends Observable implements Emulator {
}, timeout);
}
async showModal(message: string, title = "Alert"): Promise<boolean> {
const modalContainer = document.getElementById("modal-container")!;
const modalTitle = document.getElementById("modal-title")!;
const modalText = document.getElementById("modal-text")!;
modalContainer.classList.add("visible");
modalTitle.textContent = title;
modalText.innerHTML = message.replace(/\n/g, "<br/>");
const result = (await new Promise((resolve) => {
global.modalCallback = resolve;
})) as boolean;
return result;
}
async hideModal(result = true) {
const modalContainer = document.getElementById("modal-container")!;
modalContainer.classList.remove("visible");
if (global.modalCallback) global.modalCallback(result);
global.modalCallback = null;
}
setVersion(value: string) {
document.getElementById("version")!.textContent = value;
}
......@@ -916,15 +867,6 @@ class GameboyEmulator extends Observable implements Emulator {
}
}
type Global = {
modalCallback: Function | null;
};
//@todo check if this is really required
const global: Global = {
modalCallback: null
};
declare global {
interface Window {
panic: (message: string) => void;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment