From 12756e0d08f1ffd4f6eb97d6317ce6778b7eca70 Mon Sep 17 00:00:00 2001
From: Miodec <bartnikjack@gmail.com>
Date: Tue, 23 Aug 2022 18:57:03 +0200
Subject: [PATCH] animating puctuation and numbers

---
 frontend/src/styles/test.scss        |  10 ++
 frontend/src/ts/test/test-config.ts  | 182 +++++++++++++++++----------
 frontend/static/html/pages/test.html |   4 +-
 3 files changed, 128 insertions(+), 68 deletions(-)

diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss
index 0896a6a8d..0a922c95c 100644
--- a/frontend/src/styles/test.scss
+++ b/frontend/src/styles/test.scss
@@ -991,6 +991,16 @@
   width: 100%;
   justify-content: space-around;
   transition: 0.125s;
+  .puncAndNum {
+    transition: 0.25s;
+    overflow: hidden;
+    max-width: 13rem;
+    opacity: 1;
+    &.scrolled {
+      max-width: 0;
+      opacity: 0;
+    }
+  }
   .row {
     display: flex;
     padding: 0.25rem 1rem;
diff --git a/frontend/src/ts/test/test-config.ts b/frontend/src/ts/test/test-config.ts
index 0fa55867e..410e11344 100644
--- a/frontend/src/ts/test/test-config.ts
+++ b/frontend/src/ts/test/test-config.ts
@@ -1,5 +1,5 @@
 import * as ConfigEvent from "../observables/config-event";
-import * as Misc from "../utils/misc";
+// import * as Misc from "../utils/misc";
 
 // export function show() {
 //   $("#top .config").removeClass("hidden").css("opacity", 1);
@@ -50,83 +50,133 @@ export function update(
   $("#testConfig .mode .textButton").removeClass("active");
   $("#testConfig .mode .textButton[mode='" + current + "']").addClass("active");
 
-  if (current == "time") {
-    $("#testConfig .punctuationMode").removeClass("disabled");
-    $("#testConfig .numbersMode").removeClass("disabled");
-  } else if (current == "words") {
-    $("#testConfig .punctuationMode").removeClass("disabled");
-    $("#testConfig .numbersMode").removeClass("disabled");
-  } else if (current == "custom") {
-    $("#testConfig .punctuationMode").removeClass("disabled");
-    $("#testConfig .numbersMode").removeClass("disabled");
-  } else if (current == "quote") {
-    $("#testConfig .punctuationMode").addClass("disabled");
-    $("#testConfig .numbersMode").addClass("disabled");
-  } else if (current == "zen") {
-    //
-  }
+  // if (current == "time") {
+  //   $("#testConfig .punctuationMode").removeClass("hidden");
+  //   $("#testConfig .numbersMode").removeClass("hidden");
+  //   $("#testConfig .leftSpacer").removeClass("hidden");
+  // } else if (current == "words") {
+  //   $("#testConfig .punctuationMode").removeClass("hidden");
+  //   $("#testConfig .numbersMode").removeClass("hidden");
+  //   $("#testConfig .leftSpacer").removeClass("hidden");
+  // } else if (current == "custom") {
+  //   $("#testConfig .punctuationMode").removeClass("hidden");
+  //   $("#testConfig .numbersMode").removeClass("hidden");
+  //   $("#testConfig .leftSpacer").removeClass("hidden");
+  // } else if (current == "quote") {
+  //   $("#testConfig .punctuationMode").addClass("hidden");
+  //   $("#testConfig .numbersMode").addClass("hidden");
+  //   $("#testConfig .leftSpacer").addClass("hidden");
+  // } else if (current == "zen") {
+  //   //
+  // }
 
   const submenu = {
     time: "time",
     words: "wordCount",
     custom: "customText",
     quote: "quoteLength",
-    zen: "",
+    zen: "zen",
   };
 
-  const animTime = 250;
+  const puncAndNumVisible = {
+    time: true,
+    words: true,
+    custom: true,
+    quote: false,
+    zen: false,
+  };
 
-  if (current == "zen") {
-    $(`#testConfig .${submenu[previous]}`).animate(
-      {
-        opacity: 0,
-      },
-      animTime / 2,
-      () => {
-        $(`#testConfig .${submenu[previous]}`).addClass("hidden");
-      }
-    );
-    $(`#testConfig .puncAndNum`).animate(
-      {
-        opacity: 0,
-      },
-      animTime / 2,
-      () => {
-        $(`#testConfig .puncAndNum`).addClass("hidden");
-      }
-    );
-    return;
+  // const animTime = 250;
+
+  if (puncAndNumVisible[current]) {
+    $("#testConfig .puncAndNum").removeClass("scrolled");
+  } else {
+    $("#testConfig .puncAndNum").addClass("scrolled");
   }
 
-  if (previous == "zen") {
-    setTimeout(() => {
-      $(`#testConfig .${submenu[current]}`).removeClass("hidden");
-      $(`#testConfig .${submenu[current]}`)
-        .css({ opacity: 0 })
-        .animate(
-          {
-            opacity: 1,
-          },
-          animTime / 2
-        );
-      $(`#testConfig .puncAndNum`).removeClass("hidden");
-      $(`#testConfig .puncAndNum`)
-        .css({ opacity: 0 })
-        .animate(
-          {
-            opacity: 1,
-          },
-          animTime / 2
-        );
-    }, animTime / 2);
-    return;
-  }
+  // const currentWidth = Math.round(
+  //   document.querySelector("#testConfig .row")?.getBoundingClientRect().width ??
+  //     0
+  // );
 
-  Misc.swapElements(
-    $("#testConfig ." + submenu[previous]),
-    $("#testConfig ." + submenu[current]),
-    animTime
-  );
+  // if (puncAndNumVisible[current]) {
+  //   $("#testConfig .punctuationMode").removeClass("hidden");
+  //   $("#testConfig .numbersMode").removeClass("hidden");
+  //   $("#testConfig .leftSpacer").removeClass("hidden");
+  // } else {
+  //   $("#testConfig .punctuationMode").addClass("hidden");
+  //   $("#testConfig .numbersMode").addClass("hidden");
+  //   $("#testConfig .leftSpacer").addClass("hidden");
+  // }
+
+  // if (current == "zen") {
+  //   $("#testConfig .rightSpacer").addClass("hidden");
+  // } else {
+  //   $("#testConfig .rightSpacer").removeClass("hidden");
+  // }
+
+  $(`#testConfig .${submenu[previous]}`).addClass("hidden");
+
+  $(`#testConfig .${submenu[current]}`).removeClass("hidden");
+
+  // const newWidth = Math.round(
+  //   document.querySelector("#testConfig .row")?.getBoundingClientRect().width ??
+  //     0
+  // );
+
+  // console.log(submenu[current], animTime, newWidth, currentWidth);
+
+  // if (current == "zen") {
+  //   $(`#testConfig .${submenu[previous]}`).animate(
+  //     {
+  //       opacity: 0,
+  //     },
+  //     animTime / 2,
+  //     () => {
+  //       $(`#testConfig .${submenu[previous]}`).addClass("hidden");
+  //     }
+  //   );
+  //   $(`#testConfig .puncAndNum`).animate(
+  //     {
+  //       opacity: 0,
+  //     },
+  //     animTime / 2,
+  //     () => {
+  //       $(`#testConfig .puncAndNum`).addClass("hidden");
+  //     }
+  //   );
+  //   return;
+  // }
+
+  // if (previous == "zen") {
+  //   setTimeout(() => {
+  //     $(`#testConfig .${submenu[current]}`).removeClass("hidden");
+  //     $(`#testConfig .${submenu[current]}`)
+  //       .css({ opacity: 0 })
+  //       .animate(
+  //         {
+  //           opacity: 1,
+  //         },
+  //         animTime / 2
+  //       );
+  //     $(`#testConfig .puncAndNum`).removeClass("hidden");
+  //     $(`#testConfig .puncAndNum`)
+  //       .css({ opacity: 0 })
+  //       .animate(
+  //         {
+  //           opacity: 1,
+  //         },
+  //         animTime / 2
+  //       );
+  //   }, animTime / 2);
+  //   return;
+  // }
+
+  // Misc.swapElements(
+  //   $("#testConfig ." + submenu[previous]),
+  //   $("#testConfig ." + submenu[current]),
+  //   animTime
+  // );
 }
 
 export function updateExtras(
diff --git a/frontend/static/html/pages/test.html b/frontend/static/html/pages/test.html
index 4e6c21ac5..3e4d42c37 100644
--- a/frontend/static/html/pages/test.html
+++ b/frontend/static/html/pages/test.html
@@ -32,7 +32,7 @@
         </div>
       </div>
 
-      <div class="spacer"></div>
+      <div class="spacer leftSpacer"></div>
 
       <div class="mode">
         <div class="textButton active" mode="time">
@@ -57,7 +57,7 @@
         </div>
       </div>
 
-      <div class="spacer"></div>
+      <div class="spacer rightSpacer"></div>
 
       <div class="time">
         <div class="textButton" timeConfig="15">15</div>