refactor: openmenuoptions function

src/SEQTA.ts

@@ -62,16 +62,14 @@ async function init() {
 
     enableCurrentTheme()
     try {
-      const items = await browser.storage.local.get() as SettingsState
+      if (settingsState.onoff) {
-      
-      if (items.onoff) {
         const injectedStyle = document.createElement('style')
         injectedStyle.textContent = injectedCSS
 
         document.head.appendChild(injectedStyle)
       }
       
-      main(items)
+      main()
     } catch (error: any) {
       onError(error)
     }
@@ -97,10 +95,8 @@ export function enableAnimatedBackground() {
 
 export async function HideMenuItems(): Promise<void> {
   try {
-    const result = await browser.storage.local.get() as SettingsState
-
     let stylesheetInnerText: string = ''
-    for (const [menuItem, { toggle }] of Object.entries(result.menuitems)) {
+    for (const [menuItem, { toggle }] of Object.entries(settingsState.menuitems)) {
       if (!toggle) {
         stylesheetInnerText += SetDisplayNone(menuItem)
         console.log(`[BetterSEQTA+] Hiding ${menuItem} menu item`)
@@ -312,14 +308,9 @@ async function finishLoad() {
     console.error("Error during loading cleanup:", err);
   }
 
-  try {
+  if (settingsState.justupdated && !document.getElementById('whatsnewbk')) {
-    const { justupdated } = await browser.storage.local.get('justupdated');
-    if (justupdated && !document.getElementById('whatsnewbk')) {
     OpenWhatsNewPopup();
   }
-  } catch (error) {
-    console.error("Error retrieving 'justupdated' from storage:", error);
-  }
 }
 
 async function DeleteWhatsNew() {
@@ -441,8 +432,7 @@ async function updateIframesWithDarkMode(): Promise<void> {
         if (node.nodeName === 'IFRAME') {
           const iframe = node as HTMLIFrameElement
           try {
-            const settings = await browser.storage.local.get('DarkMode') as SettingsState
+            applyDarkModeToIframe(iframe, cssLink, settingsState.DarkMode);
-            applyDarkModeToIframe(iframe, cssLink, settings.DarkMode);
           } catch (error) {
             console.error('Error applying dark mode:', error)
           }
@@ -514,7 +504,7 @@ function SortMessagePageItems(messagesParentElement: any) {
 }
 
 async function LoadPageElements(): Promise<void> {
-  await AddBetterSEQTAElements(true)
+  await AddBetterSEQTAElements()
   const sublink: string | undefined = window.location.href.split('/')[4]
 
   const observer = new MutationObserver(function (mutations_list) {
@@ -597,11 +587,9 @@ async function LoadPageElements(): Promise<void> {
 
   async function handleNewsPage(): Promise<void> {
     console.log('[BetterSEQTA+] Started Init')
-    const settings: SettingsState = await browser.storage.local.get() as SettingsState
+    if (settingsState.onoff) {
-    if (settings.onoff) {
       SendNewsPage()
-      const notificationSettings: SettingsState = await browser.storage.local.get() as SettingsState
+      if (settingsState.notificationcollector) {
-      if (notificationSettings.notificationcollector) {
         enableNotificationCollector()
       }
       finishLoad()
@@ -610,8 +598,7 @@ async function LoadPageElements(): Promise<void> {
 
   async function handleDefault(): Promise<void> {
     finishLoad()
-    const settings: SettingsState = await browser.storage.local.get() as SettingsState
+    if (settingsState.notificationcollector) {
-    if (settings.notificationcollector) {
       enableNotificationCollector()
     }
   }
@@ -718,10 +705,9 @@ function ChangeMenuItemPositions(storage: any) {
 }
 
 export async function ObserveMenuItemPosition() {
-  const result = browser.storage.local.get()
+  let menuorder = settingsState.menuorder
-  function open (result: any) {
+  if (!(menuorder && settingsState.onoff)) return;
-    let menuorder = result.menuorder
+
-    if (menuorder && result.onoff) {
   const observer = new MutationObserver(function (mutations_list) {
     mutations_list.forEach(function (mutation) {
       mutation.addedNodes.forEach(function (added_node) {
@@ -760,13 +746,10 @@ export async function ObserveMenuItemPosition() {
     subtree: true,
     childList: true,
   })
-    }
-  }
-  result.then(open, onError)
 }
 
-function main(storedSetting: SettingsState) {
+function main() {
-  if (typeof storedSetting.onoff === 'undefined') {
+  if (typeof settingsState.onoff === 'undefined') {
     browser.runtime.sendMessage({ type: 'setDefaultStorage' })
   }
 
@@ -774,7 +757,7 @@ function main(storedSetting: SettingsState) {
     waitForElm('.code').then(AppendElementsToDisabledPage)
   }
 
-  if (storedSetting.onoff) {
+  if (settingsState.onoff) {
     console.log('[BetterSEQTA+] Enabled')
     if (settingsState.DarkMode) document.documentElement.classList.add('dark')
 
@@ -787,7 +770,6 @@ function main(storedSetting: SettingsState) {
     loading()
     InjectCustomIcons()
     HideMenuItems()
-    tryLoad()
     
     window.addEventListener('load', tryLoad)
   } else {
@@ -813,7 +795,7 @@ function InjectCustomIcons() {
 
 export function AppendElementsToDisabledPage() {
   console.log("[BetterSEQTA+] Appending elements to disabled page")
-  AddBetterSEQTAElements(false)
+  AddBetterSEQTAElements()
 
   let settingsStyle = document.createElement('style')
   settingsStyle.innerHTML = /* css */`
@@ -910,49 +892,51 @@ export function addExtensionSettings() {
 }
 
 export function OpenMenuOptions() {
-  const result = browser.storage.local.get()
-  function open (result: any) {
   var container = document.getElementById('container')
   var menu = document.getElementById('menu')
 
-    if (result.defaultmenuorder.length == '0') {
+  if (settingsState.defaultmenuorder.length == 0) {
     let childnodes = menu!.firstChild!.childNodes
     let newdefaultmenuorder = []
     for (let i = 0; i < childnodes.length; i++) {
       const element = childnodes[i]
       newdefaultmenuorder.push((element as HTMLElement).dataset.key)
-        browser.storage.local.set({ defaultmenuorder: newdefaultmenuorder })
+      browser.storage.local.set({
+        defaultmenuorder: newdefaultmenuorder
+      })
     }
   }
   let childnodes = menu!.firstChild!.childNodes
-    if (result.defaultmenuorder.length != childnodes.length) {
+  if (settingsState.defaultmenuorder.length != childnodes.length) {
     for (let i = 0; i < childnodes.length; i++) {
       const element = childnodes[i]
-        if (!result.defaultmenuorder.indexOf((element as HTMLElement).dataset.key)) {
+      if (!settingsState.defaultmenuorder.indexOf((element as HTMLElement).dataset.key)) {
-          let newdefaultmenuorder = result.defaultmenuorder
+        let newdefaultmenuorder = settingsState.defaultmenuorder
         newdefaultmenuorder.push((element as HTMLElement).dataset.key)
-          browser.storage.local.set({ defaultmenuorder: newdefaultmenuorder })
+        browser.storage.local.set({
+          defaultmenuorder: newdefaultmenuorder
+        })
       }
     }
   }
 
   MenuOptionsOpen = true
 
-    let cover = document.createElement('div')
+  var cover = document.createElement('div')
   cover.classList.add('notMenuCover')
   menu!.style.zIndex = '20'
   menu!.style.setProperty('--menuHidden', 'flex')
   container!.append(cover)
 
-    let menusettings = document.createElement('div')
+  var menusettings = document.createElement('div')
   menusettings.classList.add('editmenuoption-container')
 
-    let defaultbutton = document.createElement('div')
+  var defaultbutton = document.createElement('div')
   defaultbutton.classList.add('editmenuoption')
   defaultbutton.innerText = 'Restore Default'
   defaultbutton.id = 'restoredefaultoption'
 
-    let savebutton = document.createElement('div')
+  var savebutton = document.createElement('div')
   savebutton.classList.add('editmenuoption')
   savebutton.innerText = 'Save'
   savebutton.id = 'restoredefaultoption'
@@ -962,7 +946,7 @@ export function OpenMenuOptions() {
 
   menu!.appendChild(menusettings)
 
-    let ListItems = menu!.firstChild!.childNodes
+  var ListItems = menu!.firstChild!.childNodes
   for (let i = 0; i < ListItems.length; i++) {
     const element1 = ListItems[i]
     const element = element1 as HTMLElement
@@ -987,34 +971,31 @@ export function OpenMenuOptions() {
     }
   }
 
-    if (Object.keys(result.menuitems).length == 0) {
+  if (Object.keys(settingsState.menuitems).length == 0) {
     menubuttons = menu!.firstChild!.childNodes
-      var menuItems = {}
+    let menuItems = {} as any
     for (var i = 0; i < menubuttons.length; i++) {
       var id = (menubuttons[i] as HTMLElement).dataset.key
       const element: any = {}
       element.toggle = true;
       (menuItems[id as keyof typeof menuItems] as any) = element;
     }
-      browser.storage.local.set({ menuitems: menuItems })
+    settingsState.menuitems = menuItems
   }
 
   var menubuttons: any = document.getElementsByClassName('menuitem')
-    const result1 = browser.storage.local.get(['menuitems'])
+
-    function open (result: any) {
+  let menuItems = settingsState.menuitems as any
-      var menuItems = result.menuitems
   let buttons = document.getElementsByClassName('menuitem')
-      for (var i = 0; i < buttons.length; i++) {
+  for (let i = 0; i < buttons.length; i++) {
-        var id = buttons[i].id
+    let id = buttons[i].id as string | undefined
-        if (menuItems[id]) {
+    if (menuItems[id as keyof typeof menuItems]) {
-          (buttons[i] as HTMLInputElement).checked = menuItems[id].toggle
+      (buttons[i] as HTMLInputElement).checked = menuItems[id as keyof typeof menuItems].toggle
-        }
+    } else {
-        if (!menuItems[id]) {
       (buttons[i] as HTMLInputElement).checked = true
     }
+    (buttons[i] as HTMLInputElement).checked = true
   }
-    }
-    result1.then(open, onError)
 
   try {
     var el = document.querySelector('#menu > ul')
@@ -1023,7 +1004,7 @@ export function OpenMenuOptions() {
       dataIdAttr: 'data-key',
       animation: 150,
       easing: "cubic-bezier(.5,0,.5,1)",
-        onEnd: function () {
+      onEnd: function() {
         saveNewOrder(sortable)
       },
     });
@@ -1045,8 +1026,9 @@ export function OpenMenuOptions() {
   }
 
   function StoreMenuSettings() {
+    let menu = document.getElementById('menu')
     const menuItems: any = {}
-      const menubuttons = menu!.firstChild!.childNodes
+    let menubuttons = menu!.firstChild!.childNodes
     const button = document.getElementsByClassName('menuitem')
     for (let i = 0; i < menubuttons.length; i++) {
       const id = (menubuttons[i] as HTMLElement).dataset.key
@@ -1055,7 +1037,7 @@ export function OpenMenuOptions() {
 
       menuItems[id as keyof typeof menuItems] = element
     }
-      browser.storage.local.set({ menuitems: menuItems })
+    settingsState.menuitems = menuItems
   }
 
   for (let i = 0; i < menubuttons.length; i++) {
@@ -1069,9 +1051,8 @@ export function OpenMenuOptions() {
 
   function closeAll() {
     console.log("Closing!")
-      ListItems = menu!.firstChild!.childNodes
+    menusettings?.remove()
-      menusettings.remove()
+    cover?.remove()
-      cover.remove()
     MenuOptionsOpen = false
     menu!.style.setProperty('--menuHidden', 'none')
 
@@ -1095,17 +1076,16 @@ export function OpenMenuOptions() {
     for (let i = 0; i < switches.length; i++) {
       switches[i].remove()
     }
-
   }
 
-    cover.addEventListener('click', closeAll)
+  cover?.addEventListener('click', closeAll)
-    savebutton.addEventListener('click', closeAll)
+  savebutton?.addEventListener('click', closeAll)
 
-    defaultbutton.addEventListener('click', function () {
+  defaultbutton?.addEventListener('click', function() {
-      const result = browser.storage.local.get()
+    const options = settingsState.defaultmenuorder
-      function open (response: any) {
+    browser.storage.local.set({
-        const options = response.defaultmenuorder
+      menuorder: options
-        browser.storage.local.set({ menuorder: options })
+    })
     ChangeMenuItemPositions(options)
 
     for (let i = 0; i < menubuttons.length; i++) {
@@ -1118,11 +1098,7 @@ export function OpenMenuOptions() {
       )
     }
     saveNewOrder(sortable)
-      }
-      result.then(open, onError)
   })
-  }
-  result.then(open, onError)
 }
 
 function saveNewOrder(sortable: any) {

src/seqta/ui/AddBetterSEQTAElements.ts

@@ -6,6 +6,7 @@ import { settingsState } from "../utils/listeners/SettingsState";
 import { updateAllColors } from "./colors/Manager";
 
 export async function AddBetterSEQTAElements() {
+  console.log('AddBetterSEQTAElements');
   if (settingsState.onoff) {    
     initializeSettings();
     if (settingsState.DarkMode) {

src/seqta/ui/Animation.ts

@@ -6,19 +6,21 @@ import { settingsState } from "../utils/listeners/SettingsState";
  * @param {number} [minDuration=1] - The minimum animation duration in seconds.
  * @param {number} [maxDuration=10] - The maximum animation duration in seconds.
  */
-export function updateBgDurations(minDuration: number = 0.5, maxDuration: number = 10) {
+export function updateBgDurations() {
   // Class names to look for
   const bgClasses = ['bg', 'bg2', 'bg3'];
-  let reversedValue: any;
-
-  // Reverse the slider direction to align with the animation
-  reversedValue = 150 - parseInt(settingsState.bksliderinput);
-  
-  // Range of possible animation durations
-  const durationRange = maxDuration - minDuration;
     
   // Function to calculate animation duration
-  const calcDuration = (baseValue: number, offset = 0) => minDuration + ((baseValue / 200) + offset) * durationRange;
+  const calcDuration = (
+    baseValue: number, 
+    offset = 0, 
+    minBase = 50, 
+    maxBase = 150, 
+  ) => {
+    const scaledValue = 2 + ((maxBase - baseValue) / (maxBase - minBase)) ** 4;
+    console.log(scaledValue);
+    return scaledValue + offset;
+  };
     
   // Iterate through each class name to update its animation duration
   bgClasses.forEach((className, index) => {
@@ -29,7 +31,8 @@ export function updateBgDurations(minDuration: number = 0.5, maxDuration: number
     }
     
     const offset = index * 0.05;
-    const duration = calcDuration(reversedValue, offset);
+    const duration = calcDuration(parseInt(settingsState.bksliderinput), offset);
     (elements[0] as HTMLElement).style.animationDuration = `${duration}s`;
+    (elements[0] as HTMLElement).style.animationDelay = `${offset * 5}s`;
   });
 }

src/types/storage.ts

@@ -32,6 +32,7 @@ export interface SettingsState {
   shortcuts: Shortcut[];
   subjectfilters: Record<string, any>;
   transparencyEffects: boolean;
+  justupdated?: boolean | null;
 }
 
 interface ToggleItem {