From 547780541a9f39ac003236378abb31fad7bfb458 Mon Sep 17 00:00:00 2001 From: Jack Date: Tue, 14 Jul 2020 22:50:42 +0100 Subject: [PATCH] added an option to go back to the previous style and show all lines at once --- public/css/style.scss | 2 +- public/index.html | 10 +++ public/js/commandline.js | 7 ++ public/js/script.js | 148 ++++++++++++++++++++------------------- public/js/settings.js | 11 +++ public/js/userconfig.js | 21 ++++++ 6 files changed, 127 insertions(+), 72 deletions(-) diff --git a/public/css/style.scss b/public/css/style.scss index 45a2f86c5..758e310de 100644 --- a/public/css/style.scss +++ b/public/css/style.scss @@ -85,7 +85,7 @@ body { background: var(--bg-color); font-family: "Roboto Mono"; color: var(--main-color); - overflow-x: hidden; + // overflow-x: hidden; } html { diff --git a/public/index.html b/public/index.html index 2803b308a..6f44e2292 100644 --- a/public/index.html +++ b/public/index.html @@ -910,6 +910,16 @@
1
+
+

show all lines

+
When enabled, the website will show all lines for word,custom and quote mode tests - + otherwise the lines will be limited to 3, and will automatically scroll. +
+
+
on
+
off
+
+

flip test colors

By default, typed text is brighter than the future text. When enabled, the colors will be diff --git a/public/js/commandline.js b/public/js/commandline.js index fb8d848e7..895fd124c 100644 --- a/public/js/commandline.js +++ b/public/js/commandline.js @@ -130,6 +130,13 @@ let commands = { toggleFlipTestColors(); }, }, + { + id: "toggleShowAllLines", + display: "Toggle show all lines", + exec: () => { + toggleShowAllLines(); + }, + }, { id: "toggleColorfulMode", display: "Toggle colorful mode", diff --git a/public/js/script.js b/public/js/script.js index 1f4121891..c3dcf1369 100644 --- a/public/js/script.js +++ b/public/js/script.js @@ -302,8 +302,12 @@ function initWords() { if (config.mode == "time" || config.mode == "words") { // let wordsBound = config.mode == "time" ? 60 : config.words; let wordsBound = 60; - if (config.mode === "words" && config.words < wordsBound) { + if (config.showAllLines) { wordsBound = config.words; + } else { + if (config.mode === "words" && config.words < wordsBound) { + wordsBound = config.words; + } } for (let i = 0; i < wordsBound; i++) { randomWord = language[Math.floor(Math.random() * language.length)]; @@ -467,8 +471,9 @@ function punctuateWord(previousWord, currentWord, index, maxindex) { function addWord() { if ( - wordsList.length - inputHistory.length > 60 || - (config.mode === "words" && wordsList.length >= config.words) + !config.showAllLines && + (wordsList.length - inputHistory.length > 60 || + (config.mode === "words" && wordsList.length >= config.words)) ) return; let language = words[config.language]; @@ -497,21 +502,7 @@ function addWord() { function showWords() { $("#words").empty(); - // if ( - // config.mode == "words" || - // config.mode == "custom" || - // config.mode == "quote" - // ) { - // $("#words").css("height", "auto"); - // for (let i = 0; i < wordsList.length; i++) { - // let w = "
"; - // for (let c = 0; c < wordsList[i].length; c++) { - // w += "" + wordsList[i].charAt(c) + ""; - // } - // w += "
"; - // $("#words").append(w); - // } - // } else if (config.mode == "time") { + for (let i = 0; i < wordsList.length; i++) { let w = "
"; for (let c = 0; c < wordsList[i].length; c++) { @@ -520,12 +511,17 @@ function showWords() { w += "
"; $("#words").append(w); } + $("#words").removeClass("hidden"); - const wordHeight = $($(".word")[0]).outerHeight(true); - $("#words") - .css("height", wordHeight * 3 + "px") - .css("overflow", "hidden"); - // } + if (config.showAllLines) { + $("#words").css("height", "auto"); + } else { + const wordHeight = $($(".word")[0]).outerHeight(true); + $("#words") + .css("height", wordHeight * 3 + "px") + .css("overflow", "hidden"); + } + updateActiveElement(); updateCaretPosition(); } @@ -859,17 +855,19 @@ function updateCaretPosition() { duration ); - // let browserHeight = window.innerHeight; - // let middlePos = browserHeight / 2 - $("#caret").outerHeight() / 2; - // let contentHeight = document.body.scrollHeight; + if (config.showAllLines) { + let browserHeight = window.innerHeight; + let middlePos = browserHeight / 2 - $("#caret").outerHeight() / 2; + let contentHeight = document.body.scrollHeight; - // if (newTop >= middlePos && contentHeight > browserHeight) { - // window.scrollTo({ - // left: 0, - // top: newTop - middlePos, - // behavior: "smooth", - // }); - // } + if (newTop >= middlePos && contentHeight > browserHeight) { + window.scrollTo({ + left: 0, + top: newTop - middlePos, + behavior: "smooth", + }); + } + } } catch (e) {} } @@ -2576,44 +2574,46 @@ $(document).keydown((event) => { event.preventDefault(); let currentWord = wordsList[currentWordIndex]; // if (config.mode == "time") { - // let currentTop = Math.floor($($("#words .word")[currentWordIndex]).position().top); - // let nextTop = Math.floor($($("#words .word")[currentWordIndex + 1]).position().top); - let currentTop = Math.floor( - document.querySelectorAll("#words .word")[currentWordIndex].offsetTop - ); - let nextTop; - try { - nextTop = Math.floor( - document.querySelectorAll("#words .word")[currentWordIndex + 1] - .offsetTop + if (!config.showAllLines) { + // let currentTop = Math.floor($($("#words .word")[currentWordIndex]).position().top); + // let nextTop = Math.floor($($("#words .word")[currentWordIndex + 1]).position().top); + let currentTop = Math.floor( + document.querySelectorAll("#words .word")[currentWordIndex].offsetTop ); - } catch (e) { - nextTop = 0; - } - - if (nextTop > currentTop || activeWordJumped) { - //last word of the line - if (currentTestLine > 0) { - let hideBound = currentTop; - if (activeWordJumped) { - hideBound = activeWordTopBeforeJump; - } - activeWordJumped = false; - - let toHide = []; - let wordElements = $("#words .word"); - for (let i = 0; i < currentWordIndex + 1; i++) { - if ($(wordElements[i]).hasClass("hidden")) continue; - // let forWordTop = Math.floor($(wordElements[i]).position().top); - let forWordTop = Math.floor(wordElements[i].offsetTop); - if (forWordTop < hideBound) { - // $($("#words .word")[i]).addClass("hidden"); - toHide.push($($("#words .word")[i])); - } - } - toHide.forEach((el) => el.addClass("hidden")); + let nextTop; + try { + nextTop = Math.floor( + document.querySelectorAll("#words .word")[currentWordIndex + 1] + .offsetTop + ); + } catch (e) { + nextTop = 0; + } + + if (nextTop > currentTop || activeWordJumped) { + //last word of the line + if (currentTestLine > 0) { + let hideBound = currentTop; + if (activeWordJumped) { + hideBound = activeWordTopBeforeJump; + } + activeWordJumped = false; + + let toHide = []; + let wordElements = $("#words .word"); + for (let i = 0; i < currentWordIndex + 1; i++) { + if ($(wordElements[i]).hasClass("hidden")) continue; + // let forWordTop = Math.floor($(wordElements[i]).position().top); + let forWordTop = Math.floor(wordElements[i].offsetTop); + if (forWordTop < hideBound) { + // $($("#words .word")[i]).addClass("hidden"); + toHide.push($($("#words .word")[i])); + } + } + toHide.forEach((el) => el.addClass("hidden")); + } + currentTestLine++; } - currentTestLine++; } // } if (config.blindMode) $("#words .word.active letter").addClass("correct"); @@ -2659,8 +2659,14 @@ $(document).keydown((event) => { ) { updateTimer(); } - if (config.mode == "time" || config.mode == "words") { - addWord(); + if (config.showAllLines) { + if (config.mode == "time") { + addWord(); + } + } else { + if (config.mode == "time" || config.mode == "words") { + addWord(); + } } } } diff --git a/public/js/settings.js b/public/js/settings.js index 1ace49548..7aa6634cc 100644 --- a/public/js/settings.js +++ b/public/js/settings.js @@ -50,6 +50,7 @@ function updateSettingsPage() { setSettingsButton("maxConfidence", config.maxConfidence); setSettingsButton("randomTheme", config.randomTheme); setSettingsButton("stopOnError", config.stopOnError); + setSettingsButton("showAllLines", config.showAllLines); setActiveThemeButton(); setActiveLanguageButton(); @@ -663,6 +664,16 @@ $(".pageSettings .section.stopOnError .buttons .button.off").click((e) => { setSettingsButton("stopOnError", config.stopOnError); }); +//showAllLines +$(".pageSettings .section.showAllLines .buttons .button.on").click((e) => { + setShowAllLines(true); + setSettingsButton("showAllLines", config.showAllLines); +}); +$(".pageSettings .section.showAllLines .buttons .button.off").click((e) => { + setShowAllLines(false); + setSettingsButton("showAllLines", config.showAllLines); +}); + //discord $( ".pageSettings .section.discordIntegration .buttons .generateCodeButton" diff --git a/public/js/userconfig.js b/public/js/userconfig.js index 0695a2931..e593e28d6 100644 --- a/public/js/userconfig.js +++ b/public/js/userconfig.js @@ -39,6 +39,7 @@ let defaultConfig = { timerColor: "black", timerOpacity: "0.25", stopOnError: false, + showAllLines: false, }; let cookieConfig = null; @@ -249,6 +250,26 @@ function setStopOnError(soe, nosave) { if (!nosave) saveConfigToCookie(); } +//show all lines +function toggleShowAllLines() { + sal = !config.showAllLines; + if (sal == undefined) { + sal = false; + } + config.showAllLines = sal; + restartTest(); + saveConfigToCookie(); +} + +function setShowAllLines(sal, nosave) { + if (sal == undefined) { + sal = false; + } + config.showAllLines = sal; + restartTest(); + if (!nosave) saveConfigToCookie(); +} + //quickend function toggleQuickEnd() { qe = !config.quickEnd;