mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-11-09 21:51:29 +08:00
fixed quick tab with out of focus
This commit is contained in:
Miodec
parent
aa10658ae5
commit
c414d3d060
1 changed files with 18 additions and 141 deletions
159
src/js/script.js
159
src/js/script.js
|
|
@ -14,7 +14,6 @@ let manualRestart = false;
|
|||
//test ui
|
||||
let currentWordElementIndex = 0;
|
||||
let resultVisible = false;
|
||||
let caretAnimating = true;
|
||||
let activeWordTop = 0;
|
||||
let activeWordJumped = false;
|
||||
let activeWordTopBeforeJump = 0;
|
||||
|
|
@ -244,7 +243,7 @@ function getuid() {
|
|||
function setFocus(foc) {
|
||||
if (foc && !focusState) {
|
||||
focusState = true;
|
||||
stopCaretAnimation();
|
||||
Caret.stopAnimation();
|
||||
$("#top").addClass("focus");
|
||||
$("#bottom").addClass("focus");
|
||||
$("body").css("cursor", "none");
|
||||
|
|
@ -252,9 +251,9 @@ function setFocus(foc) {
|
|||
} else if (!foc && focusState) {
|
||||
focusState = false;
|
||||
if (testActive) {
|
||||
stopCaretAnimation();
|
||||
Caret.stopAnimation();
|
||||
} else {
|
||||
startCaretAnimation();
|
||||
Caret.startAnimation(config);
|
||||
}
|
||||
$("#top").removeClass("focus");
|
||||
$("#bottom").removeClass("focus");
|
||||
|
|
@ -882,7 +881,7 @@ function showWords() {
|
|||
}
|
||||
|
||||
updateActiveElement();
|
||||
updateCaretPosition();
|
||||
Caret.updatePosition(currentInput, config);
|
||||
}
|
||||
|
||||
(function (history) {
|
||||
|
|
@ -1240,37 +1239,6 @@ function updateTimer() {
|
|||
}
|
||||
}
|
||||
|
||||
function hideCaret() {
|
||||
$("#caret").addClass("hidden");
|
||||
}
|
||||
|
||||
function showCaret() {
|
||||
if ($("#result").hasClass("hidden")) {
|
||||
updateCaretPosition();
|
||||
$("#caret").removeClass("hidden");
|
||||
startCaretAnimation();
|
||||
}
|
||||
}
|
||||
|
||||
function stopCaretAnimation() {
|
||||
if (caretAnimating === true) {
|
||||
$("#caret").css("animation-name", "none");
|
||||
$("#caret").css("opacity", "1");
|
||||
caretAnimating = false;
|
||||
}
|
||||
}
|
||||
|
||||
function startCaretAnimation() {
|
||||
if (caretAnimating === false) {
|
||||
if (config.smoothCaret) {
|
||||
$("#caret").css("animation-name", "caretFlashSmooth");
|
||||
} else {
|
||||
$("#caret").css("animation-name", "caretFlashHard");
|
||||
}
|
||||
caretAnimating = true;
|
||||
}
|
||||
}
|
||||
|
||||
function hideKeymap() {
|
||||
$(".keymap").addClass("hidden");
|
||||
// $("#liveWpm").removeClass("lower");
|
||||
|
|
@ -1427,97 +1395,6 @@ function updateHighlightedKeymapKey() {
|
|||
}
|
||||
}
|
||||
|
||||
function updateCaretPosition() {
|
||||
if ($("#wordsWrapper").hasClass("hidden")) return;
|
||||
if ($("#caret").hasClass("off")) {
|
||||
return;
|
||||
}
|
||||
|
||||
let caret = $("#caret");
|
||||
|
||||
let inputLen = currentInput.length;
|
||||
let currentLetterIndex = inputLen - 1;
|
||||
if (currentLetterIndex == -1) {
|
||||
currentLetterIndex = 0;
|
||||
}
|
||||
try {
|
||||
//insert temporary character so the caret will work in zen mode
|
||||
let activeWordEmpty = $("#words .active").children().length == 0;
|
||||
if (activeWordEmpty) {
|
||||
$("#words .active").append('<letter style="opacity: 0;">_</letter>');
|
||||
}
|
||||
|
||||
let currentWordNodeList = document
|
||||
.querySelector("#words .active")
|
||||
.querySelectorAll("letter");
|
||||
let currentLetter = currentWordNodeList[currentLetterIndex];
|
||||
if (inputLen > currentWordNodeList.length) {
|
||||
currentLetter = currentWordNodeList[currentWordNodeList.length - 1];
|
||||
}
|
||||
|
||||
if (config.mode != "zen" && $(currentLetter).length == 0) return;
|
||||
const isLanguageLeftToRight = Misc.getCurrentLanguage().leftToRight;
|
||||
let currentLetterPosLeft = isLanguageLeftToRight
|
||||
? currentLetter.offsetLeft
|
||||
: currentLetter.offsetLeft + $(currentLetter).width();
|
||||
let currentLetterPosTop = currentLetter.offsetTop;
|
||||
let letterHeight = $(currentLetter).height();
|
||||
let newTop = 0;
|
||||
let newLeft = 0;
|
||||
|
||||
newTop = currentLetterPosTop - Math.round(letterHeight / 5);
|
||||
if (inputLen == 0) {
|
||||
newLeft = isLanguageLeftToRight
|
||||
? currentLetterPosLeft - caret.width() / 2
|
||||
: currentLetterPosLeft + caret.width() / 2;
|
||||
} else {
|
||||
newLeft = isLanguageLeftToRight
|
||||
? currentLetterPosLeft + $(currentLetter).width() - caret.width() / 2
|
||||
: currentLetterPosLeft - $(currentLetter).width() + caret.width() / 2;
|
||||
}
|
||||
|
||||
let smoothlinescroll = $("#words .smoothScroller").height();
|
||||
if (smoothlinescroll === undefined) smoothlinescroll = 0;
|
||||
|
||||
if (config.smoothCaret) {
|
||||
caret.stop(true, false).animate(
|
||||
{
|
||||
top: newTop - smoothlinescroll,
|
||||
left: newLeft,
|
||||
},
|
||||
100
|
||||
);
|
||||
} else {
|
||||
caret.stop(true, true).animate(
|
||||
{
|
||||
top: newTop - smoothlinescroll,
|
||||
left: newLeft,
|
||||
},
|
||||
0
|
||||
);
|
||||
}
|
||||
|
||||
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 (activeWordEmpty) {
|
||||
$("#words .active").children().remove();
|
||||
}
|
||||
} catch (e) {
|
||||
console.log("could not move caret: " + e.message);
|
||||
}
|
||||
}
|
||||
|
||||
function countChars() {
|
||||
let correctWordChars = 0;
|
||||
let correctChars = 0;
|
||||
|
|
@ -1682,7 +1559,7 @@ function showResult(difficultyFailed = false) {
|
|||
TestStats.setEnd(performance.now());
|
||||
testActive = false;
|
||||
setFocus(false);
|
||||
hideCaret();
|
||||
Caret.hide();
|
||||
hideLiveWpm();
|
||||
hideLiveAcc();
|
||||
hideTimer();
|
||||
|
|
@ -2767,7 +2644,7 @@ function startTest() {
|
|||
) {
|
||||
//times up
|
||||
clearTimeout(timer);
|
||||
hideCaret();
|
||||
Caret.hide();
|
||||
inputHistory.push(currentInput);
|
||||
correctedHistory.push(currentCorrected);
|
||||
showResult();
|
||||
|
|
@ -2878,7 +2755,7 @@ function restartTest(withSameWordset = false, nosave = false, event) {
|
|||
correctedHistory = [];
|
||||
ShiftTracker.reset();
|
||||
setFocus(false);
|
||||
hideCaret();
|
||||
Caret.hide();
|
||||
testActive = false;
|
||||
hideLiveWpm();
|
||||
hideLiveAcc();
|
||||
|
|
@ -4710,18 +4587,18 @@ $("#wordsInput").on("focus", () => {
|
|||
if (!resultVisible && config.showOutOfFocusWarning) {
|
||||
OutOfFocus.hide();
|
||||
}
|
||||
showCaret();
|
||||
Caret.show(config);
|
||||
});
|
||||
|
||||
$("#wordsInput").on("focusout", () => {
|
||||
if (!resultVisible && config.showOutOfFocusWarning) {
|
||||
OutOfFocus.show();
|
||||
}
|
||||
hideCaret();
|
||||
Caret.hide();
|
||||
});
|
||||
|
||||
$(window).resize(() => {
|
||||
updateCaretPosition();
|
||||
Caret.updatePosition(currentInput, config);
|
||||
});
|
||||
|
||||
$(document).mousemove(function (event) {
|
||||
|
|
@ -4802,7 +4679,7 @@ $(document).keydown(function (event) {
|
|||
) {
|
||||
focusWords();
|
||||
wordsFocused = true;
|
||||
if (config.showOutOfFocusWarning) return;
|
||||
// if (config.showOutOfFocusWarning) return;
|
||||
}
|
||||
|
||||
//tab
|
||||
|
|
@ -5053,7 +4930,7 @@ function handleBackspace(event) {
|
|||
} else if (config.keymapMode === "next") {
|
||||
updateHighlightedKeymapKey();
|
||||
}
|
||||
updateCaretPosition();
|
||||
Caret.updatePosition(currentInput, config);
|
||||
}
|
||||
|
||||
function handleSpace(event, isEnter) {
|
||||
|
|
@ -5100,7 +4977,7 @@ function handleSpace(event, isEnter) {
|
|||
currentWordIndex++;
|
||||
currentWordElementIndex++;
|
||||
updateActiveElement();
|
||||
updateCaretPosition();
|
||||
Caret.updatePosition(currentInput, config);
|
||||
TestStats.incrementKeypressCount();
|
||||
TestStats.pushKeypressWord(currentWordIndex);
|
||||
// currentKeypress.count++;
|
||||
|
|
@ -5147,7 +5024,7 @@ function handleSpace(event, isEnter) {
|
|||
if (config.stopOnError == "word") {
|
||||
currentInput += " ";
|
||||
updateWordElement(true);
|
||||
updateCaretPosition();
|
||||
Caret.updatePosition(currentInput, config);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
|
@ -5158,7 +5035,7 @@ function handleSpace(event, isEnter) {
|
|||
currentWordIndex++;
|
||||
currentWordElementIndex++;
|
||||
updateActiveElement();
|
||||
updateCaretPosition();
|
||||
Caret.updatePosition(currentInput, config);
|
||||
// currentKeypress.count++;
|
||||
// currentKeypress.words.push(currentWordIndex);
|
||||
TestStats.incrementKeypressCount();
|
||||
|
|
@ -5202,7 +5079,7 @@ function handleSpace(event, isEnter) {
|
|||
}
|
||||
} //end of line wrap
|
||||
|
||||
updateCaretPosition();
|
||||
Caret.updatePosition(currentInput, config);
|
||||
|
||||
if (config.keymapMode === "react") {
|
||||
flashPressedKeymapKey(event.code, true);
|
||||
|
|
@ -5337,7 +5214,7 @@ function handleAlpha(event) {
|
|||
}
|
||||
|
||||
setFocus(true);
|
||||
stopCaretAnimation();
|
||||
Caret.stopAnimation();
|
||||
|
||||
//show dead keys
|
||||
if (event.key === "Dead") {
|
||||
|
|
@ -5558,7 +5435,7 @@ function handleAlpha(event) {
|
|||
}
|
||||
}
|
||||
|
||||
updateCaretPosition();
|
||||
Caret.updatePosition(currentInput, config);
|
||||
}
|
||||
|
||||
window.addEventListener("beforeunload", (event) => {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue