From 764f838c7e87b5efc8793fbac39d1cbccaffe51d Mon Sep 17 00:00:00 2001 From: SethBurkart123 Date: Mon, 25 Sep 2023 15:36:46 +1000 Subject: [PATCH] separate storage listeners --- src/SEQTA.js | 83 +++--------------------------- src/seqta/utils/EventListeners.js | 5 -- src/seqta/utils/StorageListener.js | 76 +++++++++++++++++++++++++++ 3 files changed, 83 insertions(+), 81 deletions(-) delete mode 100644 src/seqta/utils/EventListeners.js create mode 100644 src/seqta/utils/StorageListener.js diff --git a/src/SEQTA.js b/src/SEQTA.js index 68530140..ff14e0bd 100644 --- a/src/SEQTA.js +++ b/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) => { diff --git a/src/seqta/utils/EventListeners.js b/src/seqta/utils/EventListeners.js deleted file mode 100644 index b6391ce2..00000000 --- a/src/seqta/utils/EventListeners.js +++ /dev/null @@ -1,5 +0,0 @@ -export function StorageListner() { - chrome.storage.onChanged.addListener(function (changes) { - - } -} \ No newline at end of file diff --git a/src/seqta/utils/StorageListener.js b/src/seqta/utils/StorageListener.js new file mode 100644 index 00000000..d788db07 --- /dev/null +++ b/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); + } + } + } + }); +}