mirrors
/
mastodon-glitch
mirror of https://github.com/glitch-soc/mastodon
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[Glitch] Fix emoji rewrite adding unnecessary curft to the DOM for most emoji 

Port 44f5f1f0a5 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
pull/2965/head
Claire 2025-02-03 14:43:45 +01:00
parent 1dbeac2196
commit c59f879f30
1 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
app/javascript/flavours/glitch/features/emoji/emoji.js
View File

@ -97,30 +97,30 @@ const emojifyTextNode = (node, customEmojis) => {
const { filename, shortCode } = unicodeMapping[unicode_emoji]; const { filename, shortCode } = unicodeMapping[unicode_emoji];
const title = shortCode ? `:${shortCode}:` : ''; const title = shortCode ? `:${shortCode}:` : '';
replacement = document.createElement('picture');
const isSystemTheme = !!document.body?.classList.contains('theme-system'); const isSystemTheme = !!document.body?.classList.contains('theme-system');
if(isSystemTheme) { const theme = (isSystemTheme || document.body?.classList.contains('theme-mastodon-light')) ? 'light' : 'dark';
let source = document.createElement('source');
source.setAttribute('media', '(prefers-color-scheme: dark)');
source.setAttribute('srcset', `${assetHost}/emoji/${emojiFilename(filename, "dark")}.svg`);
replacement.appendChild(source);
}
let img = document.createElement('img'); const imageFilename = emojiFilename(filename, theme);
const img = document.createElement('img');
img.setAttribute('draggable', 'false'); img.setAttribute('draggable', 'false');
img.setAttribute('class', 'emojione'); img.setAttribute('class', 'emojione');
img.setAttribute('alt', unicode_emoji); img.setAttribute('alt', unicode_emoji);
img.setAttribute('title', title); img.setAttribute('title', title);
img.setAttribute('src', `${assetHost}/emoji/${imageFilename}.svg`);
let theme = "light"; if (isSystemTheme && imageFilename !== emojiFilename(filename, 'dark')) {
replacement = document.createElement('picture');
if(!isSystemTheme && !document.body?.classList.contains('skin-mastodon-light')) const source = document.createElement('source');
theme = "dark"; source.setAttribute('media', '(prefers-color-scheme: dark)');
source.setAttribute('srcset', `${assetHost}/emoji/${emojiFilename(filename, 'dark')}.svg`);
img.setAttribute('src', `${assetHost}/emoji/${emojiFilename(filename, theme)}.svg`); replacement.appendChild(source);
replacement.appendChild(img); replacement.appendChild(img);
} else {
replacement = img;
}
} }
// Add the processed-up-to-now string and the emoji replacement // Add the processed-up-to-now string and the emoji replacement
@ -135,7 +135,7 @@ const emojifyTextNode = (node, customEmojis) => {
}; };
const emojifyNode = (node, customEmojis) => { const emojifyNode = (node, customEmojis) => {
for (const child of node.childNodes) { for (const child of Array.from(node.childNodes)) {
switch(child.nodeType) { switch(child.nodeType) {
case Node.TEXT_NODE: case Node.TEXT_NODE:
emojifyTextNode(child, customEmojis); emojifyTextNode(child, customEmojis);