imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use map instead of object for styleElements

Browse source
This commit is contained in:
Florian Duros 2022-09-28 10:44:32 +02:00
parent 97f46b734d
commit 55450bc0a6
No known key found for this signature in database
GPG key ID: 9700AA5870258A0B
1 changed files with 13 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/theme.ts
View file

@ -237,13 +237,13 @@ export async function setTheme(theme?: string): Promise<void> {
// look for the stylesheet elements. // look for the stylesheet elements.
// styleElements is a map from style name to HTMLLinkElement. // styleElements is a map from style name to HTMLLinkElement.
const styleElements: Record<string, HTMLLinkElement> = Object.create(null); const styleElements = new Map<string, HTMLLinkElement>();
const themes = Array.from(document.querySelectorAll<HTMLLinkElement>('[data-mx-theme]')); const themes = Array.from(document.querySelectorAll<HTMLLinkElement>('[data-mx-theme]'));
themes.forEach(theme => { themes.forEach(theme => {
styleElements[theme.attributes['data-mx-theme'].value.toLowerCase()] = theme; styleElements.set(theme.attributes['data-mx-theme'].value.toLowerCase(), theme);
}); });
if (!(stylesheetName in styleElements)) { if (!styleElements.has(stylesheetName)) {
throw new Error("Unknown theme " + stylesheetName); throw new Error("Unknown theme " + stylesheetName);
} }
@ -258,7 +258,8 @@ export async function setTheme(theme?: string): Promise<void> {
// having them interact badly... but this causes a flash of unstyled app // having them interact badly... but this causes a flash of unstyled app
// which is even uglier. So we don't. // which is even uglier. So we don't.
styleElements[stylesheetName].disabled = false; const styleSheet = styleElements.get(stylesheetName);
styleSheet.disabled = false;
return new Promise((resolve) => { return new Promise((resolve) => {
const switchTheme = function() { const switchTheme = function() {
@ -266,9 +267,9 @@ export async function setTheme(theme?: string): Promise<void> {
// theme set request as per https://github.com/vector-im/element-web/issues/5601. // theme set request as per https://github.com/vector-im/element-web/issues/5601.
// We could alternatively lock or similar to stop the race, but // We could alternatively lock or similar to stop the race, but
// this is probably good enough for now. // this is probably good enough for now.
styleElements[stylesheetName].disabled = false; styleSheet.disabled = false;
Object.values(styleElements).forEach((a: HTMLStyleElement) => { styleElements.forEach(a => {
if (a == styleElements[stylesheetName]) return; if (a == styleSheet) return;
a.disabled = true; a.disabled = true;
}); });
const bodyStyles = global.getComputedStyle(document.body); const bodyStyles = global.getComputedStyle(document.body);
@ -281,7 +282,7 @@ export async function setTheme(theme?: string): Promise<void> {
const isStyleSheetLoaded = () => Boolean( const isStyleSheetLoaded = () => Boolean(
[...document.styleSheets] [...document.styleSheets]
.find(styleSheet => styleSheet?.href === styleElements[stylesheetName].href), .find(_styleSheet => _styleSheet?.href === styleSheet.href),
); );
function waitForStyleSheetLoading() { function waitForStyleSheetLoading() {
@ -299,8 +300,8 @@ export async function setTheme(theme?: string): Promise<void> {
const intervalId = setInterval(() => { const intervalId = setInterval(() => {
if (isStyleSheetLoaded()) { if (isStyleSheetLoaded()) {
clearInterval(intervalId); clearInterval(intervalId);
styleElements[stylesheetName].onload = undefined; styleSheet.onload = undefined;
styleElements[stylesheetName].onerror = undefined; styleSheet.onerror = undefined;
switchTheme(); switchTheme();
} }
@ -311,12 +312,12 @@ export async function setTheme(theme?: string): Promise<void> {
} }
}, 100); }, 100);
styleElements[stylesheetName].onload = () => { styleSheet.onload = () => {
clearInterval(intervalId); clearInterval(intervalId);
switchTheme(); switchTheme();
}; };
styleElements[stylesheetName].onerror = () => { styleSheet.onerror = () => {
clearInterval(intervalId); clearInterval(intervalId);
}; };
} }