From a999e4384bc4ea1c61a3fd2ca70343c604eb0815 Mon Sep 17 00:00:00 2001 From: SethBurkart123 Date: Mon, 2 Dec 2024 12:17:39 +1100 Subject: [PATCH] feat(notices): add animations to notices --- src/SEQTA.ts | 56 +++++++++++++---------- src/css/injected.scss | 2 +- src/seqta/utils/listeners/EventManager.ts | 17 +++++++ 3 files changed, 49 insertions(+), 26 deletions(-) diff --git a/src/SEQTA.ts b/src/SEQTA.ts index 888776b0..c80e95bd 100644 --- a/src/SEQTA.ts +++ b/src/SEQTA.ts @@ -688,6 +688,9 @@ function SortMessagePageItems(messagesParentElement: any) { } async function LoadPageElements(): Promise { + await AddBetterSEQTAElements(); + const sublink: string | undefined = window.location.href.split('/')[4]; + eventManager.register('messagesAdded', { elementType: 'div', className: 'messages', @@ -718,6 +721,11 @@ async function LoadPageElements(): Promise { className: 'timetablepage', }, handleTimetable); + eventManager.register('noticesAdded', { + elementType: 'div', + className: 'notice', + }, handleNotices); + if (settingsState.assessmentsAverage) { eventManager.register('assessmentsAdded', { elementType: 'div', @@ -725,13 +733,31 @@ async function LoadPageElements(): Promise { }, handleAssessments); } - await AddBetterSEQTAElements(); - const sublink: string | undefined = window.location.href.split('/')[4]; - - await handleSublink(sublink); } +async function handleNotices(node: Element): Promise { + if (!(node instanceof HTMLElement)) return; + if (!settingsState.animations) return; + + node.style.opacity = '0'; + + // get index of node in relation to parent + const index = Array.from(node.parentElement!.children).indexOf(node); + + animate( + node, + { opacity: [0, 1], y: [50, 0], scale: [0.99, 1] }, + { + delay: 0.1 * index, + type: 'spring', + stiffness: 250, + damping: 20 + } + ); +} + + async function handleSublink(sublink: string | undefined): Promise { switch (sublink) { case 'news': @@ -753,27 +779,7 @@ async function handleSublink(sublink: string | undefined): Promise { if (settingsState.onoff) loadHomePage() finishLoad(); break; - case 'timetable': - handleTimetable() - await handleDefault() - break; - case 'documents': - handleDocuments(document.querySelector('.documents')!) - await handleDefault() - break; - case 'reports': - handleReports(document.querySelector('.reports')!) - await handleDefault() - break; - case 'messages': - handleMessages(document.querySelector('.messages')!) - await handleDefault() - break; - case 'dashboard': - handleDashboard(document.querySelector('.dashboard')!) - await handleDefault() - break; - + default: await handleDefault() break; diff --git a/src/css/injected.scss b/src/css/injected.scss index f8ba9b07..03b0923c 100644 --- a/src/css/injected.scss +++ b/src/css/injected.scss @@ -1111,9 +1111,9 @@ div > ol:has(.uiFileHandlerWrapper) { display: flex; flex-direction: column; background: var(--background-primary); - transition: 200ms; box-shadow: inset 0px 5px 20px 1px rgba(0, 0, 0, 0.3); padding-bottom: 25px; + transition: none; color: var(--text-primary); } .dummynotice { diff --git a/src/seqta/utils/listeners/EventManager.ts b/src/seqta/utils/listeners/EventManager.ts index b475192d..3ac4a188 100644 --- a/src/seqta/utils/listeners/EventManager.ts +++ b/src/seqta/utils/listeners/EventManager.ts @@ -46,10 +46,27 @@ class EventManager { } const unregister = () => this.unregisterById(event, id); this.listeners.get(event)!.push({ id, options, callback, unregister }); + + this.scanExistingElements(options, callback); + this.startObserving(options.parentElement); return { unregister }; } + private async scanExistingElements(options: EventListenerOptions, callback: (element: Element) => void): Promise { + const root = options.parentElement || document.documentElement; + const elements = Array.from(root.getElementsByTagName('*')); + elements.unshift(root); + + for (let i = 0; i < elements.length; i += this.chunkSize) { + const chunk = elements.slice(i, i + this.chunkSize); + const filteredChunk = chunk.filter(element => this.matchesOptions(element, options)); + for (const element of filteredChunk) { + callback(element); + } + } + } + public unregister(event: string): void { if (this.listeners.has(event)) { this.listeners.delete(event);