moved sign out button to a module, smoothed out the transition between the config and sign out button

gulpfile.js

@@ -135,6 +135,7 @@ const refactoredSrc = [
   "./src/js/test/test-config.js",
   "./src/js/loader.js",
   "./src/js/mini-result-chart.js",
+  "./src/js/sign-out-button.js",
 ];
 
 //legacy files

src/js/account.js

@@ -1,13 +1,5 @@
 var gmailProvider = new firebase.auth.GoogleAuthProvider();
 
-function showSignOutButton() {
-  $(".signOut").removeClass("hidden").css("opacity", 1);
-}
-
-function hideSignOutButton() {
-  $(".signOut").css("opacity", 0).addClass("hidden");
-}
-
 function signIn() {
   $(".pageLogin .preloader").removeClass("hidden");
   let email = $(".pageLogin .login input")[0].value;

src/js/global-dependencies.js

@@ -49,3 +49,4 @@ import * as ChallengeController from "./challenge-controller";
 import * as TestConfig from "./test-config";
 import * as Loader from "./loader";
 import * as MiniResultChart from "./mini-result-chart";
+import * as SignOutButton from "./sign-out-button";

src/js/script.js

@@ -181,14 +181,21 @@ function changePage(page) {
   $("#wordsInput").focusout();
   if (page == "test" || page == "") {
     UI.setPageTransition(true);
-    UI.swapElements(activePage, $(".page.pageTest"), 250, () => {
-      UI.setPageTransition(false);
-      TestUI.focusWords();
-      $(".page.pageTest").addClass("active");
-      history.pushState("/", null, "/");
-    });
-    TestConfig.show();
-    hideSignOutButton();
+    UI.swapElements(
+      activePage,
+      $(".page.pageTest"),
+      250,
+      () => {
+        UI.setPageTransition(false);
+        TestUI.focusWords();
+        $(".page.pageTest").addClass("active");
+        history.pushState("/", null, "/");
+      },
+      () => {
+        TestConfig.show();
+      }
+    );
+    SignOutButton.hide();
     // restartCount = 0;
     // incompleteTestSeconds = 0;
     TestStats.resetIncomplete();
@@ -203,7 +210,7 @@ function changePage(page) {
       $(".page.pageAbout").addClass("active");
     });
     TestConfig.hide();
-    hideSignOutButton();
+    SignOutButton.hide();
   } else if (page == "settings") {
     UI.setPageTransition(true);
     TestLogic.restart();
@@ -214,21 +221,28 @@ function changePage(page) {
     });
     updateSettingsPage();
     TestConfig.hide();
-    hideSignOutButton();
+    SignOutButton.hide();
   } else if (page == "account") {
     if (!firebase.auth().currentUser) {
       changePage("login");
     } else {
       UI.setPageTransition(true);
       TestLogic.restart();
-      UI.swapElements(activePage, $(".page.pageAccount"), 250, () => {
-        UI.setPageTransition(false);
-        history.pushState("account", null, "account");
-        $(".page.pageAccount").addClass("active");
-      });
+      UI.swapElements(
+        activePage,
+        $(".page.pageAccount"),
+        250,
+        () => {
+          UI.setPageTransition(false);
+          history.pushState("account", null, "account");
+          $(".page.pageAccount").addClass("active");
+        },
+        () => {
+          SignOutButton.show();
+        }
+      );
       refreshAccountPage();
       TestConfig.hide();
-      showSignOutButton();
     }
   } else if (page == "login") {
     if (firebase.auth().currentUser != null) {
@@ -242,7 +256,7 @@ function changePage(page) {
         $(".page.pageLogin").addClass("active");
       });
       TestConfig.hide();
-      hideSignOutButton();
+      SignOutButton.hide();
     }
   }
 }

src/js/sign-out-button.js

@@ -0,0 +1,46 @@
+export function show() {
+  // $(".signOut").removeClass("hidden").css("opacity", 1);
+  $(".signOut")
+    .stop(true, true)
+    .removeClass("hidden")
+    .css({
+      opacity: 0,
+      transition: "0s",
+    })
+    .animate(
+      {
+        opacity: 1,
+      },
+      125,
+      () => {
+        $(".signOut").css({ transition: "0.25s" });
+      }
+    );
+}
+
+export function hide() {
+  $(".signOut")
+    .stop(true, true)
+    .css({
+      opacity: 1,
+      transition: "0s",
+    })
+    .animate(
+      {
+        opacity: 0,
+      },
+      125,
+      () => {
+        $(".signOut").css({ transition: "0.25s" });
+        $(".signOut").addClass("hidden");
+      }
+    );
+  // $(".signOut").css("opacity", 0).addClass("hidden");
+}
+
+// $("#liveWpm").removeClass("hidden").css("opacity", 0).animate(
+//   {
+//     opacity: Config.timerOpacity,
+//   },
+//   125
+// );

src/js/test/test-config.js

@@ -6,12 +6,40 @@ import * as TestLogic from "./test-logic";
 import * as QuoteSearchPopup from "./quote-search-popup";
 import * as CustomTextPopup from "./custom-text-popup";
 
+// export function show() {
+//   $("#top .config").removeClass("hidden").css("opacity", 1);
+// }
+
+// export function hide() {
+//   $("#top .config").css("opacity", 0).addClass("hidden");
+// }
+
 export function show() {
-  $("#top .config").removeClass("hidden").css("opacity", 1);
+  $("#top .config")
+    .stop(true, true)
+    .removeClass("hidden")
+    .css("opacity", 0)
+    .animate(
+      {
+        opacity: 1,
+      },
+      125
+    );
 }
 
 export function hide() {
-  $("#top .config").css("opacity", 0).addClass("hidden");
+  $("#top .config")
+    .stop(true, true)
+    .css("opacity", 1)
+    .animate(
+      {
+        opacity: 0,
+      },
+      125,
+      () => {
+        $("#top .config").addClass("hidden");
+      }
+    );
 }
 
 $(document).on("click", "#top .config .wordCount .text-button", (e) => {

src/js/ui.js

@@ -34,6 +34,9 @@ export function swapElements(
   totalDuration,
   callback = function () {
     return;
+  },
+  middleCallback = function () {
+    return;
   }
 ) {
   if (
@@ -54,6 +57,7 @@ export function swapElements(
         },
         totalDuration / 2,
         () => {
+          middleCallback();
           $(el1).addClass("hidden");
           $(el2)
             .removeClass("hidden")

src/sass/style.scss

@@ -1609,7 +1609,7 @@ a:hover {
     grid-gap: 0.2rem;
     // width: min-content;
     // width: -moz-min-content;
-    transition: 0.25s;
+    // transition: 0.25s;
     /*   margin-bottom: 0.1rem; */
     justify-items: self-end;