BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-06-06 19:54:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

forgot about functions, still LET'S GO (test req)

Browse Source
This commit is contained in:
Crazypersonalph
2023-12-04 20:39:13 +08:00
parent aaca124ff0
commit 8af59e58d6
11 changed files with 67 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/seqta/ui/Animation.ts
+4 -4
View File
@@ -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`;
});
}
src/seqta/ui/ImageBackgrounds.ts
+1 -1
View File
@@ -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);
}
src/seqta/ui/Loading.ts
+2 -2
View File
@@ -8,7 +8,7 @@ const loadingSpinner = `
<svg height="220" width="220" viewBox="0 0 1000 1000" class="outer-circle svg"><path xmlns="http://www.w3.org/2000/svg" style="fill:currentColor; stroke:none;" d="M456 954L456 946C438.715 945.258 420.843 941.462 404 937.65C369.403 929.822 335.739 918.116 304 902.247C255.981 878.237 211.768 846.374 175.09 807C62.5744 686.214 23.1598 509.033 78.6921 353C96.4653 303.062 122.84 256.974 156.424 216C207.709 153.43 278.099 103.658 355 78C372.453 72.1767 389.992 67.0399 408 63.2107C413.31 62.0816 418.647 60.9853 424 60.0811C426.508 59.6575 430.352 59.6852 432.397 57.9869C434.897 55.9098 434 50.8766 434 48C417.656 48.1353 400.764 53.1855 385 57.1265C338.517 68.7473 294.608 88.2827 254 113.576C215.673 137.45 181.285 167.835 151.87 202C33.9725 338.933 8.37009 541.243 89.2485 703C110.949 746.4 139.693 786.693 174 821C210.688 857.688 253.047 888.542 300 910.781C332.484 926.167 365.934 937.716 401 945.65C418.745 949.666 437.768 953.624 456 954z"/></svg>
`;
export function AppendLoadingSymbol(givenID, position) {
export function AppendLoadingSymbol(givenID: any, position: any) {
let loadingsymbol = stringToHTML(String.raw`
<div id="${givenID}">
${loadingSpinner}
@@ -79,5 +79,5 @@ export default function loading() {
}</div></div>`,
);
var html = document.getElementsByTagName('html')[0];
html.append(loadinghtml.firstChild);
html.append(loadinghtml.firstChild!);
}
src/seqta/ui/Themes.ts
+20 -13
View File
@@ -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);
src/seqta/ui/colors/ColorLuminance.ts
+3 -3
View File
@@ -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;
src/seqta/ui/colors/Manager.ts
+10 -10
View File
@@ -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);
}
src/seqta/ui/colors/lightenAndPaleColor.ts
+7 -7
View File
@@ -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;
}