Nikurasu/elk
1
0
Fork 0
forked from Mirrors/elk
Code Pull requests Releases 2 Packages 1 Activity

feat: have all emojis respect prefers-reduced-motion (#962)

Browse source
This commit is contained in:
Darius Kruythoff 2023-01-16 01:51:52 +01:00 committed by GitHub
parent 97a02ef837
commit 95dda1fdb6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 46 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
composables/content-parse.ts
View file

@ -169,7 +169,7 @@ export function treeToText(input: Node): string {
if ('children' in input) if ('children' in input)
body = (input.children as Node[]).map(n => treeToText(n)).join('') body = (input.children as Node[]).map(n => treeToText(n)).join('')
if (input.name === 'img') { if (input.name === 'img' || input.name === 'picture') {
if (input.attributes.class?.includes('custom-emoji')) if (input.attributes.class?.includes('custom-emoji'))
return `:${input.attributes['data-emoji-id']}:` return `:${input.attributes['data-emoji-id']}:`
if (input.attributes.class?.includes('iconify-emoji')) if (input.attributes.class?.includes('iconify-emoji'))
@ -326,11 +326,34 @@ function replaceCustomEmoji(customEmojis: Record<string, mastodon.v1.CustomEmoji
if (i % 2 === 0) if (i % 2 === 0)
return name return name
const emoji = customEmojis[name] const emoji = customEmojis[name] as mastodon.v1.CustomEmoji
if (!emoji) if (!emoji)
return `:${name}:` return `:${name}:`
return h('img', { 'src': emoji.url, 'alt': `:${name}:`, 'class': 'custom-emoji', 'data-emoji-id': name }) return h(
'picture',
{
'alt': `:${name}:`,
'class': 'custom-emoji',
'data-emoji-id': name,
},
[
h(
'source',
{
srcset: emoji.staticUrl,
media: '(prefers-reduced-motion: reduce)',
},
),
h(
'img',
{
src: emoji.url,
alt: `:${name}:`,
},
),
],
)
}).filter(Boolean) }).filter(Boolean)
} }
} }

16
tests/__snapshots__/content-rich.test.ts.snap
View file

@ -58,12 +58,16 @@ exports[`content-rich > code frame no lang 1`] = `"<p><pre class=\\"code-block\\
exports[`content-rich > custom emoji 1`] = ` exports[`content-rich > custom emoji 1`] = `
"Daniel Roe "Daniel Roe
<img <picture alt=\\":nuxt:\\" class=\\"custom-emoji\\" data-emoji-id=\\"nuxt\\"
src=\\"https://media.mas.to/masto-public/cache/custom_emojis/images/000/288/667/original/c96ba3cb0e0e1eac.png\\" ><source
alt=\\":nuxt:\\" srcset=\\"
class=\\"custom-emoji\\" https://media.mas.to/masto-public/cache/custom_emojis/images/000/288/667/static/c96ba3cb0e0e1eac.png
data-emoji-id=\\"nuxt\\" \\"
/> media=\\"(prefers-reduced-motion: reduce)\\" />
<img
src=\\"https://media.mas.to/masto-public/cache/custom_emojis/images/000/288/667/original/c96ba3cb0e0e1eac.png\\"
alt=\\":nuxt:\\"
/></picture>
" "
`; `;

16
tests/__snapshots__/html-parse.test.ts.snap
View file

@ -48,12 +48,16 @@ const a = hello
exports[`html-parse > custom emoji > html 1`] = ` exports[`html-parse > custom emoji > html 1`] = `
"Daniel Roe "Daniel Roe
<img <picture alt=\\":nuxt:\\" class=\\"custom-emoji\\" data-emoji-id=\\"nuxt\\"
src=\\"https://media.mas.to/masto-public/cache/custom_emojis/images/000/288/667/original/c96ba3cb0e0e1eac.png\\" ><source
alt=\\":nuxt:\\" srcset=\\"
class=\\"custom-emoji\\" https://media.mas.to/masto-public/cache/custom_emojis/images/000/288/667/static/c96ba3cb0e0e1eac.png
data-emoji-id=\\"nuxt\\" \\"
/> media=\\"(prefers-reduced-motion: reduce)\\" />
<img
src=\\"https://media.mas.to/masto-public/cache/custom_emojis/images/000/288/667/original/c96ba3cb0e0e1eac.png\\"
alt=\\":nuxt:\\"
/></picture>
" "
`; `;