refactor: cookie popup

use animated modal class
should fix brave having issues with the cookie popup

frontend/src/html/popups.html

@@ -59,18 +59,17 @@
   <div id="simplePopup" popupId=""></div>
 </div>
 
-<div
-  id="cookiePopupWrapper"
-  class="cookie-popup-wrapper cookiePopupWrapper popupWrapper hidden"
-  tabindex="-1"
+<dialog
+  id="cookiePopup"
+  class="cookie-popup-wrapper cookiePopupWrapper modalWrapper hidden"
 >
   <div class="extensionMessage">
     If you see this text, that means an extension is blocking a cookie consent
     popup. This will cause the website to incorrectly assume its still visible
     and stop you from enjoying Monkeytype. Please disable any extensions that
     block cookie popups and refresh the page.
   </div>
-  <div id="cookiePopup">
+  <div class="modal">
     <div class="title">
       <i class="fas far fa-cookie-bite"></i>
       We use cookies by the way
@@ -126,7 +125,7 @@
       <button class="active acceptSelected">accept selected</button>
     </div>
   </div>
-</div>
+</dialog>
 
 <div id="shareTestSettingsPopupWrapper" class="popupWrapper hidden">
   <div id="shareTestSettingsPopup">

frontend/src/styles/popups.scss

@@ -602,16 +602,17 @@
     color: var(--error-color);
   }
 }
-#cookiePopupWrapper {
+#cookiePopup {
   .extensionMessage {
     position: fixed;
     right: 2rem;
     bottom: 2rem;
     padding: 1rem;
     width: 465px;
     font-size: 0.75rem;
+    color: var(--text-color);
   }
-  #cookiePopup {
+  .modal {
     position: fixed;
     right: 2rem;
     bottom: 2rem;
@@ -620,7 +621,7 @@
     padding: 2rem;
     display: grid;
     gap: 1rem;
-    width: 465px;
+    min-width: 465px;
     z-index: 100000001;
     // outline: 0.5rem solid var(--bg-color)
     -webkit-user-select: none;

frontend/src/ts/controllers/input-controller.ts

@@ -32,7 +32,6 @@ import * as KeymapEvent from "../observables/keymap-event";
 import { IgnoredKeys } from "../constants/ignored-keys";
 import { ModifierKeys } from "../constants/modifier-keys";
 import { navigate } from "./route-controller";
-import * as CookiePopup from "../popups/cookie-popup";
 
 let dontInsertSpace = false;
 let correctShiftUsed = true;
@@ -874,15 +873,12 @@ $("#wordsInput").on("keydown", (event) => {
   const commandLineVisible = Misc.isPopupVisible("commandLineWrapper");
   const leaderboardsVisible = Misc.isPopupVisible("leaderboardsWrapper");
   const popupVisible: boolean = Misc.isAnyPopupVisible();
-  const cookiePopupVisible = CookiePopup.isVisible();
-
   const allowTyping: boolean =
     pageTestActive &&
     !commandLineVisible &&
     !leaderboardsVisible &&
     !popupVisible &&
     !TestUI.resultVisible &&
-    !cookiePopupVisible &&
     event.key !== "Enter";
 
   if (!allowTyping) {
@@ -913,13 +909,6 @@ $(document).on("keydown", async (event) => {
 
   const popupVisible: boolean = Misc.isAnyPopupVisible();
 
-  const cookiePopupVisible = CookiePopup.isVisible();
-
-  if (cookiePopupVisible) {
-    console.debug("Ignoring keydown event because cookie popup is visible.");
-    return;
-  }
-
   const allowTyping: boolean =
     pageTestActive &&
     !commandLineVisible &&

frontend/src/ts/pages/test.ts

@@ -8,7 +8,6 @@ import { updateFooterAndVerticalAds } from "../controllers/ad-controller";
 import * as ModesNotice from "../elements/modes-notice";
 import * as Keymap from "../elements/keymap";
 import * as TestConfig from "../test/test-config";
-import * as CookiePopup from "../popups/cookie-popup";
 
 export const page = new Page(
   "test",
@@ -36,11 +35,6 @@ export const page = new Page(
     void Keymap.refresh();
   },
   async () => {
-    if (CookiePopup.isVisible()) {
-      TestUI.blurWords();
-      $("#cookiePopupWrapper").trigger("focus");
-    } else {
-      TestUI.focusWords();
-    }
+    TestUI.focusWords();
   }
 );

frontend/src/ts/popups/animated-modal.ts

@@ -294,4 +294,11 @@ export default class AnimatedModal {
       }
     });
   }
+
+  destroy(): void {
+    this.wrapperEl.close();
+    this.wrapperEl.classList.add("hidden");
+    Skeleton.remove(this.wrapperId);
+    this.open = false;
+  }
 }

frontend/src/ts/popups/cookie-popup.ts

@@ -1,13 +1,8 @@
 import { activateAnalytics } from "../controllers/analytics-controller";
-import { focusWords } from "../test/test-ui";
 import * as Notifications from "../elements/notifications";
-import * as Skeleton from "./skeleton";
 import { isPopupVisible } from "../utils/misc";
 import * as AdController from "../controllers/ad-controller";
-
-const wrapperId = "cookiePopupWrapper";
-
-let visible = false;
+import AnimatedModal from "./animated-modal";
 
 type Accepted = {
   security: boolean;
@@ -34,61 +29,18 @@ export function check(): void {
   }
 }
 
-export function isVisible(): boolean {
-  return visible;
-}
-
 export function show(): void {
-  Skeleton.append(wrapperId);
-  $("#cookiePopupWrapper").removeClass("hidden");
-  visible = true;
-  if (
-    $("#cookiePopupWrapper")[0] === undefined ||
-    !$("#cookiePopupWrapper").is(":visible") ||
-    $("#cookiePopupWrapper").outerHeight(true) === 0
-  ) {
-    //removed by cookie popup blocking extension
-    $("#cookiePopupWrapper").addClass("hidden");
-    visible = false;
-    Skeleton.remove(wrapperId);
-    return;
-  }
-  if (!isPopupVisible(wrapperId)) {
-    $("#cookiePopupWrapper")
-      .stop(true, true)
-      .css("opacity", 0)
-      .removeClass("hidden")
-      .animate({ opacity: 1 }, 0, () => {
-        if (
-          !$("#cookiePopupWrapper").is(":visible") ||
-          $("#cookiePopupWrapper").outerHeight(true) === 0
-        ) {
-          visible = false;
-        } else {
-          visible = true;
-        }
-      });
-  }
+  void modal.show({
+    afterAnimation: async () => {
+      if (!isPopupVisible("cookiePopup")) {
+        modal.destroy();
+      }
+    },
+  });
 }
 
 async function hide(): Promise<void> {
-  if (isPopupVisible(wrapperId)) {
-    focusWords();
-    $("#cookiePopupWrapper")
-      .stop(true, true)
-      .css("opacity", 1)
-      .animate(
-        {
-          opacity: 0,
-        },
-        125,
-        () => {
-          $("#cookiePopupWrapper").addClass("hidden");
-          visible = false;
-          Skeleton.remove(wrapperId);
-        }
-      );
-  }
+  void modal.hide();
 }
 
 export function showSettings(): void {
@@ -97,14 +49,10 @@ export function showSettings(): void {
 }
 
 function verifyVisible(): void {
-  if (!visible) return;
-  if (
-    $("#cookiePopupWrapper")[0] === undefined ||
-    !$("#cookiePopupWrapper").is(":visible") ||
-    $("#cookiePopupWrapper").outerHeight(true) === 0
-  ) {
+  if (!modal.isOpen()) return;
+  if (!isPopupVisible("cookiePopup")) {
     //removed by cookie popup blocking extension
-    visible = false;
+    void modal.destroy();
   }
 }
 
@@ -147,7 +95,7 @@ $("#cookiePopup .openSettings").on("click", () => {
 
 $(document).on("keypress", (e) => {
   verifyVisible();
-  if (visible) {
+  if (modal.isOpen()) {
     e.preventDefault();
   }
 });
@@ -164,4 +112,11 @@ $("#cookiePopup .cookie.ads .textButton").on("click", () => {
   }
 });
 
-Skeleton.save(wrapperId);
+const modal = new AnimatedModal("cookiePopup", undefined, {
+  customEscapeHandler: (): void => {
+    //
+  },
+  customWrapperClickHandler: (): void => {
+    //
+  },
+});