From 6cd1e59fa73a2adfec1b2968c33a782e70287ace Mon Sep 17 00:00:00 2001 From: SethBurkart123 Date: Fri, 29 Sep 2023 07:01:51 +1000 Subject: [PATCH] clean up storageListeners + fix popup --- src/SEQTA.js | 2 +- src/inject/injected/popup.css | 10 +++ src/seqta/ui/Colors.js | 19 +++++ src/seqta/utils/StorageListener.js | 118 ++++++++++++----------------- 4 files changed, 80 insertions(+), 69 deletions(-) create mode 100644 src/seqta/ui/Colors.js diff --git a/src/SEQTA.js b/src/SEQTA.js index 87f1535c..7c3ec932 100644 --- a/src/SEQTA.js +++ b/src/SEQTA.js @@ -739,7 +739,7 @@ export function ColorLuminance(color, lum = 0) { } } -StorageListener(); +new StorageListener(); var PageLoaded = false; async function CheckLoadOnPeriods() { diff --git a/src/inject/injected/popup.css b/src/inject/injected/popup.css index 10c8715d..a03f151c 100644 --- a/src/inject/injected/popup.css +++ b/src/inject/injected/popup.css @@ -9,4 +9,14 @@ .hide { opacity: 0; pointer-events: none; +} + +.outside-container { + margin: 0; + overflow: hidden; + position: absolute; + right: 10px; + top: 80px; + height: 590px; + z-index: 20; } \ No newline at end of file diff --git a/src/seqta/ui/Colors.js b/src/seqta/ui/Colors.js new file mode 100644 index 00000000..406c767c --- /dev/null +++ b/src/seqta/ui/Colors.js @@ -0,0 +1,19 @@ +/* global chrome */ +import { ColorLuminance, GetThresholdofHex } from "../../SEQTA.js"; + +export function updateDocumentColors(newColor) { + const rbg = GetThresholdofHex(newColor); + const textColor = rbg > 210 ? "black" : "white"; + const logo = `url(${chrome.runtime.getURL( + `icons/betterseqta-${textColor === "black" ? "dark" : "light"}-full.png` + )})`; + + document.documentElement.style.setProperty("--text-color", textColor); + document.documentElement.style.setProperty("--betterseqta-logo", logo); + document.documentElement.style.setProperty("--better-main", newColor); + + const lightColor = + newColor === "#ffffff" ? "#b7b7b7" : ColorLuminance(newColor, 0.99); + + document.documentElement.style.setProperty("--better-light", lightColor); +} \ No newline at end of file diff --git a/src/seqta/utils/StorageListener.js b/src/seqta/utils/StorageListener.js index 6ef8907e..39f9aa19 100644 --- a/src/seqta/utils/StorageListener.js +++ b/src/seqta/utils/StorageListener.js @@ -1,76 +1,58 @@ /* global chrome */ -import { lightenAndPaleColor, GetThresholdofHex, ColorLuminance, CreateCustomShortcutDiv, RemoveCustomShortcutDiv } from "../../SEQTA.js"; -export default function StorageListener() { - chrome.storage.onChanged.addListener(function (changes) { +import { + CreateCustomShortcutDiv, + RemoveCustomShortcutDiv, +} from "../../SEQTA.js"; +import { updateDocumentColors } from "../ui/Colors.js"; + +export default class StorageListener { + constructor() { + chrome.storage.onChanged.addListener(this.handleStorageChanges.bind(this)); + } + + handleStorageChanges(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) - ); - } + this.handleSelectedColorChange(changes.selectedColor.newValue); } - + 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); + this.handleCustomShortcutsChange( + changes.customshortcuts.oldValue, + changes.customshortcuts.newValue + ); + } + } + + handleSelectedColorChange(newColor) { + try { + chrome.storage.local.get(["DarkMode"], (result) => { + if (!result.DarkMode) { + updateDocumentColors(newColor); } + }); + } catch (err) { + console.error(err); + } + } + + handleCustomShortcutsChange(oldValue, newValue) { + // Check for addition + if (newValue.length > oldValue.length) { + CreateCustomShortcutDiv(newValue[oldValue.length]); + } + // Check for removal + else if (newValue.length < oldValue.length) { + const removedElement = oldValue.find( + (oldItem) => + !newValue.some( + (newItem) => JSON.stringify(oldItem) === JSON.stringify(newItem) + ) + ); + + if (removedElement) { + RemoveCustomShortcutDiv(removedElement); } } - }); -} + } +} \ No newline at end of file