FoundKeyGang/FoundKey
FoundKeyGang/FoundKey
7
19
Fork 22
Code Issues 37 Pull requests 4 Releases Activity

Add new MFM animation

Browse source
This commit is contained in:
syuilo 2020-11-02 15:16:37 +09:00
parent 666c8c0498
commit 09cab605fc
5 changed files with 33 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/client/components/mfm.ts
View file

@ -125,6 +125,12 @@ export default defineComponent({
}, genEl(token.children));
}
case 'twitch': {
return h('span', {
style: this.$store.state.device.animatedMfm ? 'display: inline-block; animation: anime-twitch 0.5s ease infinite;' : 'display: inline-block;'
}, genEl(token.children));
}
case 'url': {
return [h(MkUrl, {
key: Math.random(),

15
src/client/style.scss
View file

@ -499,6 +499,21 @@ hr {
100% { transform: translateY(0); }
}
// const gen = () => `translate(${Math.floor(Math.random() * 24) - 12}px, ${Math.floor(Math.random() * 24) - 12}px)`
@keyframes anime-twitch {
0% { transform: translate(0px, -9px); }
10% { transform: translate(5px, -11px); }
20% { transform: translate(-12px, 2px); }
30% { transform: translate(10px, 4px); }
40% { transform: translate(0px, 9px); }
50% { transform: translate(-6px, 2px); }
60% { transform: translate(-7px, 7px); }
70% { transform: translate(14px, 7px); }
80% { transform: translate(-5px, 10px); }
90% { transform: translate(3px, -3px); }
100% { transform: translate(10px, 8px); }
}
@keyframes anime-tada {
from {
transform: scale3d(1, 1, 1);

2
src/mfm/language.ts
View file

@ -76,6 +76,7 @@ export const mfmLanguage = P.createLanguage({
r.spin,
r.jump,
r.flip,
r.twitch,
r.inlineCode,
r.mathInline,
r.mention,
@ -122,6 +123,7 @@ export const mfmLanguage = P.createLanguage({
},
jump: r => P.regexp(/<jump>(.+?)<\/jump>/, 1).map(x => createTree('jump', r.inline.atLeast(1).tryParse(x), {})),
flip: r => P.regexp(/<flip>(.+?)<\/flip>/, 1).map(x => createTree('flip', r.inline.atLeast(1).tryParse(x), {})),
twitch: r => P.regexp(/<twitch>(.+?)<\/twitch>/, 1).map(x => createTree('twitch', r.inline.atLeast(1).tryParse(x), {})),
center: r => r.startOfLine.then(P.regexp(/<center>([\s\S]+?)<\/center>/, 1).map(x => createTree('center', r.inline.atLeast(1).tryParse(x), {}))),
inlineCode: () => P.regexp(/`([^´\n]+?)`/, 1).map(x => createLeaf('inlineCode', { code: x })),
mathBlock: r => r.startOfLine.then(P.regexp(/\\\[([\s\S]+?)\\\]/, 1).map(x => createLeaf('mathBlock', { formula: x.trim() }))),

6
src/mfm/to-html.ts
View file

@ -67,6 +67,12 @@ export function toHtml(tokens: MfmForest | null, mentionedRemoteUsers: IMentione
return el;
},
twitch(token) {
const el = doc.createElement('i');
appendChildren(token.children, el);
return el;
},
flip(token) {
const el = doc.createElement('span');
appendChildren(token.children, el);

4
src/mfm/to-string.ts
View file

@ -48,6 +48,10 @@ export function toString(tokens: MfmForest | null, opts?: RestoreOptions): strin
return `<jump>${appendChildren(token.children, opts)}</jump>`;
},
twitch(token, opts) {
return `<twitch>${appendChildren(token.children, opts)}</twitch>`;
},
flip(token, opts) {
return `<flip>${appendChildren(token.children, opts)}</flip>`;
},