monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2026-01-09 00:45:32 +08:00
Code Issues Projects Releases Packages Wiki Activity

refactor(test config): use display instead of visibility for puncandnum

Browse source 
- this fixes an issue where punctuation and numbers buttons were focusable on the result page
 - also slightly reworks the way width animation works
This commit is contained in:
Miodec 2024-07-05 17:38:11 +02:00
parent 48b57320b2
commit 6bbb11fa9e
1 changed files with 15 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
frontend/src/ts/test/test-config.ts
View file

@ -18,11 +18,7 @@ export async function instantUpdate(): Promise<void> {
"active"
);
$("#testConfig .puncAndNum").css({
width: 0,
opacity: 0,
visibility: "hidden",
});
$("#testConfig .puncAndNum").addClass("hidden");
$("#testConfig .spacer").addClass("scrolled");
$("#testConfig .time").addClass("hidden");
$("#testConfig .wordCount").addClass("hidden");
@ -31,26 +27,16 @@ export async function instantUpdate(): Promise<void> {
$("#testConfig .zen").addClass("hidden");
if (Config.mode === "time") {
$("#testConfig .puncAndNum").css({
width: "unset",
opacity: 1,
visibility: "visible",
});
$("#testConfig .puncAndNum").removeClass("hidden");
$("#testConfig .leftSpacer").removeClass("scrolled");
$("#testConfig .rightSpacer").removeClass("scrolled");
$("#testConfig .time").removeClass("hidden");
updateExtras("time", Config.time);
} else if (Config.mode === "words") {
$("#testConfig .puncAndNum").css({
width: "unset",
opacity: 1,
visibility: "visible",
});
$("#testConfig .puncAndNum").removeClass("hidden");
$("#testConfig .leftSpacer").removeClass("scrolled");
$("#testConfig .rightSpacer").removeClass("scrolled");
$("#testConfig .wordCount").removeClass("hidden");
updateExtras("words", Config.words);
@ -60,15 +46,9 @@ export async function instantUpdate(): Promise<void> {
updateExtras("quoteLength", Config.quoteLength);
} else if (Config.mode === "custom") {
$("#testConfig .puncAndNum").css({
width: "unset",
opacity: 1,
visibility: "visible",
});
$("#testConfig .puncAndNum").removeClass("hidden");
$("#testConfig .leftSpacer").removeClass("scrolled");
$("#testConfig .rightSpacer").removeClass("scrolled");
$("#testConfig .customText").removeClass("hidden");
}
@ -98,11 +78,6 @@ export async function update(
in: "easeInSine",
out: "easeOutSine",
};
// const easing = {
// both: "linear",
// in: "linear",
// out: "linear",
// };
const puncAndNumVisible = {
time: true,
@ -121,42 +96,34 @@ export async function update(
$("#testConfig .leftSpacer").removeClass("scrolled");
}
const previousWidth = Math.round(
puncAndNumEl[0]?.getBoundingClientRect().width ?? 0
);
if (previousWidth === 0) {
puncAndNumEl.css({
puncAndNumEl
.css({
width: "unset",
});
} else {
puncAndNumEl.css({
width: 0,
});
}
opacity: 1,
})
.removeClass("hidden");
const currentWidth = Math.round(
const width = Math.round(
puncAndNumEl[0]?.getBoundingClientRect().width ?? 0
);
puncAndNumEl
.css({
opacity: puncAndNumVisible[current] ? 0 : 1,
width: previousWidth,
visibility: "visible",
width: puncAndNumVisible[previous] ? width : 0,
opacity: puncAndNumVisible[previous] ? 1 : 0,
})
.animate(
{
width: currentWidth,
width: puncAndNumVisible[current] ? width : 0,
opacity: puncAndNumVisible[current] ? 1 : 0,
},
animTime,
easing.both,
() => {
if (currentWidth !== 0) {
if (puncAndNumVisible[current]) {
puncAndNumEl.css("width", "unset");
} else {
puncAndNumEl.css("visibility", "hidden");
puncAndNumEl.addClass("hidden");
}
}
);