change to singlequotes

src/seqta/ui/Animation.js

@@ -6,7 +6,7 @@
  */
 export function updateBgDurations(speed, minDuration = 0.5, maxDuration = 10) {
   // Class names to look for
-  const bgClasses = ["bg", "bg2", "bg3"];
+  const bgClasses = ['bg', 'bg2', 'bg3'];
   let reversedValue;
 
   if (speed.bksliderinput === undefined) {

src/seqta/ui/ImageBackgrounds.js

@@ -1,15 +1,15 @@
 /* global chrome */
 
 export async function appendBackgroundToUI() {
-  console.log("Starting appendBackgroundToUI...");
+  console.log('Starting appendBackgroundToUI...');
 
-  const parent = document.getElementById("container");
+  const parent = document.getElementById('container');
 
   // embed background.html
-  const background = document.createElement("iframe");
-  background.id = "background";
-  background.classList.add("imageBackground");
-  background.setAttribute("excludeDarkCheck", "true");
-  background.src = chrome.runtime.getURL("backgrounds/background.html");
+  const background = document.createElement('iframe');
+  background.id = 'background';
+  background.classList.add('imageBackground');
+  background.setAttribute('excludeDarkCheck', 'true');
+  background.src = chrome.runtime.getURL('backgrounds/background.html');
   parent.appendChild(background);
 }

src/seqta/ui/Themes.js

@@ -1,10 +1,10 @@
-import localforage from "localforage";
+import localforage from 'localforage';
 
-let currentThemeClass = "";
+let currentThemeClass = '';
 
 // Utility function to fetch and parse JSON
 const fetchJSON = async (url) => {
-  const res = await fetch(url, {cache: "no-store"});
+  const res = await fetch(url, {cache: 'no-store'});
   return await res.json();
 };
 
@@ -48,7 +48,7 @@ const saveToIndexedDB = async (theme, themeName) => {
 const applyTheme = async (themeName) => {
   const { css, className, images } = await localforage.getItem(`css_${themeName}`);
   
-  const newStyle = document.createElement("style");
+  const newStyle = document.createElement('style');
   newStyle.innerHTML = css;
   document.head.appendChild(newStyle);
   
@@ -80,8 +80,8 @@ const applyTheme = async (themeName) => {
 export const listThemes = async () => {
   const themes = await localforage.keys();
   return {
-    themes: themes.filter((key) => key.startsWith("css_")).map((key) => key.replace("css_", "")),
-    selectedTheme: await localforage.getItem("selectedTheme")
+    themes: themes.filter((key) => key.startsWith('css_')).map((key) => key.replace('css_', '')),
+    selectedTheme: await localforage.getItem('selectedTheme')
   };
 };
 
@@ -92,7 +92,7 @@ export const downloadTheme = async (themeName, themeUrl) => {
 };
 
 export const deleteTheme = async (themeName) => {
-  const currentTheme = await localforage.getItem("selectedTheme");
+  const currentTheme = await localforage.getItem('selectedTheme');
   if (currentTheme === themeName) {
     await disableTheme();
   }
@@ -107,14 +107,14 @@ export const setTheme = async (themeName, themeUrl) => {
     await downloadTheme(themeName, themeUrl);
   }
 
-  await localforage.setItem("selectedTheme", themeName);
+  await localforage.setItem('selectedTheme', themeName);
   await applyTheme(themeName).catch((error) => {
     console.error(`Failed to apply theme: ${error}`);
   });
 };
 
 export const enableCurrentTheme = async () => {
-  const currentTheme = await localforage.getItem("selectedTheme");
+  const currentTheme = await localforage.getItem('selectedTheme');
   
   if (currentTheme) {
     await applyTheme(currentTheme).catch((error) => {
@@ -133,11 +133,11 @@ export const disableTheme = async () => {
   // Remove current theme's class if it exists
   if (currentThemeClass) {
     document.body.classList.remove(currentThemeClass);
-    currentThemeClass = "";
+    currentThemeClass = '';
   }
 
   // Remove any applied image URLs from the root element
-  const currentTheme = await localforage.getItem("selectedTheme");
+  const currentTheme = await localforage.getItem('selectedTheme');
   if (currentTheme) {
     const themeData = await localforage.getItem(`css_${currentTheme}`);
     if (themeData && themeData.images) {
@@ -148,5 +148,5 @@ export const disableTheme = async () => {
   }
 
   // Clear the selected theme from localforage
-  localforage.removeItem("selectedTheme");
+  localforage.removeItem('selectedTheme');
 };

src/seqta/ui/colors/ColorLuminance.js

@@ -1,4 +1,4 @@
-import Color from "color";
+import Color from 'color';
 
 function adjustLuminance(color, lum) {
   let adjustedColor = Color(color.toLowerCase());
@@ -17,7 +17,7 @@ function adjustLuminance(color, lum) {
 export default function ColorLuminance(color, lum = 0) {
   const colorRegex = /rgba?\(([^)]+)\)/gi;  // Case-insensitive match for rgb() or rgba()
   
-  if (color.toLowerCase().includes("gradient")) {
+  if (color.toLowerCase().includes('gradient')) {
     let gradient = color;
     
     let uniqueColorSet = new Set();
@@ -31,7 +31,7 @@ export default function ColorLuminance(color, lum = 0) {
     // Adjust luminance for each unique color stop
     for (let colorStop of uniqueColorSet) {
       const adjustedColor = adjustLuminance(colorStop, lum);
-      gradient = gradient.replace(new RegExp(colorStop, "gi"), adjustedColor);
+      gradient = gradient.replace(new RegExp(colorStop, 'gi'), adjustedColor);
     }
     
     return gradient;

src/seqta/ui/colors/Manager.js

@@ -1,7 +1,7 @@
 /* global chrome */
-import { GetThresholdOfColor, GetiFrameCSSElement } from "../../../SEQTA.js";
-import { lightenAndPaleColor } from "./lightenAndPaleColor.js";
-import ColorLuminance from "./ColorLuminance.js";
+import { GetThresholdOfColor, GetiFrameCSSElement } from '../../../SEQTA.js';
+import { lightenAndPaleColor } from './lightenAndPaleColor.js';
+import ColorLuminance from './ColorLuminance.js';
 
 // Helper functions
 const setCSSVar = (varName, value) => document.documentElement.style.setProperty(varName, value);
@@ -14,37 +14,37 @@ export function updateAllColors(storedSetting, newColor = null) {
   // Determine the color to use
   const selectedColor = newColor || storedSetting.selectedColor;
 
-  DarkMode = (typeof storedSetting?.DarkMode === "boolean") ? storedSetting.DarkMode : DarkMode;
+  DarkMode = (typeof storedSetting?.DarkMode === 'boolean') ? storedSetting.DarkMode : DarkMode;
 
-  if (typeof storedSetting === "boolean") {
+  if (typeof storedSetting === 'boolean') {
     DarkMode = storedSetting;
   }
 
   // Common properties, always applied
   const commonProps = {
-    "--better-sub": "#161616",
-    "--better-alert-highlight": "#c61851",
-    "--better-main": selectedColor
+    '--better-sub': '#161616',
+    '--better-alert-highlight': '#c61851',
+    '--better-main': selectedColor
   };
 
   // Mode-based properties, applied if storedSetting is provided
   let modeProps = {};
   if (DarkMode !== null) {
     modeProps = DarkMode ? {
-      "--background-primary": "#232323",
-      "--background-secondary": "#1a1a1a",
-      "--text-primary": "white",
-      "--betterseqta-logo": `url(${getChromeURL("icons/betterseqta-light-full.png")})`
+      '--background-primary': '#232323',
+      '--background-secondary': '#1a1a1a',
+      '--text-primary': 'white',
+      '--betterseqta-logo': `url(${getChromeURL('icons/betterseqta-light-full.png')})`
     } : {
-      "--background-primary": "#ffffff",
-      "--background-secondary": "#e5e7eb",
-      "--text-primary": "black",
-      "--better-pale": lightenAndPaleColor(selectedColor),
-      "--betterseqta-logo": `url(${getChromeURL("icons/betterseqta-dark-full.png")})`
+      '--background-primary': '#ffffff',
+      '--background-secondary': '#e5e7eb',
+      '--text-primary': 'black',
+      '--better-pale': lightenAndPaleColor(selectedColor),
+      '--betterseqta-logo': `url(${getChromeURL('icons/betterseqta-dark-full.png')})`
     };
 
     if (DarkMode) {
-      document.documentElement.style.removeProperty("--better-pale");
+      document.documentElement.style.removeProperty('--better-pale');
     }
   }
 
@@ -52,8 +52,8 @@ export function updateAllColors(storedSetting, newColor = null) {
   const rgbThreshold = GetThresholdOfColor(selectedColor);
   const isBright = rgbThreshold > 210;
   const dynamicProps = {
-    "--text-color": isBright ? "black" : "white",
-    "--better-light": selectedColor === "#ffffff" ? "#b7b7b7" : ColorLuminance(selectedColor, 0.95)
+    '--text-color': isBright ? 'black' : 'white',
+    '--better-light': selectedColor === '#ffffff' ? '#b7b7b7' : ColorLuminance(selectedColor, 0.95)
   };
 
   // Apply all the properties
@@ -61,16 +61,16 @@ export function updateAllColors(storedSetting, newColor = null) {
 
   // Set favicon, if storedSetting is provided
   if (DarkMode !== null) {
-    document.querySelector("link[rel*='icon']").href = getChromeURL("icons/icon-48.png");
+    document.querySelector('link[rel*=\'icon\']').href = getChromeURL('icons/icon-48.png');
   }
 
-  let alliframes = document.getElementsByTagName("iframe");
+  let alliframes = document.getElementsByTagName('iframe');
   let fileref = GetiFrameCSSElement();
 
   for (let i = 0; i < alliframes.length; i++) {
     const element = alliframes[i];
 
-    if (element.getAttribute("excludeDarkCheck") == "true") {
+    if (element.getAttribute('excludeDarkCheck') == 'true') {
       continue;
     }
     
@@ -78,7 +78,7 @@ export function updateAllColors(storedSetting, newColor = null) {
     console.log(element.contentDocument.documentElement);
 
     element.contentDocument.documentElement.childNodes[1].style.color =
-      DarkMode ? "black" : "white";
+      DarkMode ? 'black' : 'white';
     element.contentDocument.documentElement.firstChild.appendChild(
       fileref,
     );
@@ -87,7 +87,7 @@ export function updateAllColors(storedSetting, newColor = null) {
 
 export function getDarkMode() {
   return new Promise((resolve, reject) => {
-    chrome.storage.local.get("DarkMode", (result) => {
+    chrome.storage.local.get('DarkMode', (result) => {
       if (chrome.runtime.lastError) {
         return reject(chrome.runtime.lastError);
       }

src/seqta/ui/colors/lightenAndPaleColor.js

@@ -1,8 +1,8 @@
-import Color from "color";
+import Color from 'color';
 
 
 export function lightenAndPaleColor(inputColor, lightenFactor = 0.75, paleFactor = 0.55) {
-  if (inputColor.includes("gradient")) {
+  if (inputColor.includes('gradient')) {
     const baseColor = findMatchingColor(inputColor);
 
     return lightenAndPaleColor(baseColor, lightenFactor, paleFactor);
@@ -44,11 +44,11 @@ function findMatchingColor(cssGradient) {
     const colorStops = cssGradient.match(regex);
 
     if (!colorStops) {
-      throw new Error("No valid color stops found in the provided CSS gradient.");
+      throw new Error('No valid color stops found in the provided CSS gradient.');
     }
 
     // Normalize and trim the color stops
-    const normalizedColorStops = colorStops.map(color => color.toLowerCase().replace(/\s+/g, ""));
+    const normalizedColorStops = colorStops.map(color => color.toLowerCase().replace(/\s+/g, ''));
 
     // Convert the color stops to Color objects
     const colorObjects = normalizedColorStops.map(color => Color(color));

src/seqta/utils/MessageListener.js

@@ -1,7 +1,7 @@
 /* global chrome */
 
-import { MenuOptionsOpen, OpenMenuOptions, closeSettings } from "../../SEQTA.js";
-import { deleteTheme, disableTheme, downloadTheme, listThemes, setTheme } from "../ui/Themes.js";
+import { MenuOptionsOpen, OpenMenuOptions, closeSettings } from '../../SEQTA.js';
+import { deleteTheme, disableTheme, downloadTheme, listThemes, setTheme } from '../ui/Themes.js';
 
 export class MessageHandler {
   constructor() {
@@ -11,40 +11,40 @@ export class MessageHandler {
   routeMessage(request, sender, sendResponse) {
     switch (request.info) {
 
-    case "EditSidebar":
+    case 'EditSidebar':
       this.editSidebar();
       break;
 
     /* Theme related */
-    case "SetTheme":
+    case 'SetTheme':
       console.log(request);
       setTheme(request.body.themeName, request.body.themeURL).then(() => {
-        sendResponse({ status: "success" });
+        sendResponse({ status: 'success' });
       });
       return true;
-    case "DownloadTheme":
+    case 'DownloadTheme':
       downloadTheme(request.body.themeName, request.body.themeURL).then(() => {
-        sendResponse({ status: "success" });
+        sendResponse({ status: 'success' });
       });
       return true;
-    case "ListThemes":
+    case 'ListThemes':
       listThemes().then((response) => {
         sendResponse(response);
       });
       return true;
-    case "DisableTheme":
+    case 'DisableTheme':
       disableTheme().then(() => {
-        sendResponse({ status: "success" });
+        sendResponse({ status: 'success' });
       });
       return true;
-    case "DeleteTheme":
+    case 'DeleteTheme':
       deleteTheme(request.body.themeName).then(() => {
-        sendResponse({ status: "success" });
+        sendResponse({ status: 'success' });
       });
       return true;
     
     default:
-      console.log("Unknown request info:", request.info);
+      console.log('Unknown request info:', request.info);
     
     }
   }

src/seqta/utils/StorageListener.js

@@ -8,9 +8,9 @@ import {
   addShortcuts,
   disableNotificationCollector,
   enableNotificationCollector,
-} from "../../SEQTA.js";
-import { updateBgDurations } from "../ui/Animation.js";
-import { getDarkMode, updateAllColors } from "../ui/colors/Manager.js";
+} from '../../SEQTA.js';
+import { updateBgDurations } from '../ui/Animation.js';
+import { getDarkMode, updateAllColors } from '../ui/colors/Manager.js';
 
 export default class StorageListener {
   constructor() {
@@ -22,23 +22,23 @@ export default class StorageListener {
     Object.keys(changes).forEach((changeKey) => {
       switch (changeKey) {
 
-      case "selectedColor":
+      case 'selectedColor':
         this.handleSelectedColorChange(changes.selectedColor.newValue);
         break;
 
-      case "shortcuts":
+      case 'shortcuts':
         this.handleShortcutsChange(
           changes.shortcuts.oldValue,
           changes.shortcuts.newValue
         );
         break;
 
-      case "DarkMode":
+      case 'DarkMode':
         this.darkMode = changes.DarkMode.newValue;
         console.log(this.darkMode);
         break;
 
-      case "customshortcuts":
+      case 'customshortcuts':
         if (changes.customshortcuts.newValue) {
           this.handleCustomShortcutsChange(
             changes.customshortcuts.oldValue,
@@ -47,20 +47,20 @@ export default class StorageListener {
         }
         break;
 
-      case "notificationcollector":
+      case 'notificationcollector':
         this.handleNotificationCollectorChange(changes.notificationcollector);
         break;
 
-      case "bksliderinput":
+      case 'bksliderinput':
         updateBgDurations(changes.bksliderinput.newValue);
         break;
 
-      case "animatedbk":
+      case 'animatedbk':
         if (changes.animatedbk.newValue) {
           CreateBackground();
         } else {
           RemoveBackground();
-          document.getElementById("container").style.background = "var(--background-secondary)";
+          document.getElementById('container').style.background = 'var(--background-secondary)';
         }
         break;
 

src/seqta/utils/stringToHTML.js

@@ -1,12 +1,12 @@
-import DOMPurify from "dompurify";
+import DOMPurify from 'dompurify';
 
 export default function stringToHTML(str, styles = false) {
   var parser = new DOMParser();
-  str = DOMPurify.sanitize(str, { ADD_ATTR: ["onclick"] });
-  var doc = parser.parseFromString(str, "text/html");
+  str = DOMPurify.sanitize(str, { ADD_ATTR: ['onclick'] });
+  var doc = parser.parseFromString(str, 'text/html');
   if (styles) {
     doc.body.style.cssText =
-      "height: auto; overflow: scroll; margin: 0px; background: var(--background-primary);";
+      'height: auto; overflow: scroll; margin: 0px; background: var(--background-primary);';
   }
   return doc.body;
 }