monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-09-28 09:36:40 +08:00
Code Issues Projects Releases Packages Wiki Activity

impr(animated modal): custom show options when modal is shown in a chain

Browse source
This commit is contained in:
Miodec 2024-03-15 17:24:15 +01:00
parent 44e3d1b5ad
commit 474c6aa52e
2 changed files with 8 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/ts/commandline/commandline.ts
View file

@ -535,6 +535,9 @@ const modal = new AnimatedModal({
customWrapperClickHandler: (): void => {
hide();
},
showOptionsWhenInChain: {
focusFirstInput: true,
},
setup: (modal): void => {
const input = modal.querySelector("input") as HTMLInputElement;

5
frontend/src/ts/utils/animated-modal.ts
View file

@ -40,6 +40,7 @@ type ConstructorParams = {
dialogId: string;
appendTo?: Skeleton.SkeletonAppendParents;
customAnimations?: ConstructorCustomAnimations;
showOptionsWhenInChain?: ShowOptions;
customEscapeHandler?: (e: KeyboardEvent) => void;
customWrapperClickHandler?: (e: MouseEvent) => void;
setup?: (modal: HTMLElement) => void;
@ -55,6 +56,7 @@ export default class AnimatedModal {
private open = false;
private setupRan = false;
private previousModalInChain: AnimatedModal | undefined;
private showOptionsWhenInChain: ShowOptions | undefined;
private skeletonAppendParent: Skeleton.SkeletonAppendParents;
private customShowAnimations: CustomWrapperAndModalAnimations | undefined;
private customHideAnimations: CustomWrapperAndModalAnimations | undefined;
@ -106,6 +108,7 @@ export default class AnimatedModal {
this.customShowAnimations = constructorParams.customAnimations?.show;
this.customHideAnimations = constructorParams.customAnimations?.hide;
this.previousModalInChain = undefined;
this.showOptionsWhenInChain = constructorParams.showOptionsWhenInChain;
this.customEscapeHandler = constructorParams?.customEscapeHandler;
this.customWrapperClickHandler =
@ -359,6 +362,7 @@ export default class AnimatedModal {
animationMode: "modalOnly",
animationDurationMs:
modalAnimationDuration * MODAL_ONLY_ANIMATION_MULTIPLIER,
...this.previousModalInChain.showOptionsWhenInChain,
});
this.previousModalInChain = undefined;
}
@ -390,6 +394,7 @@ export default class AnimatedModal {
animationMode: "modalOnly",
animationDurationMs:
modalAnimationDuration * MODAL_ONLY_ANIMATION_MULTIPLIER,
...this.previousModalInChain.showOptionsWhenInChain,
});
this.previousModalInChain = undefined;
}