From 15ceae2a507e4d1ee404b86804ce705cd3dc264d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Sun, 30 Oct 2022 18:57:40 +0000
Subject: [PATCH] refactor: removed old modal structure
---
examples/web/index.css | 132 ----------------------------------------
examples/web/index.html | 15 -----
examples/web/index.ts | 60 +-----------------
3 files changed, 1 insertion(+), 206 deletions(-)
diff --git a/examples/web/index.css b/examples/web/index.css
index 49b3eb97..35b667a0 100644
--- a/examples/web/index.css
+++ b/examples/web/index.css
@@ -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;
diff --git a/examples/web/index.html b/examples/web/index.html
index 5deae36e..a0577917 100644
--- a/examples/web/index.html
+++ b/examples/web/index.html
@@ -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">
diff --git a/examples/web/index.ts b/examples/web/index.ts
index cd5b0100..b5286b24 100644
--- a/examples/web/index.ts
+++ b/examples/web/index.ts
@@ -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;
--
GitLab