separate storage listeners

src/SEQTA.js

@@ -9,6 +9,7 @@ import loading, { AppendLoadingSymbol } from "./seqta/ui/Loading.js";
 // Icons
 import assessmentsicon from "./seqta/icons/assessmentsIcon.js";
 import coursesicon from "./seqta/icons/coursesIcon.js";
+import StorageListener from "./seqta/utils/StorageListener";
 
 let isChrome = window.chrome;
 let SettingsClicked = false;
@@ -627,7 +628,7 @@ function AppendElementsToDisabledPage() {
   document.head.append(settingsStyle);
 }
 
-function lightenAndPaleColor(inputColor, lightenFactor = 0.75, paleFactor = 0.55) {
+export function lightenAndPaleColor(inputColor, lightenFactor = 0.75, paleFactor = 0.55) {
   // Step 1: Convert RGBA to separate R, G and B values
   const [r, g, b] = inputColor.match(/\d+/g).map(Number);
 
@@ -682,7 +683,7 @@ function lightenAndPaleColor(inputColor, lightenFactor = 0.75, paleFactor = 0.55
   return `${result}`;
 }
 
-function ColorLuminance(color, lum = 0) {
+export function ColorLuminance(color, lum = 0) {
   // Regular expression to match RGBA colors
   const rgbaRegex = /rgba?\(([^)]+)\)/g;
 
@@ -730,77 +731,7 @@ function ColorLuminance(color, lum = 0) {
   }
 }
 
-
-chrome.storage.onChanged.addListener(function (changes) {
-  if (changes.selectedColor) {
-    try {
-      chrome.storage.local.get(["DarkMode"], function (result) {
-        if (!result.DarkMode) {
-          console.log(changes.selectedColor.newValue);
-          document.documentElement.style.setProperty(
-            "--better-pale",
-            lightenAndPaleColor(changes.selectedColor.newValue),
-          );
-        }
-      });
-    } catch (err) {
-      console.log(err);
-    }
-
-    let rbg = GetThresholdofHex(changes.selectedColor.newValue);
-
-    if (rbg > 210) {
-      document.documentElement.style.setProperty("--text-color", "black");
-      document.documentElement.style.setProperty(
-        "--betterseqta-logo",
-        `url(${chrome.runtime.getURL("icons/betterseqta-dark-full.png")})`,
-      );
-    } else {
-      document.documentElement.style.setProperty("--text-color", "white");
-      document.documentElement.style.setProperty(
-        "--betterseqta-logo",
-        `url(${chrome.runtime.getURL("icons/betterseqta-light-full.png")})`,
-      );
-    }
-
-    document.documentElement.style.setProperty(
-      "--better-main",
-      changes.selectedColor.newValue,
-    );
-
-    if (changes.selectedColor.newValue == "#ffffff") {
-      document.documentElement.style.setProperty("--better-light", "#b7b7b7");
-    } else {
-      document.documentElement.style.setProperty(
-        "--better-light",
-        ColorLuminance(changes.selectedColor.newValue, 0.99),
-      );
-    }
-  }
-
-  if (changes?.customshortcuts?.newValue) {
-    console.log(changes);
-  
-    const oldValue = changes.customshortcuts.oldValue;
-    const newValue = changes.customshortcuts.newValue;
-  
-    // Check for addition
-    if (newValue.length > oldValue.length) {
-      CreateCustomShortcutDiv(newValue[oldValue.length]);
-    }
-    // Check for removal
-    else if (newValue.length < oldValue.length) {
-      // Find the removed element
-      const removedElement = oldValue.find(
-        (oldItem) => !newValue.some((newItem) => JSON.stringify(oldItem) === JSON.stringify(newItem))
-      );
-  
-      if (removedElement) {
-        RemoveCustomShortcutDiv(removedElement);
-      }
-    }
-  }
-});
+StorageListener();
 
 var PageLoaded = false;
 async function CheckLoadOnPeriods() {
@@ -2321,7 +2252,7 @@ function CheckCurrentLesson(lesson, num) {
   }
 }
 
-function GetThresholdofHex(color) {
+export function GetThresholdofHex(color) {
   // Regular expression for matching RGBA colors
   const rgbaRegex = /rgba?\(([^)]+)\)/g;
 
@@ -2921,7 +2852,7 @@ function GetLessonColours() {
     .then((response) => response.payload);
 }
 
-function CreateCustomShortcutDiv(element) {
+export function CreateCustomShortcutDiv(element) {
   // Creates the stucture and element information for each seperate shortcut
   var shortcut = document.createElement("a");
   shortcut.setAttribute("href", element.url);
@@ -2957,7 +2888,7 @@ function CreateCustomShortcutDiv(element) {
   document.getElementById("shortcuts").append(shortcut);
 }
 
-function RemoveCustomShortcutDiv(element) {
+export function RemoveCustomShortcutDiv(element) {
   // Iterate through each shortcut
   const shortcuts = document.querySelectorAll(".shortcut");
   shortcuts.forEach((shortcut) => {

src/seqta/utils/EventListeners.js

@@ -1,5 +0,0 @@
-export function StorageListner() {
-  chrome.storage.onChanged.addListener(function (changes) {
-    
-  }
-}

src/seqta/utils/StorageListener.js

@@ -0,0 +1,76 @@
+/* global chrome */
+import { lightenAndPaleColor, GetThresholdofHex, ColorLuminance, CreateCustomShortcutDiv, RemoveCustomShortcutDiv } from "../../SEQTA";
+
+export default function StorageListener() {
+  chrome.storage.onChanged.addListener(function (changes) {
+    if (changes.selectedColor) {
+      try {
+        chrome.storage.local.get(["DarkMode"], function (result) {
+          if (!result.DarkMode) {
+            console.log(changes.selectedColor.newValue);
+            document.documentElement.style.setProperty(
+              "--better-pale",
+              lightenAndPaleColor(changes.selectedColor.newValue)
+            );
+          }
+        });
+      } catch (err) {
+        console.log(err);
+      }
+  
+      let rbg = GetThresholdofHex(changes.selectedColor.newValue);
+  
+      if (rbg > 210) {
+        document.documentElement.style.setProperty("--text-color", "black");
+        document.documentElement.style.setProperty(
+          "--betterseqta-logo",
+          `url(${chrome.runtime.getURL("icons/betterseqta-dark-full.png")})`
+        );
+      } else {
+        document.documentElement.style.setProperty("--text-color", "white");
+        document.documentElement.style.setProperty(
+          "--betterseqta-logo",
+          `url(${chrome.runtime.getURL("icons/betterseqta-light-full.png")})`
+        );
+      }
+  
+      document.documentElement.style.setProperty(
+        "--better-main",
+        changes.selectedColor.newValue
+      );
+  
+      if (changes.selectedColor.newValue == "#ffffff") {
+        document.documentElement.style.setProperty("--better-light", "#b7b7b7");
+      } else {
+        document.documentElement.style.setProperty(
+          "--better-light",
+          ColorLuminance(changes.selectedColor.newValue, 0.99)
+        );
+      }
+    }
+  
+    if (changes?.customshortcuts?.newValue) {
+      console.log(changes);
+  
+      const oldValue = changes.customshortcuts.oldValue;
+      const newValue = changes.customshortcuts.newValue;
+  
+      // Check for addition
+      if (newValue.length > oldValue.length) {
+        CreateCustomShortcutDiv(newValue[oldValue.length]);
+      }
+  
+      // Check for removal
+      else if (newValue.length < oldValue.length) {
+        // Find the removed element
+        const removedElement = oldValue.find(
+          (oldItem) => !newValue.some((newItem) => JSON.stringify(oldItem) === JSON.stringify(newItem))
+        );
+  
+        if (removedElement) {
+          RemoveCustomShortcutDiv(removedElement);
+        }
+      }
+    }
+  });
+}