From ec04272e993a0a7cabb7f2210b77313fb0076d0f Mon Sep 17 00:00:00 2001
From: Miodec <bartnikjack@gmail.com>
Date: Sat, 1 Jan 2022 17:48:04 +0100
Subject: [PATCH] added animations to test config menu

---
 src/js/config.js           |  50 ++--------------
 src/js/test/test-config.js | 119 +++++++++++++++++++++++++++++++++++++
 src/sass/nav.scss          |   2 +-
 static/index.html          |   1 +
 4 files changed, 125 insertions(+), 47 deletions(-)

diff --git a/src/js/config.js b/src/js/config.js
index 849334b63..b880df4cc 100644
--- a/src/js/config.js
+++ b/src/js/config.js
@@ -21,6 +21,7 @@ import LayoutList from "./layouts";
 import * as ChallengeContoller from "./challenge-controller";
 import * as TTS from "./tts";
 import * as MobileTestConfig from "./mobile-test-config.js";
+import * as TestConfig from "./test-config.js";
 
 export let localStorageConfig = null;
 export let dbConfigLoaded = false;
@@ -227,29 +228,9 @@ export function setMode(mode, nosave) {
     Notifications.add("Memory funbox can only be used with words mode.", 0);
     return;
   }
-
+  let previous = config.mode;
   config.mode = mode;
-  $("#top .config .mode .text-button").removeClass("active");
-  $("#top .config .mode .text-button[mode='" + mode + "']").addClass("active");
-  if (config.mode == "time") {
-    $("#top .config .wordCount").addClass("hidden");
-    $("#top .config .time").removeClass("hidden");
-    $("#top .config .customText").addClass("hidden");
-    $("#top .config .punctuationMode").removeClass("disabled");
-    $("#top .config .numbersMode").removeClass("disabled");
-    $("#top .config .punctuationMode").removeClass("hidden");
-    $("#top .config .numbersMode").removeClass("hidden");
-    $("#top .config .quoteLength").addClass("hidden");
-  } else if (config.mode == "words") {
-    $("#top .config .wordCount").removeClass("hidden");
-    $("#top .config .time").addClass("hidden");
-    $("#top .config .customText").addClass("hidden");
-    $("#top .config .punctuationMode").removeClass("disabled");
-    $("#top .config .numbersMode").removeClass("disabled");
-    $("#top .config .punctuationMode").removeClass("hidden");
-    $("#top .config .numbersMode").removeClass("hidden");
-    $("#top .config .quoteLength").addClass("hidden");
-  } else if (config.mode == "custom") {
+  if (config.mode == "custom") {
     if (
       config.funbox === "58008" ||
       config.funbox === "gibberish" ||
@@ -258,40 +239,17 @@ export function setMode(mode, nosave) {
       Funbox.setActive("none");
       TestUI.updateModesNotice();
     }
-    $("#top .config .wordCount").addClass("hidden");
-    $("#top .config .time").addClass("hidden");
-    $("#top .config .customText").removeClass("hidden");
-    $("#top .config .punctuationMode").removeClass("disabled");
-    $("#top .config .numbersMode").removeClass("disabled");
-    $("#top .config .punctuationMode").removeClass("hidden");
-    $("#top .config .numbersMode").removeClass("hidden");
-    $("#top .config .quoteLength").addClass("hidden");
     setPunctuation(false, true);
     setNumbers(false, true);
   } else if (config.mode == "quote") {
     setPunctuation(false, true);
     setNumbers(false, true);
-    $("#top .config .wordCount").addClass("hidden");
-    $("#top .config .time").addClass("hidden");
-    $("#top .config .customText").addClass("hidden");
-    $("#top .config .punctuationMode").addClass("disabled");
-    $("#top .config .numbersMode").addClass("disabled");
-    $("#top .config .punctuationMode").removeClass("hidden");
-    $("#top .config .numbersMode").removeClass("hidden");
-    $("#result .stats .source").removeClass("hidden");
-    $("#top .config .quoteLength").removeClass("hidden");
   } else if (config.mode == "zen") {
-    $("#top .config .wordCount").addClass("hidden");
-    $("#top .config .time").addClass("hidden");
-    $("#top .config .customText").addClass("hidden");
-    $("#top .config .punctuationMode").addClass("hidden");
-    $("#top .config .numbersMode").addClass("hidden");
-    $("#top .config .quoteLength").addClass("hidden");
     if (config.paceCaret != "off") {
       Notifications.add(`Pace caret will not work with zen mode.`, 0);
     }
-    // setPaceCaret("off", true);
   }
+  TestConfig.update(previous, config.mode);
   MobileTestConfig.update();
   ChallengeContoller.clearActive();
   if (!nosave) saveToLocalStorage();
diff --git a/src/js/test/test-config.js b/src/js/test/test-config.js
index 46a977839..ada7ac4fb 100644
--- a/src/js/test/test-config.js
+++ b/src/js/test/test-config.js
@@ -5,6 +5,7 @@ import * as ManualRestart from "./manual-restart-tracker";
 import * as TestLogic from "./test-logic";
 import * as QuoteSearchPopup from "./quote-search-popup";
 import * as CustomTextPopup from "./custom-text-popup";
+import * as UI from "./ui";
 
 // export function show() {
 //   $("#top .config").removeClass("hidden").css("opacity", 1);
@@ -42,6 +43,124 @@ export function hide() {
     );
 }
 
+export function update(previous, current) {
+  $("#top .config .mode .text-button").removeClass("active");
+  $("#top .config .mode .text-button[mode='" + current + "']").addClass(
+    "active"
+  );
+  if (current == "time") {
+    // $("#top .config .wordCount").addClass("hidden");
+    // $("#top .config .time").removeClass("hidden");
+    // $("#top .config .customText").addClass("hidden");
+    $("#top .config .punctuationMode").removeClass("disabled");
+    $("#top .config .numbersMode").removeClass("disabled");
+    // $("#top .config .puncAndNum").removeClass("disabled");
+    // $("#top .config .punctuationMode").removeClass("hidden");
+    // $("#top .config .numbersMode").removeClass("hidden");
+    // $("#top .config .quoteLength").addClass("hidden");
+  } else if (current == "words") {
+    // $("#top .config .wordCount").removeClass("hidden");
+    // $("#top .config .time").addClass("hidden");
+    // $("#top .config .customText").addClass("hidden");
+    $("#top .config .punctuationMode").removeClass("disabled");
+    $("#top .config .numbersMode").removeClass("disabled");
+    // $("#top .config .puncAndNum").removeClass("disabled");
+    // $("#top .config .punctuationMode").removeClass("hidden");
+    // $("#top .config .numbersMode").removeClass("hidden");
+    // $("#top .config .quoteLength").addClass("hidden");
+  } else if (current == "custom") {
+    // $("#top .config .wordCount").addClass("hidden");
+    // $("#top .config .time").addClass("hidden");
+    // $("#top .config .customText").removeClass("hidden");
+    $("#top .config .punctuationMode").removeClass("disabled");
+    $("#top .config .numbersMode").removeClass("disabled");
+    // $("#top .config .puncAndNum").removeClass("disabled");
+    // $("#top .config .punctuationMode").removeClass("hidden");
+    // $("#top .config .numbersMode").removeClass("hidden");
+    // $("#top .config .quoteLength").addClass("hidden");
+  } else if (current == "quote") {
+    // $("#top .config .wordCount").addClass("hidden");
+    // $("#top .config .time").addClass("hidden");
+    // $("#top .config .customText").addClass("hidden");
+    $("#top .config .punctuationMode").addClass("disabled");
+    $("#top .config .numbersMode").addClass("disabled");
+    // $("#top .config .puncAndNum").addClass("disabled");
+    // $("#top .config .punctuationMode").removeClass("hidden");
+    // $("#top .config .numbersMode").removeClass("hidden");
+    // $("#result .stats .source").removeClass("hidden");
+    // $("#top .config .quoteLength").removeClass("hidden");
+  } else if (current == "zen") {
+    // $("#top .config .wordCount").addClass("hidden");
+    // $("#top .config .time").addClass("hidden");
+    // $("#top .config .customText").addClass("hidden");
+    // $("#top .config .punctuationMode").addClass("hidden");
+    // $("#top .config .numbersMode").addClass("hidden");
+    // $("#top .config .quoteLength").addClass("hidden");
+  }
+
+  let submenu = {
+    time: "time",
+    words: "wordCount",
+    custom: "customText",
+    quote: "quoteLength",
+    zen: "",
+  };
+
+  let animTime = 250;
+
+  if (current == "zen") {
+    $(`#top .config .${submenu[previous]}`).animate(
+      {
+        opacity: 0,
+      },
+      animTime / 2,
+      () => {
+        $(`#top .config .${submenu[previous]}`).addClass("hidden");
+      }
+    );
+    $(`#top .config .puncAndNum`).animate(
+      {
+        opacity: 0,
+      },
+      animTime / 2,
+      () => {
+        $(`#top .config .puncAndNum`).addClass("invisible");
+      }
+    );
+    return;
+  }
+
+  if (previous == "zen") {
+    setTimeout(() => {
+      $(`#top .config .${submenu[current]}`).removeClass("hidden");
+      $(`#top .config .${submenu[current]}`)
+        .css({ opacity: 0 })
+        .animate(
+          {
+            opacity: 1,
+          },
+          animTime / 2
+        );
+      $(`#top .config .puncAndNum`).removeClass("invisible");
+      $(`#top .config .puncAndNum`)
+        .css({ opacity: 0 })
+        .animate(
+          {
+            opacity: 1,
+          },
+          animTime / 2
+        );
+    }, animTime / 2);
+    return;
+  }
+
+  UI.swapElements(
+    $("#top .config ." + submenu[previous]),
+    $("#top .config ." + submenu[current]),
+    animTime
+  );
+}
+
 $(document).on("click", "#top .config .wordCount .text-button", (e) => {
   const wrd = $(e.currentTarget).attr("wordCount");
   if (wrd == "custom") {
diff --git a/src/sass/nav.scss b/src/sass/nav.scss
index 7fd5dd175..8d6f5be63 100644
--- a/src/sass/nav.scss
+++ b/src/sass/nav.scss
@@ -146,7 +146,7 @@
       justify-items: self-end;
 
       .group {
-        transition: 0.25s;
+        // transition: 0.25s;
 
         .title {
           color: var(--sub-color);
diff --git a/static/index.html b/static/index.html
index 5022d6476..72460644e 100644
--- a/static/index.html
+++ b/static/index.html
@@ -943,6 +943,7 @@
             </div>
             <div class="desktopConfig">
               <div
+                class="puncAndNum"
                 style="
                   display: grid;
                   grid-auto-flow: column;