added page controller

part of #2462

frontend/src/js/controllers/account-controller.js

@@ -8,7 +8,7 @@ import * as Settings from "../pages/settings";
 import * as AllTimeStats from "../account/all-time-stats";
 import * as DB from "../db";
 import * as TestLogic from "../test/test-logic";
-import * as UI from "../ui";
+import * as PageController from "./../controllers/page-controller";
 import axiosInstance from "../axios-instance";
 import * as PSA from "../elements/psa";
 import * as Focus from "../test/focus";
@@ -40,7 +40,7 @@ async function loadUser(user) {
       `<p class="accountVerificatinNotice" style="text-align:center">Your account is not verified. <a class="sendVerificationEmail">Send the verification email again</a>.`
     );
   }
-  UI.setPageTransition(false);
+  PageController.setTransition(false);
   AccountButton.update();
   AccountButton.loading(true);
   await Account.getDataAndInit();
@@ -83,14 +83,14 @@ const authListener = firebase.auth().onAuthStateChanged(async function (user) {
     if (window.location.pathname == "/account") {
       window.history.replaceState("", null, "/login");
     }
-    UI.setPageTransition(false);
+    PageController.setTransition(false);
   }
   if (window.location.pathname != "/account") {
     setTimeout(() => {
       Focus.set(false);
     }, 125 / 2);
   }
-  UI.changePage();
+  PageController.change();
   let theme = Misc.findGetParameter("customTheme");
   if (theme !== null) {
     try {
@@ -142,7 +142,7 @@ export function signIn() {
         .signInWithEmailAndPassword(email, password)
         .then(async (e) => {
           await loadUser(e.user);
-          UI.changePage("account");
+          PageController.change("account");
           if (TestLogic.notSignedInLastResult !== null) {
             TestLogic.setNotSignedInUid(e.user.uid);
             let response;
@@ -161,9 +161,9 @@ export function signIn() {
               TestLogic.clearNotSignedInResult();
               Notifications.add("Last test result saved", 1);
             }
-            // UI.changePage("account");
+            // PageController.change("account");
           }
-          // UI.changePage("test");
+          // PageController.change("test");
           //TODO: redirect user to relevant page
         })
         .catch(function (error) {
@@ -245,7 +245,7 @@ export async function signInWithGoogle() {
         $(".pageLogin .button").removeClass("disabled");
         $(".pageLogin .preloader").addClass("hidden");
         await loadUser(signedInUser.user);
-        UI.changePage("account");
+        PageController.change("account");
         if (TestLogic.notSignedInLastResult !== null) {
           TestLogic.setNotSignedInUid(signedInUser.user.uid);
           axiosInstance
@@ -257,12 +257,12 @@ export async function signInWithGoogle() {
                 DB.getSnapshot().results.push(TestLogic.notSignedInLastResult);
               }
             });
-          // UI.changePage("account");
+          // PageController.change("account");
         }
       }
     } else {
       await loadUser(signedInUser.user);
-      UI.changePage("account");
+      PageController.change("account");
     }
   } catch (e) {
     console.log(e);
@@ -392,7 +392,7 @@ export function signOut() {
       AllTimeStats.clear();
       Settings.hideAccountSection();
       AccountButton.update();
-      UI.changePage("login");
+      PageController.change("login");
       DB.setSnapshot(null);
       $(".pageLogin .button").removeClass("disabled");
     })
@@ -472,7 +472,7 @@ async function signUp() {
             DB.getSnapshot().results.push(TestLogic.notSignedInLastResult);
           }
         });
-      UI.changePage("account");
+      PageController.change("account");
     }
   } catch (e) {
     //make sure to do clean up here

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

@@ -13,7 +13,7 @@ import * as Caret from "../test/caret";
 import * as ManualRestart from "../test/manual-restart-tracker";
 import * as Notifications from "../elements/notifications";
 import * as CustomText from "../test/custom-text";
-import * as UI from "../ui";
+import * as PageController from "./../controllers/page-controller";
 import * as Settings from "../pages/settings";
 import * as LayoutEmulator from "../test/layout-emulator";
 import * as PaceCaret from "../test/pace-caret";
@@ -653,7 +653,7 @@ function handleTab(event) {
       }
     } else if (Config.quickTab) {
       event.preventDefault();
-      UI.changePage("test");
+      PageController.change("test");
     }
   }
 }

frontend/src/js/controllers/page-controller.js

@@ -0,0 +1,161 @@
+import * as Funbox from "./../test/funbox";
+import * as About from "./../pages/about";
+import * as Misc from "./../misc";
+import * as ActivePage from "./../states/active-page";
+import * as TestLogic from "./../test/test-logic";
+import * as Settings from "./../pages/settings";
+import * as Account from "./../pages/account";
+import * as TestUI from "./../test/test-ui";
+import * as TestConfig from "./../test/test-config";
+import * as SignOutButton from "./../account/sign-out-button";
+import * as TestStats from "./../test/test-stats";
+import * as ManualRestart from "./../test/manual-restart-tracker";
+import Config from "./../config";
+
+export let transition = true;
+
+export function setTransition(val) {
+  transition = val;
+}
+
+export function change(page, norestart = false) {
+  if (transition) {
+    console.log(`change page ${page} stopped`);
+    return;
+  }
+
+  if (page == undefined) {
+    //use window loacation
+    let pages = {
+      "/": "test",
+      "/login": "login",
+      "/settings": "settings",
+      "/about": "about",
+      "/account": "account",
+    };
+    let path = pages[window.location.pathname];
+    if (!path) {
+      path = "test";
+    }
+    page = path;
+  }
+
+  console.log(`change page ${page}`);
+  let activePageElement = $(".page.active");
+  let check = ActivePage.get() + "";
+  setTimeout(() => {
+    if (check === "pageAccount" && page !== "account") {
+      Account.reset();
+    } else if (check === "pageSettings" && page !== "settings") {
+      Settings.reset();
+    } else if (check === "pageAbout" && page !== "about") {
+      About.reset();
+    }
+  }, 250);
+
+  ActivePage.set(undefined);
+  $(".page").removeClass("active");
+  $("#wordsInput").focusout();
+  if (page == "test" || page == "") {
+    setTransition(true);
+    Misc.swapElements(
+      activePageElement,
+      $(".page.pageTest"),
+      250,
+      () => {
+        setTransition(false);
+        TestUI.focusWords();
+        $(".page.pageTest").addClass("active");
+        ActivePage.set("pageTest");
+        history.pushState("/", null, "/");
+      },
+      () => {
+        TestConfig.show();
+      }
+    );
+    SignOutButton.hide();
+    // restartCount = 0;
+    // incompleteTestSeconds = 0;
+    TestStats.resetIncomplete();
+    ManualRestart.set();
+    if (!norestart) TestLogic.restart();
+    Funbox.activate(Config.funbox);
+  } else if (page == "about") {
+    setTransition(true);
+    TestLogic.restart();
+    Misc.swapElements(activePageElement, $(".page.pageAbout"), 250, () => {
+      setTransition(false);
+      history.pushState("about", null, "about");
+      $(".page.pageAbout").addClass("active");
+      ActivePage.set("pageAbout");
+    });
+    About.fill();
+    Funbox.activate("none");
+    TestConfig.hide();
+    SignOutButton.hide();
+  } else if (page == "settings") {
+    setTransition(true);
+    TestLogic.restart();
+    Misc.swapElements(activePageElement, $(".page.pageSettings"), 250, () => {
+      setTransition(false);
+      history.pushState("settings", null, "settings");
+      $(".page.pageSettings").addClass("active");
+      ActivePage.set("pageSettings");
+    });
+    Funbox.activate("none");
+    Settings.fillSettingsPage().then(() => {
+      Settings.update();
+    });
+    // Settings.update();
+    TestConfig.hide();
+    SignOutButton.hide();
+  } else if (page == "account") {
+    if (!firebase.auth().currentUser) {
+      console.log(
+        `current user is ${firebase.auth().currentUser}, going back to login`
+      );
+      change("login");
+    } else {
+      setTransition(true);
+      TestLogic.restart();
+      Misc.swapElements(activePageElement, $(".page.pageAccount"), 250, () => {
+        setTransition(false);
+        history.pushState("account", null, "account");
+        $(".page.pageAccount").addClass("active");
+        ActivePage.set("pageAccount");
+      });
+      Funbox.activate("none");
+      Account.update();
+      TestConfig.hide();
+    }
+  } else if (page == "login") {
+    if (firebase.auth().currentUser != null) {
+      change("account");
+    } else {
+      setTransition(true);
+      TestLogic.restart();
+      Misc.swapElements(activePageElement, $(".page.pageLogin"), 250, () => {
+        setTransition(false);
+        history.pushState("login", null, "login");
+        $(".page.pageLogin").addClass("active");
+        ActivePage.set("pageLogin");
+      });
+      Funbox.activate("none");
+      TestConfig.hide();
+      SignOutButton.hide();
+    }
+  }
+}
+
+$(document).on("click", "#top .logo", (e) => {
+  change("test");
+});
+
+$(document).on("click", "#top #menu .icon-button", (e) => {
+  if (!$(e.currentTarget).hasClass("leaderboards")) {
+    const href = $(e.currentTarget).attr("href");
+    ManualRestart.set();
+    change(href.replace("/", ""));
+  }
+  return false;
+});

frontend/src/js/controllers/route-controller.js

@@ -1,5 +1,5 @@
 import * as Funbox from "../test/funbox";
-import * as UI from "../ui";
+import * as PageController from "./../controllers/page-controller";
 import Config from "../config";
 import * as ActivePage from "./../states/active-page";
 
@@ -36,15 +36,15 @@ $(window).on("popstate", (e) => {
   let state = e.originalEvent.state;
   if (state == "" || state == "/") {
     // show test
-    UI.changePage("test");
+    PageController.change("test");
   } else if (state == "about") {
     // show about
-    UI.changePage("about");
+    PageController.change("about");
   } else if (state == "account" || state == "login") {
     if (firebase.auth().currentUser) {
-      UI.changePage("account");
+      PageController.change("account");
     } else {
-      UI.changePage("login");
+      PageController.change("login");
     }
   }
 });

frontend/src/js/elements/leaderboards.js

@@ -557,6 +557,13 @@ $("#leaderboardsWrapper #leaderboards .rightTableJumpToMe").click(async (e) => {
   );
 });
 
+$(document).on("click", "#top #menu .icon-button", (e) => {
+  if ($(e.currentTarget).hasClass("leaderboards")) {
+    show();
+  }
+  return false;
+});
+
 $(document).keydown((event) => {
   if (event.key === "Escape" && !$("#leaderboardsWrapper").hasClass("hidden")) {
     hide();

frontend/src/js/pages/account.js

@@ -9,7 +9,7 @@ import * as AccountButton from "../elements/account-button";
 import * as TestLogic from "../test/test-logic";
 import * as PaceCaret from "../test/pace-caret";
 import * as TagController from "../controllers/tag-controller";
-import * as UI from "../ui";
+import * as PageController from "./../controllers/page-controller";
 import * as CommandlineLists from "../elements/commandline-lists";
 import * as MiniResultChart from "../account/mini-result-chart";
 import * as ResultTagsPopup from "../popups/result-tags-popup";
@@ -64,7 +64,7 @@ export async function getDataAndInit() {
 
     // $("#top #menu .account .icon").html('<i class="fas fa-fw fa-times"></i>');
     $("#top #menu .account").css("opacity", 1);
-    if (ActivePage.get() == "pageLoading") UI.changePage("");
+    if (ActivePage.get() == "pageLoading") PageController.change("");
     AccountController.signOut();
     return;
   }
@@ -233,7 +233,7 @@ export async function getDataAndInit() {
   //   ActivePage.get() == "pageLogin" ||
   //   window.location.pathname === "/account"
   // ) {
-  //   UI.changePage("account");
+  //   PageController.change("account");
   // }
   // ThemePicker.refreshButtons();
   AccountButton.loading(false);
@@ -242,12 +242,12 @@ export async function getDataAndInit() {
   TagController.loadActiveFromLocalStorage();
   ResultTagsPopup.updateButtons();
   Settings.showAccountSection();
-  UI.setPageTransition(false);
+  PageController.setTransition(false);
   console.log("account loading finished");
   // if (ActivePage.get() == "pageLoading") {
   //   LoadingPage.updateBar(100, true);
   //   Focus.set(false);
-  //   UI.changePage("");
+  //   PageController.change("");
   // }
 }
 
@@ -1076,7 +1076,7 @@ export function update() {
         update();
       } else {
         setTimeout(() => {
-          UI.changePage("");
+          PageController.change("");
         }, 500);
       }
     });

frontend/src/js/ready.js

@@ -3,7 +3,7 @@ import Config, * as UpdateConfig from "./config";
 import * as Misc from "./misc";
 import * as VerificationController from "./controllers/verification-controller";
 import * as RouteController from "./controllers/route-controller";
-import * as UI from "./ui";
+import * as PageController from "./controllers/page-controller";
 import * as MonkeyPower from "./elements/monkey-power";
 import * as NewVersionNotification from "./elements/version-check";
 import * as Notifications from "./elements/notifications";
@@ -61,7 +61,7 @@ $(document).ready(() => {
           history.replaceState("/", null, "/");
         }
         let page = window.location.pathname.replace("/", "");
-        UI.changePage(page);
+        PageController.change(page);
       } else if (window.location.pathname === "/account") {
         // history.replaceState("/", null, "/");
       } else if (/challenge_.+/g.test(window.location.pathname)) {
@@ -69,7 +69,7 @@ $(document).ready(() => {
         // }
       } else if (window.location.pathname !== "/") {
         // let page = window.location.pathname.replace("/", "");
-        // UI.changePage(page);
+        // PageController.change(page);
       }
     });
   // Settings.settingsFillPromise.then(Settings.update);

frontend/src/js/test/test-logic.js

@@ -17,7 +17,7 @@ import * as LiveWpm from "./live-wpm";
 import * as LiveAcc from "./live-acc";
 import * as LiveBurst from "./live-burst";
 import * as TimerProgress from "./timer-progress";
-import * as UI from "../ui";
+import * as PageController from "./../controllers/page-controller";
 import * as QuoteSearchPopup from "../popups/quote-search-popup";
 import * as QuoteSubmitPopup from "../popups/quote-submit-popup";
 import * as PbCrown from "./pb-crown";
@@ -242,7 +242,7 @@ export function punctuateWord(previousWord, currentWord, index, maxindex) {
 }
 
 export function startTest() {
-  if (UI.pageTransition) {
+  if (PageController.transition) {
     return false;
   }
   if (!Config.dbConfigLoaded) {
@@ -408,14 +408,14 @@ export function restart(
   if (TestUI.resultVisible) {
     if (
       Config.randomTheme !== "off" &&
-      !UI.pageTransition &&
+      !PageController.transition &&
       !Config.customTheme
     ) {
       ThemeController.randomizeTheme();
     }
   }
   TestUI.setResultVisible(false);
-  UI.setPageTransition(true);
+  PageController.setTransition(true);
   TestUI.setTestRestarting(true);
   el.stop(true, true).animate(
     {
@@ -559,7 +559,7 @@ export function restart(
               TestUI.focusWords();
             // ChartController.result.update();
             TestUI.updateModesNotice();
-            UI.setPageTransition(false);
+            PageController.setTransition(false);
             // console.log(TestStats.incompleteSeconds);
             // console.log(TestStats.restartCount);
           }

frontend/src/js/test/test-ui.js

@@ -16,7 +16,7 @@ import * as Replay from "./replay";
 import * as Misc from "../misc";
 import * as ChallengeController from "../controllers/challenge-controller";
 import * as QuoteRatePopup from "../popups/quote-rate-popup";
-import * as UI from "../ui";
+import * as PageController from "./../controllers/page-controller";
 import * as SlowTimer from "../states/slow-timer";
 import * as ReportQuotePopup from "../popups/quote-report-popup";
 import * as TestActive from "./../states/test-active";
@@ -1046,7 +1046,7 @@ $(".pageTest #toggleBurstHeatmap").click(async (event) => {
 });
 
 $(".pageTest .loginTip .link").click(async (event) => {
-  UI.changePage("login");
+  PageController.change("login");
 });
 
 $(document).on("mouseleave", "#resultWordsHistory .words .word", (e) => {

frontend/src/js/ui.js

@@ -1,28 +1,9 @@
 import Config, * as UpdateConfig from "./config";
 import * as Notifications from "./elements/notifications";
 import * as Caret from "./test/caret";
-import * as TestLogic from "./test/test-logic";
 import * as CustomText from "./test/custom-text";
-import * as TestUI from "./test/test-ui";
-import * as TestConfig from "./test/test-config";
-import * as SignOutButton from "./account/sign-out-button";
-import * as TestStats from "./test/test-stats";
-import * as ManualRestart from "./test/manual-restart-tracker";
-import * as Settings from "./pages/settings";
-import * as Account from "./pages/account";
-import * as Leaderboards from "./elements/leaderboards";
-import * as Funbox from "./test/funbox";
-import * as About from "./pages/about";
-import * as Misc from "./misc";
-import * as ActivePage from "./states/active-page";
 import * as TestActive from "./states/test-active";
 
-export let pageTransition = true;
-
-export function setPageTransition(val) {
-  pageTransition = val;
-}
-
 export function updateKeytips() {
   if (Config.swapEscAndTab) {
     $(".pageSettings .tip").html(`
@@ -45,135 +26,6 @@ export function updateKeytips() {
   }
 }
 
-export function changePage(page, norestart = false) {
-  if (pageTransition) {
-    console.log(`change page ${page} stopped`);
-    return;
-  }
-
-  if (page == undefined) {
-    //use window loacation
-    let pages = {
-      "/": "test",
-      "/login": "login",
-      "/settings": "settings",
-      "/about": "about",
-      "/account": "account",
-    };
-    let path = pages[window.location.pathname];
-    if (!path) {
-      path = "test";
-    }
-    page = path;
-  }
-
-  console.log(`change page ${page}`);
-  let activePageElement = $(".page.active");
-  let check = ActivePage.get() + "";
-  setTimeout(() => {
-    if (check === "pageAccount" && page !== "account") {
-      Account.reset();
-    } else if (check === "pageSettings" && page !== "settings") {
-      Settings.reset();
-    } else if (check === "pageAbout" && page !== "about") {
-      About.reset();
-    }
-  }, 250);
-
-  ActivePage.set(undefined);
-  $(".page").removeClass("active");
-  $("#wordsInput").focusout();
-  if (page == "test" || page == "") {
-    setPageTransition(true);
-    Misc.swapElements(
-      activePageElement,
-      $(".page.pageTest"),
-      250,
-      () => {
-        setPageTransition(false);
-        TestUI.focusWords();
-        $(".page.pageTest").addClass("active");
-        ActivePage.set("pageTest");
-        history.pushState("/", null, "/");
-      },
-      () => {
-        TestConfig.show();
-      }
-    );
-    SignOutButton.hide();
-    // restartCount = 0;
-    // incompleteTestSeconds = 0;
-    TestStats.resetIncomplete();
-    ManualRestart.set();
-    if (!norestart) TestLogic.restart();
-    Funbox.activate(Config.funbox);
-  } else if (page == "about") {
-    setPageTransition(true);
-    TestLogic.restart();
-    Misc.swapElements(activePageElement, $(".page.pageAbout"), 250, () => {
-      setPageTransition(false);
-      history.pushState("about", null, "about");
-      $(".page.pageAbout").addClass("active");
-      ActivePage.set("pageAbout");
-    });
-    About.fill();
-    Funbox.activate("none");
-    TestConfig.hide();
-    SignOutButton.hide();
-  } else if (page == "settings") {
-    setPageTransition(true);
-    TestLogic.restart();
-    Misc.swapElements(activePageElement, $(".page.pageSettings"), 250, () => {
-      setPageTransition(false);
-      history.pushState("settings", null, "settings");
-      $(".page.pageSettings").addClass("active");
-      ActivePage.set("pageSettings");
-    });
-    Funbox.activate("none");
-    Settings.fillSettingsPage().then(() => {
-      Settings.update();
-    });
-    // Settings.update();
-    TestConfig.hide();
-    SignOutButton.hide();
-  } else if (page == "account") {
-    if (!firebase.auth().currentUser) {
-      console.log(
-        `current user is ${firebase.auth().currentUser}, going back to login`
-      );
-      changePage("login");
-    } else {
-      setPageTransition(true);
-      TestLogic.restart();
-      Misc.swapElements(activePageElement, $(".page.pageAccount"), 250, () => {
-        setPageTransition(false);
-        history.pushState("account", null, "account");
-        $(".page.pageAccount").addClass("active");
-        ActivePage.set("pageAccount");
-      });
-      Funbox.activate("none");
-      Account.update();
-      TestConfig.hide();
-    }
-  } else if (page == "login") {
-    if (firebase.auth().currentUser != null) {
-      changePage("account");
-    } else {
-      setPageTransition(true);
-      TestLogic.restart();
-      Misc.swapElements(activePageElement, $(".page.pageLogin"), 250, () => {
-        setPageTransition(false);
-        history.pushState("login", null, "login");
-        $(".page.pageLogin").addClass("active");
-        ActivePage.set("pageLogin");
-      });
-      Funbox.activate("none");
-      TestConfig.hide();
-      SignOutButton.hide();
-    }
-  }
-}
-
 //checking if the project is the development site
 /*
 if (firebase.app().options.projectId === "monkey-type-dev-67af4") {
@@ -238,21 +90,6 @@ $(window).resize(() => {
   Caret.updatePosition();
 });
 
-$(document).on("click", "#top .logo", (e) => {
-  changePage("test");
-});
-
-$(document).on("click", "#top #menu .icon-button", (e) => {
-  if ($(e.currentTarget).hasClass("leaderboards")) {
-    Leaderboards.show();
-  } else {
-    const href = $(e.currentTarget).attr("href");
-    ManualRestart.set();
-    changePage(href.replace("/", ""));
-  }
-  return false;
-});
-
 $(document).ready(() => {
   UpdateConfig.subscribeToEvent((eventKey) => {
     if (eventKey === "swapEscAndTab") updateKeytips();