Skip to content

Commit 15a854c

Browse files
lumosframeworklumosframework
authored
Update theme-collector.js
1 parent 85b3e21 commit 15a854c

File tree

1 file changed

+87
-34
lines changed

1 file changed

+87
-34
lines changed

‎theme-collector.js‎

Lines changed: 87 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,37 @@
11
/**
2-
* Theme Collector 1.0.7
2+
* Theme Collector 1.0.9
33
* Released under the MIT License
44
* Released on: January 17, 2025
55
*/
66
function getColorThemes() {
7-
const STORAGE_KEYS = { THEMES: 'colorThemes_data', PUBLISH_DATE: 'colorThemes_publishDate' };
7+
const STORAGE_KEYS = {
8+
THEMES: "colorThemes_data",
9+
PUBLISH_DATE: "colorThemes_publishDate",
10+
};
811
function getPublishDate() {
912
const htmlComment = document.documentElement.previousSibling;
10-
return htmlComment?.nodeType === Node.COMMENT_NODE ? new Date(htmlComment.textContent.match(/Last Published: (.+?) GMT/)[1]).getTime() : null;
13+
return htmlComment?.nodeType === Node.COMMENT_NODE
14+
? new Date(
15+
htmlComment.textContent.match(/Last Published: (.+?) GMT/)[1]
16+
).getTime()
17+
: null;
1118
}
1219

1320
function loadFromStorage() {
1421
try {
15-
const storedPublishDate = localStorage.getItem(STORAGE_KEYS.PUBLISH_DATE), currentPublishDate = getPublishDate();
16-
if (!currentPublishDate || !storedPublishDate || storedPublishDate !== currentPublishDate.toString()) return null;
22+
const storedPublishDate = localStorage.getItem(STORAGE_KEYS.PUBLISH_DATE),
23+
currentPublishDate = getPublishDate();
24+
if (
25+
!currentPublishDate ||
26+
!storedPublishDate ||
27+
storedPublishDate !== currentPublishDate.toString()
28+
)
29+
return null;
1730
return JSON.parse(localStorage.getItem(STORAGE_KEYS.THEMES));
18-
} catch (error) { console.warn('Failed to load from localStorage:', error); return null; }
31+
} catch (error) {
32+
console.warn("Failed to load from localStorage:", error);
33+
return null;
34+
}
1935
}
2036

2137
function saveToStorage(themes) {
@@ -25,57 +41,94 @@ function getColorThemes() {
2541
localStorage.setItem(STORAGE_KEYS.PUBLISH_DATE, publishDate.toString());
2642
localStorage.setItem(STORAGE_KEYS.THEMES, JSON.stringify(themes));
2743
}
28-
} catch (error) { console.warn('Failed to save to localStorage:', error); }
44+
} catch (error) {
45+
console.warn("Failed to save to localStorage:", error);
46+
}
2947
}
3048

31-
window.colorThemes = { themes: {}, getTheme(themeName = '', brandName = '') {
32-
if (!themeName) return this.getTheme(Object.keys(this.themes)[0], brandName);
33-
const theme = this.themes[themeName];
34-
if (!theme) return {};
35-
if (!theme.brands || Object.keys(theme.brands).length === 0) return theme;
36-
if (!brandName) return theme.brands[Object.keys(theme.brands)[0]];
37-
return theme.brands[brandName] || {};
38-
}};
49+
window.colorThemes = {
50+
themes: {},
51+
getTheme(themeName = "", brandName = "") {
52+
if (!themeName)
53+
return this.getTheme(Object.keys(this.themes)[0], brandName);
54+
const theme = this.themes[themeName];
55+
if (!theme) return {};
56+
if (!theme.brands || Object.keys(theme.brands).length === 0) return theme;
57+
if (!brandName) return theme.brands[Object.keys(theme.brands)[0]];
58+
return theme.brands[brandName] || {};
59+
},
60+
};
3961

4062
const cachedThemes = loadFromStorage();
41-
if (cachedThemes) { window.colorThemes.themes = cachedThemes; document.dispatchEvent(new CustomEvent("colorThemesReady")); return; }
63+
if (cachedThemes) {
64+
window.colorThemes.themes = cachedThemes;
65+
document.dispatchEvent(new CustomEvent("colorThemesReady"));
66+
return;
67+
}
4268

4369
const firstLink = document.querySelector('link[rel="stylesheet"]');
4470
if (!firstLink?.href) return null;
4571

46-
const themeVariables = new Set(), themeClasses = new Set(), brandClasses = new Set();
72+
const themeVariables = new Set(),
73+
themeClasses = new Set(),
74+
brandClasses = new Set();
4775

4876
fetch(firstLink.href)
49-
.then(response => { if (!response.ok) throw new Error(`Failed to fetch stylesheet: ${response.statusText}`); return response.text(); })
50-
.then(cssText => {
51-
(cssText.match(/--_theme[\w-]+:\s*[^;]+/g) || []).forEach(variable => themeVariables.add(variable.split(":")[0].trim()));
52-
(cssText.match(/\.u-(theme|brand)-[\w-]+/g) || []).forEach(className => {
53-
if (className.startsWith(".u-theme-")) themeClasses.add(className);
54-
if (className.startsWith(".u-brand-")) brandClasses.add(className);
55-
});
77+
.then((response) => {
78+
if (!response.ok)
79+
throw new Error(`Failed to fetch stylesheet: ${response.statusText}`);
80+
return response.text();
81+
})
82+
.then((cssText) => {
83+
(cssText.match(/--_theme[\w-]+:\s*[^;]+/g) || []).forEach((variable) =>
84+
themeVariables.add(variable.split(":")[0].trim())
85+
);
86+
(cssText.match(/\.u-(theme|brand)-[\w-]+/g) || []).forEach(
87+
(className) => {
88+
if (className.startsWith(".u-theme-")) themeClasses.add(className);
89+
if (className.startsWith(".u-brand-")) brandClasses.add(className);
90+
}
91+
);
5692

5793
const themeVariablesArray = Array.from(themeVariables);
5894
function checkClass(themeClass, brandClass = null) {
59-
document.documentElement.classList.add(themeClass, brandClass);
95+
document.documentElement.classList.add(themeClass, brandClass);
6096
const styleObject = {};
61-
themeVariablesArray.forEach(variable => styleObject[variable] = getComputedStyle(document.documentElement).getPropertyValue(variable));
97+
themeVariablesArray.forEach(
98+
(variable) =>
99+
(styleObject[variable] = getComputedStyle(
100+
document.documentElement
101+
).getPropertyValue(variable))
102+
);
62103
document.documentElement.classList.remove(themeClass, brandClass);
63104
return styleObject;
64105
}
65106

66-
themeClasses.forEach(themeClassWithDot => {
67-
const themeName = themeClassWithDot.replace(".", "").replace("u-theme-", "");
107+
themeClasses.forEach((themeClassWithDot) => {
108+
const themeName = themeClassWithDot
109+
.replace(".", "")
110+
.replace("u-theme-", "");
68111
window.colorThemes.themes[themeName] = { brands: {} };
69-
brandClasses.forEach(brandClassWithDot => {
70-
const brandName = brandClassWithDot.replace(".", "").replace("u-brand-", "");
71-
window.colorThemes.themes[themeName].brands[brandName] = checkClass(themeClassWithDot.replace(".", ""), brandClassWithDot.replace(".", ""));
112+
brandClasses.forEach((brandClassWithDot) => {
113+
const brandName = brandClassWithDot
114+
.replace(".", "")
115+
.replace("u-brand-", "");
116+
window.colorThemes.themes[themeName].brands[brandName] = checkClass(
117+
themeClassWithDot.replace(".", ""),
118+
brandClassWithDot.replace(".", "")
119+
);
72120
});
73-
if (!brandClasses.size) window.colorThemes.themes[themeName] = checkClass(themeClassWithDot.replace(".", ""));
121+
if (!brandClasses.size)
122+
window.colorThemes.themes[themeName] = checkClass(
123+
themeClassWithDot.replace(".", "")
124+
);
74125
});
75126

76127
saveToStorage(window.colorThemes.themes);
77128
document.dispatchEvent(new CustomEvent("colorThemesReady"));
78129
})
79-
.catch(error => console.error("Error:", error.message));
130+
.catch((error) => console.error("Error:", error.message));
80131
}
81-
getColorThemes();
132+
window.addEventListener("DOMContentLoaded", (event) => {
133+
getColorThemes();
134+
});

0 commit comments

Comments
 (0)