diff --git a/src/seqta/ui/Animation.ts b/src/seqta/ui/Animation.ts index 108ea20a..68227430 100644 --- a/src/seqta/ui/Animation.ts +++ b/src/seqta/ui/Animation.ts @@ -4,10 +4,10 @@ * @param {number} [minDuration=1] - The minimum animation duration in seconds. * @param {number} [maxDuration=10] - The maximum animation duration in seconds. */ -export function updateBgDurations(speed, minDuration = 0.5, maxDuration = 10) { +export function updateBgDurations(speed: any, minDuration = 0.5, maxDuration = 10) { // Class names to look for const bgClasses = ['bg', 'bg2', 'bg3']; - let reversedValue; + let reversedValue: any; if (speed.bksliderinput === undefined) { // Reverse the slider direction to align with the animation @@ -20,7 +20,7 @@ export function updateBgDurations(speed, minDuration = 0.5, maxDuration = 10) { const durationRange = maxDuration - minDuration; // Function to calculate animation duration - const calcDuration = (baseValue, offset = 0) => minDuration + ((baseValue / 200) + offset) * durationRange; + const calcDuration = (baseValue: number, offset = 0) => minDuration + ((baseValue / 200) + offset) * durationRange; // Iterate through each class name to update its animation duration bgClasses.forEach((className, index) => { @@ -32,6 +32,6 @@ export function updateBgDurations(speed, minDuration = 0.5, maxDuration = 10) { const offset = index * 0.05; const duration = calcDuration(reversedValue, offset); - elements[0].style.animationDuration = `${duration}s`; + (elements[0] as HTMLElement).style.animationDuration = `${duration}s`; }); } \ No newline at end of file diff --git a/src/seqta/ui/ImageBackgrounds.ts b/src/seqta/ui/ImageBackgrounds.ts index 53a4e3f0..15782c9a 100644 --- a/src/seqta/ui/ImageBackgrounds.ts +++ b/src/seqta/ui/ImageBackgrounds.ts @@ -11,5 +11,5 @@ export async function appendBackgroundToUI() { background.classList.add('imageBackground'); background.setAttribute('excludeDarkCheck', 'true'); background.src = browser.runtime.getURL('backgrounds/background.html'); - parent.appendChild(background); + parent!.appendChild(background); } diff --git a/src/seqta/ui/Loading.ts b/src/seqta/ui/Loading.ts index 7754af7d..62bcfafd 100644 --- a/src/seqta/ui/Loading.ts +++ b/src/seqta/ui/Loading.ts @@ -8,7 +8,7 @@ const loadingSpinner = ` `; -export function AppendLoadingSymbol(givenID, position) { +export function AppendLoadingSymbol(givenID: any, position: any) { let loadingsymbol = stringToHTML(String.raw`
${loadingSpinner} @@ -79,5 +79,5 @@ export default function loading() { }
`, ); var html = document.getElementsByTagName('html')[0]; - html.append(loadinghtml.firstChild); + html.append(loadinghtml.firstChild!); } \ No newline at end of file diff --git a/src/seqta/ui/Themes.ts b/src/seqta/ui/Themes.ts index 6c1d29f9..7762ded8 100644 --- a/src/seqta/ui/Themes.ts +++ b/src/seqta/ui/Themes.ts @@ -4,31 +4,31 @@ import localforage from 'localforage'; let currentThemeClass = ''; // Utility function to fetch and parse JSON -const fetchJSON = async (url) => { +const fetchJSON = async (url: any) => { const res = await fetch(url, {cache: 'no-store'}); return await res.json(); }; // Utility function to fetch and parse text -const fetchText = async (url) => { +const fetchText = async (url: any) => { const res = await fetch(url); return await res.text(); }; // Check if the theme already exists in IndexedDB -const themeExistsInDB = async (themeName) => { +const themeExistsInDB = async (themeName: any) => { return (await localforage.getItem(`css_${themeName}`)) !== null; }; // Fetch theme details (CSS, images, className, darkMode, defaultColour) from a given URL -const fetchThemeJSON = async (url) => { +const fetchThemeJSON = async (url: any) => { const { css, images, className, darkMode, defaultColour } = await fetchJSON(url); const cssText = await fetchText(css); return { css: cssText, images, className, darkMode, defaultColour }; }; // Save individual image to IndexedDB -const saveImageToDB = async (themeName, cssVar, imageUrl) => { +const saveImageToDB = async (themeName: any, cssVar: any, imageUrl: any) => { try { const response = await fetch(imageUrl); if (!response.ok) throw new Error(response.statusText); @@ -40,14 +40,21 @@ const saveImageToDB = async (themeName, cssVar, imageUrl) => { }; // Save theme details to storage via localForage -const saveToIndexedDB = async (theme, themeName) => { +const saveToIndexedDB = async (theme: any, themeName: any) => { await localforage.setItem(`css_${themeName}`, theme); await Promise.all(Object.entries(theme.images).map(([cssVar, imageUrl]) => saveImageToDB(themeName, cssVar, imageUrl))); }; +declare global { + interface Window { + currentThemeStyle: any; + currentThemeClass: any; + } +} + // Apply theme from storage via localForage to document, including dark mode and default color -const applyTheme = async (themeName) => { - const { css, className, images, darkMode, defaultColour } = await localforage.getItem(`css_${themeName}`); +const applyTheme = async (themeName: any) => { + const { css, className, images, darkMode, defaultColour }: any = await localforage.getItem(`css_${themeName}`); const newStyle = document.createElement('style'); newStyle.innerHTML = css; @@ -70,7 +77,7 @@ const applyTheme = async (themeName) => { if (images) { await Promise.all( Object.keys(images).map(async (cssVar) => { - const imageData = await localforage.getItem(`images_${themeName}_${cssVar}`); + const imageData: any = await localforage.getItem(`images_${themeName}_${cssVar}`); const objectURL = URL.createObjectURL(imageData); document.documentElement.style.setProperty(cssVar, `url(${objectURL})`); }) @@ -88,13 +95,13 @@ export const listThemes = async () => { }; }; -export const downloadTheme = async (themeName, themeUrl) => { +export const downloadTheme = async (themeName: any, themeUrl: any) => { const themeData = await fetchThemeJSON(themeUrl); await saveToIndexedDB(themeData, themeName); await setTheme(themeName, themeUrl); }; -export const deleteTheme = async (themeName) => { +export const deleteTheme = async (themeName: any) => { const currentTheme = await localforage.getItem('selectedTheme'); if (currentTheme === themeName) { await disableTheme(); @@ -105,7 +112,7 @@ export const deleteTheme = async (themeName) => { ); }; -export const setTheme = async (themeName, themeUrl) => { +export const setTheme = async (themeName: any, themeUrl: any) => { if (!(await themeExistsInDB(themeName))) { await downloadTheme(themeName, themeUrl); } @@ -142,7 +149,7 @@ export const disableTheme = async () => { // Remove any applied image URLs from the root element const currentTheme = await localforage.getItem('selectedTheme'); if (currentTheme) { - const themeData = await localforage.getItem(`css_${currentTheme}`); + const themeData: any = await localforage.getItem(`css_${currentTheme}`); if (themeData && themeData.images) { Object.keys(themeData.images).forEach(cssVar => { document.documentElement.style.removeProperty(cssVar); diff --git a/src/seqta/ui/colors/ColorLuminance.ts b/src/seqta/ui/colors/ColorLuminance.ts index 10c92764..2605f36d 100644 --- a/src/seqta/ui/colors/ColorLuminance.ts +++ b/src/seqta/ui/colors/ColorLuminance.ts @@ -1,6 +1,6 @@ import Color from 'color'; -function adjustLuminance(color, lum) { +function adjustLuminance(color: any, lum: any) { let adjustedColor = Color(color.toLowerCase()); const rgbObj = adjustedColor.rgb().object(); @@ -14,7 +14,7 @@ function adjustLuminance(color, lum) { return adjustedColor.string(); } -export default function ColorLuminance(color, lum = 0) { +export default function ColorLuminance(color: any, lum = 0) { const colorRegex = /rgba?\(([^)]+)\)/gi; // Case-insensitive match for rgb() or rgba() if (color.toLowerCase().includes('gradient')) { @@ -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 as string, 'gi'), adjustedColor); } return gradient; diff --git a/src/seqta/ui/colors/Manager.ts b/src/seqta/ui/colors/Manager.ts index f64f6187..52f29b82 100644 --- a/src/seqta/ui/colors/Manager.ts +++ b/src/seqta/ui/colors/Manager.ts @@ -5,13 +5,13 @@ import ColorLuminance from './ColorLuminance.js'; import { onError } from '../../utils/onError.js'; // Helper functions -const setCSSVar = (varName, value) => document.documentElement.style.setProperty(varName, value); -const getChromeURL = (path) => browser.runtime.getURL(path); -const applyProperties = (props) => Object.entries(props).forEach(([key, value]) => setCSSVar(key, value)); +const setCSSVar = (varName: any, value: any) => document.documentElement.style.setProperty(varName, value); +const getChromeURL = (path: any) => browser.runtime.getURL(path); +const applyProperties = (props: any) => Object.entries(props).forEach(([key, value]) => setCSSVar(key, value)); -let DarkMode = null; +let DarkMode: any = null; -export function updateAllColors(storedSetting, newColor = null) { +export function updateAllColors(storedSetting: any, newColor = null) { // Determine the color to use const selectedColor = newColor || storedSetting.selectedColor; @@ -63,7 +63,7 @@ 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\']')! as HTMLLinkElement).href = getChromeURL('icons/icon-48.png'); } let alliframes = document.getElementsByTagName('iframe'); @@ -77,11 +77,11 @@ export function updateAllColors(storedSetting, newColor = null) { } console.log(element); - console.log(element.contentDocument.documentElement); + console.log(element.contentDocument!.documentElement); - element.contentDocument.documentElement.childNodes[1].style.color = + (element.contentDocument!.documentElement.childNodes[1] as HTMLIFrameElement).style.color = DarkMode ? 'white' : 'black'; - element.contentDocument.documentElement.firstChild.appendChild( + element.contentDocument!.documentElement.firstChild!.appendChild( fileref, ); } @@ -90,7 +90,7 @@ export function updateAllColors(storedSetting, newColor = null) { export function getDarkMode() { return new Promise((resolve, reject) => { const result = browser.storage.local.get('DarkMode') - function open (result) { + function open (result: any) { if (browser.runtime.lastError) { return reject(browser.runtime.lastError); } diff --git a/src/seqta/ui/colors/lightenAndPaleColor.ts b/src/seqta/ui/colors/lightenAndPaleColor.ts index 2dc28709..34107ba8 100644 --- a/src/seqta/ui/colors/lightenAndPaleColor.ts +++ b/src/seqta/ui/colors/lightenAndPaleColor.ts @@ -1,7 +1,7 @@ import Color from 'color'; -export function lightenAndPaleColor(inputColor, lightenFactor = 0.75, paleFactor = 0.55) { +export function lightenAndPaleColor(inputColor: any, lightenFactor = 0.75, paleFactor = 0.55) { if (inputColor.includes('gradient')) { const baseColor = findMatchingColor(inputColor); @@ -27,9 +27,9 @@ export function lightenAndPaleColor(inputColor, lightenFactor = 0.75, paleFactor return result; } // Utility function to average an array of Color objects -function averageColors(colors) { +function averageColors(colors: any) { let avgR = 0, avgG = 0, avgB = 0; - colors.forEach(color => { + colors.forEach((color: any) => { avgR += color.red(); avgG += color.green(); avgB += color.blue(); @@ -37,7 +37,7 @@ function averageColors(colors) { return Color.rgb(avgR / colors.length, avgG / colors.length, avgB / colors.length); } // Main function to find a matching color for a CSS gradient -function findMatchingColor(cssGradient) { +function findMatchingColor(cssGradient: any) { try { // Step 1: Parse the gradient to extract color stops (case-insensitive) const regex = /#[0-9a-fA-F]{6}|rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)|rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*[\d.]+\s*\)/gi; @@ -48,10 +48,10 @@ function findMatchingColor(cssGradient) { } // Normalize and trim the color stops - const normalizedColorStops = colorStops.map(color => color.toLowerCase().replace(/\s+/g, '')); + const normalizedColorStops = colorStops.map((color: any) => color.toLowerCase().replace(/\s+/g, '')); // Convert the color stops to Color objects - const colorObjects = normalizedColorStops.map(color => Color(color)); + const colorObjects = normalizedColorStops.map((color: any) => Color(color)); // Step 2: Average the color stops const baseColor = averageColors(colorObjects); @@ -59,7 +59,7 @@ function findMatchingColor(cssGradient) { // Step 4: Return the matching color in HEX format return baseColor.hex(); - } catch (err) { + } catch (err: any) { console.error(`Error: ${err.message}`); return null; } diff --git a/src/seqta/utils/FileUpload.ts b/src/seqta/utils/FileUpload.ts index 59536648..339b0c0c 100644 --- a/src/seqta/utils/FileUpload.ts +++ b/src/seqta/utils/FileUpload.ts @@ -5,7 +5,7 @@ * @returns {Promise} A promise that resolves to the response from the server. * @throws {Error} If no file is provided or if there is an error during upload. */ -export async function UploadImage(file) { +export async function UploadImage(file: any) { // Ensuring that file is provided if (!file) { throw new Error("No file provided"); @@ -28,12 +28,12 @@ export async function UploadImage(file) { }; // Making the fetch request and returning the promise - return fetch('/seqta/student/file/upload/xhr2', requestOptions) - .then(response => { + return await fetch('/seqta/student/file/upload/xhr2', requestOptions) + .then(async response => { if (!response.ok) { throw new Error(`HTTP error! Status: ${response.status}`); } - const json = response.json(); + const json = await response.json(); return `/seqta/student/load/file?type=message&file=${json.uuid}`; }) .catch(error => { diff --git a/src/seqta/utils/MessageListener.ts b/src/seqta/utils/MessageListener.ts index 407e6018..d2a4b902 100644 --- a/src/seqta/utils/MessageListener.ts +++ b/src/seqta/utils/MessageListener.ts @@ -8,7 +8,7 @@ export class MessageHandler { browser.runtime.onMessage.addListener(this.routeMessage.bind(this)); } - routeMessage(request, sender, sendResponse) { + routeMessage(request: any, sender: any, sendResponse: any) { switch (request.info) { case 'EditSidebar': diff --git a/src/seqta/utils/StorageListener.ts b/src/seqta/utils/StorageListener.ts index 9ff02897..92b3ec22 100644 --- a/src/seqta/utils/StorageListener.ts +++ b/src/seqta/utils/StorageListener.ts @@ -12,13 +12,15 @@ import { import { updateBgDurations } from '../ui/Animation.js'; import { getDarkMode, updateAllColors } from '../ui/colors/Manager.js'; + export default class StorageListener { + darkMode: any; constructor() { this.darkMode = getDarkMode(); browser.storage.onChanged.addListener(this.handleStorageChanges.bind(this)); } - handleStorageChanges(changes) { + handleStorageChanges(changes: any) { Object.keys(changes).forEach((changeKey) => { switch (changeKey) { @@ -60,7 +62,7 @@ export default class StorageListener { CreateBackground(); } else { RemoveBackground(); - document.getElementById('container').style.background = 'var(--background-secondary)'; + document.getElementById('container')!.style.background = 'var(--background-secondary)'; } break; @@ -80,7 +82,7 @@ export default class StorageListener { }); } - handleSelectedColorChange(newColor) { + handleSelectedColorChange(newColor: any) { try { updateAllColors(this.darkMode, newColor); } catch (err) { @@ -88,7 +90,7 @@ export default class StorageListener { } } - handleNotificationCollectorChange(details) { + handleNotificationCollectorChange(details: any) { if (details.newValue) { enableNotificationCollector(); } else { @@ -96,7 +98,7 @@ export default class StorageListener { } } - handleCustomShortcutsChange(oldValue, newValue) { + handleCustomShortcutsChange(oldValue: any, newValue: any) { // Check for addition if (newValue.length > oldValue.length) { CreateCustomShortcutDiv(newValue[oldValue.length]); @@ -104,9 +106,9 @@ export default class StorageListener { // Check for removal else if (newValue.length < oldValue.length) { const removedElement = oldValue.find( - (oldItem) => + (oldItem: any) => !newValue.some( - (newItem) => JSON.stringify(oldItem) === JSON.stringify(newItem) + (newItem: any) => JSON.stringify(oldItem) === JSON.stringify(newItem) ) ); @@ -116,10 +118,10 @@ export default class StorageListener { } } - handleShortcutsChange(oldValue, newValue) { + handleShortcutsChange(oldValue: any, newValue: any) { // Find Added Shortcuts - const addedShortcuts = newValue.filter(newItem => { - const isAdded = oldValue.some(oldItem => { + const addedShortcuts = newValue.filter((newItem: any) => { + const isAdded = oldValue.some((oldItem: any) => { const match = oldItem.name === newItem.name; const wasDisabled = !oldItem.enabled; const isEnabled = newItem.enabled; @@ -130,8 +132,8 @@ export default class StorageListener { }); // Find Removed Shortcuts - const removedShortcuts = newValue.filter(newItem => { - const isRemoved = oldValue.some(oldItem => { + const removedShortcuts = newValue.filter((newItem: any) => { + const isRemoved = oldValue.some((oldItem: any) => { const match = oldItem.name === newItem.name; const wasEnabled = oldItem.enabled; // Was enabled in the old array const isDisabled = !newItem.enabled; // Is disabled in the new array diff --git a/src/seqta/utils/onError.ts b/src/seqta/utils/onError.ts index e2eab4d6..9f93b1bf 100644 --- a/src/seqta/utils/onError.ts +++ b/src/seqta/utils/onError.ts @@ -1 +1 @@ -export function onError (error) { console.log(`Error: ${error}`) } \ No newline at end of file +export function onError (error: string) { console.log(`Error: ${error}`) } \ No newline at end of file