From 3373590a1d7df83aa7c4c76c926c924d5ef399a5 Mon Sep 17 00:00:00 2001 From: SethBurkart123 Date: Sun, 31 Mar 2024 21:56:20 +1100 Subject: [PATCH] custom themes: auto remove unused css variables --- src/interface/pages/ThemeCreator.tsx | 50 ++++++++++-------- src/seqta/ui/Themes.ts | 78 +++++++++++++++++++--------- 2 files changed, 81 insertions(+), 47 deletions(-) diff --git a/src/interface/pages/ThemeCreator.tsx b/src/interface/pages/ThemeCreator.tsx index 11298606..721847d2 100644 --- a/src/interface/pages/ThemeCreator.tsx +++ b/src/interface/pages/ThemeCreator.tsx @@ -26,7 +26,7 @@ export default function ThemeCreator() { reader.onload = () => { const imageUrl = reader.result as string; const imageId = generateImageId(); - const variableName = `--custom-image-${theme.CustomImages.length}`; + const variableName = `custom-image-${theme.CustomImages.length}`; const updatedTheme = { ...theme, CustomImages: [...theme.CustomImages, { id: imageId, url: imageUrl, variableName }], @@ -57,9 +57,11 @@ export default function ThemeCreator() { }; function CodeUpdate(value: string) { - const updatedTheme = { ...theme, CustomCSS: value }; - setTheme(updatedTheme); - } + setTheme((prevTheme) => ({ + ...prevTheme, + CustomCSS: value, + })); + } useEffect(() => { sendThemeUpdate(theme); @@ -113,25 +115,29 @@ export default function ThemeCreator() {
- - {theme.CustomImages.map((image, index) => ( -
- {`Custom - handleImageVariableChange(image.id, e.target.value)} - placeholder='CSS Variable Name' - /> - + {theme.CustomImages.map((image, index) => ( +
+
+ {`Custom
- ))} - - + handleImageVariableChange(image.id, e.target.value)} + placeholder="CSS Variable Name" + className="flex-grow w-full p-2 transition-all duration-300 rounded-lg focus:outline-none ring-0 focus:ring-1 ring-zinc-100 dark:ring-zinc-700 dark:bg-zinc-900 dark:text-white" + /> + +
+ ))} + +
diff --git a/src/seqta/ui/Themes.ts b/src/seqta/ui/Themes.ts index b48afced..beb5ae00 100644 --- a/src/seqta/ui/Themes.ts +++ b/src/seqta/ui/Themes.ts @@ -161,51 +161,80 @@ export const disableTheme = async () => { localforage.removeItem('selectedTheme'); }; -let imageData: CustomImage[] = []; -let previousTheme: CustomTheme = null; +const imageData: Record = {}; export const UpdateThemePreview = async (updatedTheme: CustomTheme) => { - console.log(updatedTheme) - - if (updatedTheme.CustomImages.length !== imageData.length) { - updatedTheme.CustomImages.forEach((image) => { - updateImage(image.id, image.url); - }) - } + console.log(updatedTheme); const { CustomCSS, CustomImages, defaultColour } = updatedTheme; + // Update image data + const currentImageIds = Object.keys(imageData); + const updatedImageIds = CustomImages.map((image) => image.id); + + // Remove unused images from imageData and document + currentImageIds.forEach((imageId) => { + if (!updatedImageIds.includes(imageId)) { + const { variableName } = imageData[imageId]; + removeImageFromDocument(variableName); + delete imageData[imageId]; + } + }); + + // Update or add new images to imageData + CustomImages.forEach((image) => { + const existingImage = imageData[image.id]; + + if (existingImage && existingImage.variableName !== image.variableName) { + // Remove the previous variableName from the document + removeImageFromDocument(existingImage.variableName); + } + + imageData[image.id] = { + url: updateImage(image), + variableName: image.variableName, + }; + }); + // Apply custom CSS - let styleElement = document.getElementById('theme-preview-styles'); - if (!styleElement) { - styleElement = document.createElement('style'); - styleElement.id = 'theme-preview-styles'; - document.head.appendChild(styleElement); - } - styleElement.textContent = CustomCSS; + applyCustomCSS(CustomCSS); // Apply default color if (defaultColour !== '') { browser.storage.local.set({ selectedColor: defaultColour }); } + // Apply custom images CustomImages.forEach((image) => { - // @ts-expect-error - not sure why its yelling at me :( - const imageUrl = imageData[image.id]; + const imageUrl = imageData[image.id]?.url; if (imageUrl) { - document.documentElement.style.setProperty(image.variableName, `url(${imageUrl})`); + document.documentElement.style.setProperty('--' + image.variableName, `url(${imageUrl})`); } }); +}; + +function applyCustomCSS(customCSS: string) { + let styleElement = document.getElementById('theme-preview-styles'); + if (!styleElement) { + styleElement = document.createElement('style'); + styleElement.id = 'theme-preview-styles'; + document.head.appendChild(styleElement); + } + styleElement.textContent = customCSS; } -export function updateImage(imageId: string, imageDataURI: string) { +function removeImageFromDocument(variableName: string) { + document.documentElement.style.removeProperty('--' + variableName); +} + +export function updateImage(image: CustomImage) { // Extract base64 data from the data URI - const base64Index = imageDataURI.indexOf(',') + 1; - const imageBase64 = imageDataURI.substring(base64Index); + const base64Index = image.url.indexOf(',') + 1; + const imageBase64 = image.url.substring(base64Index); // Convert base64 to blob const byteCharacters = atob(imageBase64); - const byteNumbers = new Array(byteCharacters.length); + const byteNumbers = new Uint8Array(byteCharacters.length); for (let i = 0; i < byteCharacters.length; i++) { byteNumbers[i] = byteCharacters.charCodeAt(i); } @@ -215,6 +244,5 @@ export function updateImage(imageId: string, imageDataURI: string) { // Convert blob to blob URL const imageUrl = URL.createObjectURL(blob); - // @ts-expect-error - same problem 😭 - imageData[imageId] = imageUrl; + return imageUrl; } \ No newline at end of file