fix(typing): live elements sometimes being softlocked in the hidden state

Fixed by adding a state variable which is independent of the dom classes

Closes #4613
This commit is contained in:
Miodec 2023-09-11 19:43:26 +01:00
parent 4a429575fc
commit 7e9e096d9f
3 changed files with 21 additions and 10 deletions

View file

@ -12,11 +12,13 @@ export function update(acc: number): void {
(document.querySelector("#liveAcc") as Element).innerHTML = number + "%";
}
let state = false;
export function show(): void {
if (!Config.showLiveAcc) return;
if (!TestState.isActive) return;
if (state) return;
if (Config.timerStyle === "mini") {
if (!$("#miniTimerAndLiveWpm .acc").hasClass("hidden")) return;
$("#miniTimerAndLiveWpm .acc")
.stop(true, false)
.removeClass("hidden")
@ -28,7 +30,6 @@ export function show(): void {
125
);
} else {
if (!$("#liveAcc").hasClass("hidden")) return;
$("#liveAcc")
.stop(true, false)
.removeClass("hidden")
@ -40,11 +41,13 @@ export function show(): void {
125
);
}
state = true;
}
export function hide(): void {
// $("#liveWpm").css("opacity", 0);
// $("#miniTimerAndLiveWpm .wpm").css("opacity", 0);
if (!state) return;
$("#liveAcc")
.stop(true, false)
.animate(
@ -67,6 +70,7 @@ export function hide(): void {
$("#miniTimerAndLiveWpm .acc").addClass("hidden");
}
);
state = false;
}
ConfigEvent.subscribe((eventKey, eventValue) => {

View file

@ -12,11 +12,13 @@ export async function update(burst: number): Promise<void> {
burst.toString();
}
let state = false;
export function show(): void {
if (!Config.showLiveBurst) return;
if (!TestState.isActive) return;
if (state) return;
if (Config.timerStyle === "mini") {
if (!$("#miniTimerAndLiveWpm .burst").hasClass("hidden")) return;
$("#miniTimerAndLiveWpm .burst")
.stop(true, false)
.removeClass("hidden")
@ -28,7 +30,6 @@ export function show(): void {
125
);
} else {
if (!$("#liveBurst").hasClass("hidden")) return;
$("#liveBurst")
.stop(true, false)
.removeClass("hidden")
@ -43,6 +44,7 @@ export function show(): void {
}
export function hide(): void {
if (!state) return;
$("#liveBurst")
.stop(true, false)
.animate(
@ -65,6 +67,7 @@ export function hide(): void {
$("#miniTimerAndLiveWpm .burst").addClass("hidden");
}
);
state = false;
}
ConfigEvent.subscribe((eventKey, eventValue) => {

View file

@ -20,13 +20,15 @@ export function update(wpm: number, raw: number): void {
liveWpmElement.innerHTML = number.toString();
}
let state = false;
export function show(): void {
if (!Config.showLiveWpm) return;
if (!TestState.isActive) return;
if (state) return;
if (Config.timerStyle === "mini") {
if (!miniLiveWpmElement.classList.contains("hidden")) return;
$(miniLiveWpmElement)
.stop(true, true)
.stop(true, false)
.removeClass("hidden")
.css("opacity", 0)
.animate(
@ -36,9 +38,8 @@ export function show(): void {
125
);
} else {
if (!liveWpmElement.classList.contains("hidden")) return;
$(liveWpmElement)
.stop(true, true)
.stop(true, false)
.removeClass("hidden")
.css("opacity", 0)
.animate(
@ -48,11 +49,13 @@ export function show(): void {
125
);
}
state = true;
}
export function hide(): void {
if (!state) return;
$(liveWpmElement)
.stop(true, true)
.stop(true, false)
.animate(
{
opacity: 0,
@ -63,7 +66,7 @@ export function hide(): void {
}
);
$(miniLiveWpmElement)
.stop(true, true)
.stop(true, false)
.animate(
{
opacity: 0,
@ -73,6 +76,7 @@ export function hide(): void {
miniLiveWpmElement.classList.add("hidden");
}
);
state = false;
}
ConfigEvent.subscribe((eventKey, eventValue) => {