From cdcedb3b29e0ee48d76066c598487b1bb29937f1 Mon Sep 17 00:00:00 2001
From: Jack <bartnikjack@gmail.com>
Date: Thu, 30 Jul 2020 20:16:07 +0100
Subject: [PATCH] added custom word and time popup

---
 public/css/style.scss |  27 +++++++++
 public/index.html     |   7 +++
 public/js/script.js   | 138 +++++++++++++++++++++++++++++++++++-------
 3 files changed, 149 insertions(+), 23 deletions(-)

diff --git a/public/css/style.scss b/public/css/style.scss
index cafaf9f3b..aaac835e5 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -399,6 +399,33 @@ a:hover {
   }
 }
 
+#customMode2PopupWrapper {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.75);
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 1000;
+  display: grid;
+  justify-content: center;
+  align-items: center;
+  padding: 5rem 0;
+
+  #customMode2Popup {
+    background: var(--bg-color);
+    border-radius: var(--roundness);
+    padding: 2rem;
+    display: grid;
+    gap: 1rem;
+    width: 300px;
+
+    .title {
+      font-size: 1.5rem;
+      color: var(--sub-color);
+    }
+  }
+}
 
 #customThemeShareWrapper {
   width: 100%;
diff --git a/public/index.html b/public/index.html
index f66f924f0..28f2fb39a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -57,6 +57,13 @@
       <div class="button">ok</div>
     </div>
   </div>
+  <div id="customMode2PopupWrapper" class="hidden">
+    <div id="customMode2Popup" mode="">
+      <div class="title">Test length</div>
+      <input type="number" value="1" min="1" max="10000">
+      <div class="button">ok</div>
+    </div>
+  </div>
   <div id="tagsWrapper" class="hidden">
     <div id="tagsEdit" action="" tagid="">
       <div class="title"></div>
diff --git a/public/js/script.js b/public/js/script.js
index 11b7e3b3b..a41b17172 100644
--- a/public/js/script.js
+++ b/public/js/script.js
@@ -2716,17 +2716,80 @@ $("#customTextPopup .button").click((e) => {
   hideCustomTextPopup();
 });
 
-$(document).on("click", "#top .logo", (e) => {
-  changePage("test");
+function showCustomMode2Popup(mode) {
+  if ($("#customMode2PopupWrapper").hasClass("hidden")) {
+    $("#customMode2PopupWrapper")
+      .stop(true, true)
+      .css("opacity", 0)
+      .removeClass("hidden")
+      .animate({ opacity: 1 }, 100, (e) => {
+        if (mode == "time") {
+          $("#customMode2Popup .text").text("Test length");
+          $("#customMode2Popup").attr("mode", "time");
+        } else if (mode == "words") {
+          $("#customMode2Popup .text").text("Word amount");
+          $("#customMode2Popup").attr("mode", "words");
+        }
+        $("#customMode2Popup input").focus().select();
+      });
+  }
+}
+
+function hideCustomMode2Popup() {
+  if (!$("#customMode2PopupWrapper").hasClass("hidden")) {
+    $("#customMode2PopupWrapper")
+      .stop(true, true)
+      .css("opacity", 1)
+      .animate(
+        {
+          opacity: 0,
+        },
+        100,
+        (e) => {
+          $("#customMode2PopupWrapper").addClass("hidden");
+        }
+      );
+  }
+}
+
+$("#customMode2PopupWrapper").click((e) => {
+  if ($(e.target).attr("id") === "customMode2PopupWrapper") {
+    hideCustomMode2Popup();
+  }
 });
 
-$(document).on("click", "#top .config .wordCount .text-button", (e) => {
-  wrd = $(e.currentTarget).attr("wordCount");
-  if (wrd == "custom") {
-    let newWrd = prompt("Custom word amount");
-    if (newWrd !== null && !isNaN(newWrd) && newWrd > 0 && newWrd <= 10000) {
-      changeWordCount(newWrd);
-      if (newWrd > 2000) {
+$("#customMode2Popup input").keypress((e) => {
+  if (event.keyCode == 13) {
+    applyMode2Popup();
+  }
+});
+
+$("#customMode2Popup .button").click((e) => {
+  applyMode2Popup();
+});
+
+function applyMode2Popup() {
+  let mode = $("#customMode2Popup").attr("mode");
+  let val = $("#customMode2Popup input").val();
+
+  if (mode == "time") {
+    if (val !== null && !isNaN(val) && val > 0) {
+      changeTimeConfig(val);
+      restartTest();
+      if (val >= 1800) {
+        showNotification(
+          "Very long tests can cause performance issues or crash the website on some machines!",
+          5000
+        );
+      }
+    } else {
+      showNotification("Custom time can only be set between 1 and 3600", 3000);
+    }
+  } else if (mode == "words") {
+    if (val !== null && !isNaN(val) && val > 0 && val <= 10000) {
+      changeWordCount(val);
+      restartTest();
+      if (val > 2000) {
         showNotification(
           "Very long tests can cause performance issues or crash the website on some machines!",
           5000
@@ -2738,31 +2801,60 @@ $(document).on("click", "#top .config .wordCount .text-button", (e) => {
         3000
       );
     }
+  }
+
+  hideCustomMode2Popup();
+}
+
+$(document).on("click", "#top .logo", (e) => {
+  changePage("test");
+});
+
+$(document).on("click", "#top .config .wordCount .text-button", (e) => {
+  wrd = $(e.currentTarget).attr("wordCount");
+  if (wrd == "custom") {
+    //   let newWrd = prompt("Custom word amount");
+    //   if (newWrd !== null && !isNaN(newWrd) && newWrd > 0 && newWrd <= 10000) {
+    //     changeWordCount(newWrd);
+    //     if (newWrd > 2000) {
+    //       showNotification(
+    //         "Very long tests can cause performance issues or crash the website on some machines!",
+    //         5000
+    //       );
+    //     }
+    //   } else {
+    //     showNotification(
+    //       "Custom word amount can only be set between 1 and 10000",
+    //       3000
+    //     );
+    //   }
+    showCustomMode2Popup("words");
   } else {
     changeWordCount(wrd);
+    restartTest();
   }
-  restartTest();
 });
 
 $(document).on("click", "#top .config .time .text-button", (e) => {
   time = $(e.currentTarget).attr("timeConfig");
   if (time == "custom") {
-    let newTime = prompt("Custom time in seconds");
-    if (newTime !== null && !isNaN(newTime) && newTime > 0 && newTime <= 3600) {
-      changeTimeConfig(newTime);
-      if (newTime >= 1800) {
-        showNotification(
-          "Very long tests can cause performance issues or crash the website on some machines!",
-          5000
-        );
-      }
-    } else {
-      showNotification("Custom time can only be set between 1 and 3600", 3000);
-    }
+    //   let newTime = prompt("Custom time in seconds");
+    //   if (newTime !== null && !isNaN(newTime) && newTime > 0 && newTime <= 3600) {
+    //     changeTimeConfig(newTime);
+    //     if (newTime >= 1800) {
+    //       showNotification(
+    //         "Very long tests can cause performance issues or crash the website on some machines!",
+    //         5000
+    //       );
+    //     }
+    //   } else {
+    //     showNotification("Custom time can only be set between 1 and 3600", 3000);
+    //   }
+    showCustomMode2Popup("time");
   } else {
     changeTimeConfig(time);
+    restartTest();
   }
-  restartTest();
 });
 
 $(document).on("click", "#top .config .customText .text-button", (e) => {