fix(ui): prevent duplicate link creation in head

- Replace manual creation of multiple `<link>` elements with `appendLinkOnce` function.
- Add a utility function `appendLinkOnce` to ensure stylesheets are not added multiple times.
- Use `appendLinkOnce` for Font Awesome, Google Fonts, and external CSS links.
- Pass additional attributes (e.g., `data-*`) as an optional parameter to `appendLinkOnce`.

Benefits:
- Prevents potential issues caused by duplicate stylesheets.
- Reduces code duplication for creating and appending `<link>` elements.
- Improves maintainability and readability of the code.

Note:
- All future `<link>` additions should use `appendLinkOnce` to avoid similar bugs.
This commit is contained in:
kyuketski committed 2025-09-01 14:11:26 +03:00
1 parent 582e38d93a
commit f0b4a190b9
1 file changed
+28 -16
+28 -16
View File
@@ -3309,25 +3309,37 @@
const theme = getCurrentTheme();
applyTheme(); // <- new: set CSS vars and theme class before building UI
const fontAwesome = document.createElement('link');
fontAwesome.rel = 'stylesheet';
fontAwesome.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css';
document.head.appendChild(fontAwesome);
function appendLinkOnce(href, attributes = {}) {
// Check if a link with the same href already exists in the document head
const exists = Array.from(document.head.querySelectorAll('link')).some(
(link) => link.href === href
);
if (exists) return;
if (theme.fontFamily.includes('Press Start 2P')) {
const googleFonts = document.createElement('link');
googleFonts.rel = 'stylesheet';
googleFonts.href = 'https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap';
document.head.appendChild(googleFonts);
// Create a new link element
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = href;
// Add any additional attributes (e.g., data-* attributes)
for (const [key, value] of Object.entries(attributes)) {
link.setAttribute(key, value);
}
// Append the link element to the document head
document.head.appendChild(link);
}
// Link external CSS files
const cssLink = document.createElement('link');
cssLink.rel = 'stylesheet';
cssLink.href =
'https://skalsech.github.io/WPlace-AutoBOT/feat-external-lang/auto-image-styles.css';
cssLink.setAttribute('data-wplace-theme', 'true');
document.head.appendChild(cssLink);
appendLinkOnce('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
if (theme.fontFamily.includes('Press Start 2P')) {
appendLinkOnce('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
}
appendLinkOnce(
'https://skalsech.github.io/WPlace-AutoBOT/feat-external-lang/auto-image-styles.css',
{ 'data-wplace-theme': 'true' }
);
const container = document.createElement('div');
container.id = 'wplace-image-bot-container';