refactor: cookie popup

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

frontend/src/html/popups.html

@@ -59,10 +59,9 @@
   <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
@@ -70,7 +69,7 @@
     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,7 +602,7 @@
     color: var(--error-color);
   }
 }
-#cookiePopupWrapper {
+#cookiePopup {
   .extensionMessage {
     position: fixed;
     right: 2rem;
@@ -610,8 +610,9 @@
     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 => {
+    //
+  },
+});