From 776a772f036b2e1ab0503f19e9669b6ad0e2f7ca Mon Sep 17 00:00:00 2001 From: thanos <236362159+thanoskn@users.noreply.github.com> Date: Mon, 5 Jan 2026 11:51:05 +0000 Subject: [PATCH 1/3] Remove JQuery from popups --- frontend/src/ts/popups/video-ad-popup.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/frontend/src/ts/popups/video-ad-popup.ts b/frontend/src/ts/popups/video-ad-popup.ts index 036d65d4c99c..bc837fd5d314 100644 --- a/frontend/src/ts/popups/video-ad-popup.ts +++ b/frontend/src/ts/popups/video-ad-popup.ts @@ -5,6 +5,7 @@ import * as AdController from "../controllers/ad-controller"; import * as Skeleton from "../utils/skeleton"; import { isPopupVisible } from "../utils/misc"; import { animate } from "animejs"; +import {qs} from "../utils/dom"; const wrapperId = "videoAdPopupWrapper"; @@ -35,13 +36,13 @@ export async function show(): Promise { } if (!isPopupVisible(wrapperId)) { - const el = document.querySelector("#videoAdPopupWrapper") as HTMLElement; + const el = qs("#videoAdPopupWrapper"); animate(el, { opacity: [0, 1], duration: 125, onBegin: () => { - el.classList.remove("hidden"); + el.show(); }, onComplete: () => { //@ts-expect-error 3rd party ad code @@ -53,12 +54,12 @@ export async function show(): Promise { function hide(): void { if (isPopupVisible(wrapperId)) { - const el = document.querySelector("#videoAdPopupWrapper") as HTMLElement; + const el = qs("#videoAdPopupWrapper"); animate(el, { opacity: [1, 0], duration: 125, onComplete: () => { - el.classList.add("hidden"); + el.hide(); Skeleton.remove(wrapperId); }, }); @@ -80,7 +81,7 @@ export function egVideoListener(options: Record): void { } } -$(".pageTest #watchVideoAdButton").on("click", () => { +qs(".pageTest #watchVideoAdButton").on("click", () => { void show(); }); From afc4b0a339e9578fcba3dc31af75d24858c841ba Mon Sep 17 00:00:00 2001 From: thanos <236362159+thanoskn@users.noreply.github.com> Date: Mon, 5 Jan 2026 14:20:11 +0000 Subject: [PATCH 2/3] Ensure element existence before animation --- frontend/src/ts/popups/video-ad-popup.ts | 47 +++++++++++++----------- 1 file changed, 26 insertions(+), 21 deletions(-) diff --git a/frontend/src/ts/popups/video-ad-popup.ts b/frontend/src/ts/popups/video-ad-popup.ts index bc837fd5d314..2972c0eea382 100644 --- a/frontend/src/ts/popups/video-ad-popup.ts +++ b/frontend/src/ts/popups/video-ad-popup.ts @@ -5,7 +5,7 @@ import * as AdController from "../controllers/ad-controller"; import * as Skeleton from "../utils/skeleton"; import { isPopupVisible } from "../utils/misc"; import { animate } from "animejs"; -import {qs} from "../utils/dom"; +import { qs } from "../utils/dom"; const wrapperId = "videoAdPopupWrapper"; @@ -38,31 +38,36 @@ export async function show(): Promise { if (!isPopupVisible(wrapperId)) { const el = qs("#videoAdPopupWrapper"); - animate(el, { - opacity: [0, 1], - duration: 125, - onBegin: () => { - el.show(); - }, - onComplete: () => { - //@ts-expect-error 3rd party ad code - window.dataLayer.push({ event: "EG_Video" }); - }, - }); + if (el) { + animate(el.native, { + opacity: [0, 1], + duration: 125, + onBegin: () => { + el.show(); + }, + onComplete: () => { + //@ts-expect-error 3rd party ad code + window.dataLayer.push({ event: "EG_Video" }); + }, + }); + } } } function hide(): void { if (isPopupVisible(wrapperId)) { const el = qs("#videoAdPopupWrapper"); - animate(el, { - opacity: [1, 0], - duration: 125, - onComplete: () => { - el.hide(); - Skeleton.remove(wrapperId); - }, - }); + + if (el) { + animate(el.native, { + opacity: [1, 0], + duration: 125, + onComplete: () => { + el.hide(); + Skeleton.remove(wrapperId); + }, + }); + } } } @@ -81,7 +86,7 @@ export function egVideoListener(options: Record): void { } } -qs(".pageTest #watchVideoAdButton").on("click", () => { +qs(".pageTest #watchVideoAdButton")?.on("click", () => { void show(); }); From b61df8b0024b7918a7b329985f3f3b67faaf0085 Mon Sep 17 00:00:00 2001 From: thanos <236362159+thanoskn@users.noreply.github.com> Date: Wed, 7 Jan 2026 07:09:51 +0000 Subject: [PATCH 3/3] Use el.animate --- frontend/src/ts/popups/video-ad-popup.ts | 43 +++++++++++------------- 1 file changed, 19 insertions(+), 24 deletions(-) diff --git a/frontend/src/ts/popups/video-ad-popup.ts b/frontend/src/ts/popups/video-ad-popup.ts index 2972c0eea382..572d9abcdff3 100644 --- a/frontend/src/ts/popups/video-ad-popup.ts +++ b/frontend/src/ts/popups/video-ad-popup.ts @@ -4,7 +4,6 @@ import * as Notifications from "../elements/notifications"; import * as AdController from "../controllers/ad-controller"; import * as Skeleton from "../utils/skeleton"; import { isPopupVisible } from "../utils/misc"; -import { animate } from "animejs"; import { qs } from "../utils/dom"; const wrapperId = "videoAdPopupWrapper"; @@ -38,19 +37,17 @@ export async function show(): Promise { if (!isPopupVisible(wrapperId)) { const el = qs("#videoAdPopupWrapper"); - if (el) { - animate(el.native, { - opacity: [0, 1], - duration: 125, - onBegin: () => { - el.show(); - }, - onComplete: () => { - //@ts-expect-error 3rd party ad code - window.dataLayer.push({ event: "EG_Video" }); - }, - }); - } + el?.animate({ + opacity: [0, 1], + duration: 125, + onBegin: () => { + el.show(); + }, + onComplete: () => { + //@ts-expect-error 3rd party ad code + window.dataLayer.push({ event: "EG_Video" }); + }, + }); } } @@ -58,16 +55,14 @@ function hide(): void { if (isPopupVisible(wrapperId)) { const el = qs("#videoAdPopupWrapper"); - if (el) { - animate(el.native, { - opacity: [1, 0], - duration: 125, - onComplete: () => { - el.hide(); - Skeleton.remove(wrapperId); - }, - }); - } + el?.animate({ + opacity: [1, 0], + duration: 125, + onComplete: () => { + el.hide(); + Skeleton.remove(wrapperId); + }, + }); } }