From 2d40d4005da269609c75bddb1e638ecde641c0dc Mon Sep 17 00:00:00 2001 From: SethBurkart123 Date: Wed, 11 Oct 2023 22:26:07 +1100 Subject: [PATCH] better --better-pale gradient logic --- src/SEQTA.js | 36 ++++++++++++---------- src/seqta/ui/Animation.js | 2 +- src/seqta/ui/colors/Manager.js | 6 ++-- src/seqta/ui/colors/lightenAndPaleColor.js | 17 +++++----- 4 files changed, 30 insertions(+), 31 deletions(-) diff --git a/src/SEQTA.js b/src/SEQTA.js index fe058353..b746c1e4 100644 --- a/src/SEQTA.js +++ b/src/SEQTA.js @@ -472,7 +472,7 @@ function CheckNoticeTextColour(notice) { DarkMode = result.DarkMode; if (added_node.classList.contains("notice")) { var hex = added_node.style.cssText.split(" ")[1]; - var threshold = GetThresholdofHex(hex); + var threshold = GetThresholdOfColor(hex); if (DarkMode && threshold < 100) { added_node.style.cssText = "--color: undefined;"; } @@ -1131,7 +1131,7 @@ function AddBetterSEQTAElements(toggle) { if (students[index]?.house) { houseelement.style.background = students[index].house_colour; try { - let colorresult = GetThresholdofHex( + let colorresult = GetThresholdOfColor( students[index]?.house_colour, ); @@ -1449,34 +1449,36 @@ function CheckCurrentLesson(lesson, num) { } } -export function GetThresholdofHex(color) { - // Regular expression for matching RGBA colors - const rgbaRegex = /rgba?\(([^)]+)\)/g; +export function GetThresholdOfColor(color) { + // Case-insensitive regular expression for matching RGBA colors + const rgbaRegex = /rgba?\(([^)]+)\)/gi; // Check if the color string is a gradient (linear or radial) if (color.includes("gradient")) { - let gradient = color; - + let gradientThresholds = []; + // Find and replace all instances of RGBA in the gradient let match; while ((match = rgbaRegex.exec(color)) !== null) { // Extract the individual components (r, g, b, a) const rgbaString = match[1]; - const [r, g, b, a] = rgbaString.split(",").map(str => str.trim()); + const [r, g, b] = rgbaString.split(",").map(str => str.trim()); // Compute the threshold using your existing algorithm const threshold = Math.sqrt(r ** 2 + g ** 2 + b ** 2); - // Replace the original RGBA string with the computed threshold - // Note: You can modify this part based on what you actually want to do with the threshold - gradient = gradient.replace(`rgba(${rgbaString})`, `rgba(${threshold}, ${threshold}, ${threshold}, ${a})`); + // Store the computed threshold + gradientThresholds.push(threshold); } + + // Calculate the average threshold + const averageThreshold = gradientThresholds.reduce((acc, val) => acc + val, 0) / gradientThresholds.length; - return gradient; + return averageThreshold; } else { // Handle the color as a simple RGBA (or hex, or whatever the Color library supports) - const rgb = Color.rgb(color).string(); + const rgb = Color.rgb(color).object(); return Math.sqrt(rgb.r ** 2 + rgb.g ** 2 + rgb.b ** 2); } } @@ -1568,7 +1570,7 @@ function callHomeTimetable(date, change) { lessonArray[i].colour = "--item-colour: #8e8e8e;"; } else { lessonArray[i].colour = `--item-colour: ${subject.value};`; - let result = GetThresholdofHex(subject.value); + let result = GetThresholdOfColor(subject.value); if (result > 300) { lessonArray[i].invert = true; @@ -1894,7 +1896,7 @@ function CreateUpcomingSection(assessments) { assessments[i].colour = "--item-colour: #8e8e8e;"; } else { assessments[i].colour = `--item-colour: ${subject.value};`; - GetThresholdofHex(subject.value); // result (originally) result = GetThresholdofHex + GetThresholdOfColor(subject.value); // result (originally) result = GetThresholdOfColor } } @@ -1907,7 +1909,7 @@ function CreateUpcomingSection(assessments) { element.colour = "--item-colour: #8e8e8e;"; } else { element.colour = `--item-colour: ${colour.value};`; - let result = GetThresholdofHex(colour.value); + let result = GetThresholdOfColor(colour.value); if (result > 300) { element.invert = true; } @@ -2340,7 +2342,7 @@ function SendHomePage() { var colour = NoticesPayload.payload[i].colour; if (typeof colour == "string") { - let rgb = GetThresholdofHex(colour); + let rgb = GetThresholdOfColor(colour); if (rgb < 100 && result.DarkMode) { colour = undefined; } diff --git a/src/seqta/ui/Animation.js b/src/seqta/ui/Animation.js index d7cf9f68..940fa93d 100644 --- a/src/seqta/ui/Animation.js +++ b/src/seqta/ui/Animation.js @@ -25,8 +25,8 @@ export function updateBgDurations(speed, minDuration = 0.5, maxDuration = 10) { // Iterate through each class name to update its animation duration bgClasses.forEach((className, index) => { const elements = document.getElementsByClassName(className); + if (elements.length === 0) { - console.error(`No elements found with class name: ${className}`); return; } diff --git a/src/seqta/ui/colors/Manager.js b/src/seqta/ui/colors/Manager.js index 2a152c7c..5ec33f28 100644 --- a/src/seqta/ui/colors/Manager.js +++ b/src/seqta/ui/colors/Manager.js @@ -1,5 +1,5 @@ /* global chrome */ -import { GetThresholdofHex } from "../../../SEQTA.js"; +import { GetThresholdOfColor } from "../../../SEQTA.js"; import { lightenAndPaleColor } from "./lightenAndPaleColor.js"; import ColorLuminance from "./ColorLuminance.js"; @@ -36,10 +36,8 @@ export function updateAllColors(storedSetting, newColor = null) { }; } - console.log("modeProps:", modeProps); - // Dynamic properties, always applied - const rgbThreshold = GetThresholdofHex(selectedColor); + const rgbThreshold = GetThresholdOfColor(selectedColor); const isBright = rgbThreshold > 210; const dynamicProps = { "--text-color": isBright ? "black" : "white", diff --git a/src/seqta/ui/colors/lightenAndPaleColor.js b/src/seqta/ui/colors/lightenAndPaleColor.js index fcf4f65c..52b76a24 100644 --- a/src/seqta/ui/colors/lightenAndPaleColor.js +++ b/src/seqta/ui/colors/lightenAndPaleColor.js @@ -2,11 +2,14 @@ import Color from "color"; export function lightenAndPaleColor(inputColor, lightenFactor = 0.75, paleFactor = 0.55) { - console.log(`Input color: ${inputColor}`); - if (inputColor.includes("gradient")) return findMatchingColor(inputColor); + if (inputColor.includes("gradient")) { + const baseColor = findMatchingColor(inputColor); - // Step 1: Convert the input RGB color to a 'color' object - const colorObj = Color(`rgb(${inputColor.match(/\d+/g).join(",")})`); + return lightenAndPaleColor(baseColor, lightenFactor, paleFactor); + } + + // Step 1: Convert the input color to a 'color' object + const colorObj = Color(inputColor); // Step 2: Convert to HSL and get the object const hslObj = colorObj.hsl().object(); @@ -21,8 +24,6 @@ export function lightenAndPaleColor(inputColor, lightenFactor = 0.75, paleFactor // Step 5: Convert back to RGB const result = newColorObj.rgb().string(); - console.log(`Input color: ${inputColor} | Output color: ${result}`); - return result; } // Utility function to average an array of Color objects @@ -55,11 +56,9 @@ function findMatchingColor(cssGradient) { // Step 2: Average the color stops const baseColor = averageColors(colorObjects); - // Step 3: Lighten and desaturate the base color - const matchingColor = baseColor.lighten(0.7).desaturate(0.5); // Step 4: Return the matching color in HEX format - return matchingColor.hex(); + return baseColor.hex(); } catch (err) { console.error(`Error: ${err.message}`); return null;