monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-11-06 11:01:00 +08:00
Code Issues Projects Releases Packages Wiki Activity

refactor(cookie modal): rename file, move file, use setup function, style update

Browse source
This commit is contained in:
Miodec 2024-03-13 00:16:48 +01:00
parent cadf6502ef
commit a172225510
9 changed files with 151 additions and 161 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/html/popups.html
View file

@ -59,10 +59,7 @@
<div id="simplePopup" popupId=""></div>
</div>
<dialog
id="cookiePopup"
class="cookie-popup-wrapper cookiePopupWrapper modalWrapper hidden"
>
<dialog id="cookiesModal" class="modalWrapper hidden">
<div class="extensionMessage">
If you see this text, that means an extension is blocking a cookie consent
popup. This will cause the website to incorrectly assume its still visible

26
frontend/src/styles/popups.scss
View file

@ -607,26 +607,22 @@
color: var(--error-color);
}
}
#cookiePopup {
#cookiesModal {
align-items: end;
justify-items: end;
.extensionMessage {
position: fixed;
right: 2rem;
bottom: 2rem;
padding: 1rem;
width: 465px;
max-width: 465px;
width: 100%;
font-size: 0.75rem;
color: var(--text-color);
grid-column: 1/2;
grid-row: 1/2;
padding: 1rem;
}
.modal {
position: fixed;
right: 2rem;
bottom: 2rem;
background: var(--bg-color);
border-radius: var(--roundness);
padding: 2rem;
display: grid;
gap: 1rem;
min-width: 465px;
grid-column: 1/2;
grid-row: 1/2;
max-width: 465px;
z-index: 100000001;
// outline: 0.5rem solid var(--bg-color)
-webkit-user-select: none;

8
frontend/src/styles/z_media-queries.scss
View file

@ -759,14 +759,6 @@
grid-template-areas: "title" "t15" "t60";
}
}
#cookiePopupWrapper {
#cookiePopup,
.extensionMessage {
right: 1rem;
bottom: 1rem;
width: calc(100vw - 2rem);
}
}
#keymap {
.row {
height: 1.25rem;

7
frontend/src/ts/event-handlers/settings.ts
View file

@ -1,4 +1,5 @@
import * as ShareCustomThemeModal from "../modals/share-custom-theme";
import * as CookiesModal from "../modals/cookies";
const settingsPage = document.querySelector("#pageSettings");
@ -7,3 +8,9 @@ settingsPage
?.addEventListener("click", () => {
ShareCustomThemeModal.show();
});
settingsPage
?.querySelector(".section.updateCookiePreferences button")
?.addEventListener("click", () => {
CookiesModal.show(true);
});

126
frontend/src/ts/modals/cookies.ts Normal file
View file

@ -0,0 +1,126 @@
import { activateAnalytics } from "../controllers/analytics-controller";
import * as Notifications from "../elements/notifications";
import { isPopupVisible } from "../utils/misc";
import * as AdController from "../controllers/ad-controller";
import AnimatedModal from "../utils/animated-modal";
import { focusWords } from "../test/test-ui";
type Accepted = {
security: boolean;
analytics: boolean;
};
function getAcceptedObject(): Accepted | null {
const acceptedCookies = localStorage.getItem("acceptedCookies") ?? "";
if (acceptedCookies) {
return JSON.parse(acceptedCookies);
} else {
return null;
}
}
function setAcceptedObject(obj: Accepted): void {
localStorage.setItem("acceptedCookies", JSON.stringify(obj));
}
export function check(): void {
const accepted = getAcceptedObject();
if (accepted === null) {
show();
}
}
export function show(goToSettings?: boolean): void {
void modal.show({
beforeAnimation: async () => {
if (goToSettings) {
showSettings();
}
},
afterAnimation: async () => {
if (!isPopupVisible("cookiesModal")) {
modal.destroy();
}
},
});
}
function showSettings(): void {
modal.getModal().querySelector(".main")?.classList.add("hidden");
modal.getModal().querySelector(".settings")?.classList.remove("hidden");
}
async function hide(): Promise<void> {
void modal.hide({
afterAnimation: async () => {
focusWords();
},
});
}
// function verifyVisible(): void {
// if (!modal.isOpen()) return;
// if (!isPopupVisible("cookiePopup")) {
// //removed by cookie popup blocking extension
// modal.destroy();
// }
// }
const modal = new AnimatedModal("cookiesModal", "popups", undefined, {
customEscapeHandler: (): void => {
//
},
customWrapperClickHandler: (): void => {
//
},
setup: async (modalEl): Promise<void> => {
modalEl.querySelector(".acceptAll")?.addEventListener("click", () => {
const accepted = {
security: true,
analytics: true,
};
setAcceptedObject(accepted);
activateAnalytics();
void hide();
});
modalEl.querySelector(".rejectAll")?.addEventListener("click", () => {
const accepted = {
security: true,
analytics: false,
};
setAcceptedObject(accepted);
void hide();
});
modalEl.querySelector(".openSettings")?.addEventListener("click", () => {
showSettings();
});
modalEl
.querySelector(".cookie.ads .textButton")
?.addEventListener("click", () => {
try {
AdController.showConsentPopup();
} catch (e) {
console.error("Failed to open ad consent UI");
Notifications.add(
"Failed to open Ad consent popup. Do you have an ad or cookie popup blocker enabled?",
-1
);
}
});
modalEl.querySelector(".acceptSelected")?.addEventListener("click", () => {
const analytics = (
modalEl.querySelector(".cookie.analytics input") as HTMLInputElement
).checked;
const accepted = {
security: true,
analytics,
};
setAcceptedObject(accepted);
void hide();
if (analytics === true) {
activateAnalytics();
}
});
},
});

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

@ -12,7 +12,6 @@ import * as ImportExportSettingsModal from "../modals/import-export-settings";
import * as ConfigEvent from "../observables/config-event";
import * as ActivePage from "../states/active-page";
import * as ApeKeysPopup from "../popups/ape-keys-popup";
import * as CookiePopup from "../popups/cookie-popup";
import Page from "./page";
import { getAuthenticatedUser, isAuthenticated } from "../firebase";
import Ape from "../ape";
@ -1247,11 +1246,6 @@ $(".pageSettings .quickNav .links a").on("click", (e) => {
isOpen && toggleSettingsGroup(settingsGroup);
});
$(".pageSettings .section.updateCookiePreferences button").on("click", () => {
CookiePopup.show();
CookiePopup.showSettings();
});
$(".pageSettings .section.discordIntegration .getLinkAndGoToOauth").on(
"click",
() => {

122
frontend/src/ts/popups/cookie-popup.ts
View file

@ -1,122 +0,0 @@
import { activateAnalytics } from "../controllers/analytics-controller";
import * as Notifications from "../elements/notifications";
import { isPopupVisible } from "../utils/misc";
import * as AdController from "../controllers/ad-controller";
import AnimatedModal from "../utils/animated-modal";
type Accepted = {
security: boolean;
analytics: boolean;
};
function getAcceptedObject(): Accepted | null {
const acceptedCookies = localStorage.getItem("acceptedCookies") ?? "";
if (acceptedCookies) {
return JSON.parse(acceptedCookies);
} else {
return null;
}
}
function setAcceptedObject(obj: Accepted): void {
localStorage.setItem("acceptedCookies", JSON.stringify(obj));
}
export function check(): void {
const accepted = getAcceptedObject();
if (accepted === null) {
show();
}
}
export function show(): void {
void modal.show({
afterAnimation: async () => {
if (!isPopupVisible("cookiePopup")) {
modal.destroy();
}
},
});
}
async function hide(): Promise<void> {
void modal.hide();
}
export function showSettings(): void {
$("#cookiePopup .main").addClass("hidden");
$("#cookiePopup .settings").removeClass("hidden");
}
function verifyVisible(): void {
if (!modal.isOpen()) return;
if (!isPopupVisible("cookiePopup")) {
//removed by cookie popup blocking extension
modal.destroy();
}
}
$("#cookiePopup .acceptAll").on("click", () => {
const accepted = {
security: true,
analytics: true,
};
setAcceptedObject(accepted);
activateAnalytics();
void hide();
});
$("#cookiePopup .rejectAll").on("click", () => {
const accepted = {
security: true,
analytics: false,
};
setAcceptedObject(accepted);
void hide();
});
$("#cookiePopup .acceptSelected").on("click", () => {
const analytics = $("#cookiePopup .cookie.analytics input").prop("checked");
const accepted = {
security: true,
analytics,
};
setAcceptedObject(accepted);
void hide();
if (analytics === true) {
activateAnalytics();
}
});
$("#cookiePopup .openSettings").on("click", () => {
showSettings();
});
$(document).on("keypress", (e) => {
verifyVisible();
if (modal.isOpen()) {
e.preventDefault();
}
});
$("#cookiePopup .cookie.ads .textButton").on("click", () => {
try {
AdController.showConsentPopup();
} catch (e) {
console.error("Failed to open ad consent UI");
Notifications.add(
"Failed to open Ad consent popup. Do you have an ad or cookie popup blocker enabled?",
-1
);
}
});
const modal = new AnimatedModal("cookiePopup", "popups", undefined, {
customEscapeHandler: (): void => {
//
},
customWrapperClickHandler: (): void => {
//
},
});

4
frontend/src/ts/ready.ts
View file

@ -5,7 +5,7 @@ import * as MonkeyPower from "./elements/monkey-power";
import * as NewVersionNotification from "./elements/version-check";
import * as Notifications from "./elements/notifications";
import * as Focus from "./test/focus";
import * as CookiePopup from "./popups/cookie-popup";
import * as CookiesModal from "./modals/cookies";
import * as PSA from "./elements/psa";
import * as ConnectionState from "./states/connection";
import * as FunboxList from "./test/funbox/funbox-list";
@ -41,7 +41,7 @@ $(document).ready(() => {
Misc.loadCSS("/css/balloon.min.css", true);
Misc.loadCSS("/css/fa.min.css", true);
CookiePopup.check();
CookiesModal.check();
$("body").css("transition", "background .25s, transform .05s");
if (Config.quickRestart !== "off") {

8
frontend/src/ts/test/test-ui.ts
View file

@ -405,8 +405,8 @@ export async function screenshot(): Promise<void> {
let revertCookie = false;
if (
Misc.isElementVisible("#cookiePopupWrapper") ||
document.contains(document.querySelector("#cookiePopupWrapper"))
Misc.isElementVisible("#cookiesModal") ||
document.contains(document.querySelector("#cookiesModal"))
) {
revertCookie = true;
}
@ -428,7 +428,7 @@ export async function screenshot(): Promise<void> {
$("#result").removeClass("noBalloons");
$(".wordInputHighlight").removeClass("hidden");
$(".highlightContainer").removeClass("hidden");
if (revertCookie) $("#cookiePopupWrapper").removeClass("hidden");
if (revertCookie) $("#cookiesModal").removeClass("hidden");
if (revealReplay) $("#resultReplay").removeClass("hidden");
if (!isAuthenticated()) {
$(".pageTest .loginTip").removeClass("hidden");
@ -475,7 +475,7 @@ export async function screenshot(): Promise<void> {
$("#result").addClass("noBalloons");
$(".wordInputHighlight").addClass("hidden");
$(".highlightContainer").addClass("hidden");
if (revertCookie) $("#cookiePopupWrapper").addClass("hidden");
if (revertCookie) $("#cookiesModal").addClass("hidden");
FunboxList.get(Config.funbox).forEach((f) => f.functions?.clearGlobal?.());