yumechi-no-kuni/packages/frontend/src/components/MkFollowButton.vue

188 lines
4 KiB
Vue
Raw Normal View History

<template>
2022-12-19 20:00:05 -06:00
<button
class="kpoogebi _button"
2020-11-28 09:18:54 -06:00
:class="{ wait, active: isFollowing || hasPendingFollowRequestFromYou, full, large }"
:disabled="wait"
2021-11-19 04:36:12 -06:00
@click="onClick"
>
<template v-if="!wait">
2020-01-30 20:58:59 -06:00
<template v-if="hasPendingFollowRequestFromYou && user.isLocked">
2022-12-20 00:24:31 -06:00
<span v-if="full">{{ i18n.ts.followRequestPending }}</span><i class="ti ti-hourglass-empty"></i>
2020-01-30 20:58:59 -06:00
</template>
2022-12-19 20:00:05 -06:00
<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked">
<!-- つまりリモートフォローの場合 -->
2022-12-19 20:06:39 -06:00
<span v-if="full">{{ i18n.ts.processing }}</span><MkLoading :em="true" :colored="false"/>
2020-01-30 20:58:59 -06:00
</template>
<template v-else-if="isFollowing">
<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="ti ti-minus"></i>
2020-01-30 20:58:59 -06:00
</template>
<template v-else-if="!isFollowing && user.isLocked">
<span v-if="full">{{ i18n.ts.followRequest }}</span><i class="ti ti-plus"></i>
2020-01-30 20:58:59 -06:00
</template>
<template v-else-if="!isFollowing && !user.isLocked">
<span v-if="full">{{ i18n.ts.follow }}</span><i class="ti ti-plus"></i>
2020-01-30 20:58:59 -06:00
</template>
</template>
<template v-else>
2022-12-19 20:06:39 -06:00
<span v-if="full">{{ i18n.ts.processing }}</span><MkLoading :em="true" :colored="false"/>
</template>
</button>
</template>
<script lang="ts" setup>
import { onBeforeUnmount, onMounted } from 'vue';
import * as Misskey from 'misskey-js';
2021-11-11 11:02:25 -06:00
import * as os from '@/os';
import { stream } from '@/stream';
import { i18n } from '@/i18n';
const props = withDefaults(defineProps<{
user: Misskey.entities.UserDetailed,
full?: boolean,
large?: boolean,
}>(), {
full: false,
large: false,
});
let isFollowing = $ref(props.user.isFollowing);
let hasPendingFollowRequestFromYou = $ref(props.user.hasPendingFollowRequestFromYou);
let wait = $ref(false);
const connection = stream.useChannel('main');
if (props.user.isFollowing == null) {
os.api('users/show', {
2022-12-19 20:00:05 -06:00
userId: props.user.id,
})
2022-12-19 20:00:05 -06:00
.then(onFollowChange);
}
function onFollowChange(user: Misskey.entities.UserDetailed) {
if (user.id === props.user.id) {
isFollowing = user.isFollowing;
hasPendingFollowRequestFromYou = user.hasPendingFollowRequestFromYou;
}
}
async function onClick() {
wait = true;
try {
if (isFollowing) {
const { canceled } = await os.confirm({
type: 'warning',
text: i18n.t('unfollowConfirm', { name: props.user.name || props.user.username }),
});
if (canceled) return;
await os.api('following/delete', {
2022-12-19 20:00:05 -06:00
userId: props.user.id,
});
} else {
if (hasPendingFollowRequestFromYou) {
await os.api('following/requests/cancel', {
2022-12-19 20:00:05 -06:00
userId: props.user.id,
});
hasPendingFollowRequestFromYou = false;
} else {
await os.api('following/create', {
2022-12-19 20:00:05 -06:00
userId: props.user.id,
});
hasPendingFollowRequestFromYou = true;
}
}
} catch (err) {
console.error(err);
} finally {
wait = false;
}
}
onMounted(() => {
connection.on('follow', onFollowChange);
connection.on('unfollow', onFollowChange);
});
onBeforeUnmount(() => {
connection.dispose();
});
</script>
<style lang="scss" scoped>
2020-01-30 20:58:59 -06:00
.kpoogebi {
position: relative;
display: inline-block;
font-weight: bold;
color: var(--accent);
background: transparent;
border: solid 1px var(--accent);
padding: 0;
height: 31px;
font-size: 16px;
2020-01-30 20:58:59 -06:00
border-radius: 32px;
background: #fff;
2020-01-30 20:58:59 -06:00
&.full {
padding: 0 8px 0 12px;
2020-01-30 21:01:13 -06:00
font-size: 14px;
2020-01-30 20:58:59 -06:00
}
2020-11-28 09:18:54 -06:00
&.large {
font-size: 16px;
height: 38px;
padding: 0 12px 0 16px;
}
2020-01-30 20:58:59 -06:00
&:not(.full) {
width: 31px;
}
2021-10-02 12:46:58 -05:00
&:focus-visible {
&:after {
content: "";
pointer-events: none;
position: absolute;
top: -5px;
right: -5px;
bottom: -5px;
left: -5px;
border: 2px solid var(--focus);
2020-01-30 20:58:59 -06:00
border-radius: 32px;
}
}
&:hover {
//background: mix($primary, #fff, 20);
}
&:active {
//background: mix($primary, #fff, 40);
}
&.active {
color: #fff;
background: var(--accent);
&:hover {
background: var(--accentLighten);
border-color: var(--accentLighten);
}
&:active {
background: var(--accentDarken);
border-color: var(--accentDarken);
}
}
&.wait {
cursor: wait !important;
opacity: 0.7;
}
2020-01-30 20:58:59 -06:00
> span {
2020-01-30 21:01:13 -06:00
margin-right: 6px;
2020-01-30 20:58:59 -06:00
}
}
</style>