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

Merge branch 'master' into bye-jquery-test

Browse source
This commit is contained in:
Leonabcd123 2026-01-07 21:01:11 +02:00 • committed by GitHub
commit d0e63b8bdb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 38 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/ts/pages/settings.ts
View file

@ -753,7 +753,9 @@ function toggleSettingsGroup(groupName: string): void {
const groupEl = qs(`.pageSettings .settingsGroup.${groupName}`);
if (!groupEl?.hasClass("slideup")) {
void groupEl?.slideUp(250);
void groupEl?.slideUp(250, {
hide: false,
});
groupEl?.addClass("slideup");
$(`.pageSettings .sectionGroupTitle[group=${groupName}]`).addClass(
"rotateIcon",

51
frontend/src/ts/utils/dom.ts
View file

@ -697,16 +697,24 @@ export class ElementWithUtils<T extends HTMLElement = HTMLElement> {
overflow: "hidden",
marginTop: "",
marginBottom: "",
paddingTop: "",
paddingBottom: "",
});
const { height, marginTop, marginBottom, paddingTop, paddingBottom } =
getComputedStyle(this.native);
this.setStyle({
height: "0px",
marginTop: "0px",
marginBottom: "0px",
paddingTop: "0px",
paddingBottom: "0px",
});
const height = this.getOffsetHeight();
const computed = getComputedStyle(this.native);
const marginTop = computed.marginTop;
const marginBottom = computed.marginBottom;
this.setStyle({ height: "0px", marginTop: "0px", marginBottom: "0px" });
await this.promiseAnimate({
height: [0, height],
marginTop: [0, marginTop],
marginBottom: [0, marginBottom],
paddingTop: [0, paddingTop],
paddingBottom: [0, paddingBottom],
duration,
onComplete: () => {
this.setStyle({
@ -723,29 +731,40 @@ export class ElementWithUtils<T extends HTMLElement = HTMLElement> {
* Animate the element sliding up (collapsing height from full height to 0)
* @param duration The duration of the animation in milliseconds (default: 250ms)
*/
async slideUp(duration = 250): Promise<void> {
async slideUp(
duration = 250,
options?: {
hide?: boolean;
},
): Promise<void> {
this.show().setStyle({
overflow: "hidden",
height: "",
marginTop: "",
marginBottom: "",
paddingTop: "",
paddingBottom: "",
});
const height = this.getOffsetHeight();
const computed = getComputedStyle(this.native);
const marginTop = computed.marginTop;
const marginBottom = computed.marginBottom;
const { height, marginTop, marginBottom, paddingTop, paddingBottom } =
getComputedStyle(this.native);
await this.promiseAnimate({
height: [height, 0],
marginTop: [marginTop, 0],
marginBottom: [marginBottom, 0],
paddingTop: [paddingTop, 0],
paddingBottom: [paddingBottom, 0],
duration,
onComplete: () => {
this.setStyle({
height: "",
overflow: "",
marginTop: "",
marginBottom: "",
}).hide();
if (options?.hide ?? true) {
this.hide().setStyle({
height: "",
overflow: "",
marginTop: "",
marginBottom: "",
paddingTop: "",
paddingBottom: "",
});
}
},
});
}