feat(notices): add animations to notices

src/SEQTA.ts

@@ -688,6 +688,9 @@ function SortMessagePageItems(messagesParentElement: any) {
 }
 
 async function LoadPageElements(): Promise<void> {
+  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<void> {
     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<void> {
     }, handleAssessments);
   }
 
-  await AddBetterSEQTAElements();
-  const sublink: string | undefined = window.location.href.split('/')[4];
-
-
   await handleSublink(sublink);
 }
 
+async function handleNotices(node: Element): Promise<void> {
+  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<void> {
   switch (sublink) {
     case 'news':
@@ -753,26 +779,6 @@ async function handleSublink(sublink: string | undefined): Promise<void> {
       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()

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 {

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<void> {
+    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);