mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-10-27 17:27:32 +08:00
refactor: rewrite share test modal to use new system
This commit is contained in:
Miodec
parent
a84e9638af
commit
a22dee8a72
5 changed files with 135 additions and 168 deletions
|
|
@ -124,8 +124,9 @@
|
|||
</div>
|
||||
</dialog>
|
||||
|
||||
<div id="shareTestSettingsPopupWrapper" class="popupWrapper hidden">
|
||||
<div id="shareTestSettingsPopup">
|
||||
<dialog id="shareTestSettingsModal" class="modalWrapper hidden">
|
||||
<!-- <div id="shareTestSettingsPopup"> -->
|
||||
<div class="modal">
|
||||
<div class="title">Share test settings</div>
|
||||
<label class="checkboxWithSub mode">
|
||||
<input type="checkbox" setting="mode" />
|
||||
|
|
@ -177,8 +178,9 @@
|
|||
<i class="fas fa-fw fa-exclamation-triangle"></i>
|
||||
<span>The URL is over 2000 characters long - it might not work</span>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<dialog id="mobileTestConfigModal" class="modalWrapper hidden">
|
||||
<div class="modal">
|
||||
|
|
|
|||
|
|
@ -594,23 +594,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
#shareTestSettingsPopup {
|
||||
background: var(--bg-color);
|
||||
border-radius: var(--roundness);
|
||||
padding: 2rem;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
width: 500px;
|
||||
.title {
|
||||
font-size: 1.5rem;
|
||||
color: var(--sub-color);
|
||||
}
|
||||
.subgroup {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
.tooLongWarning {
|
||||
font-size: 0.75rem;
|
||||
color: var(--error-color);
|
||||
#shareTestSettingsModal {
|
||||
.modal {
|
||||
max-width: 600px;
|
||||
.subgroup {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
.tooLongWarning {
|
||||
font-size: 0.75rem;
|
||||
color: var(--error-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
#cookiesModal {
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@ import * as CustomTextPopup from "../modals/custom-text";
|
|||
import * as Settings from "../pages/settings";
|
||||
import * as Notifications from "../elements/notifications";
|
||||
import * as VideoAdPopup from "../popups/video-ad-popup";
|
||||
import * as ShareTestSettingsPopup from "../popups/share-test-settings-popup";
|
||||
import * as ShareTestSettingsPopup from "../popups/share-test-settings";
|
||||
import * as TestStats from "../test/test-stats";
|
||||
import * as QuoteSearchModal from "../modals/quote-search";
|
||||
import * as FPSCounter from "../elements/fps-counter";
|
||||
|
|
|
|||
|
|
@ -1,147 +0,0 @@
|
|||
import Config from "../config";
|
||||
import { currentQuote } from "../test/test-words";
|
||||
import { getMode2, isPopupVisible } from "../utils/misc";
|
||||
import * as CustomText from "../test/custom-text";
|
||||
import { compressToURI } from "lz-ts";
|
||||
import * as Skeleton from "../utils/skeleton";
|
||||
|
||||
const wrapperId = "shareTestSettingsPopupWrapper";
|
||||
|
||||
function getCheckboxValue(checkbox: string): boolean {
|
||||
return $(`#shareTestSettingsPopupWrapper label.${checkbox} input`).prop(
|
||||
"checked"
|
||||
);
|
||||
}
|
||||
|
||||
type SharedTestSettings = [
|
||||
SharedTypes.Config.Mode | null,
|
||||
SharedTypes.Config.Mode2<SharedTypes.Config.Mode> | null,
|
||||
SharedTypes.CustomTextData | null,
|
||||
boolean | null,
|
||||
boolean | null,
|
||||
string | null,
|
||||
SharedTypes.Config.Difficulty | null,
|
||||
string | null
|
||||
];
|
||||
|
||||
function updateURL(): void {
|
||||
const baseUrl = location.origin + "?testSettings=";
|
||||
const settings: SharedTestSettings = [
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
];
|
||||
|
||||
if (getCheckboxValue("mode")) {
|
||||
settings[0] = Config.mode;
|
||||
}
|
||||
|
||||
if (getCheckboxValue("mode2")) {
|
||||
settings[1] = getMode2(
|
||||
Config,
|
||||
currentQuote
|
||||
) as SharedTypes.Config.Mode2<SharedTypes.Config.Mode>;
|
||||
}
|
||||
|
||||
if (getCheckboxValue("customText")) {
|
||||
settings[2] = CustomText.getData();
|
||||
}
|
||||
|
||||
if (getCheckboxValue("punctuation")) {
|
||||
settings[3] = Config.punctuation;
|
||||
}
|
||||
|
||||
if (getCheckboxValue("numbers")) {
|
||||
settings[4] = Config.numbers;
|
||||
}
|
||||
|
||||
if (getCheckboxValue("language")) {
|
||||
settings[5] = Config.language;
|
||||
}
|
||||
|
||||
if (getCheckboxValue("difficulty")) {
|
||||
settings[6] = Config.difficulty;
|
||||
}
|
||||
|
||||
if (getCheckboxValue("funbox")) {
|
||||
settings[7] = Config.funbox;
|
||||
}
|
||||
|
||||
const compressed = compressToURI(JSON.stringify(settings));
|
||||
|
||||
const url = baseUrl + compressed;
|
||||
$(`#shareTestSettingsPopupWrapper textarea.url`).val(url);
|
||||
if (url.length > 2000) {
|
||||
$(`#shareTestSettingsPopupWrapper .tooLongWarning`).removeClass("hidden");
|
||||
} else {
|
||||
$(`#shareTestSettingsPopupWrapper .tooLongWarning`).addClass("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
function updateSubgroups(): void {
|
||||
if (getCheckboxValue("mode")) {
|
||||
$(`#shareTestSettingsPopupWrapper .subgroup`).removeClass("hidden");
|
||||
} else {
|
||||
$(`#shareTestSettingsPopupWrapper .subgroup`).addClass("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
export function show(): void {
|
||||
Skeleton.append(wrapperId, "popups");
|
||||
if (!isPopupVisible(wrapperId)) {
|
||||
updateURL();
|
||||
updateSubgroups();
|
||||
$("#shareTestSettingsPopupWrapper")
|
||||
.stop(true, true)
|
||||
.css("opacity", 0)
|
||||
.removeClass("hidden")
|
||||
.animate({ opacity: 1 }, 125);
|
||||
}
|
||||
}
|
||||
|
||||
async function hide(): Promise<void> {
|
||||
if (isPopupVisible(wrapperId)) {
|
||||
$("#shareTestSettingsPopupWrapper")
|
||||
.stop(true, true)
|
||||
.css("opacity", 1)
|
||||
.animate(
|
||||
{
|
||||
opacity: 0,
|
||||
},
|
||||
125,
|
||||
() => {
|
||||
$("#shareTestSettingsPopupWrapper").addClass("hidden");
|
||||
Skeleton.remove(wrapperId);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
$(`#shareTestSettingsPopupWrapper label input`).on("change", () => {
|
||||
updateURL();
|
||||
updateSubgroups();
|
||||
});
|
||||
|
||||
$("#shareTestSettingsPopupWrapper textarea.url").on("click", () => {
|
||||
$("#shareTestSettingsPopupWrapper textarea.url").trigger("select");
|
||||
});
|
||||
|
||||
$("#shareTestSettingsPopupWrapper").on("mousedown", (e) => {
|
||||
if ($(e.target).attr("id") === "shareTestSettingsPopupWrapper") {
|
||||
void hide();
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on("keydown", (event) => {
|
||||
if (event.key === "Escape" && isPopupVisible(wrapperId)) {
|
||||
void hide();
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
Skeleton.save(wrapperId);
|
||||
119
frontend/src/ts/popups/share-test-settings.ts
Normal file
119
frontend/src/ts/popups/share-test-settings.ts
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
import Config from "../config";
|
||||
import { currentQuote } from "../test/test-words";
|
||||
import { getMode2 } from "../utils/misc";
|
||||
import * as CustomText from "../test/custom-text";
|
||||
import { compressToURI } from "lz-ts";
|
||||
import AnimatedModal, { ShowOptions } from "../utils/animated-modal";
|
||||
|
||||
function getCheckboxValue(checkbox: string): boolean {
|
||||
return $(`#shareTestSettingsModal label.${checkbox} input`).prop("checked");
|
||||
}
|
||||
|
||||
type SharedTestSettings = [
|
||||
SharedTypes.Config.Mode | null,
|
||||
SharedTypes.Config.Mode2<SharedTypes.Config.Mode> | null,
|
||||
SharedTypes.CustomTextData | null,
|
||||
boolean | null,
|
||||
boolean | null,
|
||||
string | null,
|
||||
SharedTypes.Config.Difficulty | null,
|
||||
string | null
|
||||
];
|
||||
|
||||
function updateURL(): void {
|
||||
const baseUrl = location.origin + "?testSettings=";
|
||||
const settings: SharedTestSettings = [
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
];
|
||||
|
||||
if (getCheckboxValue("mode")) {
|
||||
settings[0] = Config.mode;
|
||||
}
|
||||
|
||||
if (getCheckboxValue("mode2")) {
|
||||
settings[1] = getMode2(
|
||||
Config,
|
||||
currentQuote
|
||||
) as SharedTypes.Config.Mode2<SharedTypes.Config.Mode>;
|
||||
}
|
||||
|
||||
if (getCheckboxValue("customText")) {
|
||||
settings[2] = CustomText.getData();
|
||||
}
|
||||
|
||||
if (getCheckboxValue("punctuation")) {
|
||||
settings[3] = Config.punctuation;
|
||||
}
|
||||
|
||||
if (getCheckboxValue("numbers")) {
|
||||
settings[4] = Config.numbers;
|
||||
}
|
||||
|
||||
if (getCheckboxValue("language")) {
|
||||
settings[5] = Config.language;
|
||||
}
|
||||
|
||||
if (getCheckboxValue("difficulty")) {
|
||||
settings[6] = Config.difficulty;
|
||||
}
|
||||
|
||||
if (getCheckboxValue("funbox")) {
|
||||
settings[7] = Config.funbox;
|
||||
}
|
||||
|
||||
const compressed = compressToURI(JSON.stringify(settings));
|
||||
|
||||
const url = baseUrl + compressed;
|
||||
$(`#shareTestSettingsModal textarea.url`).val(url);
|
||||
if (url.length > 2000) {
|
||||
$(`#shareTestSettingsModal .tooLongWarning`).removeClass("hidden");
|
||||
} else {
|
||||
$(`#shareTestSettingsModal .tooLongWarning`).addClass("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
function updateSubgroups(): void {
|
||||
if (getCheckboxValue("mode")) {
|
||||
$(`#shareTestSettingsModal .subgroup`).removeClass("hidden");
|
||||
} else {
|
||||
$(`#shareTestSettingsModal .subgroup`).addClass("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
export function show(showOptions?: ShowOptions): void {
|
||||
void modal.show({
|
||||
...showOptions,
|
||||
beforeAnimation: async () => {
|
||||
updateURL();
|
||||
updateSubgroups();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
async function setup(modalEl: HTMLElement): Promise<void> {
|
||||
modalEl
|
||||
.querySelector("textarea.url")
|
||||
?.addEventListener("click", async (e) => {
|
||||
(e.target as HTMLTextAreaElement).select();
|
||||
});
|
||||
|
||||
const inputs = modalEl.querySelectorAll("label input");
|
||||
for (const input of inputs) {
|
||||
input.addEventListener("change", async () => {
|
||||
updateURL();
|
||||
updateSubgroups();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const modal = new AnimatedModal({
|
||||
dialogId: "shareTestSettingsModal",
|
||||
setup,
|
||||
});
|
||||
Loading…
Add table
Reference in a new issue