usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

wip

This commit is contained in:
syuilo 2020-09-21 10:31:00 +09:00
parent c4a83a563d
commit 2e4ccd8d13
21 changed files with 92 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/client/components/autocomplete.vue
View File

@ -33,7 +33,6 @@ import { emojilist } from '../../misc/emojilist';
import contains from '@/scripts/contains'; import contains from '@/scripts/contains';
import { twemojiSvgBase } from '../../misc/twemoji-base'; import { twemojiSvgBase } from '../../misc/twemoji-base';
import { getStaticImageUrl } from '@/scripts/get-static-image-url'; import { getStaticImageUrl } from '@/scripts/get-static-image-url';
import MkUserSelect from '@/components/user-select.vue';
import { acct } from '@/filters/user'; import { acct } from '@/filters/user';
import * as os from '@/os'; import * as os from '@/os';
@ -378,7 +377,7 @@ export default defineComponent({
chooseUser() { chooseUser() {
this.close(); this.close();
os.modal(MkUserSelect, {}).then(user => { os.selectUser().then(user => {
this.complete('user', user); this.complete('user', user);
this.textarea.focus(); this.textarea.focus();
}); });

2
src/client/components/page/page.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="iroscrza" :class="{ center: page.alignCenter, serif: page.font === 'serif' }" v-if="hpml"> <div class="iroscrza" :class="{ center: page.alignCenter, serif: page.font === 'serif' }" v-if="hpml">
<x-block v-for="child in page.content" :value="child" @onUpdate:value="v => updateBlock(v)" :page="page" :hpml="hpml" :key="child.id" :h="2"/> <x-block v-for="child in page.content" :value="child" @update:value="v => updateBlock(v)" :page="page" :hpml="hpml" :key="child.id" :h="2"/>
</div> </div>
</template> </template>

2
src/client/components/poll-editor.vue
View File

@ -5,7 +5,7 @@
</p> </p>
<ul ref="choices"> <ul ref="choices">
<li v-for="(choice, i) in choices" :key="i"> <li v-for="(choice, i) in choices" :key="i">
<mk-input class="input" :value="choice" @onUpdate:value="onInput(i, $event)"> <mk-input class="input" :value="choice" @update:value="onInput(i, $event)">
<span>{{ $t('_poll.choiceN', { n: i + 1 }) }}</span> <span>{{ $t('_poll.choiceN', { n: i + 1 }) }}</span>
</mk-input> </mk-input>
<button @click="remove(i)" class="_button"> <button @click="remove(i)" class="_button">

5
src/client/components/post-form.vue
View File

@ -58,7 +58,6 @@ import { faEyeSlash, faLaughSquint } from '@fortawesome/free-regular-svg-icons';
import insertTextAtCursor from 'insert-text-at-cursor'; import insertTextAtCursor from 'insert-text-at-cursor';
import { length } from 'stringz'; import { length } from 'stringz';
import { toASCII } from 'punycode'; import { toASCII } from 'punycode';
import MkUserSelect from './user-select.vue';
import XNotePreview from './note-preview.vue'; import XNotePreview from './note-preview.vue';
import { parse } from '../../mfm/parse'; import { parse } from '../../mfm/parse';
import { host, url } from '@/config'; import { host, url } from '@/config';
@ -442,7 +441,7 @@ export default defineComponent({
}, },
addVisibleUser() { addVisibleUser() {
os.modal(MkUserSelect, {}).then(user => { os.selectUser().then(user => {
this.visibleUsers.push(user); this.visibleUsers.push(user);
}); });
}, },
@ -605,7 +604,7 @@ export default defineComponent({
}, },
insertMention() { insertMention() {
os.modal(MkUserSelect, {}).then(user => { os.selectUser().then(user => {
insertTextAtCursor(this.$refs.text, getAcct(user) + ' '); insertTextAtCursor(this.$refs.text, getAcct(user) + ' ');
}); });
}, },

6
src/client/components/sidebar.vue
View File

@ -280,7 +280,8 @@ export default defineComponent({
}, },
async addAcount() { async addAcount() {
os.modal(await import('./signin-dialog.vue')).$once('login', res => { os.modal(await import('./signin-dialog.vue')).then(res => {
if (res == null) return;
this.$store.dispatch('addAcount', res); this.$store.dispatch('addAcount', res);
os.dialog({ os.dialog({
type: 'success', type: 'success',
@ -290,7 +291,8 @@ export default defineComponent({
}, },
async createAccount() { async createAccount() {
os.modal(await import('./signup-dialog.vue')).$once('signup', res => { os.modal(await import('./signup-dialog.vue')).then(res => {
if (res == null) return;
this.$store.dispatch('addAcount', res); this.$store.dispatch('addAcount', res);
this.switchAccountWithToken(res.i); this.switchAccountWithToken(res.i);
}); });

2
src/client/components/signin.vue
View File

@ -2,7 +2,7 @@
<form class="eppvobhk" :class="{ signing, totpLogin }" @submit.prevent="onSubmit"> <form class="eppvobhk" :class="{ signing, totpLogin }" @submit.prevent="onSubmit">
<div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }" v-show="withAvatar"></div> <div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }" v-show="withAvatar"></div>
<div class="normal-signin" v-if="!totpLogin"> <div class="normal-signin" v-if="!totpLogin">
<mk-input v-model:value="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @onUpdate:value="onUsernameChange"> <mk-input v-model:value="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @update:value="onUsernameChange">
<span>{{ $t('username') }}</span> <span>{{ $t('username') }}</span>
<template #prefix>@</template> <template #prefix>@</template>
<template #suffix>@{{ host }}</template> <template #suffix>@{{ host }}</template>

6
src/client/components/signup.vue
View File

@ -5,7 +5,7 @@
<span>{{ $t('invitationCode') }}</span> <span>{{ $t('invitationCode') }}</span>
<template #prefix><fa :icon="faKey"/></template> <template #prefix><fa :icon="faKey"/></template>
</mk-input> </mk-input>
<mk-input v-model:value="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @onUpdate:value="onChangeUsername"> <mk-input v-model:value="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @update:value="onChangeUsername">
<span>{{ $t('username') }}</span> <span>{{ $t('username') }}</span>
<template #prefix>@</template> <template #prefix>@</template>
<template #suffix>@{{ host }}</template> <template #suffix>@{{ host }}</template>
@ -19,7 +19,7 @@
<span v-if="usernameState == 'max-range'" style="color:#FF1161"><fa :icon="faExclamationTriangle" fixed-width/> {{ $t('tooLong') }}</span> <span v-if="usernameState == 'max-range'" style="color:#FF1161"><fa :icon="faExclamationTriangle" fixed-width/> {{ $t('tooLong') }}</span>
</template> </template>
</mk-input> </mk-input>
<mk-input v-model:value="password" type="password" :autocomplete="Math.random()" required @onUpdate:value="onChangePassword"> <mk-input v-model:value="password" type="password" :autocomplete="Math.random()" required @update:value="onChangePassword">
<span>{{ $t('password') }}</span> <span>{{ $t('password') }}</span>
<template #prefix><fa :icon="faLock"/></template> <template #prefix><fa :icon="faLock"/></template>
<template #desc> <template #desc>
@ -28,7 +28,7 @@
<p v-if="passwordStrength == 'high'" style="color:#3CB7B5"><fa :icon="faCheck" fixed-width/> {{ $t('strongPassword') }}</p> <p v-if="passwordStrength == 'high'" style="color:#3CB7B5"><fa :icon="faCheck" fixed-width/> {{ $t('strongPassword') }}</p>
</template> </template>
</mk-input> </mk-input>
<mk-input v-model:value="retypedPassword" type="password" :autocomplete="Math.random()" required @onUpdate:value="onChangePasswordRetype"> <mk-input v-model:value="retypedPassword" type="password" :autocomplete="Math.random()" required @update:value="onChangePasswordRetype">
<span>{{ $t('password') }} ({{ $t('retype') }})</span> <span>{{ $t('password') }} ({{ $t('retype') }})</span>
<template #prefix><fa :icon="faLock"/></template> <template #prefix><fa :icon="faLock"/></template>
<template #desc> <template #desc>

15
src/client/components/user-select.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<x-window ref="window" @closed="() => { $emit('closed'); destroyDom(); }" :with-ok-button="true" :ok-button-disabled="selected == null" @ok="ok()"> <x-window @close="$emit('done')" :with-ok-button="true" :ok-button-disabled="selected == null" @ok="ok()">
<template #header>{{ $t('selectUser') }}</template> <template #header>{{ $t('selectUser') }}</template>
<div class="tbhwbxda"> <div class="tbhwbxda">
<div class="inputs"> <div class="inputs">
<mk-input v-model:value="username" class="input" @onUpdate:value="search" ref="username"><span>{{ $t('username') }}</span><template #prefix>@</template></mk-input> <mk-input v-model:value="username" class="input" @update:value="search" ref="username"><span>{{ $t('username') }}</span><template #prefix>@</template></mk-input>
<mk-input v-model:value="host" class="input" @onUpdate:value="search"><span>{{ $t('host') }}</span><template #prefix>@</template></mk-input> <mk-input v-model:value="host" class="input" @update:value="search"><span>{{ $t('host') }}</span><template #prefix>@</template></mk-input>
</div> </div>
<div class="users"> <div class="users">
<div class="user" v-for="user in users" :key="user.id" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()"> <div class="user" v-for="user in users" :key="user.id" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()">
@ -35,6 +35,8 @@ export default defineComponent({
props: { props: {
}, },
emits: ['done'],
data() { data() {
return { return {
username: '', username: '',
@ -73,13 +75,8 @@ export default defineComponent({
this.$refs.username.focus(); this.$refs.username.focus();
}, },
close() {
this.$refs.window.close();
},
ok() { ok() {
this.$emit('selected', this.selected); this.$emit('done', this.selected);
this.close();
}, },
} }
}); });

36
src/client/os.ts
View File

@ -143,9 +143,21 @@ export function dialog(props: Record<string, any>, opts?: { cancelableByBgClick:
}); });
} }
export function selectDriveFile(multiple) { export async function selectUser() {
return new Promise(async (res, rej) => { const component = await import('@/components/user-select.vue');
modal(await import('@/components/drive-window.vue'), { return new Promise((res, rej) => {
modal(component, {}).then(user => {
if (user) {
res(user);
}
});
});
}
export async function selectDriveFile(multiple: boolean) {
const component = await import('@/components/drive-window.vue');
return new Promise((res, rej) => {
modal(component, {
type: 'file', type: 'file',
multiple multiple
}).then(files => { }).then(files => {
@ -156,16 +168,16 @@ export function selectDriveFile(multiple) {
}); });
} }
export function selectDriveFolder(multiple) { export async function selectDriveFolder(multiple: boolean) {
const component = await import('@/components/drive-window.vue');
return new Promise((res, rej) => { return new Promise((res, rej) => {
import('@/components/drive-window.vue').then(dialog => { modal(component, {
const w = $root.new(dialog, { type: 'folder',
type: 'folder', multiple
multiple }).then(folders => {
}); if (folders) {
w.$once('selected', folders => { res(folders[0]);
res(multiple ? folders : (folders.length === 0 ? null : folders[0])); }
});
}); });
}); });
} }

7
src/client/pages/instance/settings.vue
View File

@ -242,7 +242,6 @@ import MkInput from '@/components/ui/input.vue';
import MkTextarea from '@/components/ui/textarea.vue'; import MkTextarea from '@/components/ui/textarea.vue';
import MkSwitch from '@/components/ui/switch.vue'; import MkSwitch from '@/components/ui/switch.vue';
import MkInfo from '@/components/ui/info.vue'; import MkInfo from '@/components/ui/info.vue';
import MkUserSelect from '@/components/user-select.vue';
import { url } from '@/config'; import { url } from '@/config';
import getAcct from '../../../misc/acct/render'; import getAcct from '../../../misc/acct/render';
import * as os from '@/os'; import * as os from '@/os';
@ -452,8 +451,7 @@ export default defineComponent({
}, },
addPinUser() { addPinUser() {
os.modal(MkUserSelect, {}).then(user => { os.selectUser().then(user => {
if (user == null) return;
this.pinnedUsers = this.pinnedUsers.trim(); this.pinnedUsers = this.pinnedUsers.trim();
this.pinnedUsers += '\n@' + getAcct(user); this.pinnedUsers += '\n@' + getAcct(user);
this.pinnedUsers = this.pinnedUsers.trim(); this.pinnedUsers = this.pinnedUsers.trim();
@ -461,8 +459,7 @@ export default defineComponent({
}, },
chooseProxyAccount() { chooseProxyAccount() {
os.modal(MkUserSelect, {}).then(user => { os.selectUser().then(user => {
if (user == null) return;
this.proxyAccount = user; this.proxyAccount = user;
this.proxyAccountId = user.id; this.proxyAccountId = user.id;
this.save(true); this.save(true);

7
src/client/pages/instance/users.vue
View File

@ -43,10 +43,10 @@
</mk-select> </mk-select>
</div> </div>
<div class="inputs" style="display: flex; padding-top: 1.2em;"> <div class="inputs" style="display: flex; padding-top: 1.2em;">
<mk-input v-model:value="searchUsername" style="margin: 0; flex: 1;" type="text" spellcheck="false" @onUpdate:value="$refs.users.reload()"> <mk-input v-model:value="searchUsername" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:value="$refs.users.reload()">
<span>{{ $t('username') }}</span> <span>{{ $t('username') }}</span>
</mk-input> </mk-input>
<mk-input v-model:value="searchHost" style="margin: 0; flex: 1;" type="text" spellcheck="false" @onUpdate:value="$refs.users.reload()" :disabled="pagination.params().origin === 'local'"> <mk-input v-model:value="searchHost" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:value="$refs.users.reload()" :disabled="pagination.params().origin === 'local'">
<span>{{ $t('host') }}</span> <span>{{ $t('host') }}</span>
</mk-input> </mk-input>
</div> </div>
@ -90,7 +90,6 @@ import MkButton from '@/components/ui/button.vue';
import MkInput from '@/components/ui/input.vue'; import MkInput from '@/components/ui/input.vue';
import MkSelect from '@/components/ui/select.vue'; import MkSelect from '@/components/ui/select.vue';
import MkPagination from '@/components/ui/pagination.vue'; import MkPagination from '@/components/ui/pagination.vue';
import MkUserSelect from '@/components/user-select.vue';
import { acct } from '../../filters/user'; import { acct } from '../../filters/user';
import * as os from '@/os'; import * as os from '@/os';
@ -180,7 +179,7 @@ export default defineComponent({
}, },
searchUser() { searchUser() {
os.modal(MkUserSelect, {}).$once('selected', user => { os.selectUser().then(user => {
this.show(user); this.show(user);
}); });
}, },

3
src/client/pages/messaging/index.vue
View File

@ -42,7 +42,6 @@ import { defineComponent } from 'vue';
import { faUser, faUsers, faComments, faPlus } from '@fortawesome/free-solid-svg-icons'; import { faUser, faUsers, faComments, faPlus } from '@fortawesome/free-solid-svg-icons';
import getAcct from '../../../misc/acct/render'; import getAcct from '../../../misc/acct/render';
import MkButton from '@/components/ui/button.vue'; import MkButton from '@/components/ui/button.vue';
import MkUserSelect from '@/components/user-select.vue';
import { acct } from '../../filters/user'; import { acct } from '../../filters/user';
import * as os from '@/os'; import * as os from '@/os';
@ -132,7 +131,7 @@ export default defineComponent({
}, },
async startUser() { async startUser() {
os.modal(MkUserSelect, {}).$once('selected', user => { os.selectUser().then(user => {
this.$router.push(`/my/messaging/${getAcct(user)}`); this.$router.push(`/my/messaging/${getAcct(user)}`);
}); });
}, },

3
src/client/pages/my-antennas/index.antenna.vue
View File

@ -53,7 +53,6 @@ import MkInput from '@/components/ui/input.vue';
import MkTextarea from '@/components/ui/textarea.vue'; import MkTextarea from '@/components/ui/textarea.vue';
import MkSelect from '@/components/ui/select.vue'; import MkSelect from '@/components/ui/select.vue';
import MkSwitch from '@/components/ui/switch.vue'; import MkSwitch from '@/components/ui/switch.vue';
import MkUserSelect from '@/components/user-select.vue';
import getAcct from '../../../misc/acct/render'; import getAcct from '../../../misc/acct/render';
import * as os from '@/os'; import * as os from '@/os';
@ -177,7 +176,7 @@ export default defineComponent({
}, },
addUser() { addUser() {
os.modal(MkUserSelect, {}).$once('selected', user => { os.selectUser().then(user => {
this.users = this.users.trim(); this.users = this.users.trim();
this.users += '\n@' + getAcct(user); this.users += '\n@' + getAcct(user);
this.users = this.users.trim(); this.users = this.users.trim();

5
src/client/pages/my-groups/group.vue
View File

@ -42,7 +42,6 @@ import { defineComponent } from 'vue';
import { faTimes, faUsers } from '@fortawesome/free-solid-svg-icons'; import { faTimes, faUsers } from '@fortawesome/free-solid-svg-icons';
import Progress from '@/scripts/loading'; import Progress from '@/scripts/loading';
import MkButton from '@/components/ui/button.vue'; import MkButton from '@/components/ui/button.vue';
import MkUserSelect from '@/components/user-select.vue';
import * as os from '@/os'; import * as os from '@/os';
export default defineComponent({ export default defineComponent({
@ -89,7 +88,7 @@ export default defineComponent({
}, },
invite() { invite() {
os.modal(MkUserSelect, {}).$once('selected', user => { os.selectUser().then(user => {
os.api('users/groups/invite', { os.api('users/groups/invite', {
groupId: this.group.id, groupId: this.group.id,
userId: user.id userId: user.id
@ -134,7 +133,7 @@ export default defineComponent({
}, },
transfer() { transfer() {
os.modal(MkUserSelect, {}).$once('selected', user => { os.selectUser().then(user => {
os.api('users/groups/transfer', { os.api('users/groups/transfer', {
groupId: this.group.id, groupId: this.group.id,
userId: user.id userId: user.id

3
src/client/pages/my-lists/list.vue
View File

@ -41,7 +41,6 @@ import { defineComponent } from 'vue';
import { faTimes, faListUl } from '@fortawesome/free-solid-svg-icons'; import { faTimes, faListUl } from '@fortawesome/free-solid-svg-icons';
import Progress from '@/scripts/loading'; import Progress from '@/scripts/loading';
import MkButton from '@/components/ui/button.vue'; import MkButton from '@/components/ui/button.vue';
import MkUserSelect from '@/components/user-select.vue';
import * as os from '@/os'; import * as os from '@/os';
export default defineComponent({ export default defineComponent({
@ -88,7 +87,7 @@ export default defineComponent({
}, },
addUser() { addUser() {
os.modal(MkUserSelect, {}).$once('selected', user => { os.selectUser().then(user => {
os.api('users/lists/push', { os.api('users/lists/push', {
listId: this.list.id, listId: this.list.id,
userId: user.id userId: user.id

2
src/client/pages/page-editor/page-editor.blocks.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<x-draggable tag="div" :list="blocks" handle=".drag-handle" :group="{ name: 'blocks' }" animation="150" swap-threshold="0.5"> <x-draggable tag="div" :list="blocks" handle=".drag-handle" :group="{ name: 'blocks' }" animation="150" swap-threshold="0.5">
<component v-for="block in blocks" :is="'x-' + block.type" :value="block" @onUpdate:value="updateItem" @remove="() => removeItem(block)" :key="block.id" :hpml="hpml"/> <component v-for="block in blocks" :is="'x-' + block.type" :value="block" @update:value="updateItem" @remove="() => removeItem(block)" :key="block.id" :hpml="hpml"/>
</x-draggable> </x-draggable>
</template> </template>

2
src/client/pages/page-editor/page-editor.vue
View File

@ -59,7 +59,7 @@
<x-variable v-for="variable in variables" <x-variable v-for="variable in variables"
:value="variable" :value="variable"
:removable="true" :removable="true"
@onUpdate:value="v => updateVariable(v)" @update:value="v => updateVariable(v)"
@remove="() => removeVariable(variable)" @remove="() => removeVariable(variable)"
:key="variable.name" :key="variable.name"
:hpml="hpml" :hpml="hpml"

2
src/client/pages/room/room.vue
View File

@ -39,7 +39,7 @@
<mk-button @click="add()"><fa :icon="faBoxOpen"/> {{ $t('_rooms.addFurniture') }}</mk-button> <mk-button @click="add()"><fa :icon="faBoxOpen"/> {{ $t('_rooms.addFurniture') }}</mk-button>
</div> </div>
<div class="_content"> <div class="_content">
<mk-select :value="roomType" @onUpdate:value="updateRoomType($event)"> <mk-select :value="roomType" @update:value="updateRoomType($event)">
<template #label>{{ $t('_rooms.roomType') }}</template> <template #label>{{ $t('_rooms.roomType') }}</template>
<option value="default">{{ $t('_rooms._roomType.default') }}</option> <option value="default">{{ $t('_rooms._roomType.default') }}</option>
<option value="washitsu">{{ $t('_rooms._roomType.washitsu') }}</option> <option value="washitsu">{{ $t('_rooms._roomType.washitsu') }}</option>

32
src/client/pages/test.vue
View File

@ -48,6 +48,27 @@
</div> </div>
</div> </div>
<div class="_card _vMargin">
<div class="_title">selectDriveFolder</div>
<div class="_content">
<mk-button @click="selectDriveFolder()">selectDriveFolder</mk-button>
</div>
<div class="_content">
</div>
</div>
<div class="_card _vMargin">
<div class="_title">selectUser</div>
<div class="_content">
<mk-button @click="selectUser()">selectUser</mk-button>
</div>
<div class="_content">
<span>Result: {{ user }}</span>
</div>
</div>
</div> </div>
</template> </template>
@ -83,6 +104,7 @@ export default defineComponent({
dialogInput: false, dialogInput: false,
dialogResult: null, dialogResult: null,
mfm: '', mfm: '',
user: null,
faExclamationTriangle faExclamationTriangle
} }
}, },
@ -101,7 +123,15 @@ export default defineComponent({
async selectDriveFile() { async selectDriveFile() {
const files = await os.selectDriveFile(); const files = await os.selectDriveFile();
} },
async selectDriveFolder() {
const folder = await os.selectDriveFolder();
},
async selectUser() {
this.user = await os.selectUser();
},
} }
}); });
</script> </script>

2
src/client/pages/theme-editor.vue
View File

@ -30,7 +30,7 @@
<!-- color --> <!-- color -->
<div v-else-if="typeof v === 'string'" class="color"> <div v-else-if="typeof v === 'string'" class="color">
<input type="color" :value="v" @input="colorChanged($event.target.value, i)"/> <input type="color" :value="v" @input="colorChanged($event.target.value, i)"/>
<mk-input class="select" :value="v" @onUpdate:value="colorChanged($event, i)"/> <mk-input class="select" :value="v" @update:value="colorChanged($event, i)"/>
</div> </div>
<!-- ref const --> <!-- ref const -->
<mk-input v-else-if="v.type === 'refConst'" v-model:value="v.key"> <mk-input v-else-if="v.type === 'refConst'" v-model:value="v.key">

7
src/client/pages/user/index.vue
View File

@ -171,9 +171,10 @@ export default defineComponent({
mounted() { mounted() {
window.requestAnimationFrame(this.parallaxLoop); window.requestAnimationFrame(this.parallaxLoop);
this.$once('hook:beforeUnmount', () => { },
window.cancelAnimationFrame(this.parallaxAnimationId);
}); beforeUnmount() {
window.cancelAnimationFrame(this.parallaxAnimationId);
}, },
methods: { methods: {