puniko/pleroma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

Parse MFM options with values

Browse source
This commit is contained in:
Sol Fisher Romanoff 2022-07-10 17:38:35 +03:00
parent f15465f0d3
commit 8c9821e444
No known key found for this signature in database
GPG key ID: 9D3F2B64F2341B62
2 changed files with 25 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/components/rich_content/rich_content.jsx
View file

@ -126,7 +126,26 @@ export default {
gfm: false,
breaks: true
})
return marked.parse(content)
const mfmHtml = document.createElement('template')
mfmHtml.innerHTML = marked.parse(content)
// Add options with set values to CSS
Array.from(mfmHtml.content.firstChild.getElementsByClassName('mfm')).map((el) => {
if (el.dataset.speed) {
el.style.animationDuration = el.dataset.speed
}
if (el.dataset.deg) {
el.style.transform = `rotate(${el.dataset.deg}deg)`
}
if (Array.from(el.classList).includes('_mfm_font_')) {
const font = Object.keys(el.dataset)[0]
if (['serif', 'monospace', 'cursive', 'fantasy', 'emoji', 'math'].includes(font)) {
el.style.fontFamily = font
}
}
})
return mfmHtml.innerHTML
}
// Processor to use with html_tree_converter

19
static/mfm.css
View file

@ -8,23 +8,19 @@
}
._mfm_jelly_ {
--speed: attr(data-speed time, 1s);
animation: mfm-jelly var(--speed) linear infinite both;
animation: mfm-jelly 1s linear infinite both;
}
._mfm_twitch_ {
--speed: attr(data-speed time, 0.5s);
animation: mfm-twitch var(--speed) ease infinite;
animation: mfm-twitch 0.5s ease infinite;
}
._mfm_shake_ {
--speed: attr(data-speed time, 0.5s);
animation: mfm-shake var(--speed) ease infinite;
animation: mfm-shake 0.5s ease infinite;
}
._mfm_spin_ {
--speed: attr(data-speed time, 1.5s);
animation: mfm-spin var(--speed) linear infinite;
animation: mfm-spin 0.5s linear infinite;
}
._mfm_spin_[x] {
@ -71,10 +67,6 @@
font-size: 600%;
}
._mfm_font_ {
font-family: attr(family, inherit);
}
/* blur */
._mfm_rainbow_ {
@ -82,8 +74,7 @@
}
._mfm_rotate_ {
--deg: attr(data-deg deg, 90deg);
transform: rotate(var(--deg));
transform: rotate(90deg);
transform-origin: center center;
}