removed dom util, moved functions into relevant modules #495

2025-10-12 08:35:58 +08:00 · 2021-03-28 02:20:55 +01:00 · 2021-03-28 02:20:55 +01:00 · f9f4eb097c
commit f9f4eb097c
parent 716121eb45
16 changed files with 160 additions and 163 deletions
--- a/gulpfile.js
+++ b/gulpfile.js
@ -87,7 +87,6 @@ let eslintConfig = {
 //once all files are moved here, then can we use a bundler to its full potential
 const refactoredSrc = [
  "./src/js/db.js",
-  "./src/js/dom-util.js",
  "./src/js/cloud-functions.js",
  "./src/js/misc.js",
  "./src/js/layouts.js",
@ -133,6 +132,7 @@ const refactoredSrc = [
  "./src/js/challenge-controller.js",
  "./src/js/custom-mode2-popup.js",
  "./src/js/test/test-config.js",
+  "./src/js/loader.js",
 ];

 //legacy files
--- a/src/js/account.js
+++ b/src/js/account.js
@ -1275,13 +1275,13 @@ function refreshGlobalStats() {

 function updateAccountLoginButton() {
  if (firebase.auth().currentUser != null) {
-    swapElements(
+    UI.swapElements(
      $("#menu .icon-button.login"),
      $("#menu .icon-button.account"),
      250
    );
  } else {
-    swapElements(
+    UI.swapElements(
      $("#menu .icon-button.account"),
      $("#menu .icon-button.login"),
      250
@ -1776,7 +1776,11 @@ function refreshAccountPage() {
    ChartController.accountHistory.update({ duration: 0 });
    ChartController.accountActivity.update({ duration: 0 });

-    swapElements($(".pageAccount .preloader"), $(".pageAccount .content"), 250);
+    UI.swapElements(
+      $(".pageAccount .preloader"),
+      $(".pageAccount .content"),
+      250
+    );
  }
  if (DB.getSnapshot() === null) {
    Notifications.add(`Missing account data. Please refresh.`, -1);
@ -1890,14 +1894,14 @@ $("#resultEditTagsPanel .confirmButton").click((e) => {
      newtags.push(tagid);
    }
  });
-  showBackgroundLoader();
+  Loader.show();
  hideResultEditTagsPanel();
  CloudFunctions.updateResultTags({
    uid: firebase.auth().currentUser.uid,
    tags: newtags,
    resultid: resultid,
  }).then((r) => {
-    hideBackgroundLoader();
+    Loader.hide();
    if (r.data.resultCode === 1) {
      Notifications.add("Tags updated.", 1, 2);
      DB.getSnapshot().results.forEach((result) => {
--- a/src/js/commandline.js
+++ b/src/js/commandline.js
@ -1,9 +1,9 @@
-import { focusWords } from "./dom-util";
 import * as Leaderboards from "./leaderboards";
 import * as ThemeController from "./theme-controller";
 import Config, * as UpdateConfig from "./config";
 import * as Focus from "./focus";
 import * as CommandlineLists from "./commandline-lists";
+import * as TestUI from "./test-ui";

 let commandLineMouseMode = false;

@ -127,10 +127,10 @@ function hide() {
      () => {
        $("#commandLineWrapper").addClass("hidden");
        $("#commandLine").removeClass("allCommands");
-        focusWords();
+        TestUI.focusWords();
      }
    );
-  focusWords();
+  TestUI.focusWords();
 }

 function trigger(command) {
--- a/src/js/config.js
+++ b/src/js/config.js
@ -15,7 +15,7 @@ import * as Keymap from "./keymap";
 import * as LanguagePicker from "./language-picker";
 import * as TestLogic from "./test-logic";
 import * as PaceCaret from "./pace-caret";
-import { updateKeytips } from "./dom-util";
+import * as UI from "./ui";

 export let cookieConfig = null;
 export let dbConfigLoaded = false;
@ -454,7 +454,7 @@ export function setShowOutOfFocusWarning(val, nosave) {
 export function toggleSwapEscAndTab() {
  config.swapEscAndTab = !config.swapEscAndTab;
  saveToCookie();
-  updateKeytips();
+  UI.updateKeytips();
 }

 export function setSwapEscAndTab(val, nosave) {
@ -462,7 +462,7 @@ export function setSwapEscAndTab(val, nosave) {
    val = false;
  }
  config.swapEscAndTab = val;
-  updateKeytips();
+  UI.updateKeytips();
  if (!nosave) saveToCookie();
 }

--- a/src/js/dom-util.js
+++ b/src/js/dom-util.js
@ -1,97 +0,0 @@
-import Config from "./config";
-
-export function showBackgroundLoader() {
-  $("#backgroundLoader").stop(true, true).fadeIn(125);
-}
-
-export function hideBackgroundLoader() {
-  $("#backgroundLoader").stop(true, true).fadeOut(125);
-}
-
-export function swapElements(
-  el1,
-  el2,
-  totalDuration,
-  callback = function () {
-    return;
-  }
-) {
-  if (
-    (el1.hasClass("hidden") && !el2.hasClass("hidden")) ||
-    (!el1.hasClass("hidden") && el2.hasClass("hidden"))
-  ) {
-    //one of them is hidden and the other is visible
-    if (el1.hasClass("hidden")) {
-      callback();
-      return false;
-    }
-    $(el1)
-      .removeClass("hidden")
-      .css("opacity", 1)
-      .animate(
-        {
-          opacity: 0,
-        },
-        totalDuration / 2,
-        () => {
-          $(el1).addClass("hidden");
-          $(el2)
-            .removeClass("hidden")
-            .css("opacity", 0)
-            .animate(
-              {
-                opacity: 1,
-              },
-              totalDuration / 2,
-              () => {
-                callback();
-              }
-            );
-        }
-      );
-  } else if (el1.hasClass("hidden") && el2.hasClass("hidden")) {
-    //both are hidden, only fade in the second
-    $(el2)
-      .removeClass("hidden")
-      .css("opacity", 0)
-      .animate(
-        {
-          opacity: 1,
-        },
-        totalDuration,
-        () => {
-          callback();
-        }
-      );
-  } else {
-    callback();
-  }
-}
-
-export function focusWords() {
-  if (!$("#wordsWrapper").hasClass("hidden")) {
-    $("#wordsInput").focus();
-  }
-}
-
-export function updateKeytips() {
-  if (Config.swapEscAndTab) {
-    $(".pageSettings .tip").html(`
-    tip: You can also change all these settings quickly using the
-    command line (
-    <key>tab</key>
-    )`);
-    $("#bottom .keyTips").html(`
-    <key>esc</key> - restart test<br>
-      <key>tab</key> - command line`);
-  } else {
-    $(".pageSettings .tip").html(`
-    tip: You can also change all these settings quickly using the
-    command line (
-    <key>esc</key>
-    )`);
-    $("#bottom .keyTips").html(`
-    <key>tab</key> - restart test<br>
-      <key>esc</key> - command line`);
-  }
-}
--- a/src/js/global-dependencies.js
+++ b/src/js/global-dependencies.js
@ -8,12 +8,6 @@ Chart.plugins.register(chartTrendline);
 Chart.plugins.register(chartAnnotation);

 import * as DB from "./db";
-import {
-  showBackgroundLoader,
-  hideBackgroundLoader,
-  swapElements,
-  focusWords,
-} from "./dom-util";
 import * as Misc from "./misc";
 import * as CloudFunctions from "./cloud-functions";
 import layouts from "./layouts";
@ -56,3 +50,4 @@ import * as CommandlineLists from "./commandline-lists";
 import * as ChallengeController from "./challenge-controller";
 import * as CustomMode2Popup from "./custom-mode2-popup";
 import * as TestConfig from "./test-config";
+import * as Loader from "./loader";
--- a/src/js/leaderboards.js
+++ b/src/js/leaderboards.js
@ -1,5 +1,5 @@
 import * as CloudFunctions from "./cloud-functions";
-import { showBackgroundLoader, hideBackgroundLoader } from "./dom-util";
+import * as Loader from "./loader";
 import * as Notifications from "./notification-center";

 let currentLeaderboard = "time_15";
@ -17,7 +17,6 @@ export function hide() {
        $("#leaderboardsWrapper").addClass("hidden");
      }
    );
-  // focusWords();
 }

 function update() {
@ -33,7 +32,7 @@ function update() {
    uid = firebase.auth().currentUser.uid;
  }

-  showBackgroundLoader();
+  Loader.show();
  Promise.all([
    CloudFunctions.getLeaderboard({
      mode: boardinfo[0],
@ -49,7 +48,7 @@ function update() {
    }),
  ])
    .then((lbdata) => {
-      hideBackgroundLoader();
+      Loader.hide();
      let dailyData = lbdata[0].data;
      let globalData = lbdata[1].data;

@ -245,7 +244,7 @@ function update() {
      }
    })
    .catch((e) => {
-      hideBackgroundLoader();
+      Loader.hide();
      Notifications.add("Something went wrong: " + e.message, -1);
    });
 }
--- a/src/js/loader.js
+++ b/src/js/loader.js
@ -0,0 +1,7 @@
+export function show() {
+  $("#backgroundLoader").stop(true, true).fadeIn(125);
+}
+
+export function hide() {
+  $("#backgroundLoader").stop(true, true).fadeOut(125);
+}
--- a/src/js/misc.js
+++ b/src/js/misc.js
@ -1,4 +1,4 @@
-import { showBackgroundLoader, hideBackgroundLoader } from "./dom-util";
+import * as Loader from "./loader";

 function hexToHSL(H) {
  // Convert hex to RGB first
@ -105,10 +105,10 @@ export async function getFunboxList() {
 let quotes = null;
 export async function getQuotes(language) {
  if (quotes === null || quotes.language !== language.replace(/_\d*k$/g, "")) {
-    showBackgroundLoader();
+    Loader.show();
    try {
      let data = await $.getJSON(`quotes/${language}.json`);
-      hideBackgroundLoader();
+      Loader.hide();
      if (data.quotes === undefined || data.quotes.length === 0) {
        quotes = {
          quotes: [],
@ -132,7 +132,7 @@ export async function getQuotes(language) {
      });
      return quotes;
    } catch {
-      hideBackgroundLoader();
+      Loader.hide();
      quotes = {
        quotes: [],
        length: 0,
@ -305,15 +305,15 @@ export function getCookie(cname) {
 }

 export function sendVerificationEmail() {
-  showBackgroundLoader();
+  Loader.show();
  let cu = firebase.auth().currentUser;
  cu.sendEmailVerification()
    .then(() => {
-      hideBackgroundLoader();
+      Loader.hide();
      showNotification("Email sent to " + cu.email, 4000);
    })
    .catch((e) => {
-      hideBackgroundLoader();
+      Loader.hide();
      showNotification("Error: " + e.message, 3000);
      console.error(e.message);
    });
--- a/src/js/script.js
+++ b/src/js/script.js
@ -181,9 +181,9 @@ function changePage(page) {
  $("#wordsInput").focusout();
  if (page == "test" || page == "") {
    UI.setPageTransition(true);
-    swapElements(activePage, $(".page.pageTest"), 250, () => {
+    UI.swapElements(activePage, $(".page.pageTest"), 250, () => {
      UI.setPageTransition(false);
-      focusWords();
+      TestUI.focusWords();
      $(".page.pageTest").addClass("active");
      history.pushState("/", null, "/");
    });
@ -197,7 +197,7 @@ function changePage(page) {
  } else if (page == "about") {
    UI.setPageTransition(true);
    TestLogic.restart();
-    swapElements(activePage, $(".page.pageAbout"), 250, () => {
+    UI.swapElements(activePage, $(".page.pageAbout"), 250, () => {
      UI.setPageTransition(false);
      history.pushState("about", null, "about");
      $(".page.pageAbout").addClass("active");
@ -207,7 +207,7 @@ function changePage(page) {
  } else if (page == "settings") {
    UI.setPageTransition(true);
    TestLogic.restart();
-    swapElements(activePage, $(".page.pageSettings"), 250, () => {
+    UI.swapElements(activePage, $(".page.pageSettings"), 250, () => {
      UI.setPageTransition(false);
      history.pushState("settings", null, "settings");
      $(".page.pageSettings").addClass("active");
@ -221,7 +221,7 @@ function changePage(page) {
    } else {
      UI.setPageTransition(true);
      TestLogic.restart();
-      swapElements(activePage, $(".page.pageAccount"), 250, () => {
+      UI.swapElements(activePage, $(".page.pageAccount"), 250, () => {
        UI.setPageTransition(false);
        history.pushState("account", null, "account");
        $(".page.pageAccount").addClass("active");
@ -236,7 +236,7 @@ function changePage(page) {
    } else {
      UI.setPageTransition(true);
      TestLogic.restart();
-      swapElements(activePage, $(".page.pageLogin"), 250, () => {
+      UI.swapElements(activePage, $(".page.pageLogin"), 250, () => {
        UI.setPageTransition(false);
        history.pushState("login", null, "login");
        $(".page.pageLogin").addClass("active");
@ -321,12 +321,12 @@ function tagsEdit() {
  let tagid = $("#tagsWrapper #tagsEdit").attr("tagid");
  hideEditTags();
  if (action === "add") {
-    showBackgroundLoader();
+    Loader.show();
    CloudFunctions.addTag({
      uid: firebase.auth().currentUser.uid,
      name: inputVal,
    }).then((e) => {
-      hideBackgroundLoader();
+      Loader.hide();
      let status = e.data.resultCode;
      if (status === 1) {
        Notifications.add("Tag added", 1, 2);
@ -344,13 +344,13 @@ function tagsEdit() {
      }
    });
  } else if (action === "edit") {
-    showBackgroundLoader();
+    Loader.show();
    CloudFunctions.editTag({
      uid: firebase.auth().currentUser.uid,
      name: inputVal,
      tagid: tagid,
    }).then((e) => {
-      hideBackgroundLoader();
+      Loader.hide();
      let status = e.data.resultCode;
      if (status === 1) {
        Notifications.add("Tag updated", 1);
@ -369,12 +369,12 @@ function tagsEdit() {
      }
    });
  } else if (action === "remove") {
-    showBackgroundLoader();
+    Loader.show();
    CloudFunctions.removeTag({
      uid: firebase.auth().currentUser.uid,
      tagid: tagid,
    }).then((e) => {
-      hideBackgroundLoader();
+      Loader.hide();
      let status = e.data.resultCode;
      if (status === 1) {
        Notifications.add("Tag removed", 1);
@ -398,7 +398,7 @@ $(document).on("click", "#top .logo", (e) => {
 });

 $("#wordsWrapper").on("click", () => {
-  focusWords();
+  TestUI.focusWords();
 });

 $(document).on("click", "#top #menu .icon-button", (e) => {
@ -655,7 +655,7 @@ $(document).keydown(function (event) {
    !wordsFocused &&
    event.key !== "Enter"
  ) {
-    focusWords();
+    TestUI.focusWords();
    wordsFocused = true;
    // if (Config.showOutOfFocusWarning) return;
  }
--- a/src/js/settings.js
+++ b/src/js/settings.js
@ -861,10 +861,10 @@ $(document).on(
 $(
  ".pageSettings .section.discordIntegration .buttons .generateCodeButton"
 ).click((e) => {
-  showBackgroundLoader();
+  Loader.show();
  CloudFunctions.generatePairingCode({ uid: firebase.auth().currentUser.uid })
    .then((ret) => {
-      hideBackgroundLoader();
+      Loader.hide();
      if (ret.data.status === 1 || ret.data.status === 2) {
        DB.getSnapshot().pairingCode = ret.data.pairingCode;
        $(".pageSettings .section.discordIntegration .code .bottom").text(
@ -877,7 +877,7 @@ $(
      }
    })
    .catch((e) => {
-      hideBackgroundLoader();
+      Loader.hide();
      Notifications.add("Something went wrong. Error: " + e.message, -1);
    });
 });
@ -885,11 +885,11 @@ $(
 $(".pageSettings .section.discordIntegration #unlinkDiscordButton").click(
  (e) => {
    if (confirm("Are you sure?")) {
-      showBackgroundLoader();
+      Loader.show();
      CloudFunctions.unlinkDiscord({
        uid: firebase.auth().currentUser.uid,
      }).then((ret) => {
-        hideBackgroundLoader();
+        Loader.hide();
        console.log(ret);
        if (ret.data.status === 1) {
          DB.getSnapshot().discordId = null;
@ -971,7 +971,7 @@ $(".pageSettings .section.themes .tabs .button").click((e) => {
    UpdateConfig.setCustomTheme(false);
    ThemeController.set(Config.theme);
    // applyCustomThemeColors();
-    swapElements(
+    UI.swapElements(
      $('.pageSettings .section.themes .tabContainer [tabContent="custom"]'),
      $('.pageSettings .section.themes .tabContainer [tabContent="preset"]'),
      250
@ -980,7 +980,7 @@ $(".pageSettings .section.themes .tabs .button").click((e) => {
    UpdateConfig.setCustomTheme(true);
    ThemeController.set("custom");
    // applyCustomThemeColors();
-    swapElements(
+    UI.swapElements(
      $('.pageSettings .section.themes .tabContainer [tabContent="preset"]'),
      $('.pageSettings .section.themes .tabContainer [tabContent="custom"]'),
      250
--- a/src/js/simple-popups.js
+++ b/src/js/simple-popups.js
@ -143,13 +143,13 @@ simplePopups.updateEmail = new SimplePopup(
  "Update",
  (previousEmail, newEmail) => {
    try {
-      showBackgroundLoader();
+      Loader.show();
      CloudFunctions.updateEmail({
        uid: firebase.auth().currentUser.uid,
        previousEmail: previousEmail,
        newEmail: newEmail,
      }).then((data) => {
-        hideBackgroundLoader();
+        Loader.hide();
        if (data.data.resultCode === 1) {
          Notifications.add("Email updated", 0);
          setTimeout(() => {
@ -180,13 +180,13 @@ simplePopups.clearTagPb = new SimplePopup(
  "Clear",
  () => {
    let tagid = eval("this.parameters[0]");
-    showBackgroundLoader();
+    Loader.show();
    CloudFunctions.clearTagPb({
      uid: firebase.auth().currentUser.uid,
      tagid: tagid,
    })
      .then((res) => {
-        hideBackgroundLoader();
+        Loader.hide();
        if (res.data.resultCode === 1) {
          let tag = DB.getSnapshot().tags.filter((t) => t.id === tagid)[0];
          tag.pb = 0;
@ -199,7 +199,7 @@ simplePopups.clearTagPb = new SimplePopup(
        }
      })
      .catch((e) => {
-        hideBackgroundLoader();
+        Loader.hide();
        Notifications.add(
          "Something went wrong while clearing tag pb " + e,
          -1
@ -237,13 +237,13 @@ simplePopups.resetPersonalBests = new SimplePopup(
  "Reset",
  () => {
    try {
-      showBackgroundLoader();
+      Loader.show();

      CloudFunctions.resetPersonalBests({
        uid: firebase.auth().currentUser.uid,
      }).then((res) => {
        if (res) {
-          hideBackgroundLoader();
+          Loader.hide();
          Notifications.add(
            "Personal bests removed, refreshing the page...",
            0
--- a/src/js/test/test-logic.js
+++ b/src/js/test/test-logic.js
@ -17,7 +17,6 @@ import * as LiveWpm from "./live-wpm";
 import * as LiveAcc from "./live-acc";
 import * as TimerProgress from "./timer-progress";
 import * as ChartController from "./chart-controller";
-import { focusWords } from "./dom-util";
 import * as UI from "./ui";
 import * as QuoteSearchPopup from "./quote-search-popup";
 import * as PbCrown from "./pb-crown";
@ -28,7 +27,6 @@ import * as DB from "./db";
 import * as ThemeColors from "./theme-colors";
 import * as CloudFunctions from "./cloud-functions";
 import * as TestLeaderboards from "./test-leaderboards";
-import { swapElements } from "./dom-util";

 export let notSignedInLastResult = null;

@ -611,7 +609,7 @@ export function restart(withSameWordset = false, nosave = false, event) {
  setBailout(false);
  PaceCaret.reset();
  $("#showWordHistoryButton").removeClass("loaded");
-  focusWords();
+  TestUI.focusWords();
  Funbox.resetMemoryTimer();

  TestUI.reset();
@ -729,7 +727,8 @@ export function restart(withSameWordset = false, nosave = false, event) {
            // resetPaceCaret();
            PbCrown.hide();
            TestTimer.clear();
-            if ($("#commandLineWrapper").hasClass("hidden")) focusWords();
+            if ($("#commandLineWrapper").hasClass("hidden"))
+              TestUI.focusWords();
            ChartController.result.update();
            TestUI.updateModesNotice();
            UI.setPageTransition(false);
@ -1691,7 +1690,7 @@ export function finish(difficultyFailed = false) {

  ChartController.result.update({ duration: 0 });
  ChartController.result.resize();
-  swapElements($("#typingTest"), $("#result"), 250, () => {
+  UI.swapElements($("#typingTest"), $("#result"), 250, () => {
    TestUI.setResultCalculating(false);
    $("#words").empty();
    ChartController.result.resize();
--- a/src/js/test/test-ui.js
+++ b/src/js/test/test-ui.js
@ -42,6 +42,12 @@ export function reset() {
  currentWordElementIndex = 0;
 }

+export function focusWords() {
+  if (!$("#wordsWrapper").hasClass("hidden")) {
+    $("#wordsInput").focus();
+  }
+}
+
 export function updateActiveElement(backspace) {
  let active = document.querySelector("#words .active");
  if (Config.mode == "zen" && backspace) {
--- a/src/js/theme-controller.js
+++ b/src/js/theme-controller.js
@ -3,7 +3,7 @@ import * as ChartController from "./chart-controller";
 import * as Misc from "./misc";
 import * as Notifications from "./notification-center";
 import Config from "./config";
-import { swapElements } from "./dom-util";
+import * as UI from "./ui";

 let isPreviewingTheme = false;
 let randomTheme = null;
@ -67,14 +67,14 @@ export function apply(themeName) {
  let name = "serika_dark";
  if (themeName !== "custom") {
    name = themeName;
-    swapElements(
+    UI.swapElements(
      $('.pageSettings [tabContent="custom"]'),
      $('.pageSettings [tabContent="preset"]'),
      250
    );
  } else {
    //is custom
-    swapElements(
+    UI.swapElements(
      $('.pageSettings [tabContent="preset"]'),
      $('.pageSettings [tabContent="custom"]'),
      250
--- a/src/js/ui.js
+++ b/src/js/ui.js
@ -1,5 +1,89 @@
+import Config from "./config";
+
 export let pageTransition = false;

 export function setPageTransition(val) {
  pageTransition = val;
 }
+
+export function updateKeytips() {
+  if (Config.swapEscAndTab) {
+    $(".pageSettings .tip").html(`
+    tip: You can also change all these settings quickly using the
+    command line (
+    <key>tab</key>
+    )`);
+    $("#bottom .keyTips").html(`
+    <key>esc</key> - restart test<br>
+      <key>tab</key> - command line`);
+  } else {
+    $(".pageSettings .tip").html(`
+    tip: You can also change all these settings quickly using the
+    command line (
+    <key>esc</key>
+    )`);
+    $("#bottom .keyTips").html(`
+    <key>tab</key> - restart test<br>
+      <key>esc</key> - command line`);
+  }
+}
+
+export function swapElements(
+  el1,
+  el2,
+  totalDuration,
+  callback = function () {
+    return;
+  }
+) {
+  if (
+    (el1.hasClass("hidden") && !el2.hasClass("hidden")) ||
+    (!el1.hasClass("hidden") && el2.hasClass("hidden"))
+  ) {
+    //one of them is hidden and the other is visible
+    if (el1.hasClass("hidden")) {
+      callback();
+      return false;
+    }
+    $(el1)
+      .removeClass("hidden")
+      .css("opacity", 1)
+      .animate(
+        {
+          opacity: 0,
+        },
+        totalDuration / 2,
+        () => {
+          $(el1).addClass("hidden");
+          $(el2)
+            .removeClass("hidden")
+            .css("opacity", 0)
+            .animate(
+              {
+                opacity: 1,
+              },
+              totalDuration / 2,
+              () => {
+                callback();
+              }
+            );
+        }
+      );
+  } else if (el1.hasClass("hidden") && el2.hasClass("hidden")) {
+    //both are hidden, only fade in the second
+    $(el2)
+      .removeClass("hidden")
+      .css("opacity", 0)
+      .animate(
+        {
+          opacity: 1,
+        },
+        totalDuration,
+        () => {
+          callback();
+        }
+      );
+  } else {
+    callback();
+  }
+}